A more flexible year axis

index.html

@@ -234,23 +234,35 @@ <h1 id="title">Life</h1>
 			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px"><div class="time" style="width: ' + width.toFixed(2) + 'px"></div><b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;</div>';
 			return '';
 		},
-		render: function(title, data){
-			document.title = title;
-			life.$title.innerHTML = title;
-
-			var firstYear = life.firstYear = data[0].time.startYear;
-			var nowYear = new Date().getFullYear();
+		renderYears: function(firstYear, lastYear){
 			var dayLength = life.yearLength/12/30;
-
 			var html = '';
 			var days = 0;
-
-			for (var y=firstYear, age = 0; y<=nowYear+1; y++, age++){
+			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
 				html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">' +
 					y + ' (' + age + ')' +
 					'</section>';
 				days += (y % 4 == 0) ? 366 : 365;
 			}
+			return html;
+		},
+		render: function(title, data){
+			document.title = title;
+			life.$title.innerHTML = title;
+
+			// Get the first and last year for the year axis
+			var firstYear = new Date().getFullYear();
+			var lastYear = firstYear;
+			data.forEach(function(d){
+				var time = d.time;
+				var startYear = time.startYear;
+				var endYear = time.endYear;
+				if (startYear && startYear < firstYear) firstYear = startYear;
+				if (endYear && endYear > lastYear) lastYear = endYear;
+			});
+			life.firstYear = firstYear;
+
+			html = life.renderYears(firstYear, lastYear);
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});