github contribution graph fake

fake.js

var colors = [
  'rgb(30, 104, 35)', 'rgb(68, 163, 64)', 'rgb(140, 198, 101)', 'rgb(214, 230, 133)', 'rgb(238, 238, 238)'
];
var days = $('#calendar-graph').find('rect.day');
days.css({
  fill: colors[4]
});
days.on('click', function(e) {
  e.stopPropagation();
  $this = $(this);
  var colorIndex = ~~$this.data('nextColorIndex');
  $this.css('fill', colors[colorIndex]);
  colorIndex++;
  if (colorIndex >= colors.length) {
    colorIndex = 0;
  }
  $this.data('nextColorIndex', colorIndex);
});

// above code adds click handler to each square. Click the ones you want to change.
// Then call this randomize method to make it look less fake...

function randomize() {
  days.each(function() {
    var $this = $(this);
    var fill = $this.css('fill');
    var shouldChange = Math.random() > .65;
    if (!shouldChange) return;
    var colorIndex = 4;
    if (fill === colors[4] || fill === colors[3]) {
      colorIndex = Math.random() > .65 ? 3 : 4;
    } else {
      colorIndex = Math.random() > .65 ? Math.random() > .65 ? 2 : 1 : 0;
    }
    $this.css('fill', colors[colorIndex]);
  });
}

This is how I did this:

https://twitter.com/kentcdodds/status/502903180531728384