Created
September 4, 2015 00:26
-
-
Save enjulee/6b6839af9d7cabe7eb29 to your computer and use it in GitHub Desktop.
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>Number of Male Students' Enrollment by Field of Study</title> | |
<style type="text/css"> | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
font-style: normal; | |
background-color: whitesmoke; | |
padding: 50px; | |
} | |
h1 { | |
font-size: 20px; | |
font-weight: bold; | |
margin-bottom: 5px; | |
margin-top: 0px; | |
} | |
h2 { | |
font-size: 10px; | |
font-style: normal; | |
} | |
p {font-size: 10px; | |
font-style: normal; | |
} | |
h3 { | |
font-size: 8px; | |
font-style: italic ; | |
color: grey; | |
} | |
.label2 { | |
fill: white; | |
font-size: 10px; | |
} | |
.barcolor { | |
fill: cadetblue; | |
} | |
.barcolor:hover { | |
fill: grey; | |
} | |
</style> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
</style> | |
</head> | |
<body> | |
<h1> Number of Male Students' Enrollment by Field of Study</h1> | |
<br> <img src="http://www.liberty.edu/champion/wp-content/uploads/2012/10/Untitled-151.png"> <br> | |
<h2> The data below shows the number of enrollment by North Korean male students by field of study. (unit=1,000 people)</h2> | |
<p style="font-size:50%"> Field of Study</p> | |
<script type="text/javascript"> | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", 10000) | |
.attr("height", 200); | |
d3.csv("DPRKstudies.csv", function(data) { | |
data.sort(function(a, b) { | |
return d3.descending(+a.male, +b.male); | |
}); | |
var rects = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect"); | |
rects.attr("x", 0) | |
.attr("class", "barcolor") | |
.attr("y", function(d, i) { | |
return i * 10; | |
}) | |
.attr("width", function(d) { | |
return d.male * 30; | |
}) | |
.attr("height", 8) | |
.append("title") | |
.text(function(d) { | |
return d.subject + "'s enrollment number is " + d.male; | |
}); | |
}); | |
</script> | |
<h3> Source: The United Nations Population Division.</h3> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment