unamandita/index.html

## 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>

## maternal_mortality_americas_1990-2013.csv

          
            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
	<!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