stateChloropleth.js

(function() {
  'use strict';

  angular
    .module('angularStateHeatmap')
    .directive('stateHeatmap', stateHeatmap);

  function stateHeatmap() {
    var directive = {
      restrict: 'EA',
      templateUrl: 'state-heatmap.html',
      replace: true,
      scope: {
        color: '=',
        stateCounts: '='
      },
      controller: stateHeatmapCtrl,
      link: link
    };
    return directive;

    function link(scope, element, attrs) {
      //
    }


    stateHeatmapCtrl.$inject = ['$scope'];

    function stateHeatmapCtrl($scope) {
      var max = 0,
        min = 0;
      // calculate min,max for normalization
      response.data.forEach(function(data, index, datum) {
        if (data.count > max) {
          max = data.count
        };
        if (data.count < min) {
          min = data.count
        };
      });
      // colors correspond to normalized counts
      var swatches = ['67B7DC', '5CA9CF', '509BC2', '458CB5', '397EA8',
        '2E709B', '22628E', '175381', '0B4574', '003767'
      ];
      // calculate normalized values
      var normalized = {};
      response.data.forEach(function(data, index, datum) {
        // normalized from 0-9 to correspond with 10 shades of swatches
        data.count = Math.round(9 * (data.count - min) / (max - min));
        // set color based on normalized count
        normalized[data.state] = swatches[data.count];
      });
      var map = document.getElementById('map');
      var svgDoc = map.contentDocument;
      var states = svgDoc.getElementsByClassName('state');
      Array.prototype.forEach.call(states, function(element, index, elements) {
        element.style.fill = '#' + normalized[element.id];
      });

    }

  }

})();