Skip to content

Commit

Permalink
[Feat] Hexagon/Grid, getColorValue, getElevationValue based on update…
Browse files Browse the repository at this point in the history 
…Triggers (#3473)

* use updateTriggers to detect changes in getColor and getElevation value and weight
* create cpuAggregator to manage cpu aggregation in cpu grid and hexagon layer
* fix tests
* update layer doc

Signed-off-by: Shan He <heshan0131@gmail.com>
  • Loading branch information
@heshan0131
heshan0131 committed Sep 4, 2019
1 parent c40ad90 commit 43e4099
Show file tree
Hide file tree
Showing 13 changed files with 1,680 additions and 1,472 deletions.
49 changes: 10 additions & 39 deletions docs/layers/cpu-grid-layer.md
View file
Expand Up @@ -193,19 +193,12 @@ It takes an array of points inside each cell as arguments, returns a number. For
You can pass in `getColorValue` to color the cells by avg/mean/max of a specific attributes of each point.
By default `getColorValue` returns the length of the points array.

Note: grid layer compares whether `getColorValue` has changed to recalculate the value for each bin that its color based on.
You should pass in the function defined outside the render function so it doesn't create a new function on every rendering pass.

```js
class MyGridLayer {
getColorValue (points) {
return points.length;
}

renderLayers() {
return new CPUGridLayer({
id: 'grid-layer',
getColorValue: this.getColorValue // instead of getColorValue: (points) => { return points.length; }
getColorValue: points => points.length
data,
cellSize: 500
});
Expand All @@ -220,7 +213,6 @@ You should pass in the function defined outside the render function so it doesn'

`getColorWeight` is the accessor function to get the weight of a point used to calculate the color value for a cell.


##### `colorAggregation` (String, optional)

* Default: 'SUM'
Expand All @@ -233,28 +225,24 @@ Note: `getColorWeight` and `colorAggregation` together define how color value of

* Using `getColorValue`
```js
function getCount(points) {
return points.length;
}

...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getColorValue: getCount,
getColorValue: points => points.length,
...
});
```

* Using `getColorWeight` and `colorAggregation`
```js
function getWeight(point) {
return 1;
}

