Show request timings in a heatmap

heatmap.js

// takes request timings in µs, bucketed into 5-minute buckets, and
// renders them onto a canvas
var hits = {
    1484545800: [4136756,6564120,7232318,8041312,1982390,10570437],
    1484546100: [7859082,6265671,6361644,5818958],
    1484546400: [6313574,9480778,3943197,11844236,18682848],
    1484546700: [18782935,19409974,3003980,7977562,15467698,3686429,6981970,3498479],
};

var min_t;
var max_t;
for ( var bucket in hits ) {
    if ( ! min_t ) {
        min_t = bucket;
    }
    else if (bucket < min_t) {
        min_t = bucket;
    }

    if ( !max_t ) {
        max_t = bucket;
    }
    else if ( bucket > max_t ) {
        max_t = bucket;
    }
}

var width = (max_t - min_t) / 300; // 5 min buckets
var height = 100;
console.log("min " + min_t + " max " + max_t + " wid: " + width);

var c = document.getElementById('hits_canvas');
c.width = width;
c.height = height;
var ctx = c.getContext('2d');

// 0.3 alpha to show multiple hits as darker
ctx.fillStyle = 'rgba(100, 100, 100, 0.3)';


ctx.clearRect(0,0,width,height);
for (var bucket in hits ) {
    var durs = hits[bucket];
    var x = (bucket - min_t)/300;
    for (var i in durs) {
        var dur = durs[i];
        var y = dur/1000000;
        if ( y > 100 ) { y = 100 }
        ctx.fillRect(x,height-y,1,1);
    }

    if ( bucket % 86400 == 0 ) {
        ctx.fillRect(x,0,1,10);
    }
    if ( bucket % 3600 == 0 ) {
        ctx.fillRect(x,0,1,5);
    }
}