D3 Examples - CT SAT Scores

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 xLinear;
    let yLinear = d3.scaleLinear();
    let svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);
​
    // Create dynamic scales based on columns passed
    const createScales=(xField,yField)=>{
      xLinear = d3.scaleLinear()
        .domain([d3.min(happy,(d,i)=>{ return d[xField]; }), d3.max(happy,(d,i)=>{ return d[xField]; })])
        .range([0 + margin.left, w - margin.right])
        .nice();
      yLinear = d3.scaleLinear()
        .domain([0,d3.max(happy,(d,i)=>{ return d[yField]; })])
        .range([innerHeight,0 + margin.bottom])
        .nice();
    }
    
    // Create dynamic axis based on columns passed
    const createAxis=(xField,yField)=>{
      let xAxis = d3.svg.axis();
    }
​
    // Create Scatter plot based on columns passed (happy)
    const createScatterPlot=(xField,yField,rField)=>{
      svg.selectAll("circle")
        .data(happy)
        .enter()
        .append("circle")
        .attr("cx", (d,i)=>{ return xLinear(d[xField]); })
        .attr("cy", (d,i)=>{ return yLinear(d[yField]); })
        .attr("r", (d,i)=>{ return d[rField] * 10; });
​
      svg.append("g")
        .attr("transform", "translate(0," + innerHeight + ")")
        .call(d3.axisBottom(xLinear));
​
      svg.append("text")
        .attr("class","label")
        .attr("y", 425)
        .attr("x", w /2)
        .style("text-anchor", "middle")
        .text("Happiness Ranking");
​
      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("GDP Per Capita");
​
      svg.append("text")
        .attr("class","label")
        .attr("y", 50)
        .attr("x", w /2)
        .style("text-anchor", "middle")
        .text("World Happiness Ranking");
    }
​
    // 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: +d["Test-takers_Change"],
        rate2012: +d["ParticipationRateEst_2012"],
        rate2013: +d["ParticipationRateEst_2013"],
        rateChange: +d["ParticipationRateEst_Change"],
        percent2012: +d["PercentMeetingBenchmark_2012"],
        percent2013: +d["PercentMeetingBenchmark_2013"],
        percentChange: +d["PercentMeetingBenchmark_Change"]
      };
    }
​
    // Load world happiness data
    const happyFile=()=>{
      d3.csv("data2.csv",process,data=>{  
        sat = data;
        
        // For each column calculate basic statistics
        //fieldStats.push(fieldProfile("dystopiaResidual"));
​
        // World Happyiness Rank
        //createScales("happinessScore","gdpPerCapita");
        //createScatterPlot("happinessScore","gdpPerCapita","lifeExpectancy");
      });
    };
​
    // Calculate basic statistics on a field
    const fieldProfile=(fieldname)=>{ 
​
      return stats;
    }
​
    document.addEventListener("DOMContentLoaded", (event)=>{
      // World Happyiness Rank
      happyFile();
    });
  </script>
</body>
​
    