JSFiddle - React, Tailwind, and code Playground

by Shawn Allen

CSS

circle {
    fill-opacity: .5;
}

JavaScript

var width = 400,
    height = 600;
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

for (var i = 0; i < 500; i++) {
    var circle = svg.append("circle")
    .datum({
        x: Math.random() * width,
        y: Math.random() * height,
        r: 5 + Math.random() * 30,
        color: [
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255)
        ]
    });
}

svg.selectAll("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; })
    .attr("fill", function(d) {
        return "rgb(" + d.color + ")";
    });