Creating SVG

If we remember the svg structure

<svg width="100" height="50" style="background: red;">
</svg>

We could create the same like:

d3.select("body")
  .append("svg")
  .attr("width", 100)
  .attr("height", 50)
  .style("background", "red")

Another approach, we could get attribute values from Object like:

var viz = {width: 250, height: 50, background: "red"}

var svg = d3.select("body")
            .append("svg")
            .attr("width", viz.width)
            .attr("height", viz.height)
            .style("background", viz.background)

Enter data

How about adding shapes to svg?

Let's take circles with varying radii, and add them to the svg

var radius = [5, 10, 15, 20]

var circles = svg.selectAll("circle")
                 .data(radius)
                 .enter()
                 .append("circle")

circles.attr("cx", function(d) { return 10*d})
       .attr("cy", 25)
       .attr("r", function(d) { return d})