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
Post a Comment