heatmap.js

Heatmap

var defaults = {
  dotsize: 5,
  gutsize: 1,
  totsize: 6
}

function heatmap(id, data, options) {
  var self = {};
  var options = _.extend(defaults, options);
  self.data = data || [];
  self.canvas = document.getElementById(id);
  self.ctx = self.canvas.getContext('2d');
  self.colorize = options.colorize || default_colorize;

  self.ctx.clearRect(
    0,
    0,
    _.size(self.data),
    _.size(self.data[0])
  );

  // render heatmap
  self.render = function() {
    _(self.data).each(function(row,j) {
      _(row).each(function(val,i) {
        self.ctx.fillStyle = self.colorize(val);
        self.ctx.fillRect(options.totsize*i,options.totsize*j,options.dotsize,options.dotsize);
      });
    });
  }

  self.update = function(data) {
    self.data = data;
  };

  return self;
};