index.html
<html>
<body>
<script type='text/javascript' src='//d3js.org/d3.v4.min.js'></script>
<script>
var url = "https://api.github.com/repos/mbostock/d3/stats/punch_card"
var color = d3.scaleLinear().range(['white', 'blue'])
d3.json(url, function (data) {
color.domain(d3.extent(data, function (d) { return d[2] }))
var nestedData = d3.nest()
.key(function (d) { return d[0] })
.entries(data)
var keys = d3.local();
d3.select('body')
.append('svg')
.selectAll('g')
.data(nestedData)
.enter()
.append('g')
.selectAll('rect')
.data(function (d) {
keys.set(this, d.key);
return d.values;
})
.enter()
.append('rect')
.attr('x', function (d, i) { return i * 20 })
.attr('y', function (d, i) { return keys.get(this) * 20 })
.attr('width', 20)
.attr('height', 20)
.style('fill', function (d) { return color(d[2]) })
})
</script>
</body>
</html>