majomo/CHN.csv

## CHN.csv

          
            Place
            1991
            1996
            2001
            2006
            2011

            
              Newfoundland and Labrador
              204630
              263100
              206605
              273005
              220945

            
              Prince Edward Island
              550085
              606000
              620000
              600435
              494005

            
              Nova Scotia
              420070
              480105
              515900
              430760
              460285

            
              New Brunswick
              394005
              340735
              299090
              290360
              295065

            
              Quebec
              359985
              426655
              352350
              324590
              348485

            
              Ontario
              408035
              594250
              599660
              627530
              616935

            
              Manitoba
              505205
              550105
              453090
              460915
              434100

            
              Saskatchewan
              454010
              390685
              371600
              408350
              473500

            
              Alberta
              105780
              100775
              106285
              119055
              137485

            
              British Columbia
              182505
              228970
              223675
              221475
              247280

            
              Yukon
              150015
              190070
              100615
              188000
              188500

            
              Northwest Territories
              400540
              466005
              208005
              230090
              221005

            
              Nunavut
              
              
              274000
              287000
              300355

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></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;
			}

			path:hover {
				fill: blue;
			}

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

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

		</style>
	</head>
	<body>


		<script type="text/javascript">


			//Set up stack method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.core;
							})
							.order("reverse");


			//Width, height, padding
			var w = 1200;
			var h = 900;
			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left


			//Set up date format function (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(10)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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

			//Configure area generator
			var area = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.x));
				})
				.y0(function(d) {
					return yScale(d.y0);  //Updated
				})
				.y1(function(d) {
					return yScale(d.y0 + d.y);  //Updated
				});


			//Easy colors accessible via a 10-step ordinal scale
			var color = d3.scale.category10();


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


			//Load data
			d3.csv("https://gist.githubusercontent.com/majomo/fb2d2f92fcd9446fedde/raw/09b60aaa0ae1842885cad09affeeca9743b8ff56/CHN.csv", function(data) {


				//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] = {
						place: data[i].Place,
						core: []
					};

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

						//Default value, used in case no value is present
						var amount = null;

						// If value is not empty
						if (data[i][years[j]]) {
							amount = +data[i][years[j]];
						}

						//Add a new object to the emissions data array
						//for this country
						dataset[i].core.push({
							x: years[j],
							y: amount
						});

					}

				}

				//Stack the data!
				stack(dataset);

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


				//Now that the data is ready, we can check its
				//min and max values to set our scales' domains!
				xScale.domain([
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

				//Need to recalcluate the max value for yScale
				//differently, now that everything is stacked.

				//Loop once for each year, and get the total value
				//of CO2 for that year.
				var totals = [];

				for (i = 0; i < years.length; i++) {
					totals[i] = 0;
					for (j = 0; j < dataset.length; j++) {
						totals[i] += dataset[j].core[i].y;
					}
				}

				yScale.domain([ d3.max(totals), 0 ]);

				//Areas
				//
				//Now that we are creating multiple paths, we can use the
				//selectAll/data/enter/append pattern to generate as many
				//as needed.

				//Make a path for each country
				var paths = svg.selectAll("path")
					.data(dataset)
					.enter()
					.append("path")
					.attr("class", "area")
					.attr("d", function(d) {
						//Calculate path based on only d.emissions array,
						//not all of d (which would include the country name)
						return area(d.core);
					})
					.attr("stroke", "none")
					.attr("fill", function(d, i) {
						return color(i);
					});

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

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

			});


		</script>
	</body>
</html>
Place	1991	1996	2001	2006	2011
Newfoundland and Labrador	204630	263100	206605	273005	220945
Prince Edward Island	550085	606000	620000	600435	494005
Nova Scotia	420070	480105	515900	430760	460285
New Brunswick	394005	340735	299090	290360	295065
Quebec	359985	426655	352350	324590	348485
Ontario	408035	594250	599660	627530	616935
Manitoba	505205	550105	453090	460915	434100
Saskatchewan	454010	390685	371600	408350	473500
Alberta	105780	100775	106285	119055	137485
British Columbia	182505	228970	223675	221475	247280
Yukon	150015	190070	100615	188000	188500
Northwest Territories	400540	466005	208005	230090	221005
Nunavut			274000	287000	300355
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></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;
	}

	path:hover {
	fill: blue;
	}

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

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

	</style>
	</head>
	<body>



	<script type="text/javascript">



	//Set up stack method
	var stack = d3.layout.stack()
	.values(function(d) {
	return d.core;
	})
	.order("reverse");



	//Width, height, padding
	var w = 1200;
	var h = 900;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left



	//Set up date format function (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(10)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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

	//Configure area generator
	var area = d3.svg.area()
	.x(function(d) {
	return xScale(dateFormat.parse(d.x));
	})
	.y0(function(d) {
	return yScale(d.y0); //Updated
	})
	.y1(function(d) {
	return yScale(d.y0 + d.y); //Updated
	});



	//Easy colors accessible via a 10-step ordinal scale
	var color = d3.scale.category10();



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



	//Load data
	d3.csv("https://gist.githubusercontent.com/majomo/fb2d2f92fcd9446fedde/raw/09b60aaa0ae1842885cad09affeeca9743b8ff56/CHN.csv", function(data) {


	//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] = {
	place: data[i].Place,
	core: []
	};

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

	//Default value, used in case no value is present
	var amount = null;

	// If value is not empty
	if (data[i][years[j]]) {
	amount = +data[i][years[j]];
	}

	//Add a new object to the emissions data array
	//for this country
	dataset[i].core.push({
	x: years[j],
	y: amount
	});

	}

	}

	//Stack the data!
	stack(dataset);

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



	//Now that the data is ready, we can check its
	//min and max values to set our scales' domains!
	xScale.domain([
	d3.min(years, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(years, function(d) {
	return dateFormat.parse(d);
	})
	]);

	//Need to recalcluate the max value for yScale
	//differently, now that everything is stacked.

	//Loop once for each year, and get the total value
	//of CO2 for that year.
	var totals = [];

	for (i = 0; i < years.length; i++) {
	totals[i] = 0;
	for (j = 0; j < dataset.length; j++) {
	totals[i] += dataset[j].core[i].y;
	}
	}

	yScale.domain([ d3.max(totals), 0 ]);

	//Areas
	//
	//Now that we are creating multiple paths, we can use the
	//selectAll/data/enter/append pattern to generate as many
	//as needed.

	//Make a path for each country
	var paths = svg.selectAll("path")
	.data(dataset)
	.enter()
	.append("path")
	.attr("class", "area")
	.attr("d", function(d) {
	//Calculate path based on only d.emissions array,
	//not all of d (which would include the country name)
	return area(d.core);
	})
	.attr("stroke", "none")
	.attr("fill", function(d, i) {
	return color(i);
	});

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

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

	});



	</script>
	</body>
	</html>