replace deprecated APIs of ScatterplotLayer in documentation (visgl#2706

)
mpearson · Feb 21, 2019 · 413e394 · 413e394
1 parent b82c47d
commit 413e394
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ npm install deck.gl
 
 deck.gl offers an extensive catalog of pre-packaged visualization "layers", including [ScatterplotLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/scatterplot-layer), [ArcLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/arc-layer), [TextLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/text-layer), [GeoJsonLayer](http://deck.gl/#/documentation/deckgl-api-reference/layers/geojson-layer), etc. The input to a layer is usually an array of JSON objects. Each layer offers highly-flexible API to customize how the data should be rendered.
 
-Example constructing a deck.gl ScatterplotLayer: 
+Example constructing a deck.gl ScatterplotLayer:
 
 ```js
 import {ScatterplotLayer} from '@deck.gl/layers';
@@ -50,7 +50,7 @@ const scatterplotLayer = new ScatterplotLayer({
   data: 'https://github.com/uber-common/deck.gl-data/blob/master/website/bart-stations.json',
   getRadius: d => Math.sqrt(d.entries) / 100,
   getPosition: d => d.coordinates,
-  getColor: [255, 228, 0],
+  getFillColor: [255, 228, 0],
 });
 ```
 

diff --git a/dev-docs/RFCs/v7.x/binary-data-rfc.md b/dev-docs/RFCs/v7.x/binary-data-rfc.md
@@ -46,7 +46,7 @@ new ScatterplotLayer({
   data,
   getPosition: d => d.position,
   getRadius: d => d.radius,
-  getColor: d => d.color
+  getFillColor: d => d.color
 });
 ```
 
@@ -68,7 +68,7 @@ new ScatterplotLayer({
   getRadius: (object, {index, data}) => {
     return data.src[index * 6 + 2];
   },
-  getColor: (object, {index, data, target}) => {
+  getFillColor: (object, {index, data, target}) => {
     target[0] = data.src[index * 6 + 3];
     target[1] = data.src[index * 6 + 4];
     target[2] = data.src[index * 6 + 5];

diff --git a/docs/api-reference/layer.md b/docs/api-reference/layer.md
@@ -244,27 +244,27 @@ Sometimes `data` remains the same, but the outcome of an accessor has changed. I
 ```js
   const layer = new ScatterplotLayer({
     ... // Other props
-    getColor: d => d.male ? maleColor : femaleColor
+    getFillColor: d => d.male ? maleColor : femaleColor
   });
 ```
 
-In this case, you need to explicitly inform deck.gl to re-evaluate `getColor` for all data items. You do so by defining `updateTriggers`:
+In this case, you need to explicitly inform deck.gl to re-evaluate `getFillColor` for all data items. You do so by defining `updateTriggers`:
 
 ```js
   const layer = new ScatterplotLayer({
     ... // Other props
-    getColor: d => d.male ? maleColor : femaleColor,
+    getFillColor: d => d.male ? maleColor : femaleColor,
     updateTriggers: {
-        getColor: [maleColor, femaleColor]
+        getFillColor: [maleColor, femaleColor]
     }
   });
 ```
 
 `updateTriggers` expect an object whose keys are names of accessor props of this layer, and values are one or more variables that affect the output of the accessors.
 
-For example, `updateTriggers.getColor` is a list of variables that affect the output of
- `getColor`. If either value in the array changes, all attributes that depend on
- `getColor` will be updated.
+For example, `updateTriggers.getFillColor` is a list of variables that affect the output of
+ `getFillColor`. If either value in the array changes, all attributes that depend on
+ `getFillColor` will be updated.
 The variables may be numbers, strings, objects or functions. During each rendering cycle, deck.gl shallow-compares them with the previous values.
 
 

diff --git a/docs/api-reference/mapbox/mapbox-layer.md b/docs/api-reference/mapbox/mapbox-layer.md
@@ -59,7 +59,7 @@ const deck = new Deck({
             ],
             getPosition: d => d.position,
             getRadius: d => d.size,
-            getColor: [255, 0, 0]
+            getFillColor: [255, 0, 0]
         })
     ]
 });
@@ -77,7 +77,7 @@ deck.setProps({
             ],
             getPosition: d => d.position,
             getRadius: d => d.size,
-            getColor: [0, 0, 255]
+            getFillColor: [0, 0, 255]
         })
     ]
 });

diff --git a/docs/api-reference/mapbox/overview.md b/docs/api-reference/mapbox/overview.md
@@ -121,7 +121,7 @@ export class App extends React.Component {
             ],
             getPosition: d => d.position,
             getRadius: d => d.size,
-            getColor: [255, 0, 0]
+            getFillColor: [255, 0, 0]
         })
     ];
 

diff --git a/docs/developer-guide/composite-layers.md b/docs/developer-guide/composite-layers.md
@@ -95,22 +95,23 @@ class NiceScatterplotLayer extends CompositeLayer {
       new ScatterplotLayer({
         ...this.props,
         id: 'fill',
-        getColor: this.props.getFillColor,
-        outline: false,
+        getFillColor: this.props.getFillColor,
+        filled: true,
         updateTriggers: {
           ...updateTrigger,
-          getColor: updateTrigger.getFillColor
+          getFillColor: updateTrigger.getFillColor
         }
       }),
       // the outlines
       new ScatterplotLayer({
         ...this.props,
         id: 'outline',
-        getColor: this.props.getStrokeColor,
-        outline: true,
+        getLineColor: this.props.getStrokeColor,
+        stroked: true,
+        filled: false,
         updateTriggers: {
           ...updateTrigger,
-          getColor: updateTrigger.getStrokeColor
+          getLineColor: updateTrigger.getStrokeColor
         }
       })
     ];

diff --git a/docs/get-started/interactivity.md b/docs/get-started/interactivity.md
@@ -54,7 +54,7 @@ const deck = new Deck({
       ],
       getPosition: d => d.position,
       getRadius: 1000,
-      getColor: [255, 255, 0],
+      getFillColor: [255, 255, 0],
       // Enable picking
       pickable: true,
       // Update tooltip
@@ -101,7 +101,7 @@ class App extends React.Component {
         ],
         getPosition: d => d.position,
         getRadius: 1000,
-        getColor: [255, 255, 0],
+        getFillColor: [255, 255, 0],
         // Enable picking
         pickable: true,
         // Update app state

diff --git a/examples/experimental/json-common/examples/dot-text.json b/examples/experimental/json-common/examples/dot-text.json
@@ -10,7 +10,7 @@
       "data": [
         {"position": [-122.45, 37.8]}
       ],
-      "getColor": [255, 0, 0, 255],
+      "getFillColor": [255, 0, 0, 255],
       "getRadius": 1000
     }, {
       "type": "TextLayer",

diff --git a/examples/experimental/json-common/examples/line.json b/examples/experimental/json-common/examples/line.json
@@ -23,7 +23,7 @@
       "data": "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/line/airports.json",
       "radiusScale": 20,
       "getPosition": "coordinates",
-      "getColor": [255, 140, 0],
+      "getFillColor": [255, 140, 0],
       "getRadius": 60
     },
     {

diff --git a/examples/experimental/json-common/examples/scatterplot.json b/examples/experimental/json-common/examples/scatterplot.json
@@ -21,7 +21,7 @@
       "radiusScale": 30,
       "radiusMinPixels": 0.25,
       "getPosition": "-",
-      "getColor": [0, 128, 255],
+      "getFillColor": [0, 128, 255],
       "getRadius": 1
     }
   ]

diff --git a/showcases/graph/graph-layer/graph-layer.js b/showcases/graph/graph-layer/graph-layer.js
@@ -122,13 +122,13 @@ export default class GraphLayer extends CompositeLayer {
         data: nodes,
         getPosition: getNodePosition,
         getRadius: getNodeSize,
-        getColor: n => (n.highlighting ? [255, 255, 0, 255] : getNodeColor(n)),
+        getFillColor: n => (n.highlighting ? [255, 255, 0, 255] : getNodeColor(n)),
         opacity,
         pickable,
         coordinateSystem,
         updateTriggers: {
           getPosition: layoutTime,
-          getColor: layoutTime
+          getFillColor: layoutTime
         },
         visible
       });

diff --git a/showcases/wind/src/wind-demo.js b/showcases/wind/src/wind-demo.js
@@ -118,7 +118,7 @@ export default class WindDemo extends Component {
         id: 'stations',
         data: stations,
         getPosition: d => [-d.long, d.lat, d.elv],
-        getColor: d => [200, 200, 100],
+        getFillColor: d => [200, 200, 100],
         getRadius: d => 150,
         opacity: 0.2,
         radiusScale: 30