JSFiddle - React, Tailwind, and code Playground

by duopixel

JavaScript

var data = d3.range(10).map(function(){ return Math.random()*1000})
var svg = d3.select("body").append("svg");

svg.selectAll("rect")
  .data(data)
  .enter()
   .append("rect")
   .attr("width", 100)
   .attr("height", 100)
   .attr("x", 0)
   .attr("y", function(d, i){ return i* 10 })
   .attr("fill", function(d) {
                if (d < 300) {   //Threshold of 15
                    return "teal";
                }
                else if (d >= 500) {
                    return "red";
                }
                else {
                    return "orange"
                }
    });