duanhuiran/Metdeaths_1990-2015.csv

## index.html
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>MMR_Matdeaths_LTR-trend-estimates</title>
		<style type="text/css">

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

			h1 {
				font-size: 36px;
				margin: 10px 0 0 50px;
			}

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

			.tip{
				font-size: 11px;
				margin: 10px 0 0 50px;
				fill:grey;
				opacity: 0.8;
			}

			svg {
				background-color:rgba(1,0,0,0.1);

			}

			path.highLight{
				fill: none;
				stroke: red;
				stroke-width: 10px;
				stroke-opacity: 1;
			}

			path.line {
				fill: none;
				stroke: grey;
				stroke-width: 3px;
				stroke-opacity: 0.5;
			}

			circle, path:hover {
				cursor: pointer;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				stroke-width: 1px;
			}

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

			text.linelabel {
				font-size: 9pt;
				fill: #555555;
			}

			text.highlabel {
				font-size: :12pt;
				fill: orange;
			}

			/*CSS about mouse event*/
			#focused {
				stroke: orange;
				stroke-width: 5px;
			}

			text.hidden {
				display: none;
			}

			text.bolder {
				font-weight: bolder;
			}

			.tooltip {
					position: absolute;
					z-index: 10;
			}

			.tooltip p {
					background-color: white;
					color: steelblue;
					border: steelblue 1px solid;
					padding: 2px;

			}

			.label {
                font-size: 9pt;
                fill: grey;
                text-anchor: end;
            }

		</style>
	</head>
	<body>

		<h1>Trends in Estimates of Maternal Mortality Ratio</h1>

		<p>Maternal Mortality Ratio (MMR; maternal deaths per 100,000 live births) from 1990 to 2015. </p>
		<p>As we can see from the chart, maternal mortality ratio shows a downward trend in the last 30 years, which proves that the Maternal medical conditions are getting better all over the world. <p/>
		<p>However, what we cannot ignore is that the differences between regions are very wide, especially the underdeveloped countries in Africa compared with the developed countries in the west.</p>
		<br>
		<p class="tip">Made by Duan Huiran.</p>
		<p class="tip">Source: <a href="https://data.unicef.org/resources/dataset/maternal-mortality-data/">UNICEF</a></p>
		<br>

		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.js"></script>
		<script type="text/javascript">

			var fullwidth = 800;
			var fullheight = 600;
			var margin = { top: 30, right: 200, bottom: 20, left: 70 };


			var width = fullwidth - margin.left - margin.right;
			var height = fullheight - margin.top - margin.bottom;

			var timeParse = d3.timeParse("%Y");
			var timeFormat = d3.timeFormat("%Y");

			var xScale = d3.scaleTime()
								.range([0, width]);

			var yScale = d3.scaleLinear()
								.range([0, height]);

			var xAxis = d3.axisBottom(xScale)
							.tickFormat(function(d) {
								return timeFormat(d);
							})
							.ticks(4);

			var yAxis = d3.axisLeft(yScale);

			var line = d3.line()
				.x(function(d) {
					return xScale(timeParse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);
				});


			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

			var radius = 3;
			var tooltip = d3.select("body")
                      .append("div")
                      .attr("class", "tooltip");


			d3.csv("Metdeaths_1990-2015.csv", function(data) {

				var years = d3.keys(data[0]).slice(0, 7-1);
				var dataset = [];

				data.forEach(function(d){

					var myEmissions = [];

					years.forEach(function(y){
						if (d[y]) {
							myEmissions.push({
								region: d.RegionsName,
								year: y,
								amount: + d[y]
							})
						}
					})

					dataset.push({
						region: d.RegionsName,
						emissions: myEmissions
					})
				})


				xScale.domain(
					d3.extent(years, function(d) {
						return timeParse(d);
					}));

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

				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g");


				groups.selectAll("path")
					.data(function(d) {
						return [ d.emissions ];
					})
					.enter()
					.append("path")
					.attr("class" , function(d){
						if (d.region === "World") {
							return "highLight";
						}
						else{
							return "line";
						}
					})
					.attr("d", line);

				svg.append("text")
                .attr("class", "label")
                .attr("dx","20")
                .attr("dy","-10")
                .attr("color","black")
                .style("z-index","99")
                .text("Deaths");

                svg.append("text")
                .attr("class", "label")
                .attr("dx","575")
                .attr("dy","567")
                .attr("color","black")
                .style("z-index","99")
                .text("Year");

//1. comment掉简陋的title

				/*groups.append("title")
					.text(function(d) {
						return d.country;
					});*/

//2. 在group上加label

				// 为什么在groups上面加？
				// 因为数据已经在groups里啦！

				groups.append("text")
					.attr("x", function(d) {
						if (d.emissions.length != 0) {
					  	var lastYear = d.emissions[d.emissions.length-1].year;
					  	return xScale(timeParse(lastYear));
					  }
					})
					.attr("y", function(d) {
						if (d.emissions.length != 0) {
					  	var lastAmount = d.emissions[d.emissions.length-1].amount;
					  	return yScale(lastAmount);
						}
					})
					.attr("dx", "3px")
					.attr("dy", "3px")
					.text(function(d) {
						if (d.emissions.length != 0) {
							var lastAmount = d.emissions[d.emissions.length-1].amount;
							if (+lastAmount == 216 || +lastAmount == 182 || +lastAmount == 546 || +lastAmount == 679 || +lastAmount == 25 || +lastAmount == 436 || +lastAmount == 110 || +lastAmount == 62) {
								return d.region;
							}

						}
					})
					.attr("class", function(d){
						if (d.region === "World"){
							return "highlabel";
						}
						else{
							return "linelabel";
						}
					});


//3. 在group上加mouseover

				groups.on("mouseover", mouseoverGroup)
					  .on("mouseout", mouseoutGroup)

//4. circles on line

				var circles = groups.selectAll("circle")
					.data(function(d) {
								return d.emissions;
					})
					.enter()
					.append("circle");

				circles.attr("cx", function(d) {
						return xScale(timeParse(d.year));
					})
					.attr("cy", function(d) {
						return yScale(d.amount);
					})
					.attr("r", radius)
					.attr("opacity", 0); // 线这么多，dot最好opacity 0

				circles
					.on("mouseover", mouseoverCircle)
					.on("mousemove", mousemoveCircle)
					.on("mouseout",	mouseoutCircle);

// axis here:
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);


			});

