Created
September 18, 2015 20:11
-
-
Save jowang0319/03712cf42713752d62e9 to your computer and use it in GitHub Desktop.
week4:bar chart:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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; | |
} | |
</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 = 260; | |
var width = 500; | |
var widthScale = d3.scale.linear() | |
.range([ 0, width ]); | |
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", 0) | |
.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"; | |
}); | |
rects.append("text") | |
.attr("x", 0 ) | |
.attr("y", function(d, i) { | |
return i * 40 -3 ;}) | |
.attr("dy", ".35em") | |
.text(function(d) { return d.Region; }); | |
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)"; | |
}}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment