JSFiddle - React, Tailwind, and code Playground

JavaScript

var scale = d3.scale.threshold()
    .domain([20,50,80])
    .range(["green","blue","orange","red"]);

var data = [10,15,19,20,49,50,79,80,90,100];

var svg = d3.select("body").append("svg");
                                   
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("transform","translate(20)")
    .attr("cx", function(d,i) {return i * 50;})
    .attr("cy", 50)
    .attr("r", 10)
    .style("fill", function(d) {return scale(d)});