address feedback

qiaoxin136 · Oct 2, 2017 · 6cdf890 · 6cdf890
1 parent 98627e9
commit 6cdf890
Show file tree

Hide file tree

Showing 35 changed files with 418 additions and 584 deletions.
diff --git a/src/demos/custom-layers/1-combination-layer/package.json b/src/demos/custom-layers/1-combination-layer/package.json
@@ -5,6 +5,7 @@
     "build": "NODE_ENV=production webpack --env.prod=true"
   },
   "dependencies": {
+    "@turf/turf": "^4.7.3",
     "deck.gl": "^4.1.0",
     "luma.gl": "^4.0.1",
     "react": "^15.4.1",

diff --git a/src/demos/custom-layers/1-combination-layer/src/app.js b/src/demos/custom-layers/1-combination-layer/src/app.js
@@ -15,8 +15,8 @@ export default class App extends Component {
     super(props);
     this.state = {
       viewport: {
-        width: window.innerWidth,
-        height: window.innerHeight,
+        width: props.width || window.innerWidth,
+        height: props.height || window.innerHeight,
         longitude: -74,
         latitude: 40.7,
         zoom: 11,
@@ -60,7 +60,7 @@ export default class App extends Component {
   }
 
   render() {
-    const {viewport, currentTime} = this.state;
+    const {viewport} = this.state;
 
     return (
       <div>
@@ -69,7 +69,7 @@ export default class App extends Component {
           onViewportChange={this._onViewportChange}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
 
-          <DeckGLOverlay viewport={viewport} data={taxiData} currentTime={currentTime} />
+          <DeckGLOverlay viewport={viewport} data={taxiData} />
 
         </MapGL>
       </div>

diff --git a/src/demos/custom-layers/1-combination-layer/src/deckgl-overlay.js b/src/demos/custom-layers/1-combination-layer/src/deckgl-overlay.js
@@ -2,9 +2,6 @@ import React, {Component} from 'react';
 import DeckGL from 'deck.gl';
 import TaxiLayer from './taxi-layer';
 
-const PICKUP_COLOR = [0, 128, 255];
-const DROPOFF_COLOR = [255, 0, 128];
-
 export default class DeckGLOverlay extends Component {
 
   render() {
@@ -16,9 +13,8 @@ export default class DeckGLOverlay extends Component {
       new TaxiLayer({
         id: 'taxi-trips',
         data: this.props.data,
-        pickupColor: PICKUP_COLOR,
-        dropoffColor: DROPOFF_COLOR,
-        radiusScale: 40,
+        pickupColor: [0, 128, 255],
+        dropoffColor: [255, 0, 128],
         getPickupLocation: d => [d.pickup_longitude, d.pickup_latitude],
         getDropoffLocation: d => [d.dropoff_longitude, d.dropoff_latitude]
       })

diff --git a/src/demos/custom-layers/1-combination-layer/src/taxi-layer.js b/src/demos/custom-layers/1-combination-layer/src/taxi-layer.js
@@ -1,47 +1,34 @@
 import DeckGL, {CompositeLayer, ScatterplotLayer, ArcLayer} from 'deck.gl';
 
-const defaultProps = {
-  radiusScale: 40,
-  pickupColor: [255, 0, 0],
-  dropoffColor: [0, 0, 255],
-  getPickupLocation: d => d.pickup,
-  getDropoffLocation: d => d.dropoff
-};
-
 export default class TaxiLayer extends CompositeLayer {
 
   renderLayers() {
-    const {id, data, pickupColor, dropoffColor, radiusScale, getPickupLocation, getDropoffLocation} = this.props;
-
     return [
       new ScatterplotLayer({
-        id: `${id}-pickup`,
-        data,
-        getPosition: getPickupLocation,
-        getColor: d => pickupColor,
-        radiusScale
+        id: `${this.props.id}-pickup`,
+        data: this.props.data,
+        getPosition: this.props.getPickupLocation,
+        getColor: d => this.props.pickupColor,
+        radiusScale: 40
       }),
       new ScatterplotLayer({
-        id: `${id}-dropoff`,
-        data,
-        getPosition: getDropoffLocation,
-        getColor: d => dropoffColor,
-        radiusScale
+        id: `${this.props.id}-dropoff`,
+        data: this.props.data,
+        getPosition: this.props.getDropoffLocation,
+        getColor: d => this.props.dropoffColor,
+        radiusScale: 40
       }),
       new ArcLayer({
-        id: `${id}-arc`,
-        data,
+        id: `${this.props.id}-arc`,
+        data: this.props.data,
         opacity: 0.3,
-        getSourcePosition: getPickupLocation,
-        getTargetPosition: getDropoffLocation,
-        getSourceColor: d => pickupColor,
-        getTargetColor: d => dropoffColor,
+        getSourcePosition: this.props.getPickupLocation,
+        getTargetPosition: this.props.getDropoffLocation,
+        getSourceColor: d => this.props.pickupColor,
+        getTargetColor: d => this.props.dropoffColor,
         strokeWidth: 2
       })
     ];
   }
 
 }
-
-TaxiLayer.layerName = 'TaxiLayer';
-TaxiLayer.defaultProps = defaultProps;
diff --git a/src/demos/custom-layers/2-adaptor-layer/src/app.js b/src/demos/custom-layers/2-adaptor-layer/src/app.js
@@ -60,7 +60,7 @@ export default class App extends Component {
   }
 
   render() {
-    const {viewport, currentTime} = this.state;
+    const {viewport} = this.state;
 
     return (
       <div>
@@ -69,7 +69,7 @@ export default class App extends Component {
           onViewportChange={this._onViewportChange}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
 
-          <DeckGLOverlay viewport={viewport} data={taxiData} currentTime={currentTime} />
+          <DeckGLOverlay viewport={viewport} data={taxiData} />
 
         </MapGL>
       </div>

diff --git a/src/demos/custom-layers/2-adaptor-layer/src/deckgl-overlay.js b/src/demos/custom-layers/2-adaptor-layer/src/deckgl-overlay.js
@@ -1,9 +1,6 @@
 import React, {Component} from 'react';
 import DeckGL from 'deck.gl';
-import TaxiLayer from './taxi-cluster-layer';
-
-const PICKUP_COLOR = [0, 128, 255];
-const DROPOFF_COLOR = [255, 0, 128];
+import TaxiClusterLayer from './taxi-cluster-layer';
 
 export default class DeckGLOverlay extends Component {
 
@@ -13,12 +10,11 @@ export default class DeckGLOverlay extends Component {
     }
 
     const layers = [
-      new TaxiLayer({
+      new TaxiClusterLayer({
         id: 'taxi-trips',
         data: this.props.data,
-        pickupColor: PICKUP_COLOR,
-        dropoffColor: DROPOFF_COLOR,
-        radiusScale: 40,
+        pickupColor: [0, 128, 255],
+        dropoffColor: [255, 0, 128],
         getPickupLocation: d => [d.pickup_longitude, d.pickup_latitude],
         getDropoffLocation: d => [d.dropoff_longitude, d.dropoff_latitude]
       })

diff --git a/src/demos/custom-layers/2-adaptor-layer/src/helpers.js b/src/demos/custom-layers/2-adaptor-layer/src/helpers.js
@@ -0,0 +1,31 @@
+import turf from '@turf/helpers';
+import clustersKmeans from '@turf/clusters-kmeans';
+
+/**
+ * Clusters points
+ * @param data {array} - source data
+ * @param accessors {object} - key to accessor mapping.
+ *   keys will be used to add results back to the datum.
+ *   accessor should return a [longitude, latitude] pair.
+ */
+export function clusterPoints(data, accessors) {
+  const clusteredData = data.map(d => ({...d}));
+
+  const allPoints = [];
+
+  data.forEach((d, index) => {
+    for (const key in accessors) {
+      const p = turf.point(accessors[key](d), {index, key});
+      allPoints.push(p);
+    }
+  });
+
+  // Calculate clusters using K-means: https://en.wikipedia.org/wiki/K-means_clustering)
+  clustersKmeans(turf.featureCollection(allPoints)).features
+  .forEach(p => {
+    const {index, key, centroid} = p.properties;
+    clusteredData[index][key] = centroid;
+  });
+
+  return clusteredData;
+}
diff --git a/src/demos/custom-layers/2-adaptor-layer/src/taxi-cluster-layer.js b/src/demos/custom-layers/2-adaptor-layer/src/taxi-cluster-layer.js
@@ -1,9 +1,7 @@
 import DeckGL, {CompositeLayer} from 'deck.gl';
 import TaxiLayer from './taxi-layer';
 
-// turfjs.org
-import turf from '@turf/helpers';
-import clustersKmeans from '@turf/clusters-kmeans';
+import {clusterPoints} from './helpers';
 
 export default class TaxiClusterLayer extends CompositeLayer {
 
@@ -12,29 +10,12 @@ export default class TaxiClusterLayer extends CompositeLayer {
 
     if (oldProps.data !== props.data) {
       // data changed, recalculate cluster
-      const {data, getPickupLocation, getDropoffLocation} = props;
-      const clusteredData = data.map(d => ({...d}));
-
-      // Collect pickup and dropoff points into one array
-      const pickupPoints = data.map((d, index) =>
-        turf.point(getPickupLocation(d), {pickup: index}));
-
-      const dropoffPoints = data.map((d, index) =>
-        turf.point(getDropoffLocation(d), {dropoff: index}));
-
-      const allPoints = turf.featureCollection(pickupPoints.concat(dropoffPoints));
-
-      // Calculate clusters using K-means: https://en.wikipedia.org/wiki/K-means_clustering)
-      clustersKmeans(allPoints).features
-      .forEach(p => {
-        const {pickup, dropoff, centroid} = p.properties;
-        if (pickup !== undefined) {
-          clusteredData[pickup].pickup_cluster_centroid = centroid;
-        } else {
-          clusteredData[dropoff].dropoff_cluster_centroid = centroid;
-        }
+      const clusteredData = clusterPoints(props.data, {
+        pickup_cluster: props.getPickupLocation,
+        dropoff_cluster: props.getDropoffLocation
       });
 
+      // save processed data to layer state
       this.setState({clusteredData});
     }
   }
@@ -44,8 +25,8 @@ export default class TaxiClusterLayer extends CompositeLayer {
       new TaxiLayer({
         ...this.props,
         data: this.state.clusteredData,
-        getPickupLocation: d => d.pickup_cluster_centroid,
-        getDropoffLocation: d => d.dropoff_cluster_centroid
+        getPickupLocation: d => d.pickup_cluster,
+        getDropoffLocation: d => d.dropoff_cluster
       })
     ];
   }

diff --git a/src/demos/custom-layers/2-adaptor-layer/src/taxi-layer.js b/src/demos/custom-layers/2-adaptor-layer/src/taxi-layer.js
@@ -1,47 +1,34 @@
 import DeckGL, {CompositeLayer, ScatterplotLayer, ArcLayer} from 'deck.gl';
 
-const defaultProps = {
-  radiusScale: 40,
-  pickupColor: [255, 0, 0],
-  dropoffColor: [0, 0, 255],
-  getPickupLocation: d => d.pickup,
-  getDropoffLocation: d => d.dropoff
-};
-
 export default class TaxiLayer extends CompositeLayer {
 
   renderLayers() {
-    const {id, data, pickupColor, dropoffColor, radiusScale, getPickupLocation, getDropoffLocation} = this.props;
-
     return [
       new ScatterplotLayer({
-        id: `${id}-pickup`,
-        data,
-        getPosition: getPickupLocation,
-        getColor: d => pickupColor,
-        radiusScale
+        id: `${this.props.id}-pickup`,
+        data: this.props.data,
+        getPosition: this.props.getPickupLocation,
+        getColor: d => this.props.pickupColor,
+        radiusScale: 40
       }),
       new ScatterplotLayer({
-        id: `${id}-dropoff`,
-        data,
-        getPosition: getDropoffLocation,
-        getColor: d => dropoffColor,
-        radiusScale
+        id: `${this.props.id}-dropoff`,
+        data: this.props.data,
+        getPosition: this.props.getDropoffLocation,
+        getColor: d => this.props.dropoffColor,
+        radiusScale: 40
       }),
       new ArcLayer({
-        id: `${id}-arc`,
-        data,
+        id: `${this.props.id}-arc`,
+        data: this.props.data,
         opacity: 0.3,
-        getSourcePosition: getPickupLocation,
-        getTargetPosition: getDropoffLocation,
-        getSourceColor: d => pickupColor,
-        getTargetColor: d => dropoffColor,
+        getSourcePosition: this.props.getPickupLocation,
+        getTargetPosition: this.props.getDropoffLocation,
+        getSourceColor: d => this.props.pickupColor,
+        getTargetColor: d => this.props.dropoffColor,
         strokeWidth: 2
       })
     ];
   }
 
 }
-
-TaxiLayer.layerName = 'TaxiLayer';
-TaxiLayer.defaultProps = defaultProps;
diff --git a/src/demos/custom-layers/3-custom-shader/src/app.js b/src/demos/custom-layers/3-custom-shader/src/app.js
@@ -60,7 +60,7 @@ export default class App extends Component {
   }
 
   render() {
-    const {viewport, currentTime} = this.state;
+    const {viewport} = this.state;
 
     return (
       <div>
@@ -69,7 +69,7 @@ export default class App extends Component {
           onViewportChange={this._onViewportChange}
           mapboxApiAccessToken={MAPBOX_TOKEN}>
 
-          <DeckGLOverlay viewport={viewport} data={taxiData} currentTime={currentTime} />
+          <DeckGLOverlay viewport={viewport} data={taxiData} />
 
         </MapGL>
       </div>

diff --git a/src/demos/custom-layers/3-custom-shader/src/deckgl-overlay.js b/src/demos/custom-layers/3-custom-shader/src/deckgl-overlay.js
@@ -1,9 +1,6 @@
 import React, {Component} from 'react';
 import DeckGL from 'deck.gl';
-import ScatterplotLayer from './my-scatterplot-layer';
-
-const PICKUP_COLOR = [0, 128, 255];
-const DROPOFF_COLOR = [255, 0, 128];
+import MyScatterplotLayer from './my-scatterplot-layer';
 
 export default class DeckGLOverlay extends Component {
 
@@ -13,11 +10,11 @@ export default class DeckGLOverlay extends Component {
     }
 
     const layers = [
-      new ScatterplotLayer({
+      new MyScatterplotLayer({
         id: 'pickup',
         data: this.props.data,
         getPosition: d => [d.pickup_longitude, d.pickup_latitude],
-        getColor: d => PICKUP_COLOR,
+        getColor: d => [0, 128, 255],
         radiusScale: 40
       })
     ];