JSFiddle - React, Tailwind, and code Playground

by devgru

CSS

td {
    width: 20px;
    height: 20px;
    padding: 0;
}

th {
    font-size: 0.7em;
}
th.first {
    text-align: left;
}
th.last {
    text-align: right;
}

table {
    border-collapse: collapse;
}

JavaScript

var url = "https://api.github.com/repos/mbostock/d3/stats/punch_card"
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
var color = d3.scale.linear().range(['white', 'blue'])

d3.json(url, function (data) {
    var counts = data.map(function (d) {
        return d[2]
    })
    color.domain(d3.extent(counts))
    var dates = d3.nest()
        .key(function (d) { return d[0] })
        .entries(data)
    var body = d3.select('body')
    var table = body.append('table')
    var span = body.append('span')
    var head = table.append('thead')
    head
        .append('th')
        .classed('first', true)
        .text('midnight')
        .attr('colspan', 9)
    head
        .append('th')
        .text('noon')
        .attr('colspan', 6)
    head
        .append('th')
        .classed('last', true)
        .text('midnight')
        .attr('colspan', 9)
    
    var rows = table
        .selectAll('tr')
        .data(dates)
        .enter()
        .append('tr')
    var cells = rows
        .selectAll('td')
        .data(function (d) { return d.values })
        .enter()
        .append('td')
        .style('background', function (d) { return color(d[2]) })
        .on('mouseover', function (d) {
            span.text(d[2] + ' commits between ' + d[1] + ':00 and ' + d[1] + ':59 at ' + days[d[0]])
        })
        .on('mouseout', function (d) {
            span.text('')
        })
})