d3.unconf example gist. Fork it here.
-
-
Save zocoi/9845224 to your computer and use it in GitHub Desktop.
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":1, | |
"hour":1, | |
"value":16 | |
}, | |
{ | |
"day":1, | |
"hour":2, | |
"value":20 | |
}, | |
{ | |
"day":1, | |
"hour":3, | |
"value":0 | |
}, | |
{ | |
"day":1, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":1, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":1, | |
"hour":6, | |
"value":2 | |
}, | |
{ | |
"day":1, | |
"hour":7, | |
"value":0 | |
}, | |
{ | |
"day":1, | |
"hour":8, | |
"value":9 | |
}, | |
{ | |
"day":1, | |
"hour":9, | |
"value":25 | |
}, | |
{ | |
"day":1, | |
"hour":10, | |
"value":49 | |
}, | |
{ | |
"day":1, | |
"hour":11, | |
"value":57 | |
}, | |
{ | |
"day":1, | |
"hour":12, | |
"value":61 | |
}, | |
{ | |
"day":1, | |
"hour":13, | |
"value":37 | |
}, | |
{ | |
"day":1, | |
"hour":14, | |
"value":66 | |
}, | |
{ | |
"day":1, | |
"hour":15, | |
"value":70 | |
}, | |
{ | |
"day":1, | |
"hour":16, | |
"value":55 | |
}, | |
{ | |
"day":1, | |
"hour":17, | |
"value":51 | |
}, | |
{ | |
"day":1, | |
"hour":18, | |
"value":55 | |
}, | |
{ | |
"day":1, | |
"hour":19, | |
"value":17 | |
}, | |
{ | |
"day":1, | |
"hour":20, | |
"value":20 | |
}, | |
{ | |
"day":1, | |
"hour":21, | |
"value":9 | |
}, | |
{ | |
"day":1, | |
"hour":22, | |
"value":4 | |
}, | |
{ | |
"day":1, | |
"hour":23, | |
"value":0 | |
}, | |
{ | |
"day":1, | |
"hour":24, | |
"value":12 | |
}, | |
{ | |
"day":2, | |
"hour":1, | |
"value":6 | |
}, | |
{ | |
"day":2, | |
"hour":2, | |
"value":2 | |
}, | |
{ | |
"day":2, | |
"hour":3, | |
"value":0 | |
}, | |
{ | |
"day":2, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":2, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":2, | |
"hour":6, | |
"value":2 | |
}, | |
{ | |
"day":2, | |
"hour":7, | |
"value":4 | |
}, | |
{ | |
"day":2, | |
"hour":8, | |
"value":11 | |
}, | |
{ | |
"day":2, | |
"hour":9, | |
"value":28 | |
}, | |
{ | |
"day":2, | |
"hour":10, | |
"value":49 | |
}, | |
{ | |
"day":2, | |
"hour":11, | |
"value":51 | |
}, | |
{ | |
"day":2, | |
"hour":12, | |
"value":47 | |
}, | |
{ | |
"day":2, | |
"hour":13, | |
"value":38 | |
}, | |
{ | |
"day":2, | |
"hour":14, | |
"value":65 | |
}, | |
{ | |
"day":2, | |
"hour":15, | |
"value":60 | |
}, | |
{ | |
"day":2, | |
"hour":16, | |
"value":50 | |
}, | |
{ | |
"day":2, | |
"hour":17, | |
"value":65 | |
}, | |
{ | |
"day":2, | |
"hour":18, | |
"value":50 | |
}, | |
{ | |
"day":2, | |
"hour":19, | |
"value":22 | |
}, | |
{ | |
"day":2, | |
"hour":20, | |
"value":11 | |
}, | |
{ | |
"day":2, | |
"hour":21, | |
"value":12 | |
}, | |
{ | |
"day":2, | |
"hour":22, | |
"value":9 | |
}, | |
{ | |
"day":2, | |
"hour":23, | |
"value":0 | |
}, | |
{ | |
"day":2, | |
"hour":24, | |
"value":13 | |
}, | |
{ | |
"day":3, | |
"hour":1, | |
"value":5 | |
}, | |
{ | |
"day":3, | |
"hour":2, | |
"value":8 | |
}, | |
{ | |
"day":3, | |
"hour":3, | |
"value":8 | |
}, | |
{ | |
"day":3, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":3, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":3, | |
"hour":6, | |
"value":2 | |
}, | |
{ | |
"day":3, | |
"hour":7, | |
"value":5 | |
}, | |
{ | |
"day":3, | |
"hour":8, | |
"value":12 | |
}, | |
{ | |
"day":3, | |
"hour":9, | |
"value":34 | |
}, | |
{ | |
"day":3, | |
"hour":10, | |
"value":43 | |
}, | |
{ | |
"day":3, | |
"hour":11, | |
"value":54 | |
}, | |
{ | |
"day":3, | |
"hour":12, | |
"value":44 | |
}, | |
{ | |
"day":3, | |
"hour":13, | |
"value":40 | |
}, | |
{ | |
"day":3, | |
"hour":14, | |
"value":48 | |
}, | |
{ | |
"day":3, | |
"hour":15, | |
"value":54 | |
}, | |
{ | |
"day":3, | |
"hour":16, | |
"value":59 | |
}, | |
{ | |
"day":3, | |
"hour":17, | |
"value":60 | |
}, | |
{ | |
"day":3, | |
"hour":18, | |
"value":51 | |
}, | |
{ | |
"day":3, | |
"hour":19, | |
"value":21 | |
}, | |
{ | |
"day":3, | |
"hour":20, | |
"value":16 | |
}, | |
{ | |
"day":3, | |
"hour":21, | |
"value":9 | |
}, | |
{ | |
"day":3, | |
"hour":22, | |
"value":5 | |
}, | |
{ | |
"day":3, | |
"hour":23, | |
"value":4 | |
}, | |
{ | |
"day":3, | |
"hour":24, | |
"value":7 | |
}, | |
{ | |
"day":4, | |
"hour":1, | |
"value":0 | |
}, | |
{ | |
"day":4, | |
"hour":2, | |
"value":0 | |
}, | |
{ | |
"day":4, | |
"hour":3, | |
"value":0 | |
}, | |
{ | |
"day":4, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":4, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":4, | |
"hour":6, | |
"value":2 | |
}, | |
{ | |
"day":4, | |
"hour":7, | |
"value":4 | |
}, | |
{ | |
"day":4, | |
"hour":8, | |
"value":13 | |
}, | |
{ | |
"day":4, | |
"hour":9, | |
"value":26 | |
}, | |
{ | |
"day":4, | |
"hour":10, | |
"value":58 | |
}, | |
{ | |
"day":4, | |
"hour":11, | |
"value":61 | |
}, | |
{ | |
"day":4, | |
"hour":12, | |
"value":59 | |
}, | |
{ | |
"day":4, | |
"hour":13, | |
"value":53 | |
}, | |
{ | |
"day":4, | |
"hour":14, | |
"value":54 | |
}, | |
{ | |
"day":4, | |
"hour":15, | |
"value":64 | |
}, | |
{ | |
"day":4, | |
"hour":16, | |
"value":55 | |
}, | |
{ | |
"day":4, | |
"hour":17, | |
"value":52 | |
}, | |
{ | |
"day":4, | |
"hour":18, | |
"value":53 | |
}, | |
{ | |
"day":4, | |
"hour":19, | |
"value":18 | |
}, | |
{ | |
"day":4, | |
"hour":20, | |
"value":3 | |
}, | |
{ | |
"day":4, | |
"hour":21, | |
"value":9 | |
}, | |
{ | |
"day":4, | |
"hour":22, | |
"value":12 | |
}, | |
{ | |
"day":4, | |
"hour":23, | |
"value":2 | |
}, | |
{ | |
"day":4, | |
"hour":24, | |
"value":8 | |
}, | |
{ | |
"day":5, | |
"hour":1, | |
"value":2 | |
}, | |
{ | |
"day":5, | |
"hour":2, | |
"value":0 | |
}, | |
{ | |
"day":5, | |
"hour":3, | |
"value":8 | |
}, | |
{ | |
"day":5, | |
"hour":4, | |
"value":2 | |
}, | |
{ | |
"day":5, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":5, | |
"hour":6, | |
"value":2 | |
}, | |
{ | |
"day":5, | |
"hour":7, | |
"value":4 | |
}, | |
{ | |
"day":5, | |
"hour":8, | |
"value":14 | |
}, | |
{ | |
"day":5, | |
"hour":9, | |
"value":31 | |
}, | |
{ | |
"day":5, | |
"hour":10, | |
"value":48 | |
}, | |
{ | |
"day":5, | |
"hour":11, | |
"value":46 | |
}, | |
{ | |
"day":5, | |
"hour":12, | |
"value":50 | |
}, | |
{ | |
"day":5, | |
"hour":13, | |
"value":66 | |
}, | |
{ | |
"day":5, | |
"hour":14, | |
"value":54 | |
}, | |
{ | |
"day":5, | |
"hour":15, | |
"value":56 | |
}, | |
{ | |
"day":5, | |
"hour":16, | |
"value":67 | |
}, | |
{ | |
"day":5, | |
"hour":17, | |
"value":54 | |
}, | |
{ | |
"day":5, | |
"hour":18, | |
"value":23 | |
}, | |
{ | |
"day":5, | |
"hour":19, | |
"value":14 | |
}, | |
{ | |
"day":5, | |
"hour":20, | |
"value":6 | |
}, | |
{ | |
"day":5, | |
"hour":21, | |
"value":8 | |
}, | |
{ | |
"day":5, | |
"hour":22, | |
"value":7 | |
}, | |
{ | |
"day":5, | |
"hour":23, | |
"value":0 | |
}, | |
{ | |
"day":5, | |
"hour":24, | |
"value":8 | |
}, | |
{ | |
"day":6, | |
"hour":1, | |
"value":2 | |
}, | |
{ | |
"day":6, | |
"hour":2, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":3, | |
"value":2 | |
}, | |
{ | |
"day":6, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":6, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":7, | |
"value":4 | |
}, | |
{ | |
"day":6, | |
"hour":8, | |
"value":8 | |
}, | |
{ | |
"day":6, | |
"hour":9, | |
"value":8 | |
}, | |
{ | |
"day":6, | |
"hour":10, | |
"value":6 | |
}, | |
{ | |
"day":6, | |
"hour":11, | |
"value":14 | |
}, | |
{ | |
"day":6, | |
"hour":12, | |
"value":12 | |
}, | |
{ | |
"day":6, | |
"hour":13, | |
"value":9 | |
}, | |
{ | |
"day":6, | |
"hour":14, | |
"value":14 | |
}, | |
{ | |
"day":6, | |
"hour":15, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":16, | |
"value":4 | |
}, | |
{ | |
"day":6, | |
"hour":17, | |
"value":7 | |
}, | |
{ | |
"day":6, | |
"hour":18, | |
"value":6 | |
}, | |
{ | |
"day":6, | |
"hour":19, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":20, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":21, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":22, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":23, | |
"value":0 | |
}, | |
{ | |
"day":6, | |
"hour":24, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":1, | |
"value":7 | |
}, | |
{ | |
"day":7, | |
"hour":2, | |
"value":6 | |
}, | |
{ | |
"day":7, | |
"hour":3, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":4, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":5, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":6, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":7, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":8, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":9, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":10, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":11, | |
"value":2 | |
}, | |
{ | |
"day":7, | |
"hour":12, | |
"value":2 | |
}, | |
{ | |
"day":7, | |
"hour":13, | |
"value":5 | |
}, | |
{ | |
"day":7, | |
"hour":14, | |
"value":6 | |
}, | |
{ | |
"day":7, | |
"hour":15, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":16, | |
"value":4 | |
}, | |
{ | |
"day":7, | |
"hour":17, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":18, | |
"value":2 | |
}, | |
{ | |
"day":7, | |
"hour":19, | |
"value":10 | |
}, | |
{ | |
"day":7, | |
"hour":20, | |
"value":7 | |
}, | |
{ | |
"day":7, | |
"hour":21, | |
"value":0 | |
}, | |
{ | |
"day":7, | |
"hour":22, | |
"value":19 | |
}, | |
{ | |
"day":7, | |
"hour":23, | |
"value":9 | |
}, | |
{ | |
"day":7, | |
"hour":24, | |
"value":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> | |
<html class="no-js"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script> | |
<style type="text/css" media="screen"> | |
body { | |
position: relative; | |
} | |
svg, | |
canvas { | |
position: absolute; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.axis path { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="chart"> | |
</div> | |
<script src="js/main.js"></script> | |
</body> | |
</html> |
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
var margin = { top: 50, right: 0, bottom: 100, left: 30 }, | |
width = 960 - margin.left - margin.right, | |
height = 430 - margin.top - margin.bottom, | |
gridSize = Math.floor(width / 24), | |
legendElementWidth = gridSize*2, | |
buckets = 9, | |
// http://colorbrewer2.org/?type=diverging&scheme=PiYG&n=9 | |
colors = ['rgb(197,27,125)','rgb(222,119,174)','rgb(241,182,218)','rgb(253,224,239)','rgb(247,247,247)','rgb(230,245,208)','rgb(184,225,134)','rgb(127,188,65)','rgb(77,146,33)'], | |
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"]; | |
d3.json("data.json", | |
function(error, data) { | |
console.log("data",data); | |
var colorScale = d3.scale.quantile() | |
.domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) | |
.range(colors); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var dayLabels = svg.selectAll(".dayLabel") | |
.data(days) | |
.enter().append("text") | |
.text(function (d) { return d; }) | |
.attr("x", 0) | |
.attr("y", function (d, i) { return i * gridSize; }) | |
.style("text-anchor", "end") | |
.attr("transform", "translate(-6," + gridSize / 1.5 + ")") | |
.attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); | |
var timeLabels = svg.selectAll(".timeLabel") | |
.data(times) | |
.enter().append("text") | |
.text(function(d) { return d; }) | |
.attr("x", function(d, i) { return i * gridSize; }) | |
.attr("y", 0) | |
.style("text-anchor", "middle") | |
.attr("transform", "translate(" + gridSize / 2 + ", -6)") | |
.attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); | |
var heatMap = svg.selectAll(".hour") | |
.data(data) | |
.enter().append("rect") | |
.attr("x", function(d) { return (d.hour - 1) * gridSize; }) | |
.attr("y", function(d) { return (d.day - 1) * gridSize; }) | |
.attr("class", "hour bordered") | |
.attr("width", gridSize) | |
.attr("height", gridSize) | |
.style("stroke", "#fff") | |
.style("fill", colors[0]); | |
heatMap.transition().duration(1000) | |
.style("fill", function(d) { return colorScale(d.value); }); | |
heatMap.append("title").text(function(d) { return d.value; }); | |
var legend = svg.selectAll(".legend") | |
.data([0].concat(colorScale.quantiles()), function(d) { return d; }) | |
.enter().append("g") | |
.attr("class", "legend"); | |
legend.append("rect") | |
.attr("x", function(d, i) { return legendElementWidth * i; }) | |
.attr("y", height) | |
.attr("width", gridSize * 2) | |
.attr("height", gridSize / 2) | |
.style("fill", function(d, i) { return colors[i]; }); | |
legend.append("text") | |
.attr("class", "mono") | |
.text(function(d) { return "≥ " + Math.round(d); }) | |
.attr("x", function(d, i) { return legendElementWidth * i; }) | |
.attr("y", height + gridSize); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment