jowang0319/Average of Infant mortality rate.csv

## Average of Infant mortality rate.csv

          
            Region
            year1990
            1991
            1992
            1993
            1994
            1995
            1996
            1997
            1998
            1999
            2000
            2001
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012
            2013
            2014
            year2015

            
              Africa
              106.6
              106
              105.3
              104.6
              103.8
              102.8
              101.4
              99.9
              98.1
              96
              93.7
              91
              88.1
              85
              81.9
              78.8
              75.8
              72.8
              69.9
              67.1
              64.7
              62.4
              60.3
              58.5
              56.9
              55.4

            
              Americas
              33.8
              32.4
              31.1
              29.8
              28.5
              27.2
              26.1
              24.9
              23.9
              22.7
              21.6
              20.5
              19.4
              18.3
              17.5
              16.6
              15.9
              15.4
              14.9
              14.5
              14.6
              13.7
              13.4
              13.1
              12.8
              12.5

            
              Eastern Mediterranean
              74.3
              72.7
              71.3
              70
              68.7
              67.3
              65.9
              64.4
              62.8
              61.2
              59.7
              58.2
              56.7
              55.3
              53.9
              52.6
              51.5
              50.4
              49.3
              48.2
              47.1
              45.7
              44.3
              42.9
              41.6
              40.5

            
              Europe
              25.9
              25.4
              24.9
              24.3
              23.5
              22.7
              21.9
              21
              20.2
              19.4
              18.5
              17.7
              16.7
              15.9
              15
              14.3
              13.6
              13
              12.4
              11.9
              11.5
              11.1
              10.8
              10.5
              10.2
              9.8

            
              Global
              62.8
              62.1
              61.6
              61.1
              60.6
              60
              59
              57.8
              56.4
              54.8
              53.1
              51.4
              49.5
              47.7
              46
              44.3
              42.8
              41.4
              40.1
              38.7
              37.5
              36.2
              34.9
              33.7
              32.6
              31.7

            
              South-East Asia
              83.6
              81.2
              78.9
              76.6
              74.4
              72.2
              70.1
              67.9
              65.8
              63.6
              61.4
              59.2
              57
              55
              53.1
              50.9
              49.1
              47.2
              45.6
              43.7
              41.9
              40.1
              38.4
              36.7
              35.2
              34

            
              Western Pacific
              40.2
              39.6
              38.7
              37.3
              35.7
              34.2
              32.9
              31.8
              30.8
              29.6
              28.4
              26.9
              25.3
              23.7
              22.1
              20.6
              19.4
              18.2
              17
              16.1
              15.1
              14.3
              13.4
              12.6
              11.8
              11.3

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Dot Plot</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			body {
				background-color: #ddddff;
				font-family: sans-serif;
				margin-left:200px;
			}

			h3 {
				margin: auto;
				width: 60%;

			}

			p {
				margin-top: 10px;
				margin-left: 430px;
				font-size: 11pt;
				color: gray;
			}

			div.y2015 {
				color: #6699FF;
				display: inline;
			}
			div.y1990 {
				color: orange;
				display: inline;
			}

			svg {
				background-color: white;
			}

			circle {
				stroke-width: 1;
			}

			circle.y2015 {
				fill: #6699FF;
			}

			circle.y1990 {
				fill: orange;
			}

			circle:hover {
				stroke-width: 3;
				stroke: white;
			}

			line.grid {
				stroke: #eee;
			}

			line.between {
				stroke: black;
			}

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

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

			.xlabel {
				font-famile: sans-serif;
				font-size: 11px;
				color: gray;
			}

		</style>
	</head>
	<body>

		<h3>Under Five Infant Mortality Rate by World Region, <div class="y1990">1990</div> versus <div class="y2015">2015</div></h3>
		<p>Source: WHO/UNICEF data, 2015.

		<script type="text/javascript">

			var fullwidth = 1000,
				fullheight = 500;

			var margin = {top: 20, right: 25, bottom: 20, left: 150};

			var width = 1000 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;

			var widthScale = d3.scale.linear()
								.range([ 0, width]);

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ margin.top, height], 0.2);

			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left")
							.innerTickSize([0]);

			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullwidth)
						.attr("height", fullheight);


			d3.csv("Average of Infant mortality rate.csv", function(error, data) {

				if (error) {
					console.log("error reading file");
				}

				data.sort(function(a, b) {
					return d3.descending(+a.year2015, +b.year2015);
				});


				widthScale.domain([0, 110]);


				heightScale.domain(data.map(function(d) { return d.Region; } ));


				var linesGrid = svg.selectAll("lines.grid")
					.data(data)
					.enter()
					.append("line");

				linesGrid.attr("class", "grid")
					.attr("x1", margin.left)
					.attr("y1", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					})
					.attr("x2", function(d) {
						return margin.left + widthScale(+d.year2015);

					})
					.attr("y2", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					});


				var linesBetween = svg.selectAll("lines.between")
					.data(data)
					.enter()
					.append("line");

				linesBetween.attr("class", "between")
					.attr("x1", function(d) {
						return margin.left + widthScale(+d.year1990);
					})
					.attr("y1", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					})
					.attr("x2", function(d) {
						return margin.left + widthScale(d.year2015);
					})
					.attr("y2", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					})
					.attr("stroke-dasharray", "5,5")
					.attr("stroke-width", function(d, i) {
						if (d.Region === "Global") {
							return "1";
						} else {
							return "0.5";
						}
					});


				// Make the dots for 1990

				var dots1990 = svg.selectAll("circle.y1990")
						.data(data)
						.enter()
						.append("circle");

				dots1990
					.attr("class", "y1990")
					.attr("cx", function(d) {
						return margin.left + widthScale(+d.year1990);
					})
					.attr("r", heightScale.rangeBand()/3)
					.attr("cy", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					})
					.style("stroke", function(d){
						if (d.Region === "Global") {
							return "black";
						}
					})
					.style("fill", function(d){
						if (d.Region === "Global") {
							return "darkorange";
						}
					})
					.append("title")
					.text(function(d) {
						return d.Region + " in 1990: " + d.year1990 + "‰";
					});

				// Make the dots for 2015

				var dots2015 = svg.selectAll("circle.y2015")
						.data(data)
						.enter()
						.append("circle");

				dots2015
					.attr("class", "y2015")
					.attr("cx", function(d) {
						return margin.left + widthScale(+d.year2015);
					})
					.attr("r", heightScale.rangeBand()/3)
					.attr("cy", function(d) {
						return heightScale(d.Region) + heightScale.rangeBand()/2;
					})
					.style("stroke", function(d){
						if (d.Region === "Global") {
							return "Global";
						}
					})
					.style("fill", function(d){
						if (d.Region === "Global") {
							return "#476BB2";
						}
					})
					.append("title")
					.text(function(d) {
						return d.Region + " in 2015: " + d.year2015 + "‰";
					});

					// add the axes

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + margin.left + "," + height + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + margin.left + ",0)")
					.call(yAxis);

				svg.append("text")
					.attr("class", "xlabel")
        	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
        				(height + margin.bottom) + ")")
        	.style("text-anchor", "middle")
        	.attr("dy", "12")
        	.text("Percent(‰)");

       	// Style one of the Y labels bold:

        // a hack that works if you can unravel the selections - to style "The World" bold in the axis label, which is the 8th element:
        var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array
        d3.select(allYAxisLabels[7]).style("font-weight", "bold");
        	// You could also use tick formatting to get a % sign on each axis tick

			});

		</script>

	</body>
