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 | 1× 1× 1× 1× 1× 1× 1× | // 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; |