JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


<div class="circle"></div>

CSS

.class {
    margin-left: 20px;
}

JavaScript

var data = [0, 10, 15, 20, 24, 35, 58];

var svg = d3.select('.circle')
            .append('svg')
            .attr('height', 500)
            .attr('width', 500)

svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr("cx", function(d, i) { return 60 * i })
.attr("cy", 60)
.attr("r", 20)