unamandita · November 6, 2015 19:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Stacked area chart</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;
 				font-weight: lighter;
 				margin-left: 60px;
 				margin-top: 20px;
 			}

 			p {
 				font-size: 14px;
 				margin-left: 60px;
 				margin-top: 10px;
 			}

 			svg {
 				background-color: white;
 			}

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

 		</style>
 	</head>
 	<body>


 		<h1>Maternal Mortality in the Americas, by Country/Territory</h1>

 		<p>Estimated number of maternal deaths per 100,000 births, 1990-2013 <br/>Source: <a href="http://apps.who.int/gho/data/node.main.15">WHO Data</a>, 2015</p>


 		<script type="text/javascript">		



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



 			//Width, height, padding
 			var w = 850;
 			var h = 800;
 			var padding = [ 0, 10, 50, 60 ];  //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(5)
 							.tickFormat(function(d) {
 								return dateFormat(d);
 							});

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

 			//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.ordinal()
 				.range(["#0099cc", "#66ffcc", "#cc6666", "#ffcc99", "#9999cc", "#ffff99", "#666699", "#ffcccc", "#339999", "#99ccff"]);



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



 			//Load data
 			d3.csv("maternal_mortality_americas_1990-2013.csv", function(data) {

 				//Uncomment to log the newly loaded data to the console
 				//console.log(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] ]
 				//
 				//Our x value will be the year, and y will be the amount
 				//of CO2.  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: [
 										{ x: "1961", y: 90589.568 },
 										{ x: "1962", y: 94912.961 },
 										{ x: "1963", y: 101029.517 },
 										…
 									   ]
 						},
 						{
 							country: "Bermuda",
 							emissions: [
 										{ x: "1961", y: 176.016 },
 										{ x: "1962", y: 157.681 },
 										{ x: "1963", y: 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 x and y values.
 				//
 				//The x (year) values have to be strings in this case,
 				//because the date format function expects a string
 				//to parse into a Date object.

 				//New array with all the years, for referencing later
 				var years = ["1990", "1995", "2000", "2005", "2010", "2013"];

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

 					//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].mortality.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].mortality[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.mortality);
 					})
 					.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.country;
 					});



 				//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>
diff --git a/maternal_mortality_americas_1990-2013.csv b/maternal_mortality_americas_1990-2013.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Stacked area chart</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;
	font-weight: lighter;
	margin-left: 60px;
	margin-top: 20px;
	}

	p {
	font-size: 14px;
	margin-left: 60px;
	margin-top: 10px;
	}

	svg {
	background-color: white;
	}

	path:hover {
	fill: black;
	}

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

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

	</style>
	</head>
	<body>


	<h1>Maternal Mortality in the Americas, by Country/Territory</h1>

	<p>Estimated number of maternal deaths per 100,000 births, 1990-2013 <br/>Source: <a href="http://apps.who.int/gho/data/node.main.15">WHO Data</a>, 2015</p>


	<script type="text/javascript">



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



	//Width, height, padding
	var w = 850;
	var h = 800;
	var padding = [ 0, 10, 50, 60 ]; //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(5)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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

	//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.ordinal()
	.range(["#0099cc", "#66ffcc", "#cc6666", "#ffcc99", "#9999cc", "#ffff99", "#666699", "#ffcccc", "#339999", "#99ccff"]);



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



	//Load data
	d3.csv("maternal_mortality_americas_1990-2013.csv", function(data) {

	//Uncomment to log the newly loaded data to the console
	//console.log(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] ]
	//
	//Our x value will be the year, and y will be the amount
	//of CO2. 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: [
	{ x: "1961", y: 90589.568 },
	{ x: "1962", y: 94912.961 },
	{ x: "1963", y: 101029.517 },
	…
	]
	},
	{
	country: "Bermuda",
	emissions: [
	{ x: "1961", y: 176.016 },
	{ x: "1962", y: 157.681 },
	{ x: "1963", y: 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 x and y values.
	//
	//The x (year) values have to be strings in this case,
	//because the date format function expects a string
	//to parse into a Date object.

	//New array with all the years, for referencing later
	var years = ["1990", "1995", "2000", "2005", "2010", "2013"];

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

	//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].mortality.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].mortality[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.mortality);
	})
	.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.country;
	});



	//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>
country	1990	1995	2000	2005	2010	2013
Argentina	71	60	63	70	76	69
Bahamas	43	44	44	40	38	37
Belize	75	35	110	79	60	45
Bolivia (Plurinational State of)	510	420	330	270	230	200
Brazil	120	100	85	73	68	69
Canada	6	7	7	11	13	11
Chile	55	40	29	26	24	22
Colombia	100	81	130	97	85	83
Costa Rica	38	45	44	46	33	38
Cuba	63	60	63	67	80	80
Dominican Republic	240	180	120	130	130	100
Ecuador	160	130	120	98	90	87
El Salvador	110	96	80	72	71	69
Grenada	34	33	29	25	23	23
Guatemala	270	220	160	140	140	140
Haiti	670	580	510	470	420	380
Honduras	290	200	150	130	120	120
Jamaica	98	89	88	85	82	80
Mexico	88	77	67	50	47	49
Micronesia (Federated States of)	170	140	130	120	100	96
Nicaragua	170	160	140	120	110	100
Panama	98	91	79	83	82	85
Paraguay	130	130	120	130	110	110
Peru	250	220	160	120	100	89
Saint Lucia	60	52	44	39	35	34
Saint Vincent and the Grenadines	48	72	75	55	47	45
Trinidad and Tobago	89	91	59	58	82	84
United States of America	12	11	13	17	27	28
Uruguay	42	34	35	32	23	14
Venezuela (Bolivarian Republic of)	93	98	91	94	110	110