...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getColorWeight: getWeight,
getColorWeight: point => 1,
colorAggregation: 'SUM'
...
});
Expand All @@ -278,14 +266,11 @@ const layer = new CPUGridLayer({

* Using `getColorWeight` and `colorAggregation`
```js
function getWeight(point) {
return point.SPACES;
}
...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getColorWeight: getWeight,
getColorWeight: point => point.SPACES,
colorAggregation: 'SUM'
...
});
Expand All @@ -302,16 +287,11 @@ Similar to `getColorValue`, `getElevationValue` is the accessor function to get
It takes an array of points inside each cell as arguments, returns a number.
By default `getElevationValue` returns the length of the points array.

Note: grid layer compares whether `getElevationValue` has changed to recalculate the value for each cell for its elevation.
You should pass in the function defined outside the render function so it doesn't create a new function on every rendering pass.


##### `getElevationWeight` (Function, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `point => 1`

`getElevationWeight` is the accessor function to get the weight of a point used to calcuate the elevation value for a cell.

`getElevationWeight` is the accessor function to get the weight of a point used to calculate the elevation value for a cell.

##### `elevationAggregation` (String, optional)

Expand All @@ -327,28 +307,22 @@ Note: `getElevationWeight` and `elevationAggregation` together define how elevat
* Using `getElevationValue`

```js
function getCount(points) {
return points.length;
}
...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getElevationValue: getCount,
getElevationValue: points => points.length
...
});
```

* Using `getElevationWeight` and `elevationAggregation`
```js
function getWeight(point) {
return 1;
}
...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getElevationWeight: getWeight,
getElevationWeight: point => 1,
elevationAggregation: 'SUM'
...
});
Expand All @@ -372,14 +346,11 @@ const layer = new CPUGridLayer({

* Using `getElevationWeight` and `elevationAggregation`
```js
function getWeight(point) {
return point.SPACES;
}
...
const layer = new CPUGridLayer({
id: 'my-grid-layer',
...
getElevationWeight: getWeight,
getElevationWeight: point => point.SPACES,
elevationAggregation: 'MAX'
...
});
Expand Down
48 changes: 7 additions & 41 deletions docs/layers/hexagon-layer.md
View file
Expand Up @@ -211,21 +211,13 @@ It takes an array of points inside each bin as arguments, returns a number. For
You can pass in `getColorValue` to color the bins by avg/mean/max of a specific attributes of each point.
By default `getColorValue` returns the length of the points array.

Note: hexagon layer compares whether `getColorValue` has changed to
recalculate the value for each bin that its color based on. You should
pass in the function defined outside the render function so it doesn't create a
new function on every rendering pass.

```js
class MyHexagonLayer {
getColorValue (points) {
return points.length;
}

renderLayers() {
return new HexagonLayer({
id: 'hexagon-layer',
getColorValue: this.getColorValue // instead of getColorValue: (points) => { return points.length; }
getColorValue: points => points.length
data,
radius: 500
});
Expand All @@ -239,8 +231,6 @@ new function on every rendering pass.

`getColorWeight` is the accessor function to get the weight of a point used to calcuate the color value for a cell.

Note: similar to `getColorValue`, grid layer compares whether `getColorWeight` has changed to recalculate the value for each bin that its color based on.


##### `colorAggregation` (String, optional)

Expand All @@ -254,28 +244,22 @@ Note: `getColorWeight` and `colorAggregation` together define how color value of

* Using `getColorValue`
```js
function getCount(points) {
return points.length;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getColorValue: getCount,
getColorValue: points => points.length,
...
});
```

* Using `getColorWeight` and `colorAggregation`
```js
function getWeight(point) {
return 1;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getColorWeight: getWeight,
getColorWeight: point => 1,
colorAggregation: 'SUM'
...
});
Expand All @@ -299,14 +283,11 @@ const layer = new HexagonLayer({

* Using `getColorWeight` and `colorAggregation`
```js
function getWeight(point) {
return point.SPACES;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getColorWeight: getWeight,
getColorWeight: point => point.SPACES,
colorAggregation: 'SUM'
...
});
Expand All @@ -323,19 +304,13 @@ Similar to `getColorValue`, `getElevationValue` is the accessor function to get
It takes an array of points inside each bin as arguments, returns a number.
By default `getElevationValue` returns the length of the points array.

Note: hexagon layer compares whether `getElevationValue` has changed to
recalculate the value for each bin for elevation. You should
pass in the function defined outside the render function so it doesn't create a
new function on every rendering pass.


##### `getElevationWeight` (Function, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")

* Default: `point => 1`

`getElevationWeight` is the accessor function to get the weight of a point used to calcuate the elevation value for a cell.

Note: similar to `getElevationValue`, grid layer compares whether `getElevationWeight` has changed to recalculate the value for each bin that its color based on.

##### `elevationAggregation` (String, optional)

Expand All @@ -351,28 +326,22 @@ Note: `getElevationWeight` and `elevationAggregation` together define how elevat
* Using `getElevationValue`

```js
function getCount(points) {
return points.length;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getElevationValue: getCount,
getElevationValue: points => points.length,
...
});
```

* Using `getElevationWeight` and `elevationAggregation`
```js
function getWeight(point) {
return 1;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getElevationWeight: getWeight,
getElevationWeight: point => 1,
elevationAggregation: 'SUM'
...
});
Expand All @@ -396,14 +365,11 @@ const layer = new HexagonLayer({

* Using `getElevationWeight` and `elevationAggregation`
```js
function getWeight(point) {
return point.SPACES;
}
...
const layer = new HexagonLayer({
id: 'my-hexagon-layer',
...
getElevationWeight: getWeight,
getElevationWeight: point => point.SPACES,
elevationAggregation: 'MAX'
...
});
Expand Down
3 changes: 3 additions & 0 deletions docs/upgrade-guide.md
View file
Expand Up @@ -73,6 +73,9 @@ The `project64` shader module is no longer registered by default. If you were pr
return {vs, fs, modules: [project64]};
}
```
#### CPU Grid layer and Hexagon layer updateTriggers

`getElevationValue`, `getElevationWeight` and `getColorValue`, `getColorWeight` are now compared using `updateTriggers` like other layer [accessors](https://github.com/uber/deck.gl/blob/master/docs/developer-guide/using-layers.md#accessors). Update them without passing updateTriggers will no longer trigger layer update.

#### Deprecations

Expand Down
20 changes: 4 additions & 16 deletions examples/layer-browser/src/examples/core-layers.js
View file
Expand Up @@ -341,18 +341,6 @@ function getMax(pts, key) {
: null;
}

// hexagon/grid layer compares whether getColorValue / getElevationValue has changed to
// call out bin sorting. Here we pass in the function defined
// outside props, so it doesn't create a new function on
// every rendering pass
function getColorValue(points) {
return getMean(points, 'SPACES');
}

function getElevationValue(points) {
return getMax(points, 'SPACES');
}

const CPUGridLayerExample = {
layer: CPUGridLayer,
props: {
Expand All @@ -363,8 +351,8 @@ const CPUGridLayerExample = {
extruded: true,
pickable: true,
getPosition: d => d.COORDINATES,
getColorValue,
getElevationValue
getColorValue: points => getMean(points, 'SPACES'),
getElevationValue: points => getMax(points, 'SPACES')
}
};

Expand Down Expand Up @@ -400,8 +388,8 @@ const HexagonLayerExample = {
elevationRange: [0, 3000],
coverage: 1,
getPosition: d => d.COORDINATES,
getColorValue,
getElevationValue
getColorValue: points => getMean(points, 'SPACES'),
getElevationValue: points => getMax(points, 'SPACES')
}
};

Expand Down

0 comments on commit 43e4099

Please sign in to comment.