cal_heatmap_rails 0.0.1 → 0.0.2

data/vendor/assets/javascripts/cal-heatmap.js

@@ -1,4 +1,4 @@
-/*! cal-heatmap v3.0.9 (Thu Aug 01 2013 18:58:29)
+/*! cal-heatmap v3.1.0 (Thu Aug 08 2013 01:26:26)
  *  ---------------------------------------------
  *  Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data, a la github contribution graph
  *  https://github.com/kamisama/cal-heatmap
@@ -198,7 +198,7 @@ var CalHeatMap = function() {
 
 
 		// ================================================
-		// CALLBACK
+		// EVENTS CALLBACK
 		// ================================================
 
 		// Callback when clicking on a time block
@@ -208,10 +208,10 @@ var CalHeatMap = function() {
 		afterLoad : null,
 
 		// Callback after loading the next domain in the calendar
-		afterLoadNextDomain : function(start) {},
+		afterLoadNextDomain : null,
 
 		// Callback after loading the previous domain in the calendar
-		afterLoadPreviousDomain : function(start) {},
+		afterLoadPreviousDomain : null,
 
 		// Callback after finishing all actions on the calendar
 		onComplete : null,
@@ -228,7 +228,7 @@ var CalHeatMap = function() {
 		//
 		// This callback is also executed once, after calling previous(),
 		// only when the max domain is reached
-		onMaxDomainReached: function(reached) {},
+		onMaxDomainReached: null,
 
 		// Callback triggered after calling previous().
 		// The `status` argument is equal to true if there is no
@@ -236,17 +236,16 @@ var CalHeatMap = function() {
 		//
 		// This callback is also executed once, after calling next(),
 		// only when the min domain is reached
-		onMinDomainReached: function(reached) {}
+		onMinDomainReached: null
 	};
 
 
-
 	this._domainType = {
 		"min" : {
 			name: "minute",
 			level: 10,
-			row: function(d) {return 10;},
-			column: function(d) { return 6; },
+			row: function() {return 10;},
+			column: function() { return 6; },
 			position: {
 				x : function(d) { return Math.floor(d.getMinutes() / self._domainType.min.row(d)); },
 				y : function(d) { return d.getMinutes() % self._domainType.min.row(d);}
@@ -256,12 +255,15 @@ var CalHeatMap = function() {
 				legend: "",
 				connector: "at"
 			},
-			extractUnit : function(d) { return d.getMinutes(); }
+			extractUnit : function(d) {
+				var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
+				return dt.getTime();
+			}
 		},
 		"hour" : {
 			name: "hour",
 			level: 20,
-			row: function(d) {return 6;},
+			row: function() {return 6;},
 			column: function(d) {
 				switch(self.options.domain) {
 					case "day" : return 4;
@@ -286,14 +288,14 @@ var CalHeatMap = function() {
 				connector: "at"
 			},
 			extractUnit : function(d) {
-				var formatHour = d3.time.format("%H");
-				return d.getFullYear() + "" +  self.getDayOfYear(d) + "" + formatHour(d);
+				var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours());
+				return dt.getTime();
 			}
 		},
 		"day" : {
 			name: "day",
 			level: 30,
-			row: function(d) {return 7;},
+			row: function() {return 7;},
 			column: function(d) {
 				d = new Date(d);
 				switch(self.options.domain) {
@@ -322,12 +324,15 @@ var CalHeatMap = function() {
 				legend: "%e %b",
 				connector: "on"
 			},
-			extractUnit : function(d) { return d.getFullYear() + "" + self.getDayOfYear(d); }
+			extractUnit : function(d) {
+				var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+				return dt.getTime();
+			}
 		},
 		"week" : {
 			name: "week",
 			level: 40,
-			row: function(d) {return 1;},
+			row: function() {return 1;},
 			column: function(d) {
 				d = new Date(d);
 				switch(self.options.domain) {
@@ -343,7 +348,7 @@ var CalHeatMap = function() {
 						case "month" : return self.getWeekNumber(d) - self.getWeekNumber(new Date(d.getFullYear(), d.getMonth())) - 1;
 					}
 				},
-				y: function(d) {
+				y: function() {
 					return 0;
 				}
 			},
@@ -352,13 +357,22 @@ var CalHeatMap = function() {
 				legend: "%B Week #%W",
 				connector: "on"
 			},
-			extractUnit : function(d) { return self.getWeekNumber(d); }
+			extractUnit : function(d) {
+				var dt = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+				// According to ISO-8601, week number computation are based on week starting on Monday
+				var weekDay = dt.getDay()-1;
+				if (weekDay < 0) {
+					weekDay = 6;
+				}
+				dt.setDate(dt.getDate() - weekDay);
+				return dt.getTime();
+			}
 		},
 		"month" : {
 			name: "month",
 			level: 50,
-			row: function(d) {return 1;},
-			column: function(d) {return 12;},
+			row: function() {return 1;},
+			column: function() {return 12;},
 			position: {
 				x : function(d) { return Math.floor(d.getMonth() / self._domainType.month.row(d)); },
 				y : function(d) { return d.getMonth() % self._domainType.month.row(d);}
@@ -368,13 +382,16 @@ var CalHeatMap = function() {
 				legend: "%B",
 				connector: "on"
 			},
-			extractUnit : function(d) { return d.getMonth(); }
+			extractUnit : function(d) {
+				var dt = new Date(d.getFullYear(), d.getMonth());
+				return dt.getTime();
+			}
 		},
 		"year" : {
 			name: "year",
 			level: 60,
-			row: function(d) {return 1;},
-			column: function(d) {return 12;},
+			row: function() {return 1;},
+			column: function() {return 12;},
 			position: {
 				x : function(d) { return Math.floor(d.getFullYear() / this._domainType.year.row(d)); },
 				y : function(d) { return d.getFullYear() % this._domainType.year.row(d);}
@@ -384,7 +401,10 @@ var CalHeatMap = function() {
 				legend: "%Y",
 				connector: "on"
 			},
-			extractUnit : function(d) { return d.getFullYear(); }
+			extractUnit : function(d) {
+				var dt = new Date(d.getFullYear());
+				return dt.getTime();
+			}
 		}
 	};
 
@@ -423,7 +443,7 @@ var CalHeatMap = function() {
 
 	// Record all the valid domains
 	// Each domain value is a timestamp in milliseconds
-	this._domains = [];
+	this._domains = d3.map();
 
 	var graphDim = {
 		width: 0,
@@ -433,6 +453,11 @@ var CalHeatMap = function() {
 	this.NAVIGATE_LEFT = 1;
 	this.NAVIGATE_RIGHT = 2;
 
+	// Various update mode when using the update() API
+	this.RESET_ALL_ON_UPDATE = 0;
+	this.RESET_SINGLE_ON_UPDATE = 1;
+	this.APPEND_ON_UPDATE = 2;
+
 	this.root = null;
 
 	this._maxDomainReached = false;
@@ -446,7 +471,9 @@ var CalHeatMap = function() {
 	 */
 	function _init() {
 
-		self._domains = self.getDomain(self.options.start).map(function(d) { return d.getTime(); });
+		self.getDomain(self.options.start).map(function(d) { return d.getTime(); }).map(function(d) {
+			self._domains.set(d, self.getSubDomain(d).map(function(d) { return {t: self._domainType[self.options.subDomain].extractUnit(d), v: null}; }));
+		});
 
 		self.root = d3.select(self.options.itemSelector);
 
@@ -454,20 +481,35 @@ var CalHeatMap = function() {
 
 		if (self.options.paintOnLoad) {
 
+			self.verticalDomainLabel = (self.options.label.position === "top" || self.options.label.position === "bottom");
+
+			self.domainVerticalLabelHeight = Math.max(25, self.options.cellSize*2);
+			self.domainHorizontalLabelWidth = 0;
+
+			if (!self.verticalDomainLabel) {
+				self.domainVerticalLabelHeight = 0;
+				self.domainHorizontalLabelWidth = self.options.label.width;
+			}
+
+			// @todo : check validity
+			if (typeof self.options.domainMargin === "number") {
+				self.options.domainMargin = [self.options.domainMargin, self.options.domainMargin, self.options.domainMargin, self.options.domainMargin];
+			}
+
 			self.paint();
 
 			// =========================================================================//
 			// ATTACHING DOMAIN NAVIGATION EVENT										//
 			// =========================================================================//
 			if (self.options.nextSelector !== false) {
-				d3.select(self.options.nextSelector).on("click." + self.options.itemNamespace, function(d) {
+				d3.select(self.options.nextSelector).on("click." + self.options.itemNamespace, function() {
 					d3.event.preventDefault();
 					return self.loadNextDomain();
 				});
 			}
 
 			if (self.options.previousSelector !== false) {
-				d3.select(self.options.previousSelector).on("click." + self.options.itemNamespace, function(d) {
+				d3.select(self.options.previousSelector).on("click." + self.options.itemNamespace, function() {
 					d3.event.preventDefault();
 					return self.loadPreviousDomain();
 				});
@@ -484,12 +526,14 @@ var CalHeatMap = function() {
 
 			// Fill the graph with some datas
 			if (self.options.loadOnInit) {
+				var domains = self._domains.keys().sort();
 				self.getDatas(
 					self.options.data,
-					new Date(self._domains[0]),
-					self.getSubDomain(self._domains[self._domains.length-1]).pop(),
-					function(data) {
-						self.fill(data, self.svg);
+					new Date(parseInt(domains[0], 10)),
+					self.getSubDomain(parseInt(domains[domains.length-1], 10)).pop(),
+					function() {
+						self.fill();
+						self.onComplete();
 					}
 				);
 			} else {
@@ -500,6 +544,25 @@ var CalHeatMap = function() {
 		return true;
 	}
 
+	// Return the width of the domain block, without the domain gutter
+	// @param int d Domain start timestamp
+	function w(d, outer) {
+		var width = self.options.cellSize*self._domainType[self.options.subDomain].column(d) + self.options.cellPadding*self._domainType[self.options.subDomain].column(d);
+		if (typeof outer !== "undefined" && outer === true) {
+			return width += self.domainHorizontalLabelWidth + self.options.domainGutter + self.options.domainMargin[1] + self.options.domainMargin[3];
+		}
+		return width;
+	}
+
+	// Return the height of the domain block, without the domain gutter
+	function h(d, outer) {
+		var height = self.options.cellSize*self._domainType[self.options.subDomain].row(d) + self.options.cellPadding*self._domainType[self.options.subDomain].row(d);
+		if (typeof outer !== "undefined" && outer === true) {
+			height += self.options.domainGutter + self.domainVerticalLabelHeight + self.options.domainMargin[0] + self.options.domainMargin[2];
+		}
+		return height;
+	}
+
 
 	/**
 	 *
@@ -512,44 +575,10 @@ var CalHeatMap = function() {
 			navigationDir = false;
 		}
 
-		var verticalDomainLabel = (self.options.label.position === "top" || self.options.label.position === "bottom");
-
-		var domainVerticalLabelHeight = Math.max(25, self.options.cellSize*2);
-		var domainHorizontalLabelWidth = 0;
-
-		if (!verticalDomainLabel) {
-			domainVerticalLabelHeight = 0;
-			domainHorizontalLabelWidth = self.options.label.width;
-		}
-
-		// @todo : check validity
-		if (typeof self.options.domainMargin === "number") {
-			self.options.domainMargin = [self.options.domainMargin, self.options.domainMargin, self.options.domainMargin, self.options.domainMargin];
-		}
-
-		// Return the width of the domain block, without the domain gutter
-		// @param int d Domain start timestamp
-		var w = function(d, outer) {
-			var width = self.options.cellSize*self._domainType[self.options.subDomain].column(d) + self.options.cellPadding*self._domainType[self.options.subDomain].column(d);
-			if (typeof outer !== "undefined" && outer === true) {
-				return width += domainHorizontalLabelWidth + self.options.domainGutter + self.options.domainMargin[1] + self.options.domainMargin[3];
-			}
-			return width;
-		};
-
-		// Return the height of the domain block, without the domain gutter
-		var h = function(d, outer) {
-			var height = self.options.cellSize*self._domainType[self.options.subDomain].row(d) + self.options.cellPadding*self._domainType[self.options.subDomain].row(d);
-			if (typeof outer !== "undefined" && outer === true) {
-				height += self.options.domainGutter + domainVerticalLabelHeight + self.options.domainMargin[0] + self.options.domainMargin[2];
-			}
-			return height;
-		};
-
 		// Painting all the domains
 		var domainSvg = self.root.select(".graph")
 			.selectAll(".graph-domain")
-			.data(self._domains, function(d) { return d;})
+			.data(self._domains.keys().map(function(d) { return parseInt(d, 10); }), function(d) { return d;})
 		;
 
 		var enteringDomainDim = 0;
@@ -560,26 +589,26 @@ var CalHeatMap = function() {
 		// PAINTING DOMAIN															//
 		// =========================================================================//
 
-		var svg = domainSvg
+		self.svg = domainSvg
 			.enter()
 			.append("svg")
-			.attr("width", function(d, i){
+			.attr("width", function(d) {
 				return w(d, true);
 			})
 			.attr("height", function(d) {
 				return h(d, true);
 			})
-			.attr("x", function(d, i) {
+			.attr("x", function(d) {
 				if (self.options.verticalOrientation) {
 					graphDim.width = w(d, true);
 					return 0;
 				} else {
-					return getDomainPosition(i, graphDim, "width", w(d, true));
+					return getDomainPosition(d, graphDim, "width", w(d, true));
 				}
 			})
-			.attr("y", function(d, i) {
+			.attr("y", function(d) {
 				if (self.options.verticalOrientation) {
-					return getDomainPosition(i, graphDim, "height", h(d, true));
+					return getDomainPosition(d, graphDim, "height", h(d, true));
 				} else {
 					graphDim.height = h(d, true);
 					return 0;
@@ -590,34 +619,38 @@ var CalHeatMap = function() {
 				var date = new Date(d);
 				switch(self.options.domain) {
 					case "hour" : classname += " h_" + date.getHours();
+					/* falls through */
 					case "day" : classname += " d_" + date.getDate() + " dy_" + date.getDay();
+					/* falls through */
 					case "week" : classname += " w_" + self.getWeekNumber(date);
+					/* falls through */
 					case "month" : classname += " m_" + (date.getMonth() + 1);
+					/* falls through */
 					case "year" : classname += " y_" + date.getFullYear();
 				}
 				return classname;
 			})
 		;
 
-		function getDomainPosition(index, graphDim, axis, domainDim) {
+		function getDomainPosition(domainIndex, graphDim, axis, domainDim) {
 			var tmp = 0;
 			switch(navigationDir) {
 				case false :
-					if (index > 0) {
+					//if (domainIndex > 0) {
 						tmp = graphDim[axis];
-					}
+					//}
 
 					graphDim[axis] += domainDim;
-					self.domainPosition.pushPosition(tmp);
+					self.domainPosition.setPosition(domainIndex, tmp);
 					return tmp;
 
 				case self.NAVIGATE_RIGHT :
-					self.domainPosition.pushPosition(graphDim[axis]);
+					self.domainPosition.setPosition(domainIndex, graphDim[axis]);
 
 					enteringDomainDim = domainDim;
-					exitingDomainDim = self.domainPosition.getPosition(1);
+					exitingDomainDim = self.domainPosition.getPositionFromIndex(1);
 
-					self.domainPosition.shiftRight(exitingDomainDim);
+					self.domainPosition.shiftRightBy(exitingDomainDim);
 					return graphDim[axis];
 
 				case self.NAVIGATE_LEFT :
@@ -626,40 +659,42 @@ var CalHeatMap = function() {
 					enteringDomainDim = -tmp;
 					exitingDomainDim = graphDim[axis] - self.domainPosition.getLast();
 
-					self.domainPosition.unshiftPosition(tmp);
-					self.domainPosition.shiftLeft(enteringDomainDim);
+					self.domainPosition.setPosition(domainIndex, tmp);
+					self.domainPosition.shiftLeftBy(enteringDomainDim);
 					return tmp;
 			}
 		}
 
-		svg.append("rect")
-			.attr("width", function(d, i) { return w(d, true) - self.options.domainGutter - self.options.cellPadding; })
-			.attr("height", function(d, i) { return h(d, true) - self.options.domainGutter - self.options.cellPadding; })
+		self.svg.append("rect")
+			.attr("width", function(d) { return w(d, true) - self.options.domainGutter - self.options.cellPadding; })
+			.attr("height", function(d) { return h(d, true) - self.options.domainGutter - self.options.cellPadding; })
 			.attr("class", "domain-background")
-			;
+		;
 
 		// =========================================================================//
 		// PAINTING SUBDOMAINS														//
 		// =========================================================================//
-		var subDomainSvgGroup = svg.append("svg")
-			.attr("x", function(d, i) {
-				switch(self.options.label.position) {
-					case "left" : return domainHorizontalLabelWidth + self.options.domainMargin[3];
-					default : return self.options.domainMargin[3];
+		var subDomainSvgGroup = self.svg.append("svg")
+			.attr("x", function() {
+				if (self.options.label.position === "left") {
+					return self.domainHorizontalLabelWidth + self.options.domainMargin[3];
+				} else {
+					return self.options.domainMargin[3];
 				}
 			})
-			.attr("y", function(d, i) {
-				switch(self.options.label.position) {
-					case "top" : return domainVerticalLabelHeight + self.options.domainMargin[0];
-					default : return self.options.domainMargin[0];
+			.attr("y", function() {
+				if (self.options.label.position === "top") {
+					return self.domainVerticalLabelHeight + self.options.domainMargin[0];
+				} else {
+					return self.options.domainMargin[0];
 				}
 			})
 			.attr("class", "graph-subdomain-group")
 		;
 
 		var rect = subDomainSvgGroup
-			.selectAll("svg")
-			.data(function(d) { return self.getSubDomain(d); })
+			.selectAll("g")
+			.data(function(d) { return self._domains.get(d); }, function(d) { return d.t; })
 			.enter()
 			.append("g")
 		;
@@ -667,41 +702,41 @@ var CalHeatMap = function() {
 		rect
 			.append("rect")
 			.attr("class", function(d) {
-				return "graph-rect" + self.getHighlightClassName(d) + (self.options.onClick !== null ? " hover_cursor" : "");
+				return "graph-rect" + self.getHighlightClassName(d.t) + (self.options.onClick !== null ? " hover_cursor" : "");
 			})
 			.attr("width", self.options.cellSize)
 			.attr("height", self.options.cellSize)
-			.attr("x", function(d) { return self.positionSubDomainX(d); })
-			.attr("y", function(d) { return self.positionSubDomainY(d); })
+			.attr("x", function(d) { return self.positionSubDomainX(d.t); })
+			.attr("y", function(d) { return self.positionSubDomainY(d.t); })
 			.on("click", function(d) {
 				if (self.options.onClick !== null) {
-					return self.onClick(d, null);
+					return self.onClick(new Date(d.t), d.v);
+				}
+			})
+			.call(function(selection) {
+				if (self.options.cellRadius > 0) {
+					selection
+						.attr("rx", self.options.cellRadius)
+						.attr("ry", self.options.cellRadius)
+					;
 				}
 			})
-			.call(radius)
 		;
 
-		function radius(selection) {
-			if (self.options.cellRadius > 0) {
-				selection
-					.attr("rx", self.options.cellRadius)
-					.attr("ry", self.options.cellRadius)
-				;
-			}
-		}
-
+		// Appending a title to each subdomain
+		rect.append("title").text(function(d){ return self.formatDate(new Date(d.t), self.options.subDomainDateFormat); });
 
 
 		// =========================================================================//
 		// PAINTING LABEL															//
 		// =========================================================================//
-		svg.append("text")
+		self.svg.append("text")
 			.attr("class", "graph-label")
-			.attr("y", function(d, i) {
+			.attr("y", function(d) {
 				var y = self.options.domainMargin[0];
 				switch(self.options.label.position) {
-					case "top" : y += domainVerticalLabelHeight/2; break;
-					case "bottom" : y += h(d) + domainVerticalLabelHeight/2;
+					case "top" : y += self.domainVerticalLabelHeight/2; break;
+					case "bottom" : y += h(d) + self.domainVerticalLabelHeight/2;
 				}
 
 				return y + self.options.label.offset.y *
@@ -711,7 +746,7 @@ var CalHeatMap = function() {
 					-1 : 1
 				);
 			})
-			.attr("x", function(d, i){
+			.attr("x", function(d){
 				var x = self.options.domainMargin[3];
 				switch(self.options.label.position) {
 					case "right" : x += w(d); break;
@@ -720,7 +755,7 @@ var CalHeatMap = function() {
 				}
 
 				if (self.options.label.align === "right") {
-					return x + domainHorizontalLabelWidth - self.options.label.offset.x *
+					return x + self.domainHorizontalLabelWidth - self.options.label.offset.x *
 					(self.options.label.rotate === "right" ? -1 : 1);
 				}
 				return x + self.options.label.offset.x;
@@ -735,8 +770,8 @@ var CalHeatMap = function() {
 					default : return "middle";
 				}
 			})
-			.attr("dominant-baseline", function() { return verticalDomainLabel ? "middle" : "top"; })
-			.text(function(d, i) { return self.formatDate(new Date(self._domains[i]), self.options.domainLabelFormat); })
+			.attr("dominant-baseline", function() { return self.verticalDomainLabel ? "middle" : "top"; })
+			.text(function(d) { return self.formatDate(new Date(d), self.options.domainLabelFormat); })
 			.call(domainRotate)
 		;
 
@@ -748,7 +783,7 @@ var CalHeatMap = function() {
 						var s = "rotate(90), ";
 						switch(self.options.label.position) {
 							case "right" : s += "translate(-" + w(d) + " , -" + w(d) + ")"; break;
-							case "left" : s += "translate(0, -" + domainHorizontalLabelWidth + ")"; break;
+							case "left" : s += "translate(0, -" + self.domainHorizontalLabelWidth + ")"; break;
 						}
 
 						return s;
@@ -759,8 +794,8 @@ var CalHeatMap = function() {
 					.attr("transform", function(d) {
 						var s = "rotate(270), ";
 						switch(self.options.label.position) {
-							case "right" : s += "translate(-" + (w(d) + domainHorizontalLabelWidth) + " , " + w(d) + ")"; break;
-							case "left" : s += "translate(-" + (domainHorizontalLabelWidth) + " , " + domainHorizontalLabelWidth + ")"; break;
+							case "right" : s += "translate(-" + (w(d) + self.domainHorizontalLabelWidth) + " , " + w(d) + ")"; break;
+							case "left" : s += "translate(-" + (self.domainHorizontalLabelWidth) + " , " + self.domainHorizontalLabelWidth + ")"; break;
 						}
 
 						return s;
@@ -770,8 +805,6 @@ var CalHeatMap = function() {
 		}
 
 
-		// Appending a title to each subdomain
-		rect.append("title").text(function(d){ return self.formatDate(d, self.options.subDomainDateFormat); });
 
 
 		// =========================================================================//
@@ -780,12 +813,12 @@ var CalHeatMap = function() {
 		if (self.options.subDomainTextFormat !== null) {
 			rect
 				.append("text")
-				.attr("class", function(d) { return "subdomain-text" + self.getHighlightClassName(d); })
-				.attr("x", function(d) { return self.positionSubDomainX(d) + self.options.cellSize/2; })
-				.attr("y", function(d) { return self.positionSubDomainY(d) + self.options.cellSize/2; })
+				.attr("class", function(d) { return "subdomain-text" + self.getHighlightClassName(d.t); })
+				.attr("x", function(d) { return self.positionSubDomainX(d.t) + self.options.cellSize/2; })
+				.attr("y", function(d) { return self.positionSubDomainY(d.t) + self.options.cellSize/2; })
 				.attr("text-anchor", "middle")
 				.attr("dominant-baseline", "central")
-				.text(function(d){ return self.formatDate(d, self.options.subDomainTextFormat); })
+				.text(function(d){ return self.formatDate(new Date(d.t), self.options.subDomainTextFormat); })
 			;
 		}
 
@@ -795,19 +828,11 @@ var CalHeatMap = function() {
 
 		if (navigationDir !== false) {
 			domainSvg.transition().duration(self.options.animationDuration)
-				.attr("x", function(d, i){
-					if (self.options.verticalOrientation) {
-						return 0;
-					} else {
-						return self.domainPosition.getPosition(i);
-					}
+				.attr("x", function(d){
+					return self.options.verticalOrientation ? 0 : self.domainPosition.getPosition(d);
 				})
-				.attr("y", function(d, i){
-					if (self.options.verticalOrientation) {
-						return self.domainPosition.getPosition(i);
-					} else {
-						return 0;
-					}
+				.attr("y", function(d){
+					return self.options.verticalOrientation? self.domainPosition.getPosition(d) : 0;
 				})
 			;
 		}
@@ -823,7 +848,7 @@ var CalHeatMap = function() {
 
 		// At the time of exit, domainsWidth and domainsHeight already automatically shifted
 		domainSvg.exit().transition().duration(self.options.animationDuration)
-			.attr("x", function(d, i){
+			.attr("x", function(d){
 				if (self.options.verticalOrientation) {
 					return 0;
 				} else {
@@ -851,13 +876,56 @@ var CalHeatMap = function() {
 			.attr("width", function() { return graphDim.width - self.options.domainGutter - self.options.cellPadding; })
 			.attr("height", function() { return graphDim.height - self.options.domainGutter - self.options.cellPadding; })
 		;
+	};
 
-		if (self.svg === null) {
-			self.svg = svg;
-		} else {
-			self.svg = self.root.select(".graph").selectAll("svg")
-			.data(self._domains, function(d) {return d;});
-		}
+	this.fill = function() {
+		var rect = self.svg
+			.selectAll("svg").selectAll("g")
+			.data(function(d) { return self._domains.get(d); }, function(d) { return d.t; })
+		;
+
+		rect.transition().select("rect")
+			.attr("class", function(d) {
+
+				var htmlClass = "graph-rect" + self.getHighlightClassName(d.t);
+
+				if (d.v !== null) {
+					htmlClass += " " + self.legend(d.v);
+				} else if (self.options.considerMissingDataAsZero) {
+					htmlClass += " " + self.legend(0);
+				}
+
+				if (self.options.onClick !== null) {
+					htmlClass += " hover_cursor";
+				}
+
+				return htmlClass;
+			})
+		;
+
+
+		rect.transition().select("title")
+			.text(function(d) {
+
+				if (d.v === null && !self.options.considerMissingDataAsZero) {
+					return (self.options.subDomainTitleFormat.empty).format({
+						date: self.formatDate(new Date(d.t), self.options.subDomainDateFormat)
+					});
+				} else {
+					var value = d.v;
+					// Consider null as 0
+					if (value === null && self.options.considerMissingDataAsZero) {
+						value = 0;
+					}
+
+					return (self.options.subDomainTitleFormat.filled).format({
+						count: self.formatNumber(value),
+						name: self.options.itemName[(value !== 1 ? 1 : 0)],
+						connector: self._domainType[self.options.subDomain].format.connector,
+						date: self.formatDate(new Date(d.t), self.options.subDomainDateFormat)
+					});
+				}
+			});
 	};
 
 
@@ -1014,104 +1082,113 @@ var CalHeatMap = function() {
 
 CalHeatMap.prototype = {
 
-
 	// =========================================================================//
-	// CALLBACK																	//
+	// EVENTS CALLBACK															//
 	// =========================================================================//
 
 	/**
-	 * Callback when clicking on a subdomain cell
-	 * @param  Date		d		Date of the subdomain block
-	 * @param  int		itemNb	Number of items in that date
+	 * Helper method for triggering event callback
+	 *
+	 * @param  string	eventName       Name of the event to trigger
+	 * @param  array	successArgs     List of argument to pass to the callback
+	 * @param  boolean  skip			Whether to skip the event triggering
+	 * @return mixed	True when the triggering was skipped, false on error, else the callback function
 	 */
-	onClick : function(d, itemNb) {
-		if (typeof this.options.onClick === "function") {
-			return this.options.onClick(d, itemNb);
+	triggerEvent: function(eventName, successArgs, skip) {
+		if ((arguments.length === 3 && skip) || this.options[eventName] === null) {
+			return true;
+		}
+
+		if (typeof this.options[eventName] === "function") {
+			if (typeof successArgs === "function") {
+				successArgs = successArgs();
+			}
+			return this.options[eventName].apply(this, successArgs);
 		} else {
-			console.log("Provided callback for onClick is not a function.");
+			console.log("Provided callback for " + eventName + " is not a function.");
 			return false;
 		}
 	},
 
 	/**
-	 * Callback to fire after drawing the calendar, but before filling it
+	 * Event triggered on a mouse click on a subDomain cell
+	 *
+	 * @param  Date		d		Date of the subdomain block
+	 * @param  int		itemNb	Number of items in that date
+	 */
+	onClick : function(d, itemNb) {
+		return this.triggerEvent("onClick", [d, itemNb]);
+	},
+
+	/**
+	 * Event triggered after drawing the calendar, byt before filling it with data
 	 */
 	afterLoad : function() {
-		if (typeof (this.options.afterLoad) === "function") {
-			return this.options.afterLoad();
-		} else {
-			console.log("Provided callback for afterLoad is not a function.");
-			return false;
-		}
+		return this.triggerEvent("afterLoad");
 	},
 
 	/**
-	 * Callback to fire at the end, when all actions on the calendar are completed
+	 * Event triggered after completing drawing and filling the calendar
 	 */
 	onComplete : function() {
-		if (this.options.onComplete === null || this._completed === true) {
-			return true;
-		}
-
+		var response = this.triggerEvent("onComplete", [], this._completed);
 		this._completed = true;
-		if (typeof (this.options.onComplete) === "function") {
-			return this.options.onComplete();
-		} else {
-			console.log("Provided callback for onComplete is not a function.");
-			return false;
-		}
+		return response;
 	},
 
 	/**
-	 * Callback after shifting the calendar one domain back
+	 * Event triggered after shifting the calendar one domain back
+	 *
 	 * @param  Date		start	Domain start date
 	 * @param  Date		end		Domain end date
 	 */
 	afterLoadPreviousDomain: function(start) {
-		if (typeof (this.options.afterLoadPreviousDomain) === "function") {
-			var subDomain = this.getSubDomain(start);
-			return this.options.afterLoadPreviousDomain(subDomain.shift(), subDomain.pop());
-		} else {
-			console.log("Provided callback for afterLoadPreviousDomain is not a function.");
-			return false;
-		}
+		var parent = this;
+		return this.triggerEvent("afterLoadPreviousDomain", function() {
+			var subDomain = parent.getSubDomain(start);
+			return [subDomain.shift(), subDomain.pop()];
+		});
 	},
 
 	/**
-	 * Callback after shifting the calendar one domain above
+	 * Event triggered after shifting the calendar one domain above
+	 *
 	 * @param  Date		start	Domain start date
 	 * @param  Date		end		Domain end date
 	 */
 	afterLoadNextDomain: function(start) {
-		if (typeof (this.options.afterLoadNextDomain) === "function") {
-			var subDomain = this.getSubDomain(start);
-			return this.options.afterLoadNextDomain(subDomain.shift(), subDomain.pop());
-		} else {
-			console.log("Provided callback for afterLoadNextDomain is not a function.");
-			return false;
-		}
+		var parent = this;
+		return this.triggerEvent("afterLoadNextDomain", function() {
+			var subDomain = parent.getSubDomain(start);
+			return [subDomain.shift(), subDomain.pop()];
+		});
 	},
 
+	/**
+	 * Event triggered after loading the leftmost domain allowed by minDate
+	 *
+	 * @param  boolean  reached True if the leftmost domain was reached
+	 */
 	onMinDomainReached: function(reached) {
 		this._minDomainReached = reached;
-		if (typeof (this.options.onMinDomainReached) === "function") {
-			return this.options.onMinDomainReached(reached);
-		} else {
-			console.log("Provided callback for onMinDomainReached is not a function.");
-			return false;
-		}
+		return this.triggerEvent("onMinDomainReached", [reached]);
 	},
 
+	/**
+	 * Event triggered after loading the rightmost domain allowed by maxDate
+	 *
+	 * @param  boolean  reached True if the rightmost domain was reached
+	 */
 	onMaxDomainReached: function(reached) {
 		this._maxDomainReached = reached;
-		if (typeof (this.options.onMaxDomainReached) === "function") {
-			return this.options.onMaxDomainReached(reached);
-		} else {
-			console.log("Provided callback for onMaxDomainReached is not a function.");
-			return false;
-		}
+		return this.triggerEvent("onMaxDomainReached", [reached]);
 	},
 
+
+	// =========================================================================//
+	// FORMATTER																//
+	// =========================================================================//
+
 	formatNumber: d3.format(",g"),
 
 	formatDate: function(d, format) {
@@ -1127,6 +1204,7 @@ CalHeatMap.prototype = {
 		}
 	},
 
+
 	// =========================================================================//
 	// DOMAIN NAVIGATION														//
 	// =========================================================================//
@@ -1147,28 +1225,35 @@ CalHeatMap.prototype = {
 		}
 
 		var parent = this;
-		this._domains.push(nextDomainStartTimestamp);
-		this._domains.shift();
+		this._domains.set(
+			nextDomainStartTimestamp,
+			this.getSubDomain(nextDomainStartTimestamp).map(function(d) {
+				return {t: parent._domainType[parent.options.subDomain].extractUnit(d), v: null};
+			})
+		);
+		this._domains.remove(this._domains.keys().sort().shift());
 
 		this.paint(this.NAVIGATE_RIGHT);
 
+		var domains = this._domains.keys().sort();
+
 		this.getDatas(
 			this.options.data,
-			new Date(this._domains[this._domains.length-1]),
-			this.getSubDomain(this._domains[this._domains.length-1]).pop(),
-			function(data) {
-				parent.fill(data, parent.svg);
+			new Date(parseInt(domains[domains.length-1], 10)),
+			this.getSubDomain(parseInt(domains[domains.length-1], 10)).pop(),
+			function() {
+				parent.fill();
 			}
 		);
 
-		this.afterLoadNextDomain(new Date(this._domains[this._domains.length-1]));
+		this.afterLoadNextDomain(new Date(parseInt(domains[domains.length-1], 10)));
 
 		if (this.maxDomainIsReached(this.getNextDomain().getTime())) {
 			this.onMaxDomainReached(true);
 		}
 
 		// Try to "disengage" the min domain reached setting
-		if (this._minDomainReached && !this.minDomainIsReached(this._domains[0])) {
+		if (this._minDomainReached && !this.minDomainIsReached(domains[0])) {
 			this.onMinDomainReached(false);
 		}
 
@@ -1190,28 +1275,35 @@ CalHeatMap.prototype = {
 		var previousDomainStartTimestamp = this.getPreviousDomain().getTime();
 
 		var parent = this;
-		this._domains.unshift(previousDomainStartTimestamp);
-		this._domains.pop();
+		this._domains.set(
+			previousDomainStartTimestamp,
+			this.getSubDomain(previousDomainStartTimestamp).map(function(d) {
+				return {t: parent._domainType[parent.options.subDomain].extractUnit(d), v: null};
+			})
+		);
+		this._domains.remove(this._domains.keys().sort().pop());
 
 		this.paint(this.NAVIGATE_LEFT);
 
+		var domains = this._domains.keys().sort();
+
 		this.getDatas(
 			this.options.data,
-			new Date(this._domains[0]),
-			this.getSubDomain(this._domains[0]).pop(),
-			function(data) {
-				parent.fill(data, parent.svg);
+			new Date(parseInt(domains[0], 10)),
+			this.getSubDomain(parseInt(domains[0], 10)).pop(),
+			function() {
+				parent.fill();
 			}
 		);
 
-		this.afterLoadPreviousDomain(new Date(this._domains[0]));
+		this.afterLoadPreviousDomain(new Date(parseInt(domains[0], 10)));
 
 		if (this.minDomainIsReached(previousDomainStartTimestamp)) {
 			this.onMinDomainReached(true);
 		}
 
 		// Try to "disengage" the max domain reached setting
-		if (this._maxDomainReached && !this.maxDomainIsReached(this._domains[this._domains.length-1])) {
+		if (this._maxDomainReached && !this.maxDomainIsReached(domains[domains.length-1])) {
 			this.onMaxDomainReached(false);
 		}
 
@@ -1236,6 +1328,7 @@ CalHeatMap.prototype = {
 		return (this.options.minDate !== null && (this.options.minDate.getTime() >= datetimestamp));
 	},
 
+
 	// =========================================================================//
 	// PAINTING : LEGEND														//
 	// =========================================================================//
@@ -1245,9 +1338,10 @@ CalHeatMap.prototype = {
 		var parent = this;
 		var legend = this.root;
 
-		switch(this.options.legendVerticalPosition) {
-			case "top" : legend = legend.insert("svg", ".graph"); break;
-			default : legend = legend.append("svg");
+		if (this.options.legendVerticalPosition === "top") {
+			legend = legend.insert("svg", ".graph");
+		} else {
+			legend = legend.append("svg");
 		}
 
 		var legendWidth =
@@ -1260,7 +1354,7 @@ CalHeatMap.prototype = {
 			.attr("height", this.options.legendCellSize + this.options.legendMargin[0] + this.options.legendMargin[2])
 			.attr("width", width)
 			.append("g")
-			.attr("transform", function(d) {
+			.attr("transform", function() {
 				switch(parent.options.legendHorizontalPosition) {
 					case "right" : return "translate(" + (width - legendWidth) + ")";
 					case "middle" :
@@ -1289,7 +1383,6 @@ CalHeatMap.prototype = {
 		legendItem
 			.append("title")
 			.text(function(d) {
-				var nextThreshold = parent.options.legend[d+1];
 				if (d === 0) {
 					return (parent.options.legendTitleFormat.lower).format({
 						min: parent.options.legend[d],
@@ -1309,105 +1402,30 @@ CalHeatMap.prototype = {
 
 	},
 
-	// =========================================================================//
-	// PAINTING : SUBDOMAIN FILLING												//
-	// =========================================================================//
-
-	/**
-	 * Colorize all rectangles according to their items count
-	 *
-	 * @param  {[type]} data  [description]
-	 */
-	display: function(data, domain) {
-		var parent = this;
-
-		domain.each(function(domainUnit) {
-
-			if (data.hasOwnProperty(domainUnit) || parent.options.considerMissingDataAsZero) {
-				d3.select(this).selectAll(".graph-subdomain-group rect")
-					.attr("class", function(d) {
-						var subDomainUnit = parent._domainType[parent.options.subDomain].extractUnit(d);
-
-						var htmlClass = "graph-rect" + parent.getHighlightClassName(d);
-
-						var value;
-
-						if (data.hasOwnProperty(domainUnit) && data[domainUnit].hasOwnProperty(subDomainUnit)) {
-							htmlClass += " " + parent.legend(data[domainUnit][subDomainUnit]);
-						} else if (parent.options.considerMissingDataAsZero) {
-							htmlClass += " " + parent.legend(0);
-						}
-
-						if (parent.options.onClick !== null) {
-							htmlClass += " hover_cursor";
-						}
-
-						return htmlClass;
-					})
-					.on("click", function(d) {
-						if (parent.options.onClick !== null) {
-							var subDomainUnit = parent._domainType[parent.options.subDomain].extractUnit(d);
-							return parent.onClick(
-								d,
-								(data[domainUnit].hasOwnProperty(subDomainUnit) || parent.options.considerMissingDataAsZero ? data[domainUnit][subDomainUnit] : null)
-							);
-						}
-					});
-
-				d3.select(this).selectAll(".graph-subdomain-group title")
-					.text(function(d) {
-						var subDomainUnit = parent._domainType[parent.options.subDomain].extractUnit(d);
-
-						if ((data.hasOwnProperty(domainUnit) && data[domainUnit].hasOwnProperty(subDomainUnit) && data[domainUnit][subDomainUnit] !== null) || parent.options.considerMissingDataAsZero){
-
-							if (data.hasOwnProperty(domainUnit) && data[domainUnit].hasOwnProperty(subDomainUnit)) {
-								value = data[domainUnit][subDomainUnit];
-							} else if (parent.options.considerMissingDataAsZero) {
-								value = 0;
-							}
-
-							return (parent.options.subDomainTitleFormat.filled).format({
-								count: parent.formatNumber(value),
-								name: parent.options.itemName[(value !== 1 ? 1 : 0)],
-								connector: parent._domainType[parent.options.subDomain].format.connector,
-								date: parent.formatDate(d, parent.options.subDomainDateFormat)
-							});
-						} else {
-							return (parent.options.subDomainTitleFormat.empty).format({
-								date: parent.formatDate(d, parent.options.subDomainDateFormat)
-							});
-						};
-					});
-
-
-				}
-			}
-		);
-		return true;
-	},
-
 	// =========================================================================//
 	// POSITIONNING																//
 	// =========================================================================//
 
 	positionSubDomainX: function(d) {
-		var index = this._domainType[this.options.subDomain].position.x(d);
+		var index = this._domainType[this.options.subDomain].position.x(new Date(d));
 		return index * this.options.cellSize + index * this.options.cellPadding;
 	},
 
 	positionSubDomainY: function(d) {
-		var index = this._domainType[this.options.subDomain].position.y(d);
+		var index = this._domainType[this.options.subDomain].position.y(new Date(d));
 		return index * this.options.cellSize + index * this.options.cellPadding;
 	},
 
 	/**
 	 * Return a classname if the specified date should be highlighted
 	 *
-	 * @param  Date d a date
+	 * @param  timestamp date Date of the current subDomain
 	 * @return String the highlight class
 	 */
 	getHighlightClassName: function(d)
 	{
+		d = new Date(d);
+
 		if (this.options.highlight.length > 0) {
 			for (var i in this.options.highlight) {
 				if (this.options.highlight[i] instanceof Date && this.dateIsEqual(this.options.highlight[i], d)) {
@@ -1468,6 +1486,7 @@ CalHeatMap.prototype = {
 		}
 	},
 
+
 	// =========================================================================//
 	// DOMAIN COMPUTATION														//
 	// =========================================================================//
@@ -1683,6 +1702,7 @@ CalHeatMap.prototype = {
 			case "hour"  : return this.getHourDomain(date, computeHourSubDomainSize(date, this.options.domain));
 			case "x_day" :
 			case "day"   : return this.getDayDomain(date, computeDaySubDomainSize(date, this.options.domain));
+			case "x_week":
 			case "week"  : return this.getWeekDomain(date, computeWeekSubDomainSize(date, this.options.domain));
 			case "x_month":
 			case "month" : return this.getMonthDomain(date, 12);
@@ -1690,11 +1710,11 @@ CalHeatMap.prototype = {
 	},
 
 	getNextDomain: function() {
-		return this.getDomain(this._domains[this._domains.length-1], 2).pop();
+		return this.getDomain(parseInt(this._domains.keys().sort().pop(), 10), 2).pop();
 	},
 
 	getPreviousDomain: function() {
-		return this.getDomain(this._domains[0], -1)[0];
+		return this.getDomain(parseInt(this._domains.keys().sort().shift(), 10), -1)[0];
 	},
 
 	/**
@@ -1731,46 +1751,60 @@ CalHeatMap.prototype = {
 	// =========================================================================//
 
 	/**
-	 * @todo Add check for empty data
+	 * Fetch and interpret data from the datasource
 	 *
-	 * @return bool True if the calendar was filled with the passed data
-	 */
-	fill: function(datas, domain) {
-		var response = this.display(this.parseDatas(datas), domain);
-		this.onComplete();
-		return response;
-	},
-
-	/**
-	 * Interpret the data property
+	 * @param string|object source
+	 * @param Date startDate
+	 * @param Date endDate
+	 * @param function callback
+	 * @param function|boolean afterLoad function used to convert the data into a json object. Use true to use the afterLoad callback
+	 * @param updateMode
 	 *
 	 * @return mixed
-	 * - True if no data to load
-	 * - False if data is loaded asynchornously
-	 * - json object
+	 * - True if there are no data to load
+	 * - False if data are loaded asynchronously
 	 */
-	getDatas: function(source, startDate, endDate, callback) {
-		var parent = this;
+	getDatas: function(source, startDate, endDate, callback, afterLoad, updateMode) {
+		var self = this;
+		if (arguments.length < 5) {
+			afterLoad = true;
+		}
+		if (arguments.length < 6) {
+			updateMode = this.APPEND_ON_UPDATE;
+		}
+		var _callback = function(data) {
+			if (afterLoad !== false) {
+				if (typeof afterLoad === "function") {
+					data = afterLoad(data);
+				} else if (typeof (self.options.afterLoadData) === "function") {
+					data = self.options.afterLoadData(data);
+				} else {
+					console.log("Provided callback for afterLoadData is not a function.");
+					return {};
+				}
+			}
+			self.parseDatas(data, updateMode);
+			callback();
+		};
 
 		switch(typeof source) {
 			case "string" :
 				if (source === "") {
-					this.onComplete();
+					_callback({});
 					return true;
 				} else {
-
 					switch(this.options.dataType) {
 						case "json" :
-							d3.json(this.parseURI(source, startDate, endDate), callback);
+							d3.json(this.parseURI(source, startDate, endDate), _callback);
 							break;
 						case "csv" :
-							d3.csv(this.parseURI(source, startDate, endDate), callback);
+							d3.csv(this.parseURI(source, startDate, endDate), _callback);
 							break;
 						case "tsv" :
-							d3.tsv(this.parseURI(source, startDate, endDate), callback);
+							d3.tsv(this.parseURI(source, startDate, endDate), _callback);
 							break;
 						case "text" :
-							d3.text(this.parseURI(source, startDate, endDate), "text/plain", callback);
+							d3.text(this.parseURI(source, startDate, endDate), "text/plain", _callback);
 							break;
 					}
 
@@ -1779,50 +1813,54 @@ CalHeatMap.prototype = {
 				break;
 			case "object" :
 				// @todo Check that it's a valid JSON object
-				callback(source);
+				_callback(source);
 		}
 
 		return true;
 	},
 
 	/**
-	 * Convert a JSON result into the expected format
+	 * Populate the calendar internal data
+	 *
+	 * @param object data
+	 * @param constant updateMode
 	 *
-	 * @param  {[type]} data [description]
-	 * @return {[type]}      [description]
+	 * @return void
 	 */
-	parseDatas: function(data) {
-		var stats = {};
+	parseDatas: function(data, updateMode) {
 
-		if (typeof (this.options.afterLoadData) === "function") {
-			data = this.options.afterLoadData(data);
-		} else {
-			console.log("Provided callback for afterLoadData is not a function.");
-			return {};
+		if (updateMode === this.RESET_ALL_ON_UPDATE) {
+			this._domains.forEach(function(key, value) {
+				value.forEach(function(element, index, array) {
+					array[index].v = null;
+				});
+			});
 		}
 
+		var domainKeys = this._domains.keys();
+		var subDomainStep = this._domains.get(domainKeys[0])[1].t - this._domains.get(domainKeys[0])[0].t;
+
 		for (var d in data) {
 			var date = new Date(d*1000);
 			var domainUnit = this.getDomain(date)[0].getTime();
 
-			// Don't record datas not relevant to the current domain
-			if (this._domains.indexOf(domainUnit) < 0) {
-				continue;
-			}
+			// Record only datas relevant to the current domain
+			if (this._domains.has(domainUnit)) {
+				var subDomainUnit = this._domainType[this.options.subDomain].extractUnit(date);
+				var subDomainsData = this._domains.get(domainUnit);
+				var index = Math.floor((subDomainUnit - domainUnit) / subDomainStep);
 
-			var subDomainUnit = this._domainType[this.options.subDomain].extractUnit(date);
-			if (typeof stats[domainUnit] === "undefined") {
-				stats[domainUnit] = {};
-			}
-
-			if (typeof stats[domainUnit][subDomainUnit] !== "undefined") {
-				stats[domainUnit][subDomainUnit] += data[d];
-			} else {
-				stats[domainUnit][subDomainUnit] = data[d];
+				if (updateMode === this.RESET_SINGLE_ON_UPDATE) {
+					subDomainsData[index].v = data[d];
+				} else {
+					if (!isNaN(subDomainsData[index].v)) {
+						subDomainsData[index].v += data[d];
+					} else {
+						subDomainsData[index].v = data[d];
+					}
+				}
 			}
 		}
-
-		return stats;
 	},
 
 	parseURI: function(str, startDate, endDate) {
@@ -1849,6 +1887,35 @@ CalHeatMap.prototype = {
 		return this.loadPreviousDomain();
 	},
 
+	/**
+	 * Update the calendar with new data
+	 *
+	 * @param  object|string		dataSource		The calendar's datasource, same type as this.options.data
+	 * @param  boolean|function		afterLoad		Whether to execute afterLoad() on the data. Pass directly a function
+	 * if you don't want to use the afterLoad() callback
+	 */
+	update: function(dataSource, afterLoad, updateMode) {
+		if (arguments.length < 2) {
+			afterLoad = true;
+		}
+		if (arguments.length < 3) {
+			updateMode = this.RESET_ALL_ON_UPDATE;
+		}
+
+		var domains = this._domains.keys().sort();
+		var self = this;
+		this.getDatas(
+			dataSource,
+			new Date(parseInt(domains[0], 10)),
+			this.getSubDomain(parseInt(domains[domains.length-1], 10)).pop(),
+			function() {
+				self.fill();
+			},
+			afterLoad,
+			updateMode
+		);
+	},
+
 	getSVG: function() {
 		var styles = {
 			".graph": {},
@@ -1949,37 +2016,43 @@ CalHeatMap.prototype = {
 };
 
 var DomainPosition = function() {
-	this.positions = [];
+	this.positions = d3.map();
 };
 
-DomainPosition.prototype.getPosition = function(i) {
-	return this.positions[i];
+DomainPosition.prototype.getPosition = function(d) {
+	return this.positions.get(d);
 };
 
-DomainPosition.prototype.getLast = function() {
-	return this.positions[this.positions.length-1];
+DomainPosition.prototype.getPositionFromIndex = function(i) {
+	var domains = this.positions.keys().sort();
+	return this.positions.get(domains[i]);
 };
 
-DomainPosition.prototype.pushPosition = function(dim) {
-	this.positions.push(dim);
+DomainPosition.prototype.getLast = function() {
+	var domains = this.positions.keys().sort();
+	return this.positions.get(domains[domains.length-1]);
 };
 
-DomainPosition.prototype.unshiftPosition = function(dim) {
-	this.positions.unshift(dim);
+DomainPosition.prototype.setPosition = function(d, dim) {
+	this.positions.set(d, dim);
 };
 
-DomainPosition.prototype.shiftRight = function(exitingDomainDim) {
-	for(var i in this.positions) {
-		this.positions[i] -= exitingDomainDim;
-	}
-	this.positions.shift();
+DomainPosition.prototype.shiftRightBy = function(exitingDomainDim) {
+	this.positions.forEach(function(key, value) {
+		this.set(key, value - exitingDomainDim);
+	});
+
+	var domains = this.positions.keys().sort();
+	this.positions.remove(domains[0]);
 };
 
-DomainPosition.prototype.shiftLeft = function(enteringDomainDim) {
-	for(var i in this.positions) {
-		this.positions[i] += enteringDomainDim;
-	}
-	this.positions.pop();
+DomainPosition.prototype.shiftLeftBy = function(enteringDomainDim) {
+	this.positions.forEach(function(key, value) {
+		this.set(key, value + enteringDomainDim);
+	});
+
+	var domains = this.positions.keys().sort();
+	this.positions.remove(domains[domains.length-1]);
 };
 
 
@@ -2023,7 +2096,7 @@ function mergeRecursive(obj1, obj2) {
  * AMD Loader
  */
 if (typeof define === "function" && define.amd) {
-	define(["d3"], function(d3) {
+	define(["d3"], function() {
 		return CalHeatMap;
 	});
 }