Map visualization

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;
+}