</html>
Region	year1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014	year2015
Africa	106.6	106	105.3	104.6	103.8	102.8	101.4	99.9	98.1	96	93.7	91	88.1	85	81.9	78.8	75.8	72.8	69.9	67.1	64.7	62.4	60.3	58.5	56.9	55.4
Americas	33.8	32.4	31.1	29.8	28.5	27.2	26.1	24.9	23.9	22.7	21.6	20.5	19.4	18.3	17.5	16.6	15.9	15.4	14.9	14.5	14.6	13.7	13.4	13.1	12.8	12.5
Eastern Mediterranean	74.3	72.7	71.3	70	68.7	67.3	65.9	64.4	62.8	61.2	59.7	58.2	56.7	55.3	53.9	52.6	51.5	50.4	49.3	48.2	47.1	45.7	44.3	42.9	41.6	40.5
Europe	25.9	25.4	24.9	24.3	23.5	22.7	21.9	21	20.2	19.4	18.5	17.7	16.7	15.9	15	14.3	13.6	13	12.4	11.9	11.5	11.1	10.8	10.5	10.2	9.8
Global	62.8	62.1	61.6	61.1	60.6	60	59	57.8	56.4	54.8	53.1	51.4	49.5	47.7	46	44.3	42.8	41.4	40.1	38.7	37.5	36.2	34.9	33.7	32.6	31.7
South-East Asia	83.6	81.2	78.9	76.6	74.4	72.2	70.1	67.9	65.8	63.6	61.4	59.2	57	55	53.1	50.9	49.1	47.2	45.6	43.7	41.9	40.1	38.4	36.7	35.2	34
Western Pacific	40.2	39.6	38.7	37.3	35.7	34.2	32.9	31.8	30.8	29.6	28.4	26.9	25.3	23.7	22.1	20.6	19.4	18.2	17	16.1	15.1	14.3	13.4	12.6	11.8	11.3
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Dot Plot</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	background-color: #ddddff;
	font-family: sans-serif;
	margin-left:200px;
	}

	h3 {
	margin: auto;
	width: 60%;

	}

	p {
	margin-top: 10px;
	margin-left: 430px;
	font-size: 11pt;
	color: gray;
	}

	div.y2015 {
	color: #6699FF;
	display: inline;
	}
	div.y1990 {
	color: orange;
	display: inline;
	}

	svg {
	background-color: white;
	}

	circle {
	stroke-width: 1;
	}

	circle.y2015 {
	fill: #6699FF;
	}

	circle.y1990 {
	fill: orange;
	}

	circle:hover {
	stroke-width: 3;
	stroke: white;
	}

	line.grid {
	stroke: #eee;
	}

	line.between {
	stroke: black;
	}

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

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

	.xlabel {
	font-famile: sans-serif;
	font-size: 11px;
	color: gray;
	}

	</style>
	</head>
	<body>

	<h3>Under Five Infant Mortality Rate by World Region, <div class="y1990">1990</div> versus <div class="y2015">2015</div></h3>
	<p>Source: WHO/UNICEF data, 2015.

	<script type="text/javascript">

	var fullwidth = 1000,
	fullheight = 500;

	var margin = {top: 20, right: 25, bottom: 20, left: 150};

	var width = 1000 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var widthScale = d3.scale.linear()
	.range([ 0, width]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ margin.top, height], 0.2);

	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left")
	.innerTickSize([0]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight);


	d3.csv("Average of Infant mortality rate.csv", function(error, data) {

	if (error) {
	console.log("error reading file");
	}

	data.sort(function(a, b) {
	return d3.descending(+a.year2015, +b.year2015);
	});


	widthScale.domain([0, 110]);


	heightScale.domain(data.map(function(d) { return d.Region; } ));


	var linesGrid = svg.selectAll("lines.grid")
	.data(data)
	.enter()
	.append("line");

	linesGrid.attr("class", "grid")
	.attr("x1", margin.left)
	.attr("y1", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	})
	.attr("x2", function(d) {
	return margin.left + widthScale(+d.year2015);

	})
	.attr("y2", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	});


	var linesBetween = svg.selectAll("lines.between")
	.data(data)
	.enter()
	.append("line");

	linesBetween.attr("class", "between")
	.attr("x1", function(d) {
	return margin.left + widthScale(+d.year1990);
	})
	.attr("y1", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	})
	.attr("x2", function(d) {
	return margin.left + widthScale(d.year2015);
	})
	.attr("y2", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	})
	.attr("stroke-dasharray", "5,5")
	.attr("stroke-width", function(d, i) {
	if (d.Region === "Global") {
	return "1";
	} else {
	return "0.5";
	}
	});


	// Make the dots for 1990

	var dots1990 = svg.selectAll("circle.y1990")
	.data(data)
	.enter()
	.append("circle");

	dots1990
	.attr("class", "y1990")
	.attr("cx", function(d) {
	return margin.left + widthScale(+d.year1990);
	})
	.attr("r", heightScale.rangeBand()/3)
	.attr("cy", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	})
	.style("stroke", function(d){
	if (d.Region === "Global") {
	return "black";
	}
	})
	.style("fill", function(d){
	if (d.Region === "Global") {
	return "darkorange";
	}
	})
	.append("title")
	.text(function(d) {
	return d.Region + " in 1990: " + d.year1990 + "‰";
	});

	// Make the dots for 2015

	var dots2015 = svg.selectAll("circle.y2015")
	.data(data)
	.enter()
	.append("circle");

	dots2015
	.attr("class", "y2015")
	.attr("cx", function(d) {
	return margin.left + widthScale(+d.year2015);
	})
	.attr("r", heightScale.rangeBand()/3)
	.attr("cy", function(d) {
	return heightScale(d.Region) + heightScale.rangeBand()/2;
	})
	.style("stroke", function(d){
	if (d.Region === "Global") {
	return "Global";
	}
	})
	.style("fill", function(d){
	if (d.Region === "Global") {
	return "#476BB2";
	}
	})
	.append("title")
	.text(function(d) {
	return d.Region + " in 2015: " + d.year2015 + "‰";
	});

	// add the axes

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + margin.left + "," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin.left + ",0)")
	.call(yAxis);

	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
	(height + margin.bottom) + ")")
	.style("text-anchor", "middle")
	.attr("dy", "12")
	.text("Percent(‰)");

	// Style one of the Y labels bold:

	// a hack that works if you can unravel the selections - to style "The World" bold in the axis label, which is the 8th element:
	var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array
	d3.select(allYAxisLabels[7]).style("font-weight", "bold");
	// You could also use tick formatting to get a % sign on each axis tick

	});

	</script>

	</body>
	</html>