How to create rectangles of variable size in Heatmap according to data given in json using D3.js?
Question
I have made a Heatmap which represents the value by color intensity.how to create a Heatmap in which size of rectangles will be used to represent the value from json? I have tried the following code which is not giving the 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>
1 answers
solution1
0 2016-05-09 12:21:15
I think what you meant to do is something like this: http://jsfiddle.net/bc4um7pc/315/
You define the color range :
var colorScale = d3.scale.quantile()
.domain([0, buckets - 1])
.range(colors);
Then choose a color from that range with a value from your dataset:
.style("fill", function(d){return colorScale(d.value1);});
since the range is from 0 to buckets -1 = 8, none of the d.value1 's were matching the range so i changed 1 value1 to 3 so you can see the difference.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.