nedgar · September 8, 2015 18:30
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
 <meta charset="utf-8">
 <title>Ottawa Airport Temperatures</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

 <style type="text/css">
 text {
 	font-family: helvetica, arial, sans-serif;
 	font-size: 9pt;
 }
 </style>

 </head>

 <body>
 <p>
 Ottawa climate data, monthly mean temperatures as recorded at the Ottawa Airport from Nov 1938 through July 2011.
 <br/>Source: <a href="http://climate.weather.gc.ca/climateData/monthlydata_e.html?timeframe=3&Prov=ON&StationID=4337">Environment Canada</a>
 <br/>Author: <a href="https://twitter.com/nedgar">Nick Edgar</a>
 </p>
 <br/>

 <script type="text/javascript">

 var barH = 4;
 var dx0 = barH*12;
 var yearH = barH * 15;
 var width = 1100, height = yearH * 16;
 var svg = d3.select("body").append("svg")
 	.attr("width", width)
 	.attr("height", height);

 var dateFormat = d3.time.format("%b %Y");
 function dateStr(d) {
 	return dateFormat(new Date(d.year, d.month-1, 1));
 }
 function tooltip(d) {
 	return "Month: " + dateStr(d)
 	   + "\nMean temp: " + d.meanTemp + " °C";
 }

 var temps;
 d3.csv("Ottawa-airport-climate.csv", function(data) {
 	temps = data;
 	var yearsExtent = d3.extent(temps, function(d) { return +d.year; });
 	var firstYear = yearsExtent[0], lastYear = yearsExtent[1];
 	console.log("Years: " + [firstYear, lastYear]);

 	function yPos(year, month) {
 		return (Math.trunc(year/5) - Math.trunc(firstYear/5))*yearH + (month-1)*barH;
 	}

 	function xPos(year) {
 		return (year%5)*220 + 30;
 	}

 	function span(d) {
 		var x = xPos(+d.year),
 			w = +d.meanTemp * barH;
 		if (w < 0) {
 			w = -w;
 			x -= w;
 		}
 		return {x: x, w: w};
 	}

 	function tempLineX(d) {
 		var s = span({year: d, meanTemp: 0}); 
 		return s.x + s.w + dx0;
 	}

 	svg.selectAll("rect")
 		.data(temps)
 		.enter()
 		.append("rect")
 			.attr("class", "bar")
 			.attr("x", function (d) { return span(d).x + dx0; })
 			.attr("y", function (d) { return yPos(+d.year, +d.month); })
 			.attr("width", function (d) { return span(d).w; })
 			.attr("height", barH)
 			.attr("fill", function (d) { return +d.meanTemp > 0 ? "rgb(255,50,50)" : "rgb(50,50,255)"; })
 			.append("title")
 				.text(tooltip);
 	svg.selectAll("text")
 		.data(d3.range(firstYear, lastYear+1))
 		.enter()
 		.append("text")
 			.attr("x", function (d) { return xPos(d); })
 			.attr("y", function(d) { return yPos(d, 7); })
 			.attr("dy", "0.3em")
 			.attr("text-anchor", "end")
 			.text(String);
 	svg.selectAll("line")
 		.data(d3.range(0, 5))
 		.enter()
 		.append("line")
 			.attr("x1", tempLineX)
 			.attr("y1", 0)
 			.attr("x2", tempLineX)
 			.attr("y2", height)
 			.attr("stroke", "grey")
 			.attr("stroke-width", 1)
 			.attr("stroke-dasharray", "5,5");
 	svg.append("text")
 		.attr("x", xPos(0) + dx0 + 5)
 		.attr("y", yPos(firstYear))
 		.attr("dy", "0.8em")
 		.text("0 °C");
 });
 </script>
 </body>
 </html>
diff --git a/Ottawa-airport-climate.csv b/Ottawa-airport-climate.csv
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Ottawa Airport Temperatures</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

	<style type="text/css">
	text {
	font-family: helvetica, arial, sans-serif;
	font-size: 9pt;
	}
	</style>

	</head>

	<body>
	<p>
	Ottawa climate data, monthly mean temperatures as recorded at the Ottawa Airport from Nov 1938 through July 2011.
	<br/>Source: <a href="http://climate.weather.gc.ca/climateData/monthlydata_e.html?timeframe=3&Prov=ON&StationID=4337">Environment Canada</a>
	<br/>Author: <a href="https://twitter.com/nedgar">Nick Edgar</a>
	</p>
	<br/>

	<script type="text/javascript">

	var barH = 4;
	var dx0 = barH*12;
	var yearH = barH * 15;
	var width = 1100, height = yearH * 16;
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var dateFormat = d3.time.format("%b %Y");
	function dateStr(d) {
	return dateFormat(new Date(d.year, d.month-1, 1));
	}
	function tooltip(d) {
	return "Month: " + dateStr(d)
	+ "\nMean temp: " + d.meanTemp + " °C";
	}

	var temps;
	d3.csv("Ottawa-airport-climate.csv", function(data) {
	temps = data;
	var yearsExtent = d3.extent(temps, function(d) { return +d.year; });
	var firstYear = yearsExtent[0], lastYear = yearsExtent[1];
	console.log("Years: " + [firstYear, lastYear]);

	function yPos(year, month) {
	return (Math.trunc(year/5) - Math.trunc(firstYear/5))yearH + (month-1)barH;
	}

	function xPos(year) {
	return (year%5)*220 + 30;
	}

	function span(d) {
	var x = xPos(+d.year),
	w = +d.meanTemp * barH;
	if (w < 0) {
	w = -w;
	x -= w;
	}
	return {x: x, w: w};
	}

	function tempLineX(d) {
	var s = span({year: d, meanTemp: 0});
	return s.x + s.w + dx0;
	}

	svg.selectAll("rect")
	.data(temps)
	.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function (d) { return span(d).x + dx0; })
	.attr("y", function (d) { return yPos(+d.year, +d.month); })
	.attr("width", function (d) { return span(d).w; })
	.attr("height", barH)
	.attr("fill", function (d) { return +d.meanTemp > 0 ? "rgb(255,50,50)" : "rgb(50,50,255)"; })
	.append("title")
	.text(tooltip);
	svg.selectAll("text")
	.data(d3.range(firstYear, lastYear+1))
	.enter()
	.append("text")
	.attr("x", function (d) { return xPos(d); })
	.attr("y", function(d) { return yPos(d, 7); })
	.attr("dy", "0.3em")
	.attr("text-anchor", "end")
	.text(String);
	svg.selectAll("line")
	.data(d3.range(0, 5))
	.enter()
	.append("line")
	.attr("x1", tempLineX)
	.attr("y1", 0)
	.attr("x2", tempLineX)
	.attr("y2", height)
	.attr("stroke", "grey")
	.attr("stroke-width", 1)
	.attr("stroke-dasharray", "5,5");
	svg.append("text")
	.attr("x", xPos(0) + dx0 + 5)
	.attr("y", yPos(firstYear))
	.attr("dy", "0.8em")
	.text("0 °C");
	});
	</script>
	</body>
	</html>