viz.js

/* globals page, d3, crossfilter, dc, topojson */

var dims;
var groups;

(function(page, d3, crossfilter, dc, topojson) {
  var charts = {
    gradeBands: dc.rowChart('#gradeBands'),
    csResponses: dc.pieChart('#csResponses'),
    map: dc.geoChoroplethChart('#map'),
    table: dc.dataTable('#districts')
  };

  d3.json('./data/common/counties.simple2.topo.json')
    .then(init);

  function load(year) {
    if (!year) {
      year = 2018;
    }

    return Promise.all([
      d3.json(`./data/${year}/districts.simple2.topo.json`),
      d3.csv(`./data/${year}/gradeLevelData.csv`, function (school) {
        var gradeBands = [];

        if (school['Stage El'] === '1')
          gradeBands.push('Elementary');
        if (school['Stage Mi'] === '1')
          gradeBands.push('Middle');
        if (school['Stage Hi'] === '1')
          gradeBands.push('High');

        if (!gradeBands.length || !+school.Students)
          return;

        function normalizeDistrict(district){
          switch (district) {
            case 'A-H-S-T COMM SCHOOL DISTRICT':
            case 'WALNUT COMM SCHOOL DISTRICT':
              return 'AHSTW COMM SCHOOL DISTRICT';
            case 'COLO-NESCO SCHOOL COMM SCHOOL DISTRICT':
              return 'COLO-NESCO COMM SCHOOL DISTRICT';
            case 'EDDYVILLE-BLAKESBURG- FREMONT CSD':
              return 'EDDYVILLE-BLAKESBURG-FREMONT CSD';
            case 'ELK HORN-KIMBALLTON COMM SCHOOL DISTRICT':
            case 'EXIRA-ELK HORN-KIMBALLTON COMM SCHOOL DISTRICT':
              return 'EXIRA-ELK HORN-KIMBALLTON COMM SCH DIST';
            case 'GARNER-HAYFIELD COMM SCHOOL DISTRICT':
            case 'VENTURA COMM SCHOOL DISTRICT':
              return 'GARNER-HAYFIELD-VENTURA COMM SCHOOL DISTRICT';
            case 'SOUTH TAMA COUNTY COMM SCHOOL DISTRICT':
              return 'SOUTH TAMA COUNTY';
            default:
              return district;
          }
        }

        return {
          year: year,
          district: normalizeDistrict(school['School District Name']),
          school: school['School Name'],
          population: +school.Students,
          gradeBands: gradeBands,
          csResponse: school['Teaches CS?'] || 'Unknown',
        };
      }),
    ]).then(([districts, schools]) => {
      render(year, schools, districts);
    }).catch(err => {
      console.warn(err);
      alert(`Error loading data for ${year}`);
    });
  }

  var good = '#00aeef'; // NewBoCo Blue
  var bad = d3.hsl(good);
  bad.l *= 2;
  var color = d3.scaleLinear()
    .domain([0,1])
    .range([bad, good]);
  function districtColor(schoolCount, responseCount, csYesCount) {
    var res = d3.rgb(color(responseCount / schoolCount));
    res.opacity = csYesCount ? (
      csYesCount === schoolCount ? 1 : 0.5
    ) : 0;
    return res;
  }

  var ndx = crossfilter();
  var loadedYears = [];

  function render(year, schools, districts) {
    var geojson = topojson.feature(districts, Object.values(districts.objects)[0]);
    charts.map
      .overlayGeoJson(geojson.features, 'Districts', function (d) {
        return d.properties.COUNTY || d.properties.DistrictNa.replace(/([ -]) +/g, '$1').toUpperCase();
      });

    if (!loadedYears.includes(year)){
      ndx.add(schools);
      loadedYears.push(year);
    }

    dims.years.filter(year);
    dc.renderAll();
  }

  function init(counties) {
    dims = {
      years: ndx.dimension(dc.pluck('year')),
      districtMap: ndx.dimension(dc.pluck('district')),
      district: ndx.dimension(dc.pluck('district')),
      school: ndx.dimension(dc.pluck('school')),
      gradeBands: ndx.dimension(dc.pluck('gradeBands'), true),
      csResponses: ndx.dimension(dc.pluck('csResponse'))
    };
    groups = {
      districtMap: dims.districtMap.group().reduce(
        function reduceAdd(p, v) {
          return v.population > 0 ? {
            count: p.count + 1,
            responses: p.responses + (v.csResponse === 'Unknown' ? 0 : 1),
            cs: p.cs + (v.csResponse === 'Yes' ? 1 : 0)
          } : p;
        },
        function reduceRemove(p, v) {
          return v.population > 0 ? {
            count: p.count - 1,
            responses: p.responses - (v.csResponse === 'Unknown' ? 0 : 1),
            cs: p.cs - (v.csResponse === 'Yes' ? 1 : 0)
          } : p;
        },
        function reduceInit() {
          return {
            count: 0,
            responses: 0,
            cs: 0,
          };
        }
      ),
      gradeBands: dims.gradeBands.group().reduceCount(),
      schools: (function() {
        var group = dims.district.group().reduce(
          function reduceAdd(p, v) {
            return v.population > 0 ? p.concat([v]) : p;
          },
          function reduceRemove(p, v) {
            return p.filter(function (s) { return s !== v; });
          },
          function reduceInit() {
            return [];
          }
        );
        var nonEmpty = function (s) { return s.value.length; };
        return {
          all: function() {
            return group.all().filter(nonEmpty);
          },
          top: function (n) {
            return group.top(Infinity).filter(nonEmpty).slice(0, n);
          }
        };
      })(),
      population: dims.district.group().reduceSum(dc.pluck('population')),
      csResponses: dims.csResponses.group().reduceCount()
    };

    var gradeBandsOrder = ['High','Middle','Elementary'];
    charts.gradeBands
      .height(300)
      .ordinalColors(['#000', '#333', '#666'])
      .elasticX(true)
      .dimension(dims.gradeBands)
      .group(groups.gradeBands)
      .ordering(function (d) { return gradeBandsOrder.indexOf(d.key); })
    ;

    var csResponsesOrder = ['Yes', 'No', 'Inconsistent', 'Unknown'];
    charts.csResponses
      .height(300)
      .ordinalColors(['#00aeef', '#ffffff', '#c0c0c0', '#808080'])
      .dimension(dims.csResponses)
      .group(groups.csResponses)
      .ordering(function (d) { return csResponsesOrder.indexOf(d.key); })
      .externalRadiusPadding(10)
    ;

    var geojson = topojson.feature(counties, counties.objects.county);
    var projection = d3.geoAlbersUsa()
      .fitSize([990,500], geojson);

    charts.map.width(990)
      .height(500)
      .dimension(dims.districtMap)
      .group(groups.districtMap)
      .colorCalculator(function (d) {
        return d ? districtColor(d.count, d.responses, d.cs) : '#fff';
      })
      .overlayGeoJson(geojson.features, 'Counties', function (d) {
        return d.properties.COUNTY;
      })
      .projection(projection)
      .valueAccessor(function(kv) {
        return kv.value;
      })
      .title(function (d) {
        return d.key;
      })
    ;

    charts.table
      .size(Infinity)
      .dimension(groups.schools)
      .group(function (g) { return g.key; })
      .showGroups(false)
      .columns([
        {
          label: 'District',
          format: dc.pluck('key')
        },
        {
          label: 'School Responses',
          format: function (g) {
            var responses = g.value.filter(function (s) {
              return s.csResponse !== 'Unknown';
            });
            return '' + responses.length + ' of ' + g.value.length;
          }
        },
        {
          label: '% Teaching Computer Science',
          format: function (g) {
            var yes = g.value.filter(function (s) {
              return s.csResponse === 'Yes';
            });
            return g.value.length ? d3.format('.0%')(yes.length / g.value.length) : null;
          }
        }
      ])
      .order(d3.ascending.bind(null))
      .renderlet(function(chart){
        chart.selectAll('tr.dc-table-row')
          .style('background-color', function(g) { 
            if(!g.value.length)
              return null;

            var yes = g.value.filter(function (s) {
              return s.csResponse === 'Yes';
            });

            var responded = g.value.filter(function (s) {
              return s.csResponse !== 'Unknown';
            });

            return districtColor(g.value.length, responded.length, yes.length);
          });
      })
    ;

    dc.renderAll();
  }

  page('/', () => load());

  page('/:year', function(ctx) {
    const { year } = ctx.params;
    load(parseInt(year));
  });

  page({
    hashbang: true
  });
})(page, d3, crossfilter, dc, topojson);