JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
CSS
svg {
display:block;
}
.svg_class {
margin-left:90px;
margin-top:100px;
background-color:blue;
position: relative;
}
.svg_class1 {
margin-left:0px;
margin-top:0px;
background-color:green;
position: relative;
}
JavaScript
// One way
var width = 500,
height = 50;
var dataset = [5,10,15,20,25];
var svg = d3.select("body")
.append("svg")
.attr("id","svg_1")
.style("width",width)
.style("height",height)
.attr("class","svg_class1");
var circle = d3.select("#svg_1")
.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circle.attr("cx",function(d,i){
return (i * 50) + 25;
})
.attr("cy",height/2)
.attr("r",function(d){
return d;
});
// Other way
var w = 500, h = 50;
var data = [5,10,15,20,25,30];
d3.select("body")
.append("svg")
.attr("id","svg_2")
.style("width",w)
.style("height",h)
.attr("class","svg_class");
d3.select("#svg_2")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx",function(d,i){
return (i * 50) + 25;
})
.attr("cy",h/2)
.attr("r",function(d){
return d;
});