D3 Examples - Portland Schools: Math Standards

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>
  </head>
  <body>
​
    <h2>Portland Public Schools</h2>
    <h3>Percentage of Students Meeting or Exceeding Math Standards (Previous Year)</h3>
    <script type="text/javascript">
      var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)
            .attr("height", 1400);
​
      d3.csv("portland_school_data.csv", function(data) {
​
        data.sort(function(a, b) {
          return d3.descending(parseFloat(a.MathPctPrev), parseFloat(b.MathPctPrev));
        });
​
        var rects = svg.selectAll("rect")
                       .data(data)
                       .enter()
                       .append("rect");
​
        rects.attr("x", 0)
          .attr("y", function(d, i) {
            return i * 10;
          })
          .attr("width", function(d) {
            return d.MathPctPrev * 10;
          })
          .attr("height", 8)
          .append("title")
          .text(function(d) {
            return d.Name + "’s Math Percentage: " + d.MathPctPrev + "%";
          });
      });
​
    </script>
​
  </body>
</html>
    