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 }) ;
<script src="https://d3js.org/d3.v4.min.js"></script> <div id="content-div"> </div>