JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class='root'>
<svg width='500' height='500'>
  <!--<circle r='50' cx='100' cy='100'></circle>-->
</svg>
</div>

CSS

circle {
  fill:  orange;
  stroke: black
}

JavaScript

const array = [[cx: 100, cy: 100], [cx: 300, cy: 300]];

const svg = d3.select('svg');

array.map( el => svg.append('circle')
	.attr('r', 50)
  .attr('cx', el.cx)
  .attr('cx', el.cy)
 )