JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<svg>
    
</svg>

CSS

circle {
    fill: red;
}

svg {
    width: 350px;
    height: 300px;
}

JavaScript

var svg = d3.select('svg').selectAll('circle').data([20, 40, 60]);

var circles = svg.enter().append('circle');

circles.attr("r", "0")
  .attr({
      'cx': function(d) {return (d * 5); },
      'cy': 20

  })
  .transition()
  .duration(750)
  .delay(function(d, i) { return i * 1000; })
  .attr("r", 10)