JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="content-div">
</div>

JavaScript

var cell_width = 60 ;
var color_scale = d3.scaleLinear()
		.domain([-1,0,1])
    .range(['red','yellow','green'])
    ;
console.log(color_scale(-0.4))    
var data_set =  d3.range(-1, 1, 0.2) ;

var svg = d3.select("#content-div").append("svg").attr("width", 800).selectAll( "rect" ).data(data_set).enter();

	svg.append("rect")
  	.attr("x", function(d,i){return i*cell_width})
    .attr("y", 10)
    .attr("width", cell_width)
    .attr("height", 20)
    .style("fill", function(d,i){ return color_scale(d); })
    ;
  svg.append("text")
  	.attr("x", function(d,i){return i*cell_width+5})
    .attr("y", 50)
    .text(function(d,i){return Math.floor(d*10)/10 })
    ;