Map visualization (#650)

* simple mapbox viz

use react-map-gl

superclustering of long/lat points

Added hook for map style, huge performance boost from bounding box fix, added count text on clusters

variable gradient size based on metric count

Ability to aggregate over any point property

This needed a change in the supercluster npm module, a PR was placed here:
mapbox/supercluster#12

Aggregator function option in explore, tweaked visual defaults

better radius size management

clustering radius, point metric/unit options

scale cluster labels that don't fit, non-numeric labels for points

Minor fixes, label field affects points, text changes

serve mapbox apikey for slice

global opacity, viewport saves (hacky), bug in point labels

fixing mapbox-gl dependency

mapbox_api_key in config

expose row_limit, fix minor bugs

Add renderWhileDragging flag, groupby. Only show numerical columns for point radius

Implicitly group by lng/lat columns and error when label doesn't match groupby

'Fix' radius in miles problem, still some jankiness

derived fields cannot be typed as of now -> reverting numerical number change

better grouping error checking, expose count(*) for labelling

Custom colour for clusters/points + smart text colouring

Fixed bad positioning and overflow in explore view + small bugs + added thumbnail

* landscaping & eslint & use izip

* landscapin'

* address js code review

caravel/assets/javascripts/modules/caravel.js

@@ -29,7 +29,8 @@ var sourceMap = {
   world_map: 'world_map.js',
   treemap: 'treemap.js',
   cal_heatmap: 'cal_heatmap.js',
-  horizon: 'horizon.js'
+  horizon: 'horizon.js',
+  mapbox: 'mapbox.jsx'
 };
 
 var color = function () {

caravel/assets/package.json

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/airbnb/caravel#readme",
   "dependencies": {
+    "autobind-decorator": "^1.3.3",
     "babel-loader": "^6.2.1",
     "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.3.13",
@@ -43,6 +44,7 @@
     "bootstrap-datepicker": "^1.6.0",
     "bootstrap-toggle": "^2.2.1",
     "brace": "^0.7.0",
+    "brfs": "^1.4.3",
     "cal-heatmap": "3.5.4",
     "css-loader": "^0.23.1",
     "d3": "^3.5.14",
@@ -58,20 +60,28 @@
     "imports-loader": "^0.6.5",
     "jquery": "^2.2.1",
     "jquery-ui": "^1.10.5",
+    "json-loader": "^0.5.4",
     "less": "^2.6.1",
     "less-loader": "^2.2.2",
+    "mapbox-gl": "^0.20.0",
     "mustache": "^2.2.1",
     "nvd3": "1.8.3",
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",
     "react-dom": "^0.14.7",
     "react-grid-layout": "^0.12.3",
+    "react-map-gl": "^1.0.0-beta-10",
     "react-resizable": "^1.3.3",
     "select2": "3.5",
     "select2-bootstrap-css": "^1.4.6",
     "style-loader": "^0.13.0",
+    "supercluster": "Pending PR at https://github.com/mapbox/supercluster/pull/12",
+    "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "topojson": "^1.6.22",
-    "webpack": "^1.12.12"
+    "transform-loader": "^0.2.3",
+    "viewport-mercator-project": "^2.1.0",
+    "webpack": "^1.12.12",
+    "webworkify-webpack": "1.0.6"
   },
   "devDependencies": {
     "eslint": "^2.2.0",

caravel/assets/utils/common.js

@@ -0,0 +1,27 @@
+const d3 = window.d3 || require('d3');
+
+export const EARTH_CIRCUMFERENCE_KM = 40075.16;
+export const LUMINANCE_RED_WEIGHT = 0.2126;
+export const LUMINANCE_GREEN_WEIGHT = 0.7152;
+export const LUMINANCE_BLUE_WEIGHT = 0.0722;
+export const MILES_PER_KM = 1.60934;
+export const DEFAULT_LONGITUDE = -122.405293;
+export const DEFAULT_LATITUDE = 37.772123;
+export const DEFAULT_ZOOM = 11;
+
+export function kmToPixels(kilometers, latitude, zoomLevel) {
+  // Algorithm from: http://wiki.openstreetmap.org/wiki/Zoom_levels
+  const latitudeRad = latitude * (Math.PI / 180);
+  // Seems like the zoomLevel is off by one
+  const kmPerPixel = EARTH_CIRCUMFERENCE_KM * Math.cos(latitudeRad) / Math.pow(2, zoomLevel + 9);
+  return d3.round(kilometers / kmPerPixel, 2);
+}
+
+export function isNumeric(num) {
+  return !isNaN(parseFloat(num)) && isFinite(num);
+}
+
+export function rgbLuminance(r, g, b) {
+  // Formula: https://en.wikipedia.org/wiki/Relative_luminance
+  return LUMINANCE_RED_WEIGHT*r + LUMINANCE_GREEN_WEIGHT*g + LUMINANCE_BLUE_WEIGHT*b;
+}

caravel/assets/visualizations/mapbox.css

@@ -0,0 +1,16 @@
+div.widget .slice_container {
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+    overflow: hidden;
+}
+
+div.widget .slice_container:active {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+}
+
+.slice_container div {
+    padding-top: 0px;
+}