JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<body>  

</body>

CSS

body{
    background: #eee;
}

JavaScript

var data = d3.range(30);

var svg = d3.select("body").append("svg");

var minY = 10;
var maxY = 210;
var gradientData = [0,25,50,75,100];
var gradient = svg
    .selectAll("linearGradient").data(gradientData).enter()
    .append("linearGradient")
    .attr("y1", "1")
    .attr("y2", "0")
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("gradientUnits", "objectBoundingBox")
    .attr('id', function(d){return "gradient-"+d})
    gradient.append("stop")
        .attr("offset", "0")
        .attr("stop-opacity", "1")
    .attr("stop-color", function(d){return "hsl("+ -d*1.5 +",50%,50%)";})
    gradient.append("stop")
        .attr("offset", function(d){return d+"%"})
        .attr("stop-opacity", "1")
         .attr("stop-color", function(d){return "hsl("+ -d*1.5 +",50%,50%)";})
    gradient.append("stop")
        .attr("offset",  function(d){return d+"%"})
        .attr("stop-opacity", "0")
        .attr("stop-color", "#fa0")


svg
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr('opacity','0.8')
    .attr("cx", function(d){return d*35+50})
.attr("cy", function(d){return Math.random()*250+50} )
    .attr("stroke-width", 1)
    .attr("stroke", "hsl(100,50%,50%)")
    .attr("r", function(d){return Math.random()*20+20})
.attr("fill", function(d){return "url(#gradient-"+ (Math.ceil(Math.random()*4)*25) +")"});