JSFiddle - React, Tailwind, and code Playground

by ramnathv

CSS

div {
    width: 20px;
    height: 20px;
    float: left;
}

JavaScript

var data = [0,1,2,3,4,5,6,7,8,9,10];
 
var color = d3.scale.linear()
   .domain([0,10])  // min/max of data
   .range(["#FDFFCB", "#232942"])
   .interpolate(d3.interpolateHcl);
 
d3.select("body").selectAll("div")
    .data(data)
  .enter().append("div")
    .style("background", function(d) { return color(d) });