CT SAT Scores

<!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>

https://d3js.org/d3.v4.min.js