D3 Examples - Portland Public School math results: scatterplot

xxxxxxxxxx
 
<!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>
​
    <script type="text/javascript">
      var w = 700;
      var h = 600;
      var padding = {
        top: 20,
        right: 10,
        bottom: 50,
        left: 60
      };
​
      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>
​
    