javascript - How to create rectangles of variable size in Heatmap according to data given in json using D3.js? -


i have made heatmap represents value color intensity.how create heatmap in size of rectangles used represent value json? have tried following code not giving required output.

 <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":23,                       "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, d3.max(datasets, function (d) { return d.value2; })])                 .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", colors[0]);                                  </script> 

i think meant this: http://jsfiddle.net/bc4um7pc/315/

you define color range :

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

then choose color range value dataset:

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

since range 0 buckets -1 = 8, none of d.value1's matching range changed 1 value1 3 can see difference.


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -