mgold/index.html

## 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=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>

## 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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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