majomo/CHN.csv

## CHN.csv

          
            Place
            indicator
            1991
            1996
            2001
            2006
            2011

            
              Canada
              Hldschn
              1269980
              1567180
              1485340
              1494395
              1552145

            
              Newfoundland and Labrador
              Hldschn
              24630
              26310
              26605
              27305
              22945

            
              Prince Edward Island
              Hldschn
              5585
              6060
              6200
              6435
              4945

            
              Nova Scotia
              Hldschn
              42070
              48105
              51590
              43760
              46285

            
              New Brunswick
              Hldschn
              39405
              34735
              29990
              29360
              29565

            
              Quebec
              Hldschn
              359985
              426655
              352350
              324590
              348485

            
              Ontario
              Hldschn
              408035
              594250
              599660
              627530
              616935

            
              Manitoba
              Hldschn
              50525
              55015
              45390
              46915
              43410

            
              Saskatchewan
              Hldschn
              45410
              39685
              37160
              40835
              47350

            
              Alberta
              Hldschn
              105780
              100775
              106285
              119055
              137485

            
              British Columbia
              Hldschn
              182505
              228970
              223675
              221475
              247280

            
              Yukon
              Hldschn
              1515
              1970
              1615
              1880
              1885

            
              Northwest Territories
              Hldschn
              4540
              4665
              2085
              2390
              2215

            
              Nunavut1
              Hldschn
              
              
              2740
              2870
              3355

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Core Housing Need - Chart with Multiple Lines</title>
	 <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
    <style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			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>Core Housing Need in Canada</h1>

		<p>Core Housing Need by Census Year in Canada and Provinces. Source: <a href="https://www.cmhc-schl.gc.ca/observer/">Canadian Housing Observer</a>, 2014</p>

		<script type="text/javascript">


			//Dimensions and padding
			var w = 700;
			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("CHN.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 = ["1991", "1996", "2001", "2006", "2011"];

				//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].Place,
						Hldschn: []
					};

					//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 Hldschn data array
							//for this country
							dataset[i].Hldschn.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.Hldschn, function(d) {
							return +d.amount;
						});
					}),
					0
				]);


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

					.classed("highlight", function(d) {

						if 	(d.Place == "Canada" ) {
							return true;
						} else {
							return false;
						}
					});

				//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.Hldschn ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "green")
					.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 Canada data load function


		</script>

	</body>
</html>
Place	indicator	1991	1996	2001	2006	2011
Canada	Hldschn	1269980	1567180	1485340	1494395	1552145
Newfoundland and Labrador	Hldschn	24630	26310	26605	27305	22945
Prince Edward Island	Hldschn	5585	6060	6200	6435	4945
Nova Scotia	Hldschn	42070	48105	51590	43760	46285
New Brunswick	Hldschn	39405	34735	29990	29360	29565
Quebec	Hldschn	359985	426655	352350	324590	348485
Ontario	Hldschn	408035	594250	599660	627530	616935
Manitoba	Hldschn	50525	55015	45390	46915	43410
Saskatchewan	Hldschn	45410	39685	37160	40835	47350
Alberta	Hldschn	105780	100775	106285	119055	137485
British Columbia	Hldschn	182505	228970	223675	221475	247280
Yukon	Hldschn	1515	1970	1615	1880	1885
Northwest Territories	Hldschn	4540	4665	2085	2390	2215
Nunavut1	Hldschn			2740	2870	3355
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Core Housing Need - Chart with Multiple Lines</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	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>Core Housing Need in Canada</h1>

	<p>Core Housing Need by Census Year in Canada and Provinces. Source: <a href="https://www.cmhc-schl.gc.ca/observer/">Canadian Housing Observer</a>, 2014</p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	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("CHN.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 = ["1991", "1996", "2001", "2006", "2011"];

	//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].Place,
	Hldschn: []
	};

	//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 Hldschn data array
	//for this country
	dataset[i].Hldschn.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.Hldschn, function(d) {
	return +d.amount;
	});
	}),
	0
	]);



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

	.classed("highlight", function(d) {

	if (d.Place == "Canada" ) {
	return true;
	} else {
	return false;
	}
	});

	//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.Hldschn ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "green")
	.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 Canada data load function


	</script>

	</body>
	</html>