D3 Examples - US College Search by SAT Score, Size, and Location Type

US College Search by SAT Score, Size, and Location Type

This data is from College Scorecard, which prospective students can use to make finding the right college easier. For this visualization, data included average SAT Score, Number of Graduates (Size), and Location type (City, Suburb, or Town). Schools were included from the original dataset only if there were no missing values and they had more than 1000 students.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label, .legend-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: chalkboard;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.size;
      const xLabel = 'Number of Undergraduates';
      const yValue = d => d.sat;
      const yLabel = 'Average Sat Score';
      const colorValue = d => d.location;
      const colorLabel = 'Location Type';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };
​
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth + 60}, 150)`);
​
      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 75)
          .text(xLabel);
​
      yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -75)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
​
      colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -30)
          .text(colorLabel);
​
      const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      const colorScale = d3.scaleOrdinal()
        .range(d3.schemeCategory10);
​
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight);
​
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .ticks(5)
        .tickPadding(15)
        .tickSize(-innerWidth);
​
      const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');
​
      const row = d => {
        d.size = +d.size;
        d.sat = +d.sat;
        return d;
      };
​
      d3.csv('collegesearchshort.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();
​
        yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
​
        g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.6)
            .attr('r', 6);
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
        
      });
      
    </script>
  </body>
</html>
​
    