moving all existing docs/demo files into a building-a-geospatial-app …

src/components/Hero.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import App from '../demos/linking-it-all/app.js';
+import App from '../demos/building-a-geospatial-app/6-linking-it-all/app.js';
 
 function Hero() {
   return (<div className="Hero"
@@ -23,7 +23,7 @@ function Hero() {
       }}
     />
     <a
-      href="#/documentation"
+      href="#/building-a-geospatial-app"
       className="btn"
       style={{
         position: 'absolute',

src/demos/charts/index.js → src/demos/building-a-geospatial-app/4-basic-charts/examples.js

@@ -45,7 +45,7 @@ const basicStyle = {
 const dropoffs = data.map(d => ({hour: d.hour, x: d.hour + 0.5, y: d.dropoffs}));
 const pickups = data.map(d => ({hour: d.hour, x: d.hour + 0.5, y: d.pickups}));
 
-export function BarChartBasic() {
+export function GeospatialAppBarChartBasic() {
   return (<div className="bar-chart-basic"
     style={basicStyle}>
     <XYPlot height={140} width={480}>
@@ -55,7 +55,7 @@ export function BarChartBasic() {
     </XYPlot></div>);
 }
 
-export function BarChartMargins() {
+export function GeospatialAppBarChartMargins() {
   return (<div className="bar-chart-margins"
     style={basicStyle}>
     <XYPlot height={140} width={280}
@@ -66,7 +66,7 @@ export function BarChartMargins() {
     </XYPlot></div>);
 }
 
-export function BarChartXDomain() {
+export function GeospatialAppBarChartXDomain() {
   return (<div className="bar-chart-x-domain"
     style={basicStyle}>
     <XYPlot height={140} width={280}
@@ -78,7 +78,7 @@ export function BarChartXDomain() {
     </XYPlot></div>);
 }
 
-export function BarChartFormattedAxis() {
+export function GeospatialAppBarChartFormattedAxis() {
   return (<div className="bar-chart-formatted-axis"
     style={basicStyle}>
     <XYPlot height={140} width={280}
@@ -94,7 +94,7 @@ export function BarChartFormattedAxis() {
     </XYPlot></div>);
 }
 
-export function BarChartYDomain() {
+export function GeospatialAppBarChartYDomain() {
   return (<div className="bar-chart-y-domain"
     style={basicStyle}>
     <XYPlot height={140} width={280}
@@ -107,7 +107,7 @@ export function BarChartYDomain() {
     </XYPlot></div>);
 }
 
-export function BarChartCustomColor() {
+export function GeospatialAppBarChartCustomColor() {
   return (<div className="bar-chart-custom-color"
     style={basicStyle}>
     <XYPlot height={140} width={280}
@@ -126,7 +126,7 @@ export function BarChartCustomColor() {
     </XYPlot></div>);
 }
 
-export function BasicLineChart() {
+export function GeospatialAppBasicLineChart() {
   return (<div className="line-chart-basic"
     style={basicStyle}>
     <XYPlot height={140} width={480}
@@ -144,7 +144,7 @@ export function BasicLineChart() {
   </div>);
 }
 
-export class HoverInteraction extends Component {
+export class GeospatialAppHoverInteraction extends Component {
   constructor() {
     super();
     this.state = {highlightedHour: null};

src/demos/building-a-geospatial-app/starting-code/deckgl-overlay.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import DeckGL, {ScatterplotLayer, HexagonLayer} from 'deck.gl';
+
+const PICKUP_COLOR = [0, 128, 255];
+const DROPOFF_COLOR = [255, 0, 128];
+
+const HEATMAP_COLORS = [
+  [213, 62, 79],
+  [252, 141, 89],
+  [254, 224, 139],
+  [230, 245, 152],
+  [153, 213, 148],
+  [50, 136, 189]
+].reverse();
+
+const LIGHT_SETTINGS = {
+  lightsPosition: [-73.8, 40.5, 8000, -74.2, 40.9, 8000],
+  ambientRatio: 0.4,
+  diffuseRatio: 0.6,
+  specularRatio: 0.2,
+  lightsStrength: [0.8, 0.0, 0.8, 0.0],
+  numberOfLights: 2
+};
+
+const elevationRange = [0, 1000];
+
+export default class DeckGLOverlay extends Component {
+ _initialize(gl) {
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+  }
+
+  render() {
+    if (!this.props.data) {
+      return null;
+    }
+
+    const layers = [
+	  !this.props.showHexagon ? new ScatterplotLayer({
+        id: 'scatterplot',
+        getPosition: d => d.position,
+        getColor: d => d.pickup ? PICKUP_COLOR : DROPOFF_COLOR,
+        getRadius: d => 1,
+        opacity: 0.5,
+        pickable: true,
+        radiusMinPixels: 0.25,
+        radiusMaxPixels: 30,
+        ...this.props
+      }) : null,
+      this.props.showHexagon ? new HexagonLayer({
+        id: 'heatmap',
+        colorRange: HEATMAP_COLORS,
+        elevationRange,
+        elevationScale: 10,
+        extruded: true,
+        getPosition: d => d.position,
+        lightSettings: LIGHT_SETTINGS,
+        opacity: 1,
+        pickable: true,
+        ...this.props
+      }) : null
+    ];
+
+    return (<DeckGL
+      {...this.props.viewport}
+      layers={layers}
+      onWebGLInitialized={this._initialize}
+    />);
+  }
+}

src/demos/index.js

@@ -1,25 +1,25 @@
-import StartingWithMap from './starting-with-map/app';
-import ScatterplotOverlay from './scatterplot-overlay/app';
-import HexagonOverlay from './hexagon-overlay/app';
-import AddCharts from './add-charts/app';
-import StartingCode from './starting-code/app';
-import IntroducingInteraction from './introducing-interaction/app';
-import LinkingItAll from './linking-it-all/app';
+// building a geospatial app
+import GeospatialAppStartingWithMap from './building-a-geospatial-app/1-starting-with-map/app';
+import GeospatialAppScatterplotOverlay from './building-a-geospatial-app/2-scatterplot-overlay/app';
+import GeospatialAppHexagonOverlay from './building-a-geospatial-app/3-hexagon-overlay/app';
+import GeospatialAppBasicCharts from './building-a-geospatial-app/4-basic-charts/app';
+import * as GeospatialAppChartExamples from './building-a-geospatial-app/4-basic-charts/examples';
 
-import * as guidelines from './guidelines';
-import * as charts from './charts';
+import GeospatialAppInteraction from './building-a-geospatial-app/5-interaction/app';
+import GeospatialAppLinkingItAll from './building-a-geospatial-app/6-linking-it-all/app';
+
+import * as guidelines from './building-a-geospatial-app/guidelines';
 
 export default {
 
-  StartingCode,
-  StartingWithMap,
-  ScatterplotOverlay,
-  HexagonOverlay,
-  AddCharts,
-  IntroducingInteraction,
-  LinkingItAll,
+  GeospatialAppStartingWithMap,
+  GeospatialAppScatterplotOverlay,
+  GeospatialAppHexagonOverlay,
+  GeospatialAppBasicCharts,
+  ...GeospatialAppChartExamples,
+  GeospatialAppInteraction,
+  GeospatialAppLinkingItAll,
 
-  ...charts,
   ...guidelines,
 
 }

src/docs/setup.md → src/docs/building-a-geospatial-app/0-setup.md

@@ -30,8 +30,6 @@ A page should automatically be opened in your browser, with a pretty simple app
 
 Note that the repository you cloned also contains all the content and code of this tutorial, and you may run it locally if you want (repeat the last two steps from above from vis-tutorial/).
 
-In the pages of this tutorial, you can use the back quote key ` (typically located below ESC) to see the code examples in full page.
-
 ## 3. How this tutorial works
 
 In this tutorial, you will build a full geospatial application from scratch, with maps, WebGL data overlays and interactive charts. 
@@ -47,9 +45,9 @@ We'll end each lesson with key takeaways and further reading.
 You can now open your text editor with the following file:
 
 ```
-src/demos/starting-code/app.js
+src/demos/building-a-geospatial-app/starting-code/app.js
 ```
 
 It's an empty component! `starting-code` will be the folder that holds all your
 changes as you go through the tutorial. You can now head to the next step:
-[Starting With A Map](#/documentation/react-map-gl/starting-with-a-map).
+[Starting With A Map](#/building-a-geospatial-app/1-starting-with-a-map).

src/docs/starting-with-map.md → src/docs/building-a-geospatial-app/1-starting-with-map.md

@@ -1,4 +1,4 @@
-<!-- INJECT:"StartingWithMap" heading -->
+<!-- INJECT:"GeospatialAppStartingWithMap" heading -->
 
 <ul class='insert learning-objectives'>
 <li>Create a map in a React application,</li>
@@ -12,13 +12,13 @@ the powerful `MapboxGL` mapping library. `react-map-gl` makes it super easy to
 drop a mapping component into your application.
 
 Checkout the complete code for this step
-[here](https://github.com/uber-common/vis-tutorial/tree/master/demos/starting-with-map).
+[here](https://github.com/uber-common/vis-academy/tree/master/demos/building-a-geospatial-app/1-starting-with-map).
 
 ## 1. Start with a bare React Component
 
 **HOLD UP!!!** If you got here without reading the **Setup** step, it is
 highly recommended that you do so, or your application might not work.
-[GO HERE](https://uber-common.github.io/vis-tutorial/#/setup) and go through it now.
+[GO HERE]((#/building-a-geospatial-app/0-setup.md) and go through it now.
 
 The app component in the starting code above currently looks like this:
 ```js
@@ -176,7 +176,7 @@ where viewport state is actually being updated.
 
 ## 6. Completed Code
 
-Our completed component [app.js](https://github.com/uber-common/vis-tutorial/blob/master/src/demos/starting-with-map/app.js) should now look like this:
+Our completed component [app.js](https://github.com/uber-common/vis-academy/blob/master/src/demos/building-a-geospatial-app/1-starting-with-map/app.js) should now look like this:
 
 ```js
 /* global window */