all files / src/visualizations/ world_map.js

20.59% Statements 7/34
0% Branches 0/4
0% Functions 0/8
21.88% Lines 7/32
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95                                                                                                                                                                               
// JS
const d3 = require('d3');
const Datamap = require('datamaps');
 
// CSS
require('./world_map.css');
 
function worldMapChart(slice, payload) {
  const container = slice.container;
  const div = d3.select(slice.selector);
 
  container.css('height', slice.height());
  div.selectAll('*').remove();
  const fd = slice.formData;
  // Ignore XXX's to get better normalization
  let data = payload.data.filter(d => (d.country && d.country !== 'XXX'));
 
  const ext = d3.extent(data, function (d) {
    return d.m1;
  });
  const extRadius = d3.extent(data, function (d) {
    return d.m2;
  });
  const radiusScale = d3.scale.linear()
    .domain([extRadius[0], extRadius[1]])
    .range([1, fd.max_bubble_size]);
 
  const colorScale = d3.scale.linear()
    .domain([ext[0], ext[1]])
    .range(['#FFF', 'black']);
 
  data = data.map(d => Object.assign({}, d, {
    radius: radiusScale(d.m2),
    fillColor: colorScale(d.m1),
  }));
 
  const mapData = {};
  data.forEach((d) => {
    mapData[d.country] = d;
  });
 
  const formatter = d3.format('.3s');
 
  container.show();
 
  const map = new Datamap({
    element: slice.container.get(0),
    data,
    fills: {
      defaultFill: '#ddd',
    },
    geographyConfig: {
      popupOnHover: true,
      highlightOnHover: true,
      borderWidth: 1,
      borderColor: '#fff',
      highlightBorderColor: '#fff',
      highlightFillColor: '#005a63',
      highlightBorderWidth: 1,
      popupTemplate: (geo, d) => (
        `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m1)}</div>`
      ),
    },
    bubblesConfig: {
      borderWidth: 1,
      borderOpacity: 1,
      borderColor: '#005a63',
      popupOnHover: true,
      radius: null,
      popupTemplate: (geo, d) => (
        `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m2)}</div>`
      ),
      fillOpacity: 0.5,
      animate: true,
      highlightOnHover: true,
      highlightFillColor: '#005a63',
      highlightBorderColor: 'black',
      highlightBorderWidth: 2,
      highlightBorderOpacity: 1,
      highlightFillOpacity: 0.85,
      exitDelay: 100,
      key: JSON.stringify,
    },
  });
 
  map.updateChoropleth(mapData);
 
  if (fd.show_bubbles) {
    map.bubbles(data);
    div.selectAll('circle.datamaps-bubble').style('fill', '#005a63');
  }
}
 
module.exports = worldMapChart;