jowang0319/Average of Infant mortality rate.csv

## Average of Infant mortality rate.csv

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

            
              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>Horizontal Bar - Average of Infant Mortality Rate</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo">
		<style type="text/css">
            body {
                font-family:Arial'Arimo',Helvetica,sans-serif;
            }
			#text {
                width : 520px;

            }

            h1 {
                font-size: 30px;
            }

			svg {
				background-color: rgba(0,0,0,0.01);
			}

            a:visited {
                color: grey;
}
            a:hover {
                color: #FF0099;
}
            a:link {
                color: #0099FF;
            }

            .strong {
                color:#0099FF;
            }

            p {
                line-heigh:10px;
            }

            rect:hover {
				fill: #FF0099 ;
			}

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

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

		</style>
	</head>
	<body>

		<h1>Average of Infant Mortality Rate (‰) </h1>
        <div id="text">
            <p><strong class="strong">Introduction:</strong>
            </br>The bar chart bellow represents the average infant mortality rate in terms of WHO region. It is very clear that the rate varies a lot from region to region, while the world average percentage remains still relatively high. The Africa region has the highest average infant mortality rate and the Europe has the lowest.</p>
            <p><strong class="strong">Source: </strong>
        </br><a href="http://www.who.int/gho/en/">World Health Organization</a></p>
        </div>

		<script type="text/javascript">


			var height = 320;
			var width = 520;
			var margin = {top:20,right:10,bottom:40,left:0};


			var widthScale = d3.scale.linear()
								.range([ margin.left, width-margin.right-margin.left-80 ]);

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


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


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

				if (error) {
					console.log(error);
				}

                data.forEach(function(d) {
                    d.year2015 = d["2015"];
                })

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

				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.year2015;
				}) ]);


				var rects = svg.selectAll("rect")
						.data(data)
						.enter()
						.append("rect");

				rects.attr("x", margin.left)
					.attr("y", function(d, i) {
						return i * 40;
					})
					.attr("width", function(d) {
						return widthScale(d.year2015);
					})
					.attr("height", 20)
					.append("title")
					.text(function(d) {
						return d.Region + "'average infant mortality rate " + d.year2015 + " per 1000 person";
					});

                var label = svg.selectAll("text")
            					.data(data)
          						.enter()
          					  	.append("text")
            					.attr("class", "avg");

      			label.attr("x", function (d) {
               		 console.log("in text: " + d);
                	 return (widthScale(d.year2015) + 10);
            })
         		     .attr("y", function (d, i) {
              		  return i * 40 + 14;
            })
        		     .text(function (d) {
                return d.Region + " : " + d.year2015 + "‰";
            })
         			   .attr("font-family", "sans-serif")
         			   .attr("font-size", "11px")
       				 .attr("fill", "#000000");


                    d3.selectAll("rect")
                        .attr('fill',function(d,i){
                        if (i == 3){
                            return "rgba(0,153,255,0.8)";
                        }
                        else {
                            return "rgba(0,153,255,0.3)";
                        }});


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

                });


		</script>

	</body>
</html>
Region	1990	1991	1992	1993	1994	1995	1996	1997	1998	1999	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012	2013	2014	2015
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>Horizontal Bar - Average of Infant Mortality Rate</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo">
	<style type="text/css">
	body {
	font-family:Arial'Arimo',Helvetica,sans-serif;
	}
	#text {
	width : 520px;

	}

	h1 {
	font-size: 30px;
	}

	svg {
	background-color: rgba(0,0,0,0.01);
	}

	a:visited {
	color: grey;
	}
	a:hover {
	color: #FF0099;
	}
	a:link {
	color: #0099FF;
	}

	.strong {
	color:#0099FF;
	}

	p {
	line-heigh:10px;
	}

	rect:hover {
	fill: #FF0099 ;
	}

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

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

	</style>
	</head>
	<body>

	<h1>Average of Infant Mortality Rate (‰) </h1>
	<div id="text">
	<p><strong class="strong">Introduction:</strong>
	</br>The bar chart bellow represents the average infant mortality rate in terms of WHO region. It is very clear that the rate varies a lot from region to region, while the world average percentage remains still relatively high. The Africa region has the highest average infant mortality rate and the Europe has the lowest.</p>
	<p><strong class="strong">Source: </strong>
	</br><a href="http://www.who.int/gho/en/">World Health Organization</a></p>
	</div>

	<script type="text/javascript">


	var height = 320;
	var width = 520;
	var margin = {top:20,right:10,bottom:40,left:0};


	var widthScale = d3.scale.linear()
	.range([ margin.left, width-margin.right-margin.left-80 ]);

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


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


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

	if (error) {
	console.log(error);
	}

	data.forEach(function(d) {
	d.year2015 = d["2015"];
	})

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

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.year2015;
	}) ]);



	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", margin.left)
	.attr("y", function(d, i) {
	return i * 40;
	})
	.attr("width", function(d) {
	return widthScale(d.year2015);
	})
	.attr("height", 20)
	.append("title")
	.text(function(d) {
	return d.Region + "'average infant mortality rate " + d.year2015 + " per 1000 person";
	});

	var label = svg.selectAll("text")
	.data(data)
	.enter()
	.append("text")
	.attr("class", "avg");

	label.attr("x", function (d) {
	console.log("in text: " + d);
	return (widthScale(d.year2015) + 10);
	})
	.attr("y", function (d, i) {
	return i * 40 + 14;
	})
	.text(function (d) {
	return d.Region + " : " + d.year2015 + "‰";
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "#000000");


	d3.selectAll("rect")
	.attr('fill',function(d,i){
	if (i == 3){
	return "rgba(0,153,255,0.8)";
	}
	else {
	return "rgba(0,153,255,0.3)";
	}});


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

	});









	</script>

	</body>
	</html>