//3.2. mouseover on groups:

			function mouseoverGroup(d){
				// the "this" is the g parent node.  That means we can select it, and then select
				// the child nodes and style the]m as we want for the hover effect!
				d3.select(this).select("path").attr("id", "focused"); // overrides the class
				d3.select(this).select("text").classed("hidden", false);  // show it if "hidden"
				d3.select(this).select("text").classed("bolder", true);
			}

			function mouseoutGroup(d){
				d3.select(this).select("path").attr("id", null); // remove the focus style
				d3.select(this).select("text").classed("bolder", false); // remove the bolding on label
			}

//4.2. mouseover on circles:

			function mouseoverCircle(d) {

				d3.select(this)
					.transition()
					.style("fill", "red")
					.style("opacity", 0.6)
					.attr("r", radius * 1.5);

				// 给circle所在的line加highlight
				// var lineid = d3.select(this).attr("id");
				// d3.select("path#" + lineid).classed("focused", true).classed("unfocused", false);

				tooltip
					.style("display", null)
					.html(
						"<p>Region: " + d.region +
						"<br>Year: " + d.year +
						"<br>Deaths: " + d.amount + "</p>"
						);
			}

			function mousemoveCircle(d) {
				tooltip
					.style("top", (d3.event.pageY - 10) + "px" )
					.style("left", (d3.event.pageX + 10) + "px");
				}

			function mouseoutCircle(d) {
				d3.select(this)
					.transition()
					.style("opacity", 0)
					.attr("r", 3);

				d3.selectAll("path.line").classed("unfocused", true).classed("focused", false);

		    	tooltip.style("display", "none");
		    }


		</script>

	</body>
</html>

