[panoramix] -> [dashed]

dashed/assets/visualizations/world_map.js

@@ -0,0 +1,110 @@
+// JS
+var d3 = window.d3 || require('d3');
+//var Datamap = require('../vendor/datamaps/datamaps.all.js');
+var Datamap = require('datamaps');
+
+// CSS
+require('./world_map.css');
+
+function worldMapChart(slice) {
+  var render = function () {
+    var container = slice.container;
+    var div = d3.select(slice.selector);
+
+    container.css('height', slice.height());
+
+    d3.json(slice.jsonEndpoint(), function (error, json) {
+      var fd = json.form_data;
+
+      if (error !== null) {
+        slice.error(error.responseText);
+        return '';
+      }
+      var ext = d3.extent(json.data, function (d) {
+        return d.m1;
+      });
+      var extRadius = d3.extent(json.data, function (d) {
+        return d.m2;
+      });
+      var radiusScale = d3.scale.linear()
+        .domain([extRadius[0], extRadius[1]])
+        .range([1, fd.max_bubble_size]);
+
+      json.data.forEach(function (d) {
+        d.radius = radiusScale(d.m2);
+      });
+
+      var colorScale = d3.scale.linear()
+        .domain([ext[0], ext[1]])
+        .range(["#FFF", "black"]);
+
+      var d = {};
+      for (var i = 0; i < json.data.length; i++) {
+        var country = json.data[i];
+        country.fillColor = colorScale(country.m1);
+        d[country.country] = country;
+      }
+
+      var f = d3.format('.3s');
+
+      container.show();
+
+      var map = new Datamap({
+        element: slice.container.get(0),
+        data: json.data,
+        fills: {
+          defaultFill: '#ddd'
+        },
+        geographyConfig: {
+          popupOnHover: true,
+          highlightOnHover: true,
+          borderWidth: 1,
+          borderColor: '#fff',
+          highlightBorderColor: '#fff',
+          highlightFillColor: '#005a63',
+          highlightBorderWidth: 1,
+          popupTemplate: function (geo, data) {
+            return '<div class="hoverinfo"><strong>' + data.name + '</strong><br>' + f(data.m1) + '</div>';
+          }
+        },
+        bubblesConfig: {
+          borderWidth: 1,
+          borderOpacity: 1,
+          borderColor: '#005a63',
+          popupOnHover: true,
+          radius: null,
+          popupTemplate: function (geo, data) {
+            return '<div class="hoverinfo"><strong>' + data.name + '</strong><br>' + f(data.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(d);
+
+      if (fd.show_bubbles) {
+        map.bubbles(json.data);
+        div.selectAll("circle.datamaps-bubble").style('fill', '#005a63');
+      }
+
+      slice.done(json);
+
+    });
+  };
+
+  return {
+    render: render,
+    resize: render
+  };
+}
+
+module.exports = worldMapChart;