pomodoros.js

// Simple D3-based square graph generator
// To display accomplished pomodoros in each weekday
// Used in hire.jonasgalvez.com.br



function shuffle(array) {
	// https://github.com/coolaj86/knuth-shuffle
	var currentIndex = array.length, temporaryValue, randomIndex ;
	while (0 !== currentIndex) {
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}
	return array;
}
var days = [
	{name: "Monday", pomodoros: 12},
	{name: "Tuesday", pomodoros: 14},
	{name: "Wednesday", pomodoros: 16},
	{name: "Thursday", pomodoros: 12},
	{name: "Friday", pomodoros: 8}
]
var spaces = days.length-1;
var space_width = 10;
var c_width = d3.select(".pomodoros").node().getBoundingClientRect().width;
var square_width = (c_width-(space_width*spaces))/days.length;
var subspace_width = 4;
var subsquare_width = (square_width-(subspace_width*4))/5;
c = d3.select(".pomodoros").append("svg")
	.attr("width", c_width)
	.attr("height", square_width);
var current_x, current_y, pomodoros;
for (var i = 0, len = days.length; i < len; i++) { 
	current_x = square_width*i + space_width*i
	c.append("rect")
		.attr("x", current_x)
		.attr("y", 0)
		.attr("width", square_width)
		.attr("height", square_width)
		.attr("fill", "white")
	pomodoros = []
	for (var p = 0; p < 25; p++) {
		pomodoros.push(p < days[i].pomodoros ? 1 : 0);
	}
	pomodoros = shuffle(pomodoros);
	for(var x = 0, xlen = 5; x < xlen; x++) {
		c.append("rect")
			.attr("x", current_x + subsquare_width*x + subspace_width*x)
			.attr("y", 0)
			.attr("width", subsquare_width)
			.attr("height", subsquare_width)
			.attr("fill", pomodoros.pop() ? "#FD2102" : "#fff0ee")
			.attr("stroke", "#FD2102")
			.attr("stroke-width", "0.2")
		for(var y = 1, ylen = 5; y < ylen; y++) {
			current_y = subsquare_width*y + subspace_width*y;
			c.append("rect")
				.attr("x", current_x + subsquare_width*x + subspace_width*x)
				.attr("y", current_y)
				.attr("width", subsquare_width)
				.attr("height", subsquare_width)
				.attr("fill", pomodoros.pop() ? "#FD2102" : "#fff0ee")
				.attr("stroke", "#FD2102")
				.attr("stroke-width", "0.2")
		}
	}
}