d3.compose Heatmap
d3.compose Heatmap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
day | hour | value | |
---|---|---|---|
1 | 1 | 16 | |
1 | 2 | 20 | |
1 | 3 | 0 | |
1 | 4 | 0 | |
1 | 5 | 0 | |
1 | 6 | 2 | |
1 | 7 | 0 | |
1 | 8 | 9 | |
1 | 9 | 25 | |
1 | 10 | 49 | |
1 | 11 | 57 | |
1 | 12 | 61 | |
1 | 13 | 37 | |
1 | 14 | 66 | |
1 | 15 | 70 | |
1 | 16 | 55 | |
1 | 17 | 51 | |
1 | 18 | 55 | |
1 | 19 | 17 | |
1 | 20 | 20 | |
1 | 21 | 9 | |
1 | 22 | 4 | |
1 | 23 | 0 | |
1 | 24 | 12 | |
2 | 1 | 6 | |
2 | 2 | 2 | |
2 | 3 | 0 | |
2 | 4 | 0 | |
2 | 5 | 0 | |
2 | 6 | 2 | |
2 | 7 | 4 | |
2 | 8 | 11 | |
2 | 9 | 28 | |
2 | 10 | 49 | |
2 | 11 | 51 | |
2 | 12 | 47 | |
2 | 13 | 38 | |
2 | 14 | 65 | |
2 | 15 | 60 | |
2 | 16 | 50 | |
2 | 17 | 65 | |
2 | 18 | 50 | |
2 | 19 | 22 | |
2 | 20 | 11 | |
2 | 21 | 12 | |
2 | 22 | 9 | |
2 | 23 | 0 | |
2 | 24 | 13 | |
3 | 1 | 5 | |
3 | 2 | 8 | |
3 | 3 | 8 | |
3 | 4 | 0 | |
3 | 5 | 0 | |
3 | 6 | 2 | |
3 | 7 | 5 | |
3 | 8 | 12 | |
3 | 9 | 34 | |
3 | 10 | 43 | |
3 | 11 | 54 | |
3 | 12 | 44 | |
3 | 13 | 40 | |
3 | 14 | 48 | |
3 | 15 | 54 | |
3 | 16 | 59 | |
3 | 17 | 60 | |
3 | 18 | 51 | |
3 | 19 | 21 | |
3 | 20 | 16 | |
3 | 21 | 9 | |
3 | 22 | 5 | |
3 | 23 | 4 | |
3 | 24 | 7 | |
4 | 1 | 0 | |
4 | 2 | 0 | |
4 | 3 | 0 | |
4 | 4 | 0 | |
4 | 5 | 0 | |
4 | 6 | 2 | |
4 | 7 | 4 | |
4 | 8 | 13 | |
4 | 9 | 26 | |
4 | 10 | 58 | |
4 | 11 | 61 | |
4 | 12 | 59 | |
4 | 13 | 53 | |
4 | 14 | 54 | |
4 | 15 | 64 | |
4 | 16 | 55 | |
4 | 17 | 52 | |
4 | 18 | 53 | |
4 | 19 | 18 | |
4 | 20 | 3 | |
4 | 21 | 9 | |
4 | 22 | 12 | |
4 | 23 | 2 | |
4 | 24 | 8 | |
5 | 1 | 2 | |
5 | 2 | 0 | |
5 | 3 | 8 | |
5 | 4 | 2 | |
5 | 5 | 0 | |
5 | 6 | 2 | |
5 | 7 | 4 | |
5 | 8 | 14 | |
5 | 9 | 31 | |
5 | 10 | 48 | |
5 | 11 | 46 | |
5 | 12 | 50 | |
5 | 13 | 66 | |
5 | 14 | 54 | |
5 | 15 | 56 | |
5 | 16 | 67 | |
5 | 17 | 54 | |
5 | 18 | 23 | |
5 | 19 | 14 | |
5 | 20 | 6 | |
5 | 21 | 8 | |
5 | 22 | 7 | |
5 | 23 | 0 | |
5 | 24 | 8 | |
6 | 1 | 2 | |
6 | 2 | 0 | |
6 | 3 | 2 | |
6 | 4 | 0 | |
6 | 5 | 0 | |
6 | 6 | 0 | |
6 | 7 | 4 | |
6 | 8 | 8 | |
6 | 9 | 8 | |
6 | 10 | 6 | |
6 | 11 | 14 | |
6 | 12 | 12 | |
6 | 13 | 9 | |
6 | 14 | 14 | |
6 | 15 | 0 | |
6 | 16 | 4 | |
6 | 17 | 7 | |
6 | 18 | 6 | |
6 | 19 | 0 | |
6 | 20 | 0 | |
6 | 21 | 0 | |
6 | 22 | 0 | |
6 | 23 | 0 | |
6 | 24 | 0 | |
7 | 1 | 7 | |
7 | 2 | 6 | |
7 | 3 | 0 | |
7 | 4 | 0 | |
7 | 5 | 0 | |
7 | 6 | 0 | |
7 | 7 | 0 | |
7 | 8 | 0 | |
7 | 9 | 0 | |
7 | 10 | 0 | |
7 | 11 | 2 | |
7 | 12 | 2 | |
7 | 13 | 5 | |
7 | 14 | 6 | |
7 | 15 | 0 | |
7 | 16 | 4 | |
7 | 17 | 0 | |
7 | 18 | 2 | |
7 | 19 | 10 | |
7 | 20 | 7 | |
7 | 21 | 0 | |
7 | 22 | 19 | |
7 | 23 | 9 | |
7 | 24 | 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose.css"> | |
<style> | |
.chart {width: 940px; height: 480px; margin: 10px; font-family: sans-serif;} | |
.chart-axis .domain, .chart-axis .tick line {visibility: hidden;} | |
.chart-axis .tick text {font-family: Consolas, courier; fill: #aaa, font-size: 10px;} | |
.chart-heatmap rect {stroke: #e6e6e6; stroke-width: 2px;} | |
</style> | |
<div id="heatmap" class="chart"></div> | |
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3.chart/0.2.1/d3.chart.min.js"></script> | |
<script src="https://npmcdn.com/d3.compose@0.15.13/dist/d3.compose-all.js"></script> | |
<script> | |
var helpers = d3c.helpers; | |
var di = helpers.di; | |
var mixins = d3c.mixins; | |
// Heatmap Chart | |
// ------------- | |
var Mixed = helpers.mixin(d3c.Chart, mixins.XY, mixins.XYValues, mixins.StandardLayer); | |
Mixed.extend('Heatmap', { | |
initialize: function() { | |
Mixed.prototype.initialize.apply(this, arguments); | |
this.standardLayer('Heatmap', this.base.append('g').classed('chart-heatmap', true)); | |
}, | |
zScale: helpers.property(), | |
onDataBind: function(selection, data) { | |
return selection.selectAll('rect') | |
.data(data, function(d) { return d.x + '-' + d.y; }); | |
}, | |
onInsert: function(selection) { | |
return selection.append('rect') | |
.attr('rx', 4) | |
.attr('ry', 4); | |
}, | |
onEnter: function(selection) { | |
selection | |
.attr('fill', '#fff'); | |
}, | |
onMerge: function(selection) { | |
selection | |
.attr('x', this.barX) | |
.attr('y', this.barY) | |
.attr('width', this.barWidth) | |
.attr('height', this.barHeight); | |
}, | |
onMergeTransition: function(selection) { | |
selection | |
.attr('fill', this.barFill); | |
}, | |
itemHeight: function() { | |
var scale = this.yScale(); | |
if (scale && scale.width) { | |
return scale.width(); | |
} else if (scale && scale.rangeBand) { | |
return scale.rangeBand() || 0; | |
} else { | |
return 0; | |
} | |
}, | |
barX: di(function(chart, d, i, j) { | |
return chart.x.call(this, d, i, j) - (chart.itemWidth() / 2); | |
}), | |
barY: di(function(chart, d, i, j) { | |
return chart.y.call(this, d, i, j) - (chart.itemHeight() / 2); | |
}), | |
barWidth: di(function(chart, d, i, j) { | |
return chart.itemWidth(); | |
}), | |
barHeight: di(function(chart, d, i, j) { | |
return chart.itemHeight(); | |
}), | |
barFill: di(function(chart, d, i, j) { | |
return chart.zScale()(d.z); | |
}) | |
}); | |
// Create chart | |
// ------------ | |
// (from http://bl.ocks.org/tjdecke/5558084) | |
var config = { | |
colors: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], | |
days: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], | |
times: ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"], | |
buckets: 9 | |
}; | |
var chart = d3.select('#heatmap').chart('Compose', function(data) { | |
var xScale = {type: 'ordinal', domain: config.times, padding: 0}; | |
var yScale = {type: 'ordinal', domain: config.days.reverse(), padding: 0}; | |
var zScale = d3.scale.quantile() | |
.domain([0, config.buckets - 1, d3.max(data, function(d) { return d.value; })]) | |
.range(config.colors); | |
var charts = [ | |
{type: 'Heatmap', id: 'heatmap', data: data, xScale: xScale, yScale: yScale, zScale: zScale} | |
]; | |
var xAxis = d3c.axis({scale: xScale}); | |
var yAxis = d3c.axis({scale: yScale}); | |
return [ | |
xAxis, | |
[yAxis, d3c.layered(charts)], | |
]; | |
}).width(940).height(300); | |
// Draw chart | |
// ---------- | |
d3.tsv('data.tsv', function(d) { | |
return { | |
hour: +d.hour, | |
day: +d.day, | |
value: +d.value, | |
x: config.times[+d.hour - 1], | |
y: config.days[+d.day - 1], | |
z: +d.value | |
}; | |
}, function(err, data) { | |
chart.draw(data); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment