BenHeubl · April 6, 2015 11:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Line Chart with Multiple Lines</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: #7f7c7c;
 				font-family: Helvetica, Arial, sans-serif;
 			}

 			h1 {
 				font-size: 24px;
 				margin: 5;
 				color: white;
 			}

 			p {
 				font-size: 12px;
 				margin: 15px 10 10 10;
 				color: white;
 				line-height: 200%;
 			}

 			svg {
 				background-color: #e4dac4;
 			}

 			circle:hover {
 				fill: orange;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 		</style>
 	</head>
 	<body>

 		<h1>2014 round population projections - This is the first round of GLA projections to incorporate migration flow data from the 2011 Census for Hackney, London.</h1>

 		<p>CThe GLA's 2014 round of projections is its first to fully incorporate the results of the 2011 Census, with underlying migration data updated using commissioned origin-destination tables.
 			<br>Because of the uncertainty about future migration, projections have been released based on both long- and short-term migration trends.</br>

 The long-term projection yields a lower total population and younger age structure for Greater London than those based on recent trends only.

 Source: <a href="http://data.london.gov.uk/dataset/2014-round-population-projections">Data.london.gov.uk</a>, 2014</p>

 		<script type="text/javascript">		


 			//Dimensions and padding
 			var w = 1000;
 			var h = 600;
 			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left



 			//Set up date formatting and years
 			var dateFormat = d3.time.format("%Y");



 			//Set up scales
 			var xScale = d3.time.scale()
 								.range([ padding[3], w - padding[1] - padding[3] ]);
 			
 			var yScale = d3.scale.linear()
 								.range([ padding[0], h - padding[2] ]);



 			//Configure axis generators
 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(15)
 							.tickFormat(function(d) {
 								return dateFormat(d);
 							});

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left");



 			//Configure line generator
 			var line = d3.svg.line()
 				.x(function(d) {
 					return xScale(dateFormat.parse(d.year));
 				})
 				.y(function(d) {
 					return yScale(+d.amount);
 				});



 			//Create the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			//Load data
 			d3.csv("populationProjectionshackney.csv", function(data) {

 				//Data is loaded in, but we need to restructure it.
 				//Remember, each line requires an array of x/y pairs;
 				//that is, an array of arrays, like so:
 				//
 				//	[ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
 				//
 				//We, however, are using 'year' as x and 'amount' as y.
 				//We also need to know which country belongs to each
 				//line, so we will build an array of objects that is
 				//structured like this:
 				/*

 					[
 						{
 							country: "Australia",
 							emissions: [
 										{ year: 1961, amount: 90589.568 },
 										{ year: 1962, amount: 94912.961 },
 										{ year: 1963, amount: 101029.517 },
 										…
 									   ]
 						},
 						{
 							country: "Bermuda",
 							emissions: [
 										{ year: 1961, amount: 176.016 },
 										{ year: 1962, amount: 157.681 },
 										{ year: 1963, amount: 150.347 },
 										…
 									   ]
 						},
 						…
 					 ]

 				*/
 				//Note that this is an array of objects. Each object
 				//contains two values, 'country' and 'emissions'.
 				//The 'emissions' value is itself an array, containing
 				//more objects, each one holding 'year' and 'amount' values.

 				//New array with all the years, for referencing later
 		
 				var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041"];

 				//Create a new, empty array to hold our restructured dataset
 				var dataset = [];

 				//Loop once for each row in data
 				for (var i = 0; i < data.length; i++) {

 					//Create new object with this country's name and empty array
 					dataset[i] = {
 						country: data[i].countryName,
 						emissions: []
 					};

 					//Loop through all the years
 					for (var j = 0; j < years.length; j++) {

 						// If value is not empty
 						if (data[i][years[j]]) {
 							//Add a new object to the emissions data array
 							//for this country
 							dataset[i].emissions.push({
 								year: years[j],
 								amount: data[i][years[j]]
 							});
 						}

 					}

 				}
 				
 				//Uncomment to log the original data to the console
 				// console.log(data);

 				//Uncomment to log the newly restructured dataset to the console
 				// console.log(dataset);



 				//Set scale domains
 				xScale.domain([ 
 					d3.min(years, function(d) {
 						return dateFormat.parse(d);
 					}),
 					d3.max(years, function(d) {
 						return dateFormat.parse(d);
 					})
 				]);

 				yScale.domain([ 
 					d3.max(dataset, function(d) {
 						return d3.max(d.emissions, function(d) {
 							return +d.amount;
 						});
 					}),
 					0
 				]);



 				//Make a group for each country
 				var groups = svg.selectAll("g")
 					.data(dataset)
 					.enter()
 					.append("g");

 				//Append a title with the country name (so we get easy tooltips)
 				groups.append("title")
 					.text(function(d) {
 						return d.country;
 					});

 				//Within each group, create a new line/path,
 				//binding just the emissions data to each one
 				groups.selectAll("path")
 					.data(function(d) {
 						return [ d.emissions ];
 					})
 					.enter()
 					.append("path")
 					.attr("class", "line")
 					.attr("d", line)
 					.attr("fill", "none")
 					.attr("stroke", "#bf413c")
 					.attr("stroke-width", 2);



 				//Axes
 				svg.append("g")
 					.attr("class", "x axis")
 					.attr("transform", "translate(0," + (h - padding[2]) + ")")
 					.call(xAxis);

 				svg.append("g")
 					.attr("class", "y axis")
 					.attr("transform", "translate(" + (padding[3]) + ",0)")
 					.call(yAxis);

 			});
 			//End USA data load function


 		</script>

 	</body>
 </html>
diff --git a/populationProjectionshackney.csv b/populationProjectionshackney.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Line Chart with Multiple Lines</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background-color: #7f7c7c;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 5;
	color: white;
	}

	p {
	font-size: 12px;
	margin: 15px 10 10 10;
	color: white;
	line-height: 200%;
	}

	svg {
	background-color: #e4dac4;
	}

	circle:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>2014 round population projections - This is the first round of GLA projections to incorporate migration flow data from the 2011 Census for Hackney, London.</h1>

	<p>CThe GLA's 2014 round of projections is its first to fully incorporate the results of the 2011 Census, with underlying migration data updated using commissioned origin-destination tables.
	<br>Because of the uncertainty about future migration, projections have been released based on both long- and short-term migration trends.</br>

	The long-term projection yields a lower total population and younger age structure for Greater London than those based on recent trends only.

	Source: <a href="http://data.london.gov.uk/dataset/2014-round-population-projections">Data.london.gov.uk</a>, 2014</p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 1000;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left



	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");



	//Set up scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);



	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load data
	d3.csv("populationProjectionshackney.csv", function(data) {

	//Data is loaded in, but we need to restructure it.
	//Remember, each line requires an array of x/y pairs;
	//that is, an array of arrays, like so:
	//
	// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
	//
	//We, however, are using 'year' as x and 'amount' as y.
	//We also need to know which country belongs to each
	//line, so we will build an array of objects that is
	//structured like this:
	/*

	[
	{
	country: "Australia",
	emissions: [
	{ year: 1961, amount: 90589.568 },
	{ year: 1962, amount: 94912.961 },
	{ year: 1963, amount: 101029.517 },
	…
	]
	},
	{
	country: "Bermuda",
	emissions: [
	{ year: 1961, amount: 176.016 },
	{ year: 1962, amount: 157.681 },
	{ year: 1963, amount: 150.347 },
	…
	]
	},
	…
	]

	*/
	//Note that this is an array of objects. Each object
	//contains two values, 'country' and 'emissions'.
	//The 'emissions' value is itself an array, containing
	//more objects, each one holding 'year' and 'amount' values.

	//New array with all the years, for referencing later

	var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041"];

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with this country's name and empty array
	dataset[i] = {
	country: data[i].countryName,
	emissions: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the emissions data array
	//for this country
	dataset[i].emissions.push({
	year: years[j],
	amount: data[i][years[j]]
	});
	}

	}

	}

	//Uncomment to log the original data to the console
	// console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	// console.log(dataset);



	//Set scale domains
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.emissions, function(d) {
	return +d.amount;
	});
	}),
	0
	]);



	//Make a group for each country
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");

	//Append a title with the country name (so we get easy tooltips)
	groups.append("title")
	.text(function(d) {
	return d.country;
	});

	//Within each group, create a new line/path,
	//binding just the emissions data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.emissions ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "#bf413c")
	.attr("stroke-width", 2);



	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);

	});
	//End USA data load function


	</script>

	</body>
	</html>
countryName	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014	2015	2016	2017	2018	2019	2020	2021	2022	2023	2024	2025	2026	2027	2028	2029	2030	2031	2032	2033	2034	2035	2036	2037	2038	2039	2040	2041
International Outflows	1917.9992233218	2639.9986210114	2115.0000147377	2328.0001420306	2349.0001868862	2480.9999257906	2142.9998874508	2937.9993411692	3687.9999360183	2899.9989690488	3096.9989921037	2837.9999914322	2881.2316618555	2891.4923066078	2902.6302932849	2912.6950319415	2921.436503045	2928.2342199791	2932.4106665982	2936.3385542261	2939.2851469793	2942.5773871684	2946.009836683	2950.7666507166	2955.6563097497	2962.5885306157	2971.1066528297	2981.989906262	2994.6715900182	3009.7930803493	3025.6102975481	3041.1521846802	3055.2518215955	3069.3945761815	3082.5249189329	3095.2261819662	3106.4800553245	3116.3397957713	3125.6653349206	3133.6341201623
International Inflows	6711.7221756578	10214.7597384751	10729.9052369297	10769.6201526821	4647.9999858886	4452.9999880344	5242.0000134409	4471.9999880493	4137.0000229925	4349.0000085086	4516.9999905229	4858.9999811351	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507	6258.5839910507
Domestic Outflows	17887.9958865643	19642.0011749268	19523.9966270924	18730.9980809689	18353.0009248257	18309.001304388	18369.0011835098	18789.0013279915	18702.0000994205	18276.0043222904	18739.475840807	19073.0961201191	20871.9707489014	20988.3787207603	21091.5358855724	21195.8754754066	21262.8916499615	21338.3155755997	21406.558868885	21456.7424154282	21506.7353868484	21550.0522518158	21588.7785987854	21638.4092512131	21678.5563073158	21715.6550650597	21764.4486145973	21831.1689381599	21897.4022369385	21977.4914870262	22071.9169249535	22170.3765997887	22269.7965154648	22380.7669706345	22485.2421102524	22596.1417789459	22694.3462848663	22785.7034964561	22868.1660385132	22943.9830117226
Domestic Inflows	13821.999240458	13703.9994090796	13111.9990324974	13779.0022255778	14158.0005484819	14890.0008791089	16459.000901401	18070.0009734035	18220.0030132532	17223.9969705939	18853.0352413058	18851.3396080136	16795.211384058	16851.7851938605	16881.3565123081	16882.4964844584	16875.6187454462	16852.4724809527	16823.1212285161	16781.1958864927	16729.045502007	16675.436644733	16619.9062317014	16577.7735001445	16565.6906929016	16592.8382800221	16649.1616804004	16738.4425922036	16854.299852252	16977.3423600793	17103.0074031353	17223.6323227286	17341.574968338	17448.8790507317	17542.6869251728	17621.6467401981	17668.6822221279	17710.1818752289	17744.7130360603	17773.9812819958
Net International	4793.7229523359	7574.7611174637	8614.905222192	8441.6200106515	2298.9997990024	1972.0000622438	3099.00012599	1534.0006468801	449.0000869742	1449.0010394598	1420.0009984191	2020.999989703	3377.3523291952	3367.0916844429	3355.9536977659	3345.8889591092	3337.1474880058	3330.3497710717	3326.1733244526	3322.2454368246	3319.2988440715	3316.0066038824	3312.5741543677	3307.8173403341	3302.927681301	3295.9954604351	3287.477338221	3276.5940847887	3263.9124010326	3248.7909107014	3232.9736935027	3217.4318063705	3203.3321694553	3189.1894148692	3176.0590721179	3163.3578090846	3152.1039357262	3142.2441952794	3132.9186561302	3124.9498708885