Skip to content

Instantly share code, notes, and snippets.

@zocoi
Forked from milroc/README.md
Last active August 29, 2015 13:57
Show Gist options
  • Save zocoi/9845224 to your computer and use it in GitHub Desktop.
Save zocoi/9845224 to your computer and use it in GitHub Desktop.

d3.unconf example gist. Fork it here.

[
{
"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
}
]
<!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>
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