nedgar · September 22, 2015 02:32
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 {
 	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;
 }
 </style>

 </head>

 <body>
 <h1>Temperature Anomoly at Ottawa Airport from 1939 to 2010</h1> 
 <h3>Showing annual mean temperature difference compared to baseline period: 1950 to 2000.</h3>
 <br/>
 <svg id="main"/>

 <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 margin = { top: 10, right: 10, bottom: 25, left: 50 },
 	width = 700 - margin.left - margin.right, 
 	height = 400 - margin.top - margin.bottom;

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

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

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

 var xAxis = d3.svg.axis().scale(x).orient("bottom")
 	.ticks(7)
 	.outerTickSize(0)
 	.tickFormat(String);

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

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

 function tooltip(d) {
 	return "Difference from baseline for {YEAR}: {TEMP} °C"
 		.replace("{YEAR}", d[0])
 		.replace("{TEMP}", tempFormat(d[1]));
 }

 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 yearRange = d3.extent(fullYears, function(d) { return +d });
 	console.log(yearRange);

 	var meanTempsByYear = {};
 	fullYears.forEach(function(year) { 
 		meanTempsByYear[year] = d3.mean(byYear[year], function(d) { return +d.meanTemp });
 	});
 	console.log(meanTempsByYear);

 	var baselineTemp = d3.mean(d3.range(1950, 2001).map(function(year) { return meanTempsByYear[year] }));
 	console.log(baselineTemp);
 	
 	var tempDiffs = fullYears.map(function(year) { return meanTempsByYear[year] - baselineTemp });
 	
 	var tempRange = d3.extent(tempDiffs);
 	console.log(tempRange);

 	x.domain([yearRange[0]-1, yearRange[1]+1]);
 	y.domain([Math.floor(tempRange[0]*2)/2, Math.ceil(tempRange[1]*2)/2]);

 	// 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);

 	// Dots for each (year, temp)
 	var dots = svg.append("g").selectAll("circle");
 	dots
 		.data(d3.zip(fullYears, tempDiffs))
 		.enter()
 		.append("circle")
 			.attr("cx", function (d) { return x(+d[0]) })
 			.attr("cy", y(0))
 			.attr("r", 5)
 			.attr("fill", "#f8f8f8")
 			.attr("stroke", "none")
 		.append("title")
 			.text(tooltip);

 	// Enter, stage bottom
 	d3.selectAll("circle").transition()
 		.delay(function(d,i) { return i * 5})
 		.duration(500)
 		.attr("cy", function (d) { return y(d[1]) })
 		.attr("fill", function(d) { return d[1] >= 0 ? "#c00000" : "#4080c0" })

 });
 </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 {
	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;
	}
	</style>

	</head>

	<body>
	<h1>Temperature Anomoly at Ottawa Airport from 1939 to 2010</h1>
	<h3>Showing annual mean temperature difference compared to baseline period: 1950 to 2000.</h3>
	<br/>
	<svg id="main"/>

	<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 margin = { top: 10, right: 10, bottom: 25, left: 50 },
	width = 700 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

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

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

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

	var xAxis = d3.svg.axis().scale(x).orient("bottom")
	.ticks(7)
	.outerTickSize(0)
	.tickFormat(String);

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

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

	function tooltip(d) {
	return "Difference from baseline for {YEAR}: {TEMP} °C"
	.replace("{YEAR}", d[0])
	.replace("{TEMP}", tempFormat(d[1]));
	}

	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 yearRange = d3.extent(fullYears, function(d) { return +d });
	console.log(yearRange);

	var meanTempsByYear = {};
	fullYears.forEach(function(year) {
	meanTempsByYear[year] = d3.mean(byYear[year], function(d) { return +d.meanTemp });
	});
	console.log(meanTempsByYear);

	var baselineTemp = d3.mean(d3.range(1950, 2001).map(function(year) { return meanTempsByYear[year] }));
	console.log(baselineTemp);

	var tempDiffs = fullYears.map(function(year) { return meanTempsByYear[year] - baselineTemp });

	var tempRange = d3.extent(tempDiffs);
	console.log(tempRange);

	x.domain([yearRange[0]-1, yearRange[1]+1]);
	y.domain([Math.floor(tempRange[0]2)/2, Math.ceil(tempRange[1]2)/2]);

	// 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);

	// Dots for each (year, temp)
	var dots = svg.append("g").selectAll("circle");
	dots
	.data(d3.zip(fullYears, tempDiffs))
	.enter()
	.append("circle")
	.attr("cx", function (d) { return x(+d[0]) })
	.attr("cy", y(0))
	.attr("r", 5)
	.attr("fill", "#f8f8f8")
	.attr("stroke", "none")
	.append("title")
	.text(tooltip);

	// Enter, stage bottom
	d3.selectAll("circle").transition()
	.delay(function(d,i) { return i * 5})
	.duration(500)
	.attr("cy", function (d) { return y(d[1]) })
	.attr("fill", function(d) { return d[1] >= 0 ? "#c00000" : "#4080c0" })

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