index.html
<!DOCTYPE html>
<html>
<head>
<title>Knight D3 Module 5</title>
<style>
body {
margin: 0;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
circle {
fill: rgb(173, 118, 55);
opacity: 0.8;
}
circle:hover {
fill: rgb(237, 128, 4);
}
.axis text, text.axis {
font-size: 12px;
}
text.centered {
text-anchor: middle;
}
h1, p, text {
font-family: avenir, sans-serif;
}
h1 {
font-weight: initial;
margin: 4px 50px;
}
p {
margin: 4px 50px;
}
</style>
</head>
<body>
<h1>High School Prevents Teen Pregnancy</h1>
<p>Plots teen pregnancy (<a href=//noceilings.org/data>NoCeilings</a> series ADFERRAT) vs. net female high school enrollment (series NERASEFE). Circle area indicates the percentage of women who are internet users (IUPOHPWBxPERFINTU). Even though all four datasets are unavailable for most of the developed world, we see how a women's opportunities are affected by society.</p>
<svg>
</svg>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var html_height = 125,
margin = {top: 20, right: 20, bottom: 35, left: 50},
width = 960 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom - html_height;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var r = d3.scale.sqrt()
.range([0, 16]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d){ return d + "%"; });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(function(d){ return d + "%"; });
d3.csv("no-ceilings-data.csv", function(row){
var obj = {}
Object.keys(row).forEach(function(k){
var v = row[k]
obj[k] = +v || v;
})
obj.wiap = obj.internet_users_per_100 * obj.internet_users_percent_female / 100;
return obj
}, function(err, data){
if (err) return console.error(err);
data = data.filter(function(d){return d.population > 5})
.sort(function(a,b){return d3.descending(a.wiap, b.wiap)})
x.domain(d3.extent(data, function(d){return d.female_hs_enrollment}))
y.domain([0, d3.max(data, function(d){return d.teen_pregnancy})])
r.domain([0, d3.max(data, function(d){return d.wiap})])
var svg = d3.select("svg")
.attr("width", margin.left + width + margin.right)
.attr("height", margin.top + height + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("transform", "rotate(270)")
.append("text")
.attr("x", -height/2)
.attr("y", -30)
.attr("class", "centered axis")
.text("Teen pregnancy rate")
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.append("text")
.attr("x", width/2)
.attr("y", height+30)
.attr("class", "centered axis")
.text("Percent of girls who attend high school")
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d){return x(d.female_hs_enrollment)})
.attr("cy", function(d){return y(d.teen_pregnancy)})
.attr("r", function(d){return r(d.wiap)})
.append("title")
.text(function(d){
return d.country + " has a teen pregnancy rate of " + d3.round(d.teen_pregnancy, 2) + "% and " +
d3.round(d.female_hs_enrollment, 2) + "% of girls attend high school. " +
d3.round(d.wiap, 2) + "% of women are internet users."
})
})
</script>
</body>
</html>
no-ceilings-data.csv
country,population,teen_pregnancy,female_hs_enrollment,internet_users_per_100,internet_users_percent_female
Australia,22.92,1.21,85.779,82.3,78.4
Bahrain,1.25,1.38,87.356,88,90
Belarus,9.42,2.06,95.831,46.9,44.9
Bulgaria,7.28,3.59,84.469,55.1,50.8
Colombia,48.32,6.85,76.563,49,48.3
Costa Rica,4.82,6.08,75.337,47.5,46.5
Croatia,4.27,1.27,95.076,63,54.7
Cyprus,0.86,0.55,92.967,61,57.8
Denmark,5.6,0.51,92.291,93,91.5
Ecuador,14.9,7.7,74.992,35.1,30.8
El Salvador,6.25,7.6,62.454,25.5,18.8
Estonia,1.29,1.68,90.937,79,77.7
Finland,5.41,0.92,92.681,91,89.6
France,63.94,0.57,97.529,83,80.4
Greece,11.13,1.19,99.07,56,52.3
Hungary,9.96,1.21,91.901,72,69.3
Iceland,0.32,1.15,88.838,96.2,95.5
Indonesia,248.22,4.83,77.462,15.4,8.7
Iran,76.42,3.16,79.369,26,12.7
Ireland,4.58,0.82,99.572,79,77.3
Israel,7.9,0.78,99.611,73.4,68
Italy,60.88,0.4,92.427,58,50.8
Jamaica,2.71,7.01,76.144,46.5,29.8
Japan,127.25,0.54,99.526,79.1,74
Latvia,2.06,1.35,84.375,74,72.1
Lithuania,3,1.06,96.446,68,67
Luxembourg,0.52,0.83,88.29,92,88.5
Malta,0.42,1.82,83.698,70,65.9
Mexico,114.98,6.34,69.382,38.4,37.7
Netherlands,16.73,0.62,90.823,93,91.2
Norway,5.01,0.78,95.539,95,94
Panama,3.79,7.85,79.317,45.2,41.9
Paraguay,6.69,6.7,64.867,27.1,29.3
Peru,30.77,5.07,77.475,38.2,30.5
Poland,38.51,1.22,91.155,65,61.6
Qatar,1.84,0.95,100,88.1,82.4
South Korea,50,0.22,95.552,84.1,80
Slovenia,2.06,0.06,93.832,70,66.2
Spain,46.76,1.06,96.42,72,67.2
Sweden,9.56,0.65,92.627,94,91.8
Switzerland,7.99,0.19,79.797,85.2,80.9
Thailand,66.79,4.1,81.719,26.5,26.6
Turkey,74.7,3.09,80.387,45.1,34.7
Ukraine,45.45,2.57,85.817,33.7,33.4
United Kingdom,63.14,2.58,94.766,87,87.3
USA,313.95,3.1,87.849,81,70.1
Uruguay,3.38,5.83,76.128,55.1,53.8
Venezuela,29.51,8.32,77.613,44,50.6