Created
September 17, 2015 09:20
-
-
Save enjulee/c77eb196f53a10f38a5d 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
subject | male | |
---|---|---|
Teacher training and education science | 18.0062 | |
Arts | 3.0818 | |
Humanities | 4.0194 | |
Social and behavioural science | 6.4621 | |
Journalism and information | 4 | |
Business and administration | 9.4491 | |
Law | 0.7124 | |
Life sciences | 0.7635 | |
Physical sciences | 3.44 | |
Mathematics and statistics | 1.7616 | |
Computing | 1.8608 | |
Engineering and engineering trades | 44.2643 | |
Manufacturing and processing | 6.1959 | |
Architecture and building | 5.2463 | |
Agriculture forestry and fishery | 32.0024 | |
Veterinary | 1.8282 | |
Public health | 10.7553 | |
Social services | 3.222 | |
Welfare services | 26.224 | |
Transport services | 48.486 | |
Environmental protection | 0.552 | |
Security services | 80 | |
Not known or unspecified | 3.777 |
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 { | |
background-color: white; | |
} | |
svg { | |
background-color: white; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 10px; | |
} | |
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> | |
</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> | |
<script type="text/javascript"> | |
var w = 1000; | |
var h = 500; | |
var padding = [10,5,30,200]; | |
var widthScale = d3.scale.linear() | |
.range([ 0, w - padding[1] - padding[2] ]); | |
var heightScale = d3.scale.ordinal() | |
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1); | |
var xAxis = d3.svg.axis() | |
.scale(widthScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(heightScale) | |
.orient("left"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", 10000) | |
.attr("height", h); | |
d3.csv("DPRKstudies.csv", function(data) { | |
data.sort(function(a, b) { | |
return d3.descending(+a.male, +b.male); | |
}); | |
widthScale.domain([ 0, d3.max(data, function(d) { | |
return +d.male; | |
}) ]); | |
heightScale.domain(data.map(function(d) { return d.subject; } )); | |
var rects = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect"); | |
rects.attr("x", padding[3]) | |
.attr("class", "barcolor") | |
.attr("y", function(d, i) { | |
return heightScale(d.subject); | |
}) | |
.attr("width", function(d) { | |
return widthScale(d.male); | |
}) | |
.attr("height", heightScale.rangeBand()) | |
.append("title") | |
.text(function(d) { | |
return d.subject+ "'s enrollment number is " + d.male; | |
}); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (padding[3] - 3) + ",0)") | |
.call(yAxis); | |
}); | |
</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