JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg></svg>
</body>

CSS

svg {
    width: 300px;
    height: 300px;
    background-color: blue;
}

svg circle {
    fill: white;
    stroke: white;
}

JavaScript

data = [];
for (var i = 0; i < 100; i++) {
    data.push({x: Math.random() * 280 + 10, y: Math.random() * 280 + 10});
};

console.log(data);

canvas = d3.select('svg');
console.log(canvas);
canvas.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr({
        'cx': function(d) { return d.x; },
        'cy': function(d) { return d.y; },
        'r': 10,
        'opacity': 0
    })
    .transition().delay(function(d,i) { return i*50; })
    .attr('opacity',1);