@alter-eco/cartogram/es6/cartogram.js

A cartogram function used for building warped maps, made with D3

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import { Choropleth } from '@alter-eco/choropleth';
import { cartogram } from 'd3-cartogram';

import * as d3 from './d3-custom.js';

export var Cartogram = function (_Choropleth) {
  _inherits(Cartogram, _Choropleth);

  function Cartogram(params) {
    _classCallCheck(this, Cartogram);

    var _this = _possibleConstructorReturn(this, (Cartogram.__proto__ || Object.getPrototypeOf(Cartogram)).call(this, params));

    _this.config.sensibility = params.sensibility || 8;

    _this.removeAllListeners('mouseover');

    _this.on('mouseover', function (d) {
      if (!d.properties) {
        return false;
      }

      var tooltipData = _this.dataById[d.properties[_this.geoIdKey]];

      if (!tooltipData || tooltipData[_this.selected] === '') {
        return false;
      } else {
        _this.showTooltip(tooltipData);
      }
    });
    return _this;
  }

  _createClass(Cartogram, [{
    key: 'fill',
    value: function fill(datum) {
      if (datum.properties) {
        var geoKey = datum.properties[this.geoIdKey];

        if (this.dataById.hasOwnProperty(geoKey)) {
          return this.scale(this.dataById[geoKey][this.valueColumn]);
        }
      }

      return this.config.neutralColor;
    }
  }, {
    key: 'draw',
    value: function draw() {
      var _this2 = this;

      var projection = this.projection.fitExtent([[0, 0], [this.drawWidth, this.drawHeight]], this.geojson);

      this.carto = cartogram().projection(projection).properties(function (d) {
        return _this2.dataById[d.properties[_this2.geoIdKey]];
      }).iterations(this.config.sensibility);

      this.geometries = this.topojson.objects[Object.keys(this.topojson.objects)[0]].geometries;

      var sorted = this.data.map(function (d) {
        return d[_this2.valueColumn];
      }).sort(d3.ascending);

      this.cartoScale = d3.scaleLinear().domain([sorted[0], sorted[sorted.length - 1]]).range([1, 1000]);

      this.carto.value(function (d) {
        if (d.properties) {
          return _this2.cartoScale(d.properties[_this2.valueColumn]);
        } else {
          var avg = sorted.reduce(function (a, b) {
            return a + b;
          }) / sorted.length;

          return _this2.cartoScale(avg);
        }
      });

      this.features = this.carto(this.topojson, this.geometries).features;

      this.layerSelect = this.layer.selectAll('path').data(this.features);

      // enter
      this.layerSelect.enter().append('path').attr('d', this.carto.path).attr('class', 'region').attr('id', function (datum) {
        return datum.geometry.properties.nom;
      }).attr('fill', this.fill.bind(this)).on('mouseover', function (d) {
        return _this2.emit('mouseover', d);
      }).on('mouseout', function () {
        return _this2.emit('mouseout');
      });

      this.emit('draw');
    }
  }]);

  return Cartogram;
}(Choropleth);