punchcard-circles.js

// Define the size of the grid
var rX = 35,
    rY = 45;

// Draw the canvas
var canvas = document.getElementById("chart"),
    ctx = canvas.getContext('2d');

_(data).each(function(d, i) {
  // For every column
  _(d).each(function(c, e) {
    // For every row
    ctx.beginPath();
    ctx.fillStyle = 'rgba(56,74,114, .8)';
    // Draw the circle
    // Syntax: arc(x, y, radius, start degree, end degree, clockwise)
    ctx.arc(rX+i*rX, rX+e*rY, rX*Math.pow(c)/max, 1/4), 0, 2*Math.PI, true);
    ctx.fill();
});