Post dry run (uber-archive#5)

* remove binds, be more explicit w/ “polish” in deck.gl code * remove too clever deconstructs * fixed typos / issues on code, added a Hero unit * more typos and mistakes found * feat(demo): hot-reload
qiaoxin136 · Sep 12, 2017 · 58b05ce · 58b05ce
1 parent fcf0953
commit 58b05ce
Show file tree

Hide file tree

Showing 41 changed files with 1,240 additions and 732 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,8 @@ node_modules/
 
 *.log*
 .DS_Store
+docs/appcache/manifest.appcache
+docs/appcache/manifest.html
+docs/bundle-6bb1dfe73158c06fb2c4.js
+docs/styles-6bb1dfe73158c06fb2c4.css
+docs/sw.js
diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import App from '../demos/linking-it-all/app.js';
+
+function Hero() {
+  return (<div className="Hero"
+    style={{
+      color: '#494949',
+      height: '35vh',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'relative'
+    }}
+  >
+    <App 
+      noControls={true}
+      viewport={{
+        longitude: -73.97716964761271,
+        latitude: 40.62291914445337,
+        zoom: 10.745105428567754,
+        maxZoom: 16,
+        bearing: -31.958762886597924,
+        pitch: 36.3576011413799
+      }}
+    />
+    <a
+      href="#/documentation"
+      className="btn"
+      style={{
+        position: 'absolute',
+        bottom: '1rem',
+        left: '260px',
+        transform: 'translate(-50%)'
+      }}
+    >{'Get started'}</a>
+  </div>);
+}
+
+export default Hero;
diff --git a/src/config.js b/src/config.js
@@ -14,24 +14,15 @@ export const PROJECTS = {
   'react-vis': 'https://uber.github.io/react-vis',
 };
 
-export const HOME_HEADING = PROJECT_DESC;
-
 export const HOME_RIGHT = (
   <div>
-
-    <h2>Welcome to the visualization tutorials!</h2>
-
+    <h2>Uber Visualization tutorial</h2>
     <p className='m-bottom'>
-      In the following pages, we're going to learn how to use 3 of Uber's open source visualization libraries: React Map GL, Deck GL and React Vis. All of these libraries have a different function and work in the React ecosystem. We're going to build an app using each library separately.
-    </p>
-
-    <p>
-      React Map GL is a React wrapper on Mapbox: it allows you to render and interact with Mapbox maps in React applications.
-      Deck GL is an interface to use WebGL in React. With DeckGL, users build layers of visualized elements that they can superimpose. DeckGL works especially well with React Map GL, but is not limited to maps.
-      React Vis is Uber's charting library. It provides an abstraction to create, interact and style a variety of charts.
-      For the purpose of this tutorial, we're going to use a dataset of taxi pickups and dropoffs in New York, where this information is public.
+      This tutorial will show you how to build an app that showcases three of Uber visualization libraries: ReactMapGL for maps, DeckGL to create WebGL-based data overlays and React-Vis> for simple charts.
+      </p>
+    <p className='m-bottom'>
+      You will learn how to use these libraries separately, but also how they can be combined to work together.
     </p>
-
   </div>
 );
 

diff --git a/src/demos/add-charts/app.js b/src/demos/add-charts/app.js
@@ -2,87 +2,53 @@
 import React, {Component} from 'react';
 import MapGL from 'react-map-gl';
 import DeckGLOverlay from './deckgl-overlay';
-import LayerControls from './layer-controls';
+import {
+  LayerControls,
+  HEXAGON_CONTROLS
+} from './layer-controls';
 import Charts from './charts';
 import Spinner from './spinner';
 import {tooltipStyle} from './style';
 
-import taxiData from '../data/taxi.csv';
+import taxiData from '../data/taxi';
 
-const MAPBOX_STYLE = 'mapbox://styles/uberdata/cive485h000192imn6c6cc8fc';
+const MAPBOX_STYLE = 'mapbox://styles/mapbox/dark-v9';
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
-const LAYER_CONTROLS = {
-  showHexagon: {
-    displayName: 'Show Hexagon',
-    type: 'boolean',
-    value: false
-  },
-  radius: {
-    displayName: 'Hexagon Radius',
-    type: 'range',
-    value: 250,
-    step: 50,
-    min: 50,
-    max: 1000
-  },
-  coverage: {
-    displayName: 'Hexagon Coverage',
-    type: 'range',
-    value: 0.7,
-    step: 0.1,
-    min: 0,
-    max: 1
-  },
-  upperPercentile: {
-    displayName: 'Hexagon Upper Percentile',
-    type: 'range',
-    value: 100,
-    step: 0.1,
-    min: 80,
-    max: 100
-  },
-  radiusScale: {
-    displayName: 'Scatterplot Radius',
-    type: 'range',
-    value: 30,
-    step: 10,
-    min: 10,
-    max: 200
-  }
-};
-
 export default class App extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
       viewport: {
-        ...DeckGLOverlay.defaultViewport,
-        width: 500,
-        height: 500
+        width: window.innerWidth,
+        height: window.innerHeight,
+        longitude: -74,
+        latitude: 40.7,
+        zoom: 11,
+        maxZoom: 16
       },
-      points: [],
-      settings: Object.keys(LAYER_CONTROLS).reduce((accu, key) => ({
+      settings: Object.keys(HEXAGON_CONTROLS).reduce((accu, key) => ({
         ...accu,
-        [key]: LAYER_CONTROLS[key].value
+        [key]: HEXAGON_CONTROLS[key].value
       }), {}),
 
-      // hoverInfo
-      x: 0,
-      y: 0,
-      hoveredObject: null,
       status: 'LOADING'
     };
+    this._resize = this._resize.bind(this);
   }
 
   componentDidMount() {
     this._processData();
-    window.addEventListener('resize', this._resize.bind(this));
+    window.addEventListener('resize', this._resize);
     this._resize();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._resize);
+  }
+
   _processData() {
     if (taxiData) {
       this.setState({status: 'LOADED'});
@@ -139,10 +105,6 @@ export default class App extends Component {
     }
   }
 
-  updateLayerSettings(settings) {
-    this.setState({settings});
-  }
-
   _onHover({x, y, object}) {
     this.setState({x, y, hoveredObject: object});
   }
@@ -160,31 +122,39 @@ export default class App extends Component {
     });
   }
 
