Skip to content

Instantly share code, notes, and snippets.

@mgold
Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mgold/3cb71efd1287f5c03c80 to your computer and use it in GitHub Desktop.
Save mgold/3cb71efd1287f5c03c80 to your computer and use it in GitHub Desktop.
Knight D3 Modules 5
<!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=http://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="http://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){
//accessor to convert to numbers
var obj = {}
Object.keys(row).forEach(function(k){
var v = row[k]
obj[k] = +v || v;
})
// wiap = women internet access percentage
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>
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment