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=https://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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js