JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<svg>
</svg>

CSS

svg{
  width: 1000px;
  height: 500px;
}

JavaScript

let svg = d3.select('svg').append('g');
let data = [20, 40, 60];

svg.selectAll('circle')
		.data(data)
    .enter()
    .append('circle')
    .attr('cx', (d, i)=> {
    	return i* 90 + d;
    })
    .attr('cy', (d, i)=> {
    	return d;
    })
    .attr('r', (d)=> {
	     return d;
    })
    .attr('fill', 'red')