Created
September 17, 2015 09:07
-
-
Save enjulee/db5c166f570bf195c54a 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 | 0.1258 | |
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 | 0.0255 | |
Welfare services | 26.224 | |
Transport services | 48.486 | |
Environmental protection | 0.552 | |
Security services | 92.951 | |
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> | |
</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 w = 100; | |
var h = 500; | |
var padding = [10,5,30,60]; | |
var widthScale = d3.scale.linear() | |
.range([ 0, w - padding[1] - padding[3] ]); | |
var heightScale = d3.scale.ordinal() | |
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1); | |
var xAxis = d3.svg.axis() | |
.scale(widthScale) | |
.orient("bottom"); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", 10000) | |
.attr("height", 300); | |
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(d3.range(data.length)); | |
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(i); | |
}) | |
.attr("width", function(d) { | |
return widthScale(d.male*30); | |
}) | |
.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[400] + "," + (h - padding[1]) + ")") | |
.call(xAxis); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment