diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md new file mode 120000 index 00000000000..44fcc634393 --- /dev/null +++ b/docs/CONTRIBUTING.md @@ -0,0 +1 @@ +../CONTRIBUTING.md \ No newline at end of file diff --git a/docs/developer-guide/views.md b/docs/developer-guide/views.md index 57b246b116e..8407c810147 100644 --- a/docs/developer-guide/views.md +++ b/docs/developer-guide/views.md @@ -9,15 +9,15 @@ View classes enable applications to specify one or more rectangular viewports an - +

A "minimap" app, implemented as two overlapping, partially synchronized MapViews

- +

A vehicle log rendered from the driver's perspective, implemented with FirstPersonView

- +

A graph, implemented with OrthographicView

diff --git a/docs/layers/arc-layer.md b/docs/layers/arc-layer.md index fe0fa8113af..b431421bce4 100644 --- a/docs/layers/arc-layer.md +++ b/docs/layers/arc-layer.md @@ -1,4 +1,6 @@ - +import {ArcLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/bitmap-layer.md b/docs/layers/bitmap-layer.md index 98bf6195a66..5cb953f238e 100644 --- a/docs/layers/bitmap-layer.md +++ b/docs/layers/bitmap-layer.md @@ -1,4 +1,6 @@ - +import {BitmapLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/column-layer.md b/docs/layers/column-layer.md index def65f1aaad..143b7c134a1 100644 --- a/docs/layers/column-layer.md +++ b/docs/layers/column-layer.md @@ -1,4 +1,6 @@ - +import {ColumnLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/contour-layer.md b/docs/layers/contour-layer.md index 65c8c204bb3..597473a8553 100644 --- a/docs/layers/contour-layer.md +++ b/docs/layers/contour-layer.md @@ -1,4 +1,6 @@ - +import {ContourLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers diff --git a/docs/layers/cpu-grid-layer.md b/docs/layers/cpu-grid-layer.md index 0ec7562da38..254794bd3df 100644 --- a/docs/layers/cpu-grid-layer.md +++ b/docs/layers/cpu-grid-layer.md @@ -1,4 +1,6 @@ - +import {CPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -101,7 +103,7 @@ Color scale domain, default is set to the range of point counts in each cell. ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/geojson-layer.md b/docs/layers/geojson-layer.md index 378d41f4dee..dfb71ff0387 100644 --- a/docs/layers/geojson-layer.md +++ b/docs/layers/geojson-layer.md @@ -1,4 +1,6 @@ - +import {GeoJsonLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/gpu-grid-layer.md b/docs/layers/gpu-grid-layer.md index ff86f0e0ad8..01f6a55b7da 100644 --- a/docs/layers/gpu-grid-layer.md +++ b/docs/layers/gpu-grid-layer.md @@ -1,4 +1,6 @@ - +import {GPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -99,7 +101,7 @@ Size of each cell in meters. Must be greater than `0`. ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/great-circle-layer.md b/docs/layers/great-circle-layer.md index a8823887005..027658a9d1a 100644 --- a/docs/layers/great-circle-layer.md +++ b/docs/layers/great-circle-layer.md @@ -1,4 +1,6 @@ - +import {GreatCircleLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

64-bit diff --git a/docs/layers/grid-cell-layer.md b/docs/layers/grid-cell-layer.md index 6f73d7c7911..040d87ece46 100644 --- a/docs/layers/grid-cell-layer.md +++ b/docs/layers/grid-cell-layer.md @@ -1,5 +1,6 @@ +import {GridCellLayerDemo} from 'website-components/doc-demos/layers'; - +

@deck.gl/layers diff --git a/docs/layers/grid-layer.md b/docs/layers/grid-layer.md index e7b1c04c8fb..c0683aaca56 100644 --- a/docs/layers/grid-layer.md +++ b/docs/layers/grid-layer.md @@ -1,4 +1,6 @@ - +import {GridLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -100,7 +102,7 @@ Color scale domain, default is set to the range of point counts in each cell. ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/h3-cluster-layer.md b/docs/layers/h3-cluster-layer.md index 7221636420a..9a3af8464be 100644 --- a/docs/layers/h3-cluster-layer.md +++ b/docs/layers/h3-cluster-layer.md @@ -1,4 +1,6 @@ - +import {H3ClusterLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/h3-hexagon-layer.md b/docs/layers/h3-hexagon-layer.md index 789db611fad..4d28c026968 100644 --- a/docs/layers/h3-hexagon-layer.md +++ b/docs/layers/h3-hexagon-layer.md @@ -1,4 +1,6 @@ - +import {H3HexagonLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/heatmap-layer.md b/docs/layers/heatmap-layer.md index 4fe1bf54cda..aba261702fa 100644 --- a/docs/layers/heatmap-layer.md +++ b/docs/layers/heatmap-layer.md @@ -1,4 +1,6 @@ - +import {HeatmapLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -77,7 +79,7 @@ Radius of the circle in pixels, to which the weight of an object is distributed. ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing Red, Green, Blue and Alpha channels. Each channel is a value between 0 and 255. When Alpha is not provided, a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/hexagon-layer.md b/docs/layers/hexagon-layer.md index cb5a2901729..494e724f892 100644 --- a/docs/layers/hexagon-layer.md +++ b/docs/layers/hexagon-layer.md @@ -1,4 +1,6 @@ - +import {HexagonLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -115,7 +117,7 @@ to number of counts by passing in an arbitrary color domain. This property is ex ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/icon-layer.md b/docs/layers/icon-layer.md index d942737bfa5..8a9cf65d4f0 100644 --- a/docs/layers/icon-layer.md +++ b/docs/layers/icon-layer.md @@ -1,4 +1,6 @@ - +import {IconLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/line-layer.md b/docs/layers/line-layer.md index 8bec5f0c541..d1f59eef4c6 100644 --- a/docs/layers/line-layer.md +++ b/docs/layers/line-layer.md @@ -1,4 +1,6 @@ - +import {LineLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/mvt-layer.md b/docs/layers/mvt-layer.md index afc4fe4a595..eaf29beaddb 100644 --- a/docs/layers/mvt-layer.md +++ b/docs/layers/mvt-layer.md @@ -1,4 +1,6 @@ - +import {MVTLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/path-layer.md b/docs/layers/path-layer.md index 6de84a93eec..723ad9b4d88 100644 --- a/docs/layers/path-layer.md +++ b/docs/layers/path-layer.md @@ -1,4 +1,6 @@ - +import {PathLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/point-cloud-layer.md b/docs/layers/point-cloud-layer.md index 91366c8ee24..4fb0ef25dfa 100644 --- a/docs/layers/point-cloud-layer.md +++ b/docs/layers/point-cloud-layer.md @@ -1,4 +1,6 @@ - +import {PointCloudLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/polygon-layer.md b/docs/layers/polygon-layer.md index 039f3461428..cf9c1ff584d 100644 --- a/docs/layers/polygon-layer.md +++ b/docs/layers/polygon-layer.md @@ -1,4 +1,6 @@ - +import {PolygonLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/s2-layer.md b/docs/layers/s2-layer.md index 52f1d5c2e23..817ed7805b7 100644 --- a/docs/layers/s2-layer.md +++ b/docs/layers/s2-layer.md @@ -1,4 +1,6 @@ - +import {S2LayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/scatterplot-layer.md b/docs/layers/scatterplot-layer.md index ec7a7b97273..452f2da3f84 100644 --- a/docs/layers/scatterplot-layer.md +++ b/docs/layers/scatterplot-layer.md @@ -1,4 +1,6 @@ - +import {ScatterplotLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/screen-grid-layer.md b/docs/layers/screen-grid-layer.md index 7d60fa25466..2aac5530665 100644 --- a/docs/layers/screen-grid-layer.md +++ b/docs/layers/screen-grid-layer.md @@ -1,4 +1,6 @@ - +import {ScreenGridLayerDemo} from 'website-components/doc-demos/aggregation-layers'; + +

@deck.gl/aggregation-layers @@ -128,7 +130,7 @@ to value of its weight by passing in an arbitrary color domain. This property is ##### `colorRange` (Array, optional) -* Default: +* Default: Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`. diff --git a/docs/layers/terrain-layer.md b/docs/layers/terrain-layer.md index efbbd314a9a..cb5c64e3175 100644 --- a/docs/layers/terrain-layer.md +++ b/docs/layers/terrain-layer.md @@ -1,4 +1,6 @@ - +import {TerrainLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/text-layer.md b/docs/layers/text-layer.md index edf24dfcdd1..f2abce7f549 100644 --- a/docs/layers/text-layer.md +++ b/docs/layers/text-layer.md @@ -1,4 +1,6 @@ - +import {TextLayerDemo} from 'website-components/doc-demos/layers'; + +

@deck.gl/layers diff --git a/docs/layers/tile-layer.md b/docs/layers/tile-layer.md index dc1ce8eb794..8af3c9dd7a7 100644 --- a/docs/layers/tile-layer.md +++ b/docs/layers/tile-layer.md @@ -1,4 +1,6 @@ - +import {TileLayerDemo} from 'website-components/doc-demos/geo-layers'; + +

@deck.gl/geo-layers diff --git a/docs/layers/trips-layer.md b/docs/layers/trips-layer.md index 4fc4c117463..5064409f02d 100644 --- a/docs/layers/trips-layer.md +++ b/docs/layers/trips-layer.md @@ -1,4 +1,7 @@ - +import {TripsLayerDemo} from 'website-components/doc-demos/geo-layers'; + + +

@deck.gl/geo-layers

diff --git a/docs/table-of-contents.json b/docs/table-of-contents.json index 3af10b90886..1afe15514d8 100644 --- a/docs/table-of-contents.json +++ b/docs/table-of-contents.json @@ -8,7 +8,7 @@ {"entry": "docs/whats-new"}, {"entry": "docs/upgrade-guide"}, {"entry": "docs/roadmap"}, - {"entry": "CONTRIBUTING"}, + {"entry": "docs/CONTRIBUTING"}, {"entry": "docs/faq"} ] }, @@ -78,29 +78,29 @@ {"entry": "docs/layers/column-layer"}, {"entry": "docs/layers/contour-layer"}, {"entry": "docs/layers/geojson-layer"}, - {"entry": "docs/layers/icon-layer"}, - {"entry": "docs/layers/line-layer"}, - {"entry": "docs/layers/path-layer"}, - {"entry": "docs/layers/point-cloud-layer"}, - {"entry": "docs/layers/polygon-layer"}, - {"entry": "docs/layers/solid-polygon-layer"}, - {"entry": "docs/layers/scatterplot-layer"}, - {"entry": "docs/layers/text-layer"}, {"entry": "docs/layers/gpu-grid-layer"}, {"entry": "docs/layers/great-circle-layer"}, - {"entry": "docs/layers/grid-layer"}, {"entry": "docs/layers/grid-cell-layer"}, - {"entry": "docs/layers/hexagon-layer"}, + {"entry": "docs/layers/grid-layer"}, {"entry": "docs/layers/h3-cluster-layer"}, {"entry": "docs/layers/h3-hexagon-layer"}, + {"entry": "docs/layers/hexagon-layer"}, + {"entry": "docs/layers/icon-layer"}, + {"entry": "docs/layers/line-layer"}, + {"entry": "docs/layers/mvt-layer"}, + {"entry": "docs/layers/path-layer"}, + {"entry": "docs/layers/point-cloud-layer"}, + {"entry": "docs/layers/polygon-layer"}, {"entry": "docs/layers/s2-layer"}, + {"entry": "docs/layers/scatterplot-layer"}, {"entry": "docs/layers/scenegraph-layer"}, {"entry": "docs/layers/screen-grid-layer"}, {"entry": "docs/layers/simple-mesh-layer"}, - {"entry": "docs/layers/tile-layer"}, - {"entry": "docs/layers/trips-layer"}, + {"entry": "docs/layers/solid-polygon-layer"}, {"entry": "docs/layers/terrain-layer"}, - {"entry": "docs/layers/mvt-layer"} + {"entry": "docs/layers/text-layer"}, + {"entry": "docs/layers/tile-layer"}, + {"entry": "docs/layers/trips-layer"} ] }, { @@ -133,7 +133,6 @@ {"entry": "docs/api-reference/globe-view"}, {"entry": "docs/api-reference/first-person-view"}, {"entry": "docs/api-reference/orthographic-view"}, - {"entry": "docs/api-reference/perspective-view"}, {"entry": "docs/api-reference/orbit-view"}, {"entry": "docs/api-reference/view-state-transitions"} ] @@ -178,7 +177,8 @@ "entries": [ {"entry": "docs/api-reference/json/overview"}, {"entry": "docs/api-reference/json/json-converter"}, - {"entry": "docs/api-reference/json/json-layer"} + {"entry": "docs/api-reference/json/json-configuration"}, + {"entry": "docs/api-reference/json/conversion-reference"} ] }, { diff --git a/docs/whats-new.md b/docs/whats-new.md index 4ace6aa8962..3b52cb67a0d 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -504,7 +504,7 @@ As the number of deck.gl layers grow, we are splitting existing and new layers i ### glTF Support and Loaders.gl - + The new [ScenegraphLayer](/docs/layers/scenegraph-layer.md) and [SimpleMeshLayer](/docs/layers/simple-mesh-layer.md) support loading 3D models and scenegraphs in the popular [glTF™](https://www.khronos.org/gltf/) asset format. glTF is a royalty-free specification for the efficient transmission and loading of 3D assets, with a rich ecosystem of tools and extensions. All variants of glTF 2.0 are supported, including binary `.glb` files as well as JSON `.gltf` files with binary assets in base64 encoding or in separate files. @@ -781,7 +781,7 @@ Release date: June 01, 2018 - +

Orthographic Mode

@@ -832,15 +832,15 @@ Release date: April 24, 2018 - +

New TextLayer

- +

ScreenGridLayer Color Scale

- +

Automated Render Tests

@@ -944,11 +944,11 @@ Release date: Feb 16, 2018 - +

Layer Transitions

- +

JSX Layers

@@ -988,15 +988,15 @@ Release date: Dec 21, 2017 - +

GPU-based Highlighting

- +

Dashes in GeoJson

- +

React 16 Support

@@ -1084,11 +1084,11 @@ Release date: July 27th, 2017 - +

WebGL 2

- +

Seer Extension

diff --git a/website-gatsby/gatsby-config.js b/website-gatsby/gatsby-config.js index efd90797992..dc684a0f78f 100644 --- a/website-gatsby/gatsby-config.js +++ b/website-gatsby/gatsby-config.js @@ -1,5 +1,7 @@ const {resolve} = require('path'); +const ROOT_DIR = resolve('..'); + module.exports = { plugins: [ { @@ -9,16 +11,16 @@ module.exports = { // Folders DIR_NAME: __dirname, - ROOT_FOLDER: `${__dirname}/../`, + ROOT_FOLDER: ROOT_DIR, DOCS: require('../docs/table-of-contents.json'), DOC_FOLDERS: [ - `${__dirname}/../docs/`, - `${__dirname}/../modules/` + resolve(ROOT_DIR, 'docs'), + resolve(ROOT_DIR, 'modules') ], SOURCE: [ - `${__dirname}/static`, - `${__dirname}/src` + resolve('./static'), + resolve('./src') ], PROJECT_TYPE: 'github', @@ -26,9 +28,11 @@ module.exports = { PROJECT_NAME: 'deck.gl', PROJECT_ORG: 'visgl', PROJECT_ORG_LOGO: 'images/visgl-logo.png', - PROJECT_URL: 'https://github.com/visgl/deck.gl', + PROJECT_URL: 'https://github.com/visgl/', PROJECT_DESC: 'WebGL-powered visualization framework for large-scale datasets', - PATH_PREFIX: '/', + + // This is only activated in staging, with `gatsby build --prefix-paths` + PATH_PREFIX: '/deck.gl', GA_TRACKING: null, @@ -38,7 +42,7 @@ module.exports = { HOME_PATH: '/', LINK_TO_GET_STARTED: '/docs', - INDEX_PAGE_URL: resolve(__dirname, './src/index.jsx'), + INDEX_PAGE_URL: resolve('./src/index.jsx'), PROJECTS: [ {name: 'deck.gl', url: 'https://deck.gl'}, diff --git a/website-gatsby/gatsby-node.js b/website-gatsby/gatsby-node.js index fc44cf32e02..8fad8709cbe 100644 --- a/website-gatsby/gatsby-node.js +++ b/website-gatsby/gatsby-node.js @@ -20,6 +20,7 @@ module.exports.onCreateWebpackConfig = function onCreateWebpackConfigOverride(op config.resolve = config.resolve || {}; config.resolve.alias = Object.assign({ 'website-examples': resolve('../examples/website'), + 'website-components': resolve('./src'), react: resolve('node_modules/react'), 'react-dom': resolve('node_modules/react-dom'), 'styletron-engine-atomic': resolve('node_modules/styletron-engine-atomic'), diff --git a/website-gatsby/package.json b/website-gatsby/package.json index ee667ccfc20..265fedc443a 100644 --- a/website-gatsby/package.json +++ b/website-gatsby/package.json @@ -8,10 +8,11 @@ ], "main": "gatsby-config.js", "scripts": { + "install-deps": "yarn && find ../examples/website -name package.json -depth 2 -execdir yarn \\;", "start": "yarn clean && yarn develop", "build": "yarn clean && gatsby build", + "build-staging": "yarn clean && gatsby build --prefix-paths", "clean": "rm -rf ./.cache ./public", - "install-examples": "find ../examples/website -name package.json -depth 2 -execdir yarn \\;", "develop": "yarn clean && gatsby develop", "serve": "gatsby serve", "deploy": "NODE_DEBUG=gh-pages gh-pages -d public" @@ -29,6 +30,9 @@ "gatsby-plugin-no-sourcemaps": "^2.1.2", "gatsby-plugin-sass": "^2.3.4", "gatsby-theme-ocular": "^1.2.0-beta.8", + "@mdx-js/mdx": "^1.6.6", + "@mdx-js/react": "^1.6.6", + "gatsby-plugin-mdx": "^1.2.16", "gh-pages": "^2.2.0", "node-sass": "^4.14.1", "react": "^16.8.6", diff --git a/website-gatsby/src/components/index.js b/website-gatsby/src/components/index.js new file mode 100644 index 00000000000..e8b774c499f --- /dev/null +++ b/website-gatsby/src/components/index.js @@ -0,0 +1,18 @@ +import React from 'react'; + +export {default as LayerDemo} from './layer-demo'; + +{/* `${object.from.name} to ${object.to.name}`} + layer={ + new ArcLayer({ + pickable: true, + getWidth: 12, + getSourcePosition: d => d.from.coordinates, + getTargetPosition: d => d.to.coordinates, + getSourceColor: d => [Math.sqrt(d.inbound), 140, 0], + getTargetColor: d => [Math.sqrt(d.outbound), 140, 0] + }) + } /> + */} \ No newline at end of file diff --git a/website-gatsby/src/doc-demos/aggregation-layers.js b/website-gatsby/src/doc-demos/aggregation-layers.js new file mode 100644 index 00000000000..c7167945a0d --- /dev/null +++ b/website-gatsby/src/doc-demos/aggregation-layers.js @@ -0,0 +1,96 @@ +import { + ContourLayer, + CPUGridLayer, + HexagonLayer, + ScreenGridLayer, + GPUGridLayer, + GridLayer, + HeatmapLayer +} from '@deck.gl/aggregation-layers'; + +import makeLayerDemo from './layer-demo'; +import {DATA_URI} from '../constants/defaults'; + +export const ContourLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `threshold: ${object.threshold}`, + layer: new ContourLayer({ + data: `${DATA_URI}/sf-bike-parking.json`, + pickable: true, + cellSize: 200, + getPosition: d => d.COORDINATES, + contours: [ + {threshold: 1, color: [255, 0, 0], strokeWidth: 2, zIndex: 1}, + {threshold: [3, 10], color: [55, 0, 55], zIndex: 0}, + {threshold: 5, color: [0, 255, 0], strokeWidth: 6, zIndex: 2}, + {threshold: 15, color: [0, 0, 255], strokeWidth: 4, zIndex: 3} + ] + }) +}); + +const GRID_LAYER_INFO = { + getTooltip: ({object}) => `${object.position.join(', ')}\nCount: ${object.count}`, + props: { + data: `${DATA_URI}/sf-bike-parking.json`, + pickable: true, + extruded: true, + cellSize: 200, + elevationScale: 4, + getPosition: d => d.COORDINATES + } +}; + +export const GPUGridLayerDemo = makeLayerDemo({ + getTooltip: GRID_LAYER_INFO.getTooltip, + layer: new GPUGridLayer(GRID_LAYER_INFO.props) +}); + +export const GridLayerDemo = makeLayerDemo({ + getTooltip: GRID_LAYER_INFO.getTooltip, + layer: new GridLayer(GRID_LAYER_INFO.props) +}); + +export const CPUGridLayerDemo = makeLayerDemo({ + getTooltip: GRID_LAYER_INFO.getTooltip, + layer: new CPUGridLayer(GRID_LAYER_INFO.props) +}); + +export const HexagonLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.position.join(', ')}\nCount: ${object.count}`, + layer: new HexagonLayer({ + data: `${DATA_URI}/sf-bike-parking.json`, + extruded: true, + radius: 200, + elevationScale: 4, + getPosition: d => d.COORDINATES + }) +}); + +export const ScreenGridLayerDemo = makeLayerDemo({ + getTooltip: _ => 'aggregated cell', + layer: new ScreenGridLayer({ + data: `${DATA_URI}/sf-bike-parking.json`, + pickable: false, + opacity: 0.8, + cellSizePixels: 50, + colorRange: [ + [0, 25, 0, 25], + [0, 85, 0, 85], + [0, 127, 0, 127], + [0, 170, 0, 170], + [0, 190, 0, 190], + [0, 255, 0, 255] + ], + getPosition: d => d.COORDINATES, + getWeight: d => d.SPACES + }) +}); + +export const HeatmapLayerDemo = makeLayerDemo({ + getTooltip: _ => 'heatmap', + layer: new HeatmapLayer({ + data: `${DATA_URI}/sf-bike-parking.json`, + pickable: false, + getPosition: d => d.COORDINATES, + radiusPixels: 25 + }) +}); diff --git a/website-gatsby/src/doc-demos/geo-layers.js b/website-gatsby/src/doc-demos/geo-layers.js new file mode 100644 index 00000000000..efa221d8cc8 --- /dev/null +++ b/website-gatsby/src/doc-demos/geo-layers.js @@ -0,0 +1,183 @@ +import {BitmapLayer} from '@deck.gl/layers'; + +import { + GreatCircleLayer, + S2Layer, + TileLayer, + TripsLayer, + TerrainLayer, + MVTLayer, + H3HexagonLayer, + H3ClusterLayer +} from '@deck.gl/geo-layers'; + +import makeLayerDemo from './layer-demo'; +import {DATA_URI} from '../constants/defaults'; + +const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line + +export const GreatCircleLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.from.name} to ${object.to.name}`, + layer: new GreatCircleLayer({ + data: `${DATA_URI}/flights.json`, + getSourcePosition: d => d.from.coordinates, + getTargetPosition: d => d.to.coordinates, + getSourceColor: [64, 255, 0], + getTargetColor: [0, 128, 200], + widthMinPixels: 5, + pickable: true + }) +}); + +export const S2LayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.token} value: ${object.value}`, + layer: new S2Layer({ + data: `${DATA_URI}/sf.s2cells.json`, + pickable: true, + wireframe: false, + filled: true, + extruded: true, + elevationScale: 1000, + getS2Token: d => d.token, + getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128], + getElevation: d => d.value + }) +}); + +export const H3HexagonLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.hex} count: ${object.count}`, + layer: new H3HexagonLayer({ + data: `${DATA_URI}/sf.h3cells.json`, + pickable: true, + wireframe: false, + filled: true, + extruded: true, + elevationScale: 20, + getHexagon: d => d.hex, + getFillColor: d => [255, (1 - d.count / 500) * 255, 0], + getElevation: d => d.count + }) +}); + +export const H3ClusterLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `density: ${object.mean}`, + layer: new H3ClusterLayer({ + data: `${DATA_URI}/sf.h3clusters.json`, + pickable: true, + stroked: true, + filled: true, + extruded: false, + getHexagons: d => d.hexIds, + getFillColor: d => [255, (1 - d.mean / 500) * 255, 0], + getLineColor: [255, 255, 255], + lineWidthMinPixels: 2 + }) +}); + +export const TileLayerDemo = makeLayerDemo({ + getTooltip: ({tile}) => `x:${tile.x}, y:${tile.y}, z:${tile.z}`, + mapStyle: null, + layer: new TileLayer({ + data: 'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', + pickable: true, + minZoom: 0, + maxZoom: 19, + + renderSubLayers: props => { + const { + bbox: {west, south, east, north} + } = props.tile; + + return new BitmapLayer(props, { + data: null, + image: props.data, + bounds: [west, south, east, north] + }); + } + }) +}); + +export const TripsLayerDemo = makeLayerDemo({ + parameters: { + currentTime: { + displayName: 'currentTime', + type: 'range', + value: 500, + step: 12, + min: 0, + max: 1200 + }, + trailLength: { + displayName: 'trailLength', + type: 'range', + value: 600, + step: 12, + min: 0, + max: 1200 + } + }, + layer: new TripsLayer({ + data: `${DATA_URI}/sf.trips.json`, + getPath: d => d.waypoints.map(p => p.coordinates), + getTimestamps: d => d.waypoints.map(p => p.timestamp - 1554772579000), + getColor: [253, 128, 93], + opacity: 0.8, + widthMinPixels: 8, + rounded: true, + trailLength: 600, + currentTime: 500 + }) +}); + +export const TerrainLayerDemo = makeLayerDemo({ + parameters: { + meshMaxError: { + displayName: 'meshMaxError', + type: 'range', + value: 4.0, + step: 1, + min: 1, + max: 100 + } + }, + layer: new TerrainLayer({ + elevationDecoder: { + rScaler: 2, + gScaler: 0, + bScaler: 0, + offset: 0 + }, + elevationData: `${DATA_URI}/terrain.png`, + texture: `${DATA_URI}/terrain-mask.png`, + bounds: [-122.5233, 37.6493, -122.3566, 37.8159], + material: { + diffuse: 1 + } + }) +}); + +export const MVTLayerDemo = makeLayerDemo({ + mapStyle: null, + layer: new MVTLayer({ + data: [ + `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=${MAPBOX_TOKEN}` + ], + + minZoom: 0, + maxZoom: 23, + getLineColor: [192, 192, 192], + getFillColor: [140, 170, 180], + + getLineWidth: f => { + switch (f.properties.class) { + case 'street': + return 6; + case 'motorway': + return 10; + default: + return 1; + } + }, + lineWidthMinPixels: 1 + }) +}) diff --git a/website-gatsby/src/doc-demos/layer-demo.js b/website-gatsby/src/doc-demos/layer-demo.js new file mode 100644 index 00000000000..d167a7dfb6a --- /dev/null +++ b/website-gatsby/src/doc-demos/layer-demo.js @@ -0,0 +1,97 @@ +import React, {Component} from 'react'; +import DeckGL from '@deck.gl/react'; +import {StaticMap} from 'react-map-gl'; + +import {MAPBOX_STYLES} from '../constants/defaults'; +import {getLayerParams, ASYNC_ORIGINAL} from '../utils/layer-params'; +import makeExample from '../components/example'; + +const INITIAL_VIEW_STATE = { + longitude: -122.4, + latitude: 37.74, + zoom: 11, + maxZoom: 20, + pitch: 30, + bearing: 0 +}; + +const TOOLTIP_STYLE = { + padding: '4px', + background: 'rgba(0, 0, 0, 0.8)', + color: '#fff', + maxWidth: '300px', + fontSize: '10px', + zIndex: 9 +}; + +export default function makeLayerDemo({layer, getTooltip, parameters, mapStyle = MAPBOX_STYLES.LIGHT}) { + + const renderLayer = (params, props = {}) => { + if (params) { + Object.keys(params).forEach(key => { + props[key] = params[key].value; + if (key.startsWith('get')) { + props.updateTriggers = props.updateTriggers || {}; + props.updateTriggers[key] = props[key]; + } + }); + } + + return layer.clone(props); + }; + + class DemoClass extends Component { + static parameters = getLayerParams(layer, parameters); + + static renderInfo() { + const name = layer.constructor.layerName; + const dataUrl = layer.props[ASYNC_ORIGINAL].data; + + return ( +
+

{name}

+

+ Explore {name} + 's API
+ {dataUrl && ( + + Sample data + + )} +

+
+ ); + } + + _getTooltip(pickedInfo) { + if (!pickedInfo.picked) { + return null; + } + return { + text: getTooltip ? getTooltip(pickedInfo) : pickedInfo.index, + style: TOOLTIP_STYLE + }; + } + + render() { + const {params} = this.props; + const layers = [renderLayer(params)]; + + return ( + + {mapStyle && } + + ); + } + } + + const Demo = makeExample(DemoClass); + + return () =>
; +} diff --git a/website-gatsby/src/doc-demos/layers.js b/website-gatsby/src/doc-demos/layers.js new file mode 100644 index 00000000000..3f58adaddd8 --- /dev/null +++ b/website-gatsby/src/doc-demos/layers.js @@ -0,0 +1,204 @@ +import {COORDINATE_SYSTEM} from '@deck.gl/core'; +import { + ArcLayer, + BitmapLayer, + ColumnLayer, + GeoJsonLayer, + GridCellLayer, + IconLayer, + LineLayer, + PathLayer, + PointCloudLayer, + PolygonLayer, + ScatterplotLayer, + TextLayer +} from '@deck.gl/layers'; + +import makeLayerDemo from './layer-demo'; +import {DATA_URI} from '../constants/defaults'; +import {colorToRGBArray} from '../utils/format-utils'; + +export const ArcLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.from.name} to ${object.to.name}`, + layer: new ArcLayer({ + data: `${DATA_URI}/bart-segments.json`, + pickable: true, + getWidth: 12, + getSourcePosition: d => d.from.coordinates, + getTargetPosition: d => d.to.coordinates, + getSourceColor: d => [Math.sqrt(d.inbound), 140, 0], + getTargetColor: d => [Math.sqrt(d.outbound), 140, 0] + }) +}); + +export const BitmapLayerDemo = makeLayerDemo({ + layer: new BitmapLayer({ + bounds: [-122.519, 37.7045, -122.355, 37.829], + image: `${DATA_URI}/sf-districts.png` + }) +}); + +export const ColumnLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `height: ${object.value * 5000}m`, + layer: new ColumnLayer({ + data: `${DATA_URI}/hexagons.json`, + diskResolution: 12, + radius: 250, + extruded: true, + pickable: true, + elevationScale: 100, + getPosition: d => d.centroid, + getFillColor: d => [48, 128, d.value * 255, 255], + getLineColor: [0, 0, 0], + getLineWidth: 20, + getElevation: d => d.value * 50 + }) +}); + +export const GeoJsonLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => object.properties.name || object.properties.station, + layer: new GeoJsonLayer({ + data: `${DATA_URI}/bart.geo.json`, + pickable: true, + stroked: false, + filled: true, + extruded: true, + lineWidthScale: 20, + lineWidthMinPixels: 2, + getFillColor: [160, 160, 180, 200], + getLineColor: d => colorToRGBArray(d.properties.color), + getRadius: 100, + getLineWidth: 1, + getElevation: 30 + }) +}); + +export const GridCellLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `height: ${object.value * 5000}m`, + layer: new GridCellLayer({ + data: `${DATA_URI}/hexagons.json`, + pickable: true, + extruded: true, + cellSize: 200, + elevationScale: 5000, + getPosition: d => d.centroid, + getFillColor: d => [48, 128, d.value * 255, 255], + getElevation: d => d.value + }) +}); + +export const IconLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.name}\n${object.address}`, + layer: new IconLayer({ + data: `${DATA_URI}/bart-stations.json`, + pickable: true, + iconAtlas: `${DATA_URI}/icon-atlas.png`, + iconMapping: { + marker: { + x: 0, + y: 0, + width: 128, + height: 128, + anchorY: 128, + mask: true + } + }, + sizeScale: 8, + getPosition: d => d.coordinates, + getIcon: d => 'marker', + getSize: d => 5, + getColor: d => [Math.sqrt(d.exits), 140, 0] + }) +}); + +export const LineLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.from.name} to ${object.to.name}`, + layer: new LineLayer({ + data: `${DATA_URI}/bart-segments.json`, + pickable: true, + getWidth: 12, + getSourcePosition: d => d.from.coordinates, + getTargetPosition: d => d.to.coordinates, + getColor: d => [Math.sqrt(d.inbound + d.outbound), 140, 0] + }) +}); + +export const PathLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => object.name, + layer: new PathLayer({ + data: `${DATA_URI}/bart-lines.json`, + parameters: { + depthMask: false + }, + pickable: true, + widthScale: 20, + widthMinPixels: 2, + getPath: d => d.path, + getColor: d => colorToRGBArray(d.color), + getWidth: d => 5 + }) +}); + +export const PointCloudLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => object.position.join(', '), + layer: new PointCloudLayer({ + data: `${DATA_URI}/pointcloud.json`, + pickable: false, + coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS, + coordinateOrigin: [-122.4, 37.74], + pointSize: 2, + getPosition: d => d.position, + getNormal: d => d.normal, + getColor: d => d.color + }) +}); + +export const PolygonLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.zipcode}\nPopulation: ${object.population}`, + layer: new PolygonLayer({ + data: `${DATA_URI}/sf-zipcodes.json`, + pickable: true, + stroked: true, + filled: true, + wireframe: true, + lineWidthMinPixels: 1, + getPolygon: d => d.contour, + getElevation: d => d.population / d.area / 10, + getFillColor: d => [d.population / d.area / 60, 140, 0], + getLineColor: [80, 80, 80], + getLineWidth: d => 1 + }) +}); + +export const ScatterplotLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.name}\n${object.address}`, + layer: new ScatterplotLayer({ + data: `${DATA_URI}/bart-stations.json`, + pickable: true, + opacity: 0.8, + stroked: true, + radiusScale: 6, + radiusMinPixels: 1, + radiusMaxPixels: 100, + lineWidthMinPixels: 1, + getPosition: d => d.coordinates, + getRadius: d => Math.sqrt(d.exits), + getFillColor: [255, 140, 0], + getLineColor: [0, 0, 0] + }) +}); + +export const TextLayerDemo = makeLayerDemo({ + getTooltip: ({object}) => `${object.name}\n${object.address}`, + layer: new TextLayer({ + data: `${DATA_URI}/bart-stations.json`, + pickable: true, + sizeScale: 1, + getPosition: d => d.coordinates, + getText: d => d.name, + getSize: 16, + getAngle: 0, + getTextAnchor: 'middle', + getAlignmentBaseline: 'center' + }) +}); diff --git a/website-gatsby/src/index.jsx b/website-gatsby/src/index.jsx index 184f45b5334..1c59be59aac 100644 --- a/website-gatsby/src/index.jsx +++ b/website-gatsby/src/index.jsx @@ -1,5 +1,7 @@ import React from 'react'; import {Home} from 'gatsby-theme-ocular/components'; +import {withPrefix} from 'gatsby'; + import HeroExample from './examples/home-demo'; import '../stylesheets/main.scss'; @@ -19,19 +21,19 @@ export default class IndexPage extends React.Component {

- + A Layered Approach to Data Visualization

deck.gl allows complex visualizations to be constructed by composing existing layers, and makes it easy to package and share new visualizations as reusable layers. We already offer - a catalog of proven layers and + a catalog of proven layers and we have many more in the works.

- + High-Precision Computations in the GPU

@@ -41,7 +43,7 @@ export default class IndexPage extends React.Component {

- + React and Mapbox GL Integrations

diff --git a/website-gatsby/src/utils/data-utils.js b/website-gatsby/src/utils/data-utils.js index d5c9eedeb33..d5e70c919cf 100644 --- a/website-gatsby/src/utils/data-utils.js +++ b/website-gatsby/src/utils/data-utils.js @@ -1,4 +1,5 @@ import {request, json, text} from 'd3-request'; +import {withPrefix} from 'gatsby'; import {StreamParser} from './worker-utils'; @@ -6,7 +7,7 @@ export function loadData(url, worker, onSuccess) { if (worker) { const req = request(url); // use a web worker to parse data - const dataParser = new StreamParser(worker, (data, meta) => { + const dataParser = new StreamParser(withPrefix(worker), (data, meta) => { onSuccess(data, meta); }); diff --git a/website-gatsby/src/utils/format-utils.js b/website-gatsby/src/utils/format-utils.js index 95f76dfc05f..e13246a18b8 100644 --- a/website-gatsby/src/utils/format-utils.js +++ b/website-gatsby/src/utils/format-utils.js @@ -52,6 +52,9 @@ export function rgbToHex(rgbArr) { } export function colorToRGBArray(color) { + if (!color) { + return [255, 255, 255, 0]; + } if (Array.isArray(color)) { return color.slice(0, 4); } diff --git a/website-gatsby/src/utils/layer-params.js b/website-gatsby/src/utils/layer-params.js index 9171ad834ce..c69afea6183 100644 --- a/website-gatsby/src/utils/layer-params.js +++ b/website-gatsby/src/utils/layer-params.js @@ -1,6 +1,6 @@ const blackList = ['coordinateSystem', 'modelMatrix']; -const ASYNC_ORIGINAL = Symbol.for('asyncPropOriginal'); +export const ASYNC_ORIGINAL = Symbol.for('asyncPropOriginal'); /* eslint-disable complexity */ /* diff --git a/website-gatsby/static/images/icon-atlas.png b/website-gatsby/static/images/icon-atlas.png deleted file mode 100644 index a4ec64594d2..00000000000 Binary files a/website-gatsby/static/images/icon-atlas.png and /dev/null differ diff --git a/website-gatsby/stylesheets/_gallery.scss b/website-gatsby/stylesheets/_gallery.scss index adf055a9972..b24ff4fdc4c 100644 --- a/website-gatsby/stylesheets/_gallery.scss +++ b/website-gatsby/stylesheets/_gallery.scss @@ -179,31 +179,37 @@ code { height: 100%; transition: height 600ms ease-in; } -.markdown { - height: 100%; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} -.markdown .demo { - height: 80vh; +.markdown-demo-container { + height: 30vh; + min-height: 200px; + transition: height 300ms; + pointer-events: none; - >div:first-child { - margin-top: 0; - transition: margin-top 600ms ease-in; + &:hover { + height: 80vh; } - &:not(:hover) { + .demo { height: 30vh; min-height: 200px; transition: height 300ms; + position: absolute; + width: 100%; + left: 0; + top: 0; + pointer-events: all; - >div:first-child { - margin-top: -20vh; - transition: margin-top 300ms; - } .options-panel { overflow-y: hidden; } + + &:hover { + height: 80vh; + + .options-panel { + overflow-y: auto; + } + } } }