Skip to content

Instantly share code, notes, and snippets.

@timhall

timhall/.block

Last active September 29, 2016 15:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timhall/89f22f4074db50f50ed9 to your computer and use it in GitHub Desktop.
Save timhall/89f22f4074db50f50ed9 to your computer and use it in GitHub Desktop.
Download ZIP
d3.compose Heatmap
Raw
.block
license: mit
Raw
README.md

d3.compose Heatmap

Raw
data.tsv
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
Raw
index.html
<!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