+  _updateLayerSettings(settings) {
+    this.setState({settings});
+  }
+
   render() {
-    const {viewport, hoveredObject, points, settings, status, x, y} = this.state;
     return (
       <div>
-        {hoveredObject &&
-          <div style={{...tooltipStyle, left: x, top: y}}>
-            <div>{hoveredObject.id}</div>
+        {this.state.hoveredObject &&
+          <div style={{
+            ...tooltipStyle,
+            left: this.state.x,
+            top: this.state.y
+          }}>
+            <div>{this.state.hoveredObject.id}</div>
           </div>}
         <LayerControls
-          settings={settings}
-          propTypes={LAYER_CONTROLS}
-          onChange={this.updateLayerSettings.bind(this)}/>
+          settings={this.state.settings}
+          propTypes={HEXAGON_CONTROLS}
+          onChange={settings => this._updateLayerSettings(settings)}/>
         <MapGL
-          {...viewport}
+          {...this.state.viewport}
           mapStyle={MAPBOX_STYLE}
-          onViewportChange={this._onViewportChange.bind(this)}
+          onViewportChange={viewport => this._onViewportChange(viewport)}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
           <DeckGLOverlay
-            viewport={viewport}
-            data={points}
-            onHover={this._onHover.bind(this)}
-            settings={settings}/>
+            viewport={this.state.viewport}
+            data={this.state.points}
+            onHover={hover => this._onHover(hover)}
+             {...this.state.settings}
+          />
         </MapGL>
         <Charts {...this.state} />
-        <Spinner status={status} />
+        <Spinner status={this.state.status} />
       </div>
     );
   }

diff --git a/src/demos/add-charts/charts.js b/src/demos/add-charts/charts.js
@@ -22,14 +22,14 @@ export default function Charts({pickups}) {
       yDomain={[0, 1000]}
     >
     <YAxis
-      tickFormat={(d) => (d / 100).toFixed(0) + '%'}
+      tickFormat={d => (d / 100).toFixed(0) + '%'}
     />
     <VerticalBarSeries 
       color="#125C77"
       data={pickups} 
     />
     <XAxis
-      tickFormat={(h) => (h % 24) >= 12 ?
+      tickFormat={h => (h % 24) >= 12 ?
         (h % 12 || 12) + 'PM' :
         (h % 12 || 12) + 'AM'
       }
@@ -39,37 +39,3 @@ export default function Charts({pickups}) {
     </XYPlot>  
   </div>);
 }
-
-/* inital setup
-
-import React from 'react';
-import {charts} from './style';
-
-import {
-  VerticalBarSeries, 
-  XAxis,
-  XYPlot,
-  YAxis
-} from 'react-vis';
-
-export default function Charts({pickups}) {
-  if (!pickups) {
-    return (<div style={charts}/>);
-  }
-  return (<div style={charts}>
-    <h2>Pickups by hour</h2>
-    <p>As percentage of all trips</p>
-    <XYPlot
-      height={140}
-      width={480}
-    >
-    <XAxis />
-    <YAxis />
-    <VerticalBarSeries 
-      data={pickups} 
-    />
-    </XYPlot>  
-  </div>);
-}
-
-*/