Portland Public School math results: scatterplot

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portland Schools: Math Standards</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="style.css" media="screen" rel="stylesheet" />
  </head>
  <body>

<h1>Portland Public Schools</h1>
    <h2>Percentage of Students Meeting or Exceeding Math Standards (2011 and 2012)</h2>

<aside>
    Data provided by <a href="https://api.civicapps.org/#schools">CivicApps for Greater Portland</a>.
    </aside>

var xScale = d3.scale.linear()
                           .range([ padding.left, w - padding.right - padding.left ]);

var yScale = d3.scale.linear()
                           .range([ padding.top, h - padding.bottom ]);

var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient('bottom')
                        .tickFormat(function(d) {
                          return d + "%";
                        });

var yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient('left')
                        .tickFormat(function(d) {
                          return d + "%";
                        });

var svg = d3.select('body')
            .append('svg')
            .attr('width', w)
            .attr('height', h);

d3.csv("portland_school_data.csv", function(data) {
        xScale.domain([
            d3.min(data, function(d) {
              return parseFloat(d.MathPctPrev);
            }),
            d3.max(data, function(d) {
              return parseFloat(d.MathPctPrev);
            }) + 2
        ]);

yScale.domain([
            d3.max(data, function(d) {
              return parseFloat(d.MathPctCurr);
            }) + 2,
            d3.min(data, function(d) {
              return parseFloat(d.MathPctCurr);
            }) - 2
        ]);

var circles = svg.selectAll("circle")
                         .data(data)
                         .enter()
                         .append("circle");

circles.attr("cx", function(d) {
            return xScale(d.MathPctPrev);
          })
          .attr("cy", function(d) {
            return yScale(d.MathPctCurr);
          })
          .attr("r", 4)
          .attr("fill", "#bf4400")
          .append("title")
          .text(function(d) {
            return d.Name + " (2011: " + d.MathPctPrev + "%; 2012: " + d.MathPctCurr + "%)";
          });

svg.append("g")
           .attr("class", "x axis")
           .attr("transform",
                 "translate(" + 0 + "," + (h - padding.bottom) + ")")
           .call(xAxis);

svg.append("g")
           .attr("class", "y axis")
           .attr("transform", "translate(" + padding.left + ",0)")
           .call(yAxis);

svg.append("text")
           .attr("class", "x label")
           .attr("text-anchor", "end")
           .attr("x", w/2)
           .attr("y", h - 6)
           .text("Math Percentage, 2011");

svg.append("text")
           .attr("class", "y label")
           .attr("text-anchor", "end")
           .attr("x", -h/2)
           .attr("y", 6)
           .attr("dy", ".75em")
           .attr("transform", "rotate(-90)")
           .text("Math Percentage, 2012");
      });

</script>
  </body>
</html>

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

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