JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="chart"></div>
<div id="dataset-picker">
</div>
<script type="text/javascript">
 var width=400,
     height=300,
     buckets=9,
     colors = ["#ccd9ff", "#99b3ff", "#668cff", "#3366ff", "#0040ff", "#0033cc", "#002699", "#002080", "#00134d"],

      datasets = [{
                 "day": 1,
                 "hour": 1,
                  "value1":16,
                  "value2":20

                  },

                  {
                      "day": 1,
                      "hour": 2,
                      "value1":3,
                      "value2":10

                  },

                  {
                      "day": 1,
                      "hour": 3,
                      "value1":13,
                      "value2":12

                  } 


               ];



       var canvas=d3.select("#chart").append("svg")
                   .attr("width",width)
                   .attr("height",height)
                   .append("g")


       var colorScale = d3.scale.quantile()
                .domain([0, buckets - 1])
                .range(colors);



        var squares=canvas.selectAll("rect")
                     .data(datasets)
                     .enter()
                         .append("rect")
                          .attr("x", function (d,i) {return (i)* d.value1})
                          /*.attr("y",function (d,i) { return (i-1)* d.value2})*/
                          .attr("width",function(d){return d.value1 *10 })
                          .attr("height",function(d){return d.value2*10})
                          .attr("class", "hour bordered")

                          .style("fill", function(d){return colorScale(d.value1);});                          







</script>