## Metdeaths_1990-2015.csv

          
            RegionsName
            1990
            1995
            2000
            2005
            2010
            2015

            
              Sub-Saharan Africa
              987
              928
              846
              717
              624
              546

            
              Eastern and Southern Africa
              926
              858
              755
              636
              509
              417

            
              West and Central Africa
              1070
              1020
              956
              814
              749
              679

            
              Middle East and North Africa
              221
              198
              170
              145
              122
              110

            
              South Asia
              558
              476
              388
              296
              228
              182

            
              East Asia and Pacific
              165
              134
              118
              98
              78
              62

            
              Latin America and Caribbean
              135
              117
              99
              88
              81
              68

            
              CEE/CIS
              69
              71
              56
              43
              29
              25

            
              Least developed countries
              903
              832
              732
              614
              519
              436

            
              World
              385
              369
              341
              288
              246
              216
	<!DOCTYPE html>
	<!-- Modification of an example by Scott Murray from Knight D3 course -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>MMR_Matdeaths_LTR-trend-estimates</title>
	<style type="text/css">

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

	h1 {
	font-size: 36px;
	margin: 10px 0 0 50px;
	}

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

	.tip{
	font-size: 11px;
	margin: 10px 0 0 50px;
	fill:grey;
	opacity: 0.8;
	}

	svg {
	background-color:rgba(1,0,0,0.1);

	}

	path.highLight{
	fill: none;
	stroke: red;
	stroke-width: 10px;
	stroke-opacity: 1;
	}

	path.line {
	fill: none;
	stroke: grey;
	stroke-width: 3px;
	stroke-opacity: 0.5;
	}

	circle, path:hover {
	cursor: pointer;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	}

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

	text.linelabel {
	font-size: 9pt;
	fill: #555555;
	}

	text.highlabel {
	font-size: :12pt;
	fill: orange;
	}

	/CSS about mouse event/
	#focused {
	stroke: orange;
	stroke-width: 5px;
	}

	text.hidden {
	display: none;
	}

	text.bolder {
	font-weight: bolder;
	}

	.tooltip {
	position: absolute;
	z-index: 10;
	}

	.tooltip p {
	background-color: white;
	color: steelblue;
	border: steelblue 1px solid;
	padding: 2px;

	}

	.label {
	font-size: 9pt;
	fill: grey;
	text-anchor: end;
	}

	</style>
	</head>
	<body>

	<h1>Trends in Estimates of Maternal Mortality Ratio</h1>

	<p>Maternal Mortality Ratio (MMR; maternal deaths per 100,000 live births) from 1990 to 2015. </p>
	<p>As we can see from the chart, maternal mortality ratio shows a downward trend in the last 30 years, which proves that the Maternal medical conditions are getting better all over the world. <p/>
	<p>However, what we cannot ignore is that the differences between regions are very wide, especially the underdeveloped countries in Africa compared with the developed countries in the west.</p>
	<br>
	<p class="tip">Made by Duan Huiran.</p>
	<p class="tip">Source: <a href="https://data.unicef.org/resources/dataset/maternal-mortality-data/">UNICEF</a></p>
	<br>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.js"></script>
	<script type="text/javascript">

	var fullwidth = 800;
	var fullheight = 600;
	var margin = { top: 30, right: 200, bottom: 20, left: 70 };


	var width = fullwidth - margin.left - margin.right;
	var height = fullheight - margin.top - margin.bottom;

	var timeParse = d3.timeParse("%Y");
	var timeFormat = d3.timeFormat("%Y");

	var xScale = d3.scaleTime()
	.range([0, width]);

	var yScale = d3.scaleLinear()
	.range([0, height]);

	var xAxis = d3.axisBottom(xScale)
	.tickFormat(function(d) {
	return timeFormat(d);
	})
	.ticks(4);

	var yAxis = d3.axisLeft(yScale);

	var line = d3.line()
	.x(function(d) {
	return xScale(timeParse(d.year));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});


	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var radius = 3;
	var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip");


	d3.csv("Metdeaths_1990-2015.csv", function(data) {

	var years = d3.keys(data[0]).slice(0, 7-1);
	var dataset = [];

	data.forEach(function(d){

	var myEmissions = [];

	years.forEach(function(y){
	if (d[y]) {
	myEmissions.push({
	region: d.RegionsName,
	year: y,
	amount: + d[y]
	})
	}
	})

	dataset.push({
	region: d.RegionsName,
	emissions: myEmissions
	})
	})


	xScale.domain(
	d3.extent(years, function(d) {
	return timeParse(d);
	}));

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

	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");


	groups.selectAll("path")
	.data(function(d) {
	return [ d.emissions ];
	})
	.enter()
	.append("path")
	.attr("class" , function(d){
	if (d.region === "World") {
	return "highLight";
	}
	else{
	return "line";
	}
	})
	.attr("d", line);

	svg.append("text")
	.attr("class", "label")
	.attr("dx","20")
	.attr("dy","-10")
	.attr("color","black")
	.style("z-index","99")
	.text("Deaths");

	svg.append("text")
	.attr("class", "label")
	.attr("dx","575")
	.attr("dy","567")
	.attr("color","black")
	.style("z-index","99")
	.text("Year");

	//1. comment掉简陋的title

	/*groups.append("title")
	.text(function(d) {
	return d.country;
	});*/

	//2. 在group上加label

	// 为什么在groups上面加？
	// 因为数据已经在groups里啦！

	groups.append("text")
	.attr("x", function(d) {
	if (d.emissions.length != 0) {
	var lastYear = d.emissions[d.emissions.length-1].year;
	return xScale(timeParse(lastYear));
	}
	})
	.attr("y", function(d) {
	if (d.emissions.length != 0) {
	var lastAmount = d.emissions[d.emissions.length-1].amount;
	return yScale(lastAmount);
	}
	})
	.attr("dx", "3px")
	.attr("dy", "3px")
	.text(function(d) {
	if (d.emissions.length != 0) {
	var lastAmount = d.emissions[d.emissions.length-1].amount;
	if (+lastAmount == 216 \|\| +lastAmount == 182 \|\| +lastAmount == 546 \|\| +lastAmount == 679 \|\| +lastAmount == 25 \|\| +lastAmount == 436 \|\| +lastAmount == 110 \|\| +lastAmount == 62) {
	return d.region;
	}

	}
	})
	.attr("class", function(d){
	if (d.region === "World"){
	return "highlabel";
	}
	else{
	return "linelabel";
	}
	});


	//3. 在group上加mouseover

	groups.on("mouseover", mouseoverGroup)
	.on("mouseout", mouseoutGroup)

	//4. circles on line

	var circles = groups.selectAll("circle")
	.data(function(d) {
	return d.emissions;
	})
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(timeParse(d.year));
	})
	.attr("cy", function(d) {
	return yScale(d.amount);
	})
	.attr("r", radius)
	.attr("opacity", 0); // 线这么多，dot最好opacity 0

	circles
	.on("mouseover", mouseoverCircle)
	.on("mousemove", mousemoveCircle)
	.on("mouseout", mouseoutCircle);

	// axis here:
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);


	});

	//3.2. mouseover on groups:

	function mouseoverGroup(d){
	// the "this" is the g parent node. That means we can select it, and then select
	// the child nodes and style the]m as we want for the hover effect!
	d3.select(this).select("path").attr("id", "focused"); // overrides the class
	d3.select(this).select("text").classed("hidden", false); // show it if "hidden"
	d3.select(this).select("text").classed("bolder", true);
	}

	function mouseoutGroup(d){
	d3.select(this).select("path").attr("id", null); // remove the focus style
	d3.select(this).select("text").classed("bolder", false); // remove the bolding on label
	}

	//4.2. mouseover on circles:

	function mouseoverCircle(d) {

	d3.select(this)
	.transition()
	.style("fill", "red")
	.style("opacity", 0.6)
	.attr("r", radius * 1.5);

	// 给circle所在的line加highlight
	// var lineid = d3.select(this).attr("id");
	// d3.select("path#" + lineid).classed("focused", true).classed("unfocused", false);

	tooltip
	.style("display", null)
	.html(
	"<p>Region: " + d.region +
	"<br>Year: " + d.year +
	"<br>Deaths: " + d.amount + "</p>"
	);
	}

	function mousemoveCircle(d) {
	tooltip
	.style("top", (d3.event.pageY - 10) + "px" )
	.style("left", (d3.event.pageX + 10) + "px");
	}

	function mouseoutCircle(d) {
	d3.select(this)
	.transition()
	.style("opacity", 0)
	.attr("r", 3);

	d3.selectAll("path.line").classed("unfocused", true).classed("focused", false);

	tooltip.style("display", "none");
	}



	</script>

	</body>
	</html>
RegionsName	1990	1995	2000	2005	2010	2015
Sub-Saharan Africa	987	928	846	717	624	546
Eastern and Southern Africa	926	858	755	636	509	417
West and Central Africa	1070	1020	956	814	749	679
Middle East and North Africa	221	198	170	145	122	110
South Asia	558	476	388	296	228	182
East Asia and Pacific	165	134	118	98	78	62
Latin America and Caribbean	135	117	99	88	81	68
CEE/CIS	69	71	56	43	29	25
Least developed countries	903	832	732	614	519	436
World	385	369	341	288	246	216