nedgar · September 27, 2015 21:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

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

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

 text.heading {
 	font-size: 12pt;
 	text-anchor: middle;
 }

 .axis {
  shape-rendering: crispEdges;
 }

 .x.axis line, .x.axis path {
  fill: none;
  stroke: #ddd;
 }

 .y.axis line, .y.axis path {
  fill: none;
  stroke: #ddd;
 }

 .templine path:hover {
  stroke: orange;
 }

 .templine circle:hover {
  fill: orange;
 }

 </style>

 </head>

 <body>
 <h1>Temperature Anomaly at Ottawa Airport from 1939 to 2010</h1> 
 <h3>Showing annual average (mean) temperatures compared to baseline period: 1951 to 2000.
 </h3>
 <p>
 The grey line shows the difference between annual mean temperature and the overall baseline mean.
 <br/>
 The black line shows the 15 year mean (± 7 years, inclusive), with the pink area showing the corresponding standard deviation.

 <svg id="main"/>
 <h3>Some things to notice:</h3>
 <p>
 <ul>
 <li>There was an overall downward trend in the '50s and '60s, of about 0.6 °C.</li>
 <li>However, since the early '70s, temperatures have been on a fairly steady upward climb, of about 1.2 °C</li>
 <li>The most recent 15-year period, from 1996 to 2010, is about 0.8 °C warmer than the average over the latter half of the 20th century.
 <li>Variance between yearly temperatures was lower in the '60s through '80s (standard deviation of ~0.6 °C), but higher since the mid-'90s (std dev: 0.9 °C).
 <li>A good portion of this increased variance is likely due to the extreme high temps in '98 and '99, a period with a strong El Nino pattern.
 </ul>
 </p>
 <p>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>

 <script type="text/javascript">

 var baselineYears = [1951, 2000];

 var margin = { top: 10, right: 20, bottom: 25, left: 50 },
 	width = 700 - margin.left - margin.right, 
 	height = 400 - margin.top - margin.bottom;

 var tempFormat = d3.format(".2f");

 var x = d3.time.scale()
 	.range([0, width]);

 var y = d3.scale.linear()
 	.range([height, 0]);

 var xAxis = d3.svg.axis().scale(x).orient("bottom")
 	.ticks(8)
 	.outerTickSize(0);
 	// .tickFormat(d3.time.format("%b"));

 var yAxis = d3.svg.axis().scale(y).orient("left")
 	.ticks(4)
 	.innerTickSize(-width)
 	.outerTickSize(0)
 	.tickPadding(5)
 	.tickFormat(function(d) { return d + " °C"});

 function tooltip(d) {
 	return "Mean temp anomaly, {Y1} to {Y2}: {T} °C\nStandard deviation: {SD} °C"
 		.replace("{Y1}", d.yearRange[0])
 		.replace("{Y2}", d.yearRange[1])
 		.replace("{T}", tempFormat(d.temp))
 		.replace("{SD}", tempFormat(d.stdDev));
 }

 function groupBy(data, keyFunc) {
 	keyFunc = keyFunc || String;
 	var groups = {};
 	data.forEach(function(d) {
 		var key = keyFunc(d);
 		var list = groups[key] || (groups[key] = []);
 		list.push(d);
 	});
 	return groups;
 }

 var svg = d3.select("svg#main")
 	  .attr("width", width + margin.left + margin.right)
 	  .attr("height", height + margin.top + margin.bottom)
 	.append("g")
 	  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var temps;
 d3.csv("Ottawa-airport-climate.csv", function(data) {

 	temps = data;

 	var byYear = groupBy(temps, function(d) { return d.year });

 	var fullYears = Object.keys(byYear).filter(function(year) { return byYear[year].length == 12 });
 	var statsByYear = fullYears.map(function(year) { 
 		var yearTemps = byYear[year];
 		return {
 			year: +year,
 			date: new Date(+year, 0, 1),
 			meanTemp: d3.mean(yearTemps, function(d) { return +d.meanTemp }),
 			meanMinTemp: d3.mean(yearTemps, function(d) { return +d.meanMinTemp }),
 			meanMaxTemp: d3.mean(yearTemps, function(d) { return +d.meanMaxTemp })
 		}
 	});
 	console.log(statsByYear);

 	var baselineTemps = 
 		statsByYear.filter(function(d) { return +d.year >= baselineYears[0] && +d.year <= baselineYears[1] })
 			.map(function(d) { return +d.meanTemp });
 	var baselineTemp = d3.mean(baselineTemps);
 	var baselineVariance = d3.variance(baselineTemps);
 	console.log([baselineTemp, baselineVariance, Math.sqrt(baselineVariance)]);

 	var minTemp = d3.min(statsByYear, function(d) { return d.meanTemp }) - baselineTemp;
 	var maxTemp = d3.max(statsByYear, function(d) { return d.meanTemp }) - baselineTemp;
 	console.log([minTemp, maxTemp]);

 	var yearRange = d3.extent(fullYears, Number);
 	x.domain([new Date(yearRange[0]-1, 0, 1), new Date(yearRange[1]+1, 0, 1)]);
 	y.domain([minTemp - 0.2, maxTemp + 0.2]);

 	var smoothYears = 15;
 	var smoothYearInterval = [
 		Math.floor((smoothYears - 1) / 2), 
 		Math.ceil( (smoothYears - 1) / 2)
 	];
 	console.log([smoothYears, smoothYearInterval]);
 	var smoothedYearRange = d3.range(yearRange[0] + smoothYearInterval[0], yearRange[1] - smoothYearInterval[1] + 1);
 	var smoothedTempDiffs = smoothedYearRange.map(function(year) {
 		var r = {
 			date: new Date(year, 0, 1),
 			yearRange: [year - smoothYearInterval[0], year + smoothYearInterval[1]]
 		};
 		var toSmooth = statsByYear.filter(function(d) {
 			return d.year >= r.yearRange[0] && d.year <= r.yearRange[1];
 		});
 		r.tempDiffs = toSmooth.map(function(d) { return d.meanTemp - baselineTemp });
 		r.temp = d3.mean(r.tempDiffs);
 		r.variance = d3.variance(r.tempDiffs);
 		r.stdDev = Math.sqrt(r.variance);
 		return r;
 	});
 	console.log(smoothedTempDiffs);


 	// var meanTempDiffs = statsByYear.map(function(d) {
 	// 	return { date: d.date, temp: d.meanTemp - baselineTemp };
 	// });
 	// var meanMinTempDiffs = statsByYear.map(function(d) {
 	// 	return { date: d.date, temp: d.meanMinTemp - baselineTemp };
 	// });
 	// var meanMaxTempDiffs = statsByYear.map(function(d) {
 	// 	return { date: d.date, temp: d.meanMaxTemp - baselineTemp };
 	// });

 	var line = d3.svg.line()
 		.x(function(d) { return x(d.date) })
 		.y(function(d) { return y(d.temp) });
 	var area = d3.svg.area()
 		.x(function(d) { return x(d.date) })
 		.y0(function(d) { return y(d.temp - d.stdDev) })
 		.y1(function(d) { return y(d.temp + d.stdDev) });

 	// Area for std dev
 	var g = svg.append("g")
 		.attr("class", "stddev");
 	// g.append("title")
 	// 	.text("Standard deviation over 15 year window");
 	g.selectAll("path")
 		.data([smoothedTempDiffs])
 		.enter()
 		.append("path")
 		.attr("d", area)
 		// .attr("stroke-width", 1)
 		// .attr("stroke", "grey")
 		.attr("fill", d3.rgb("pink").brighter(0.4));

 	// Axes
 	svg.append("g")
 		.attr("transform", "translate(0," + height + ")")
 		.attr("class", "x axis")
 		.call(xAxis);
 	svg.append("g")
 		.attr("transform", "translate(0, 0)")
 		.attr("class", "y axis")
 		.call(yAxis);

 	// Mean temp
 	var tempDiffs = statsByYear.map(function(d) {
 		return { date: d.date, temp: d.meanTemp - baselineTemp };
 	});
 	g = svg.append("g")
 		.attr("class", "templine");
 	// g.append("title")
 	// 	.text("Annual mean temp compared to baseline period");
 	g.selectAll("path")
 		.data([tempDiffs])
 		.enter()
 		.append("path")
 		.attr("d", line)
 		.attr("stroke-width", 2)
 		.attr("stroke", "#aaa")
 		.attr("fill", "none");

 	// Smoothed temp
 	g = svg.append("g")
 		.attr("class", "templine smoothed");
 	// g.append("title")
 	// 	.text("Mean over 15 year window");
 	g.selectAll("path")
 		.data([smoothedTempDiffs])
 		.enter()
 		.append("path")
 		.attr("d", line)
 		.attr("stroke-width", 2)
 		.attr("stroke", "black")
 		.attr("fill", "none");
 	g.selectAll("circle")
 		.data(smoothedTempDiffs)
 		.enter()
 		.append("circle")
 		.attr("cx", function(d) { return x(d.date) })
 		.attr("cy", function(d) { return y(d.temp) })
 		.attr("r", 4)
 		.attr("fill", "black")
 		.attr("stroke", "none")
 		.append("title")
 			.text(tooltip);

 });
 </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>Temperature Changes at Ottawa</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>

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

	text.heading {
	font-size: 12pt;
	text-anchor: middle;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line, .x.axis path {
	fill: none;
	stroke: #ddd;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #ddd;
	}

	.templine path:hover {
	stroke: orange;
	}

	.templine circle:hover {
	fill: orange;
	}

	</style>

	</head>

	<body>
	<h1>Temperature Anomaly at Ottawa Airport from 1939 to 2010</h1>
	<h3>Showing annual average (mean) temperatures compared to baseline period: 1951 to 2000.
	</h3>
	<p>
	The grey line shows the difference between annual mean temperature and the overall baseline mean.
	<br/>
	The black line shows the 15 year mean (± 7 years, inclusive), with the pink area showing the corresponding standard deviation.

	<svg id="main"/>
	<h3>Some things to notice:</h3>
	<p>
	<ul>
	<li>There was an overall downward trend in the '50s and '60s, of about 0.6 °C.</li>
	<li>However, since the early '70s, temperatures have been on a fairly steady upward climb, of about 1.2 °C</li>
	<li>The most recent 15-year period, from 1996 to 2010, is about 0.8 °C warmer than the average over the latter half of the 20th century.
	<li>Variance between yearly temperatures was lower in the '60s through '80s (standard deviation of ~0.6 °C), but higher since the mid-'90s (std dev: 0.9 °C).
	<li>A good portion of this increased variance is likely due to the extreme high temps in '98 and '99, a period with a strong El Nino pattern.
	</ul>
	</p>
	<p>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>

	<script type="text/javascript">

	var baselineYears = [1951, 2000];

	var margin = { top: 10, right: 20, bottom: 25, left: 50 },
	width = 700 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var tempFormat = d3.format(".2f");

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis().scale(x).orient("bottom")
	.ticks(8)
	.outerTickSize(0);
	// .tickFormat(d3.time.format("%b"));

	var yAxis = d3.svg.axis().scale(y).orient("left")
	.ticks(4)
	.innerTickSize(-width)
	.outerTickSize(0)
	.tickPadding(5)
	.tickFormat(function(d) { return d + " °C"});

	function tooltip(d) {
	return "Mean temp anomaly, {Y1} to {Y2}: {T} °C\nStandard deviation: {SD} °C"
	.replace("{Y1}", d.yearRange[0])
	.replace("{Y2}", d.yearRange[1])
	.replace("{T}", tempFormat(d.temp))
	.replace("{SD}", tempFormat(d.stdDev));
	}

	function groupBy(data, keyFunc) {
	keyFunc = keyFunc \|\| String;
	var groups = {};
	data.forEach(function(d) {
	var key = keyFunc(d);
	var list = groups[key] \|\| (groups[key] = []);
	list.push(d);
	});
	return groups;
	}

	var svg = d3.select("svg#main")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var temps;
	d3.csv("Ottawa-airport-climate.csv", function(data) {

	temps = data;

	var byYear = groupBy(temps, function(d) { return d.year });

	var fullYears = Object.keys(byYear).filter(function(year) { return byYear[year].length == 12 });
	var statsByYear = fullYears.map(function(year) {
	var yearTemps = byYear[year];
	return {
	year: +year,
	date: new Date(+year, 0, 1),
	meanTemp: d3.mean(yearTemps, function(d) { return +d.meanTemp }),
	meanMinTemp: d3.mean(yearTemps, function(d) { return +d.meanMinTemp }),
	meanMaxTemp: d3.mean(yearTemps, function(d) { return +d.meanMaxTemp })
	}
	});
	console.log(statsByYear);

	var baselineTemps =
	statsByYear.filter(function(d) { return +d.year >= baselineYears[0] && +d.year <= baselineYears[1] })
	.map(function(d) { return +d.meanTemp });
	var baselineTemp = d3.mean(baselineTemps);
	var baselineVariance = d3.variance(baselineTemps);
	console.log([baselineTemp, baselineVariance, Math.sqrt(baselineVariance)]);

	var minTemp = d3.min(statsByYear, function(d) { return d.meanTemp }) - baselineTemp;
	var maxTemp = d3.max(statsByYear, function(d) { return d.meanTemp }) - baselineTemp;
	console.log([minTemp, maxTemp]);

	var yearRange = d3.extent(fullYears, Number);
	x.domain([new Date(yearRange[0]-1, 0, 1), new Date(yearRange[1]+1, 0, 1)]);
	y.domain([minTemp - 0.2, maxTemp + 0.2]);

	var smoothYears = 15;
	var smoothYearInterval = [
	Math.floor((smoothYears - 1) / 2),
	Math.ceil( (smoothYears - 1) / 2)
	];
	console.log([smoothYears, smoothYearInterval]);
	var smoothedYearRange = d3.range(yearRange[0] + smoothYearInterval[0], yearRange[1] - smoothYearInterval[1] + 1);
	var smoothedTempDiffs = smoothedYearRange.map(function(year) {
	var r = {
	date: new Date(year, 0, 1),
	yearRange: [year - smoothYearInterval[0], year + smoothYearInterval[1]]
	};
	var toSmooth = statsByYear.filter(function(d) {
	return d.year >= r.yearRange[0] && d.year <= r.yearRange[1];
	});
	r.tempDiffs = toSmooth.map(function(d) { return d.meanTemp - baselineTemp });
	r.temp = d3.mean(r.tempDiffs);
	r.variance = d3.variance(r.tempDiffs);
	r.stdDev = Math.sqrt(r.variance);
	return r;
	});
	console.log(smoothedTempDiffs);


	// var meanTempDiffs = statsByYear.map(function(d) {
	// return { date: d.date, temp: d.meanTemp - baselineTemp };
	// });
	// var meanMinTempDiffs = statsByYear.map(function(d) {
	// return { date: d.date, temp: d.meanMinTemp - baselineTemp };
	// });
	// var meanMaxTempDiffs = statsByYear.map(function(d) {
	// return { date: d.date, temp: d.meanMaxTemp - baselineTemp };
	// });

	var line = d3.svg.line()
	.x(function(d) { return x(d.date) })
	.y(function(d) { return y(d.temp) });
	var area = d3.svg.area()
	.x(function(d) { return x(d.date) })
	.y0(function(d) { return y(d.temp - d.stdDev) })
	.y1(function(d) { return y(d.temp + d.stdDev) });

	// Area for std dev
	var g = svg.append("g")
	.attr("class", "stddev");
	// g.append("title")
	// .text("Standard deviation over 15 year window");
	g.selectAll("path")
	.data([smoothedTempDiffs])
	.enter()
	.append("path")
	.attr("d", area)
	// .attr("stroke-width", 1)
	// .attr("stroke", "grey")
	.attr("fill", d3.rgb("pink").brighter(0.4));

	// Axes
	svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.attr("class", "x axis")
	.call(xAxis);
	svg.append("g")
	.attr("transform", "translate(0, 0)")
	.attr("class", "y axis")
	.call(yAxis);

	// Mean temp
	var tempDiffs = statsByYear.map(function(d) {
	return { date: d.date, temp: d.meanTemp - baselineTemp };
	});
	g = svg.append("g")
	.attr("class", "templine");
	// g.append("title")
	// .text("Annual mean temp compared to baseline period");
	g.selectAll("path")
	.data([tempDiffs])
	.enter()
	.append("path")
	.attr("d", line)
	.attr("stroke-width", 2)
	.attr("stroke", "#aaa")
	.attr("fill", "none");

	// Smoothed temp
	g = svg.append("g")
	.attr("class", "templine smoothed");
	// g.append("title")
	// .text("Mean over 15 year window");
	g.selectAll("path")
	.data([smoothedTempDiffs])
	.enter()
	.append("path")
	.attr("d", line)
	.attr("stroke-width", 2)
	.attr("stroke", "black")
	.attr("fill", "none");
	g.selectAll("circle")
	.data(smoothedTempDiffs)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return x(d.date) })
	.attr("cy", function(d) { return y(d.temp) })
	.attr("r", 4)
	.attr("fill", "black")
	.attr("stroke", "none")
	.append("title")
	.text(tooltip);

	});
	</script>
	</body>
	</html>