D3 Examples - Connecticut SAT Scores

Connecticut SAT Scores

This data is from Data.gov under the section "SAT School Participation and Performance: 2012-2013". Link to the data set.

This dataset contains data by school on student SAT scores relative to the SAT College and Career Readiness (CCR) Benchmark score of 1550 (critical reading, mathematics and writing sections combined) for the graduating classes of 2012 and 2013.

For the data visualization assignments, I chose to build the charts from scratch instead of copying a block as a starting point to help me better understand how to use D3. I looked at a number of examples and have used the book "Interactive Data Visualization for the Web" by Scott Murray.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { background-color: #ffffff; }
    .label { font-size: 18pt; font-family:Helvetica; }
  </style>
</head>
<body>
    <script>
        // variables
        let w = 960;
        let h = 500;
    let margin = { top: 20, right: 20, left: 150, bottom: 120 };
    let innerWidth = w - margin.right - margin.left;
    let innerHeight = h - margin.top - margin.bottom;
​
    let sat = [];
    let bins2012 = [];
    let bins2013 = [];
    let cords2012 = [];
    let cords2013 = [];
    let xLinear;
    let yLinear;
    let svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);
​
    // Create dynamic scales based on columns passed
    const createScales=(xField,yField)=>{
      const a = d3.max(bins2012, (d,i)=>{ return d;});
      const b = d3.max(bins2013, (d,i)=>{ return d;});
​
      xLinear = d3.scaleLinear()
        .domain([0,100])
        .range([margin.left, w - margin.right])
        .nice();
      yLinear = d3.scaleLinear()
        .domain([d3.max([a,b]),0])
        .range([margin.bottom, innerHeight])
        .nice();
    }
​
    // Create Scatter plot based on columns passed (happy)
    const createScatterPlot=()=>{
      svg.selectAll("rect")
        .data(cords2013)
        .enter()
        .append("rect")
        .attr("x", (d,i)=>{ return xLinear( d.x ) - 12.5; })
        .attr("y", (d,i)=>{ return yLinear( d.y ); })
        .attr("width", 25)
        .attr("height", (d,i)=>{ return innerHeight - yLinear( d.y ) })
        .attr('fill', 'steelblue');
      
      svg.selectAll("circle")
        .data(cords2012)
        .enter()
        .append("circle")
        .attr("cx", (d,i)=>{ return xLinear( d.x ); })
        .attr("cy", (d,i)=>{ return yLinear( d.y ); })
        .attr("r", 5);
​
      svg.append("g")
        .attr("transform", "translate(0," + innerHeight + ")")
        .call(d3.axisBottom(xLinear));
      
      svg.append("text")
        .attr("class","label")
        .attr("y", 425)
        .attr("x", margin.left + innerWidth / 2)
        .style("text-anchor", "middle")
        .text("Percent meeting benchmark");
​
      svg.append("g")
        .attr("transform", "translate(" + 150 + "," + 0 + ")")
        .call(d3.axisLeft(yLinear));
​
      svg.append("text")
        .attr("class","label")
        .attr("transform", "rotate(-90)")
        .attr("y", 100)
        .attr("x", -(h / 2))
        .style("text-anchor", "middle")
        .text("Number of Schools");
​
      svg.append("text")
        .attr("class","label")
        .attr("y", 50)
        .attr("x", w /2)
        .style("text-anchor", "middle")
        .text("Connecticut SAT Scores");
    }
​
    // Convert header to JSON friendly header (Columns)
    const process=(d)=>{
      return {
        distNumber: d["DistrictNumber"],
        district: d["District"],
        school: d["School"],
        takers2012: +d["Test-takers_2012"],
        takers2013: +d["Test-takers_2013"],
        takersChange: parseFloat(d["Test-takers_Change"]),
        rate2012: parseFloat(d["ParticipationRateEst_2012"]),
        rate2013: parseFloat(d["ParticipationRateEst_2013"]),
        rateChange: parseFloat(d["ParticipationRateEst_Change"]),
        percent2012: parseFloat(d["PercentMeetingBenchmark_2012"]),
        percent2013: parseFloat(d["PercentMeetingBenchmark_2013"]),
        percentChange: parseFloat(d["PercentMeetingBenchmark_Change"])
      };
    }
​
    // Load world happiness data
    const satFile=()=>{
      d3.csv("data2.csv",process,data=>{  
        sat = data;
        sat.forEach((d,i)=>{ setBins(d); });
        createScales();
        createScatterPlot();
      });
    };
​
    // Calculate basic statistics on a field
    const setBins=(d)=>{
      const a = Math.round(d.percent2012 / 10) * 10 + 5;
      const b = Math.round(d.percent2013 / 10) * 10 + 5;
      if (bins2012[a]==undefined) {
        bins2012[a]=1;
      } else {
        bins2012[a]++;
      }
​
      if (bins2013[b]==undefined) {
        bins2013[b]=1;
      } else {
        bins2013[b]++;
      }
​
      cords2012.push({ "x" : a, "y" : bins2012[a] });
      cords2013.push({ "x" : b, "y" : bins2013[b] });
    }
​
    document.addEventListener("DOMContentLoaded", (event)=>{
      satFile();
    });
  </script>
</body>
​
​
    