deck.gl is a powerful WebGL-powered framework for visual exploratory data analysis of large datasets. It provides a suite of highly performant, customizable layers for rendering complex data visualizations on top of maps.
ScatterplotLayer
The ScatterplotLayer is used to render scatter plot points on a map. Each point can be customized with different sizes and colors.
const {DeckGL, ScatterplotLayer} = require('deck.gl');
const scatterplotLayer = new ScatterplotLayer({
id: 'scatterplot-layer',
data: [
{position: [-122.45, 37.78], size: 100},
{position: [-122.46, 37.79], size: 200}
],
getPosition: d => d.position,
getRadius: d => d.size,
getColor: [255, 0, 0]
});
const deckgl = new DeckGL({
initialViewState: {
longitude: -122.45,
latitude: 37.78,
zoom: 12
},
controller: true,
layers: [scatterplotLayer]
});GeoJsonLayer
The GeoJsonLayer is used to render GeoJSON data. It supports features like picking, extruding, and coloring of GeoJSON polygons.
const {DeckGL, GeoJsonLayer} = require('deck.gl');
const geoJsonLayer = new GeoJsonLayer({
id: 'geojson-layer',
data: 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/geojson/vancouver-blocks.json',
pickable: true,
stroked: false,
filled: true,
extruded: true,
getFillColor: [160, 160, 180, 200],
getLineColor: [255, 255, 255],
getRadius: 100,
getLineWidth: 1
});
const deckgl = new DeckGL({
initialViewState: {
longitude: -123.1,
latitude: 49.28,
zoom: 11
},
controller: true,
layers: [geoJsonLayer]
});ArcLayer
The ArcLayer is used to render arcs between pairs of coordinates. It is useful for visualizing connections or flows between locations.
const {DeckGL, ArcLayer} = require('deck.gl');
const arcLayer = new ArcLayer({
id: 'arc-layer',
data: [
{source: [-122.45, 37.78], target: [-122.46, 37.79]},
{source: [-122.46, 37.79], target: [-122.47, 37.80]}
],
getSourcePosition: d => d.source,
getTargetPosition: d => d.target,
getSourceColor: [0, 128, 200],
getTargetColor: [255, 0, 0],
getWidth: 2
});
const deckgl = new DeckGL({
initialViewState: {
longitude: -122.45,
latitude: 37.78,
zoom: 12
},
controller: true,
layers: [arcLayer]
});Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use, but it does not offer the same level of performance and customization for large datasets as deck.gl.
Mapbox GL JS is a powerful library for interactive, customizable vector maps. It offers high performance and a wide range of features, but it is more focused on map rendering and less on data visualization compared to deck.gl.
Three.js is a JavaScript library for creating 3D graphics in the browser. While it is highly versatile and powerful for 3D rendering, it requires more effort to set up and use for data visualization compared to deck.gl.
A WebGL overlay suite consists of multiple layers.
npm install --save deck.gl
import {
WebGLOverlay,
/* import layers here */
} from 'deck.gl';
const mapState = {
latitude: 37.55,
longitude: -122.2,
zoom: 9,
...
}
<WebGLOverlay
width={1920}
height={1080}
mapState={mapState}, // optional
layers={[/* put layer instances here */]}
/>
webgl-overlay A react component that takes in viewport parameters, layer instances and generates an overlay consists of single/multiple layers sharing the same rendering context. Internally, the webgl-overlay initializes a WebGL context attached to a canvas element, sets up the animation loop and calls provided callbacks on initial load and for each rendering frames. The webgl-overlay also handles events propagation across layers, and prevents unnecessary calculation taking advantage of the react lifecycle functions.
Parameters
width (number, required) width of the canvasheight (number, required) height of the canvaslongitude (number, required) longitude of the map centerlatitude (number, required) latitude of the map centerzoom (number, required) zoom level of the mapCallbacks
onAfterRender [function, optional] callback after rendering is finished
for the current frameThe Choropleth Layer takes in GeoJson formatted data and renders it as interactive choropleths.
Common Parameters
id (string, required): layer IDwidth (number, required) width of the layerheight (number, required) height of the layerlongitude (number, required) longitude of the map centerlatitude (number, required) latitude of the map centerzoom (number, required) zoom level of the mapopacity (number, required) opacity of the layerlayerIndex [number, optional, default=0] index of the layerisPickable [bool, optional, default=false] whether layer responses to
mouse eventsLayer-specific Parameters
data (object, required) input data in GeoJson formatdrawContour [bool, optional, default=false] draw choropleth contour if
true, else fill choropleth areaCallbacks
onChoroplethHovered [function, optional] bubbles choropleth properties
when mouse hovering
onChoroplethClicked [function, optional] bubbles choropleth properties
when mouse clicking
The Hexagon Layer takes in a list of hexagon objects and renders them as interactive hexagons.
Common Parameters
id (string, required): layer IDwidth (number, required) width of the layerheight (number, required) height of the layeropacity (number, required) opacity of the layerlayerIndex [number, optional, default=0] index of the layerisPickable [bool, optional, default=false] whether layer responses to
mouse eventsLayer-specific Parameters
data (array, required) array of hexagon objects: [{ centroid, vertices,
color }, ...]dotRadius [number, optional, default=10] radius of each hexagonelevation [number, optional, default=0.02] height scale of hexagonslightingEnabled [bool, optional, default=false] whether lighting is
enabledCallbacks
onHexagonHovered [function, optional] bubbles selection index when mouse
hoveringonHexagonClicked [function, optional] bubbles selection index when mouse
clickingThe Scatterplot Layer takes in and renders an array of latitude and longitude coordinated points.
Common Parameters
id (string, required): layer IDwidth (number, required) width of the layerheight (number, required) height of the layeropacity (number, required) opacity of the layerlayerIndex [number, optional, default=0] index of the layerisPickable [bool, optional, default=false] whether layer responses to
mouse eventsLayer-specific Parameters
data (array, required) array of objects: [{ position, color }, ...]radius [number, optional, default=10] radius of each markerThe Arc Layer takes in paired latitude and longitude coordinated points and render them as arcs that links the starting and ending points.
Common Parameters
id (string, required): layer IDwidth (number, required) width of the layerheight (number, required) height of the layeropacity (number, required) opacity of the layerlayerIndex [number, optional, default=0] index of the layerisPickable [bool, optional, default=false] whether layer responses to
mouse eventsLayer-specific Parameters
data (array, required) array of objects: [{ position: {x0, y0, x1, y1},
color }, ...]The Grid Layer takes in an array of latitude and longitude coordinated points, aggregates them into histogram bins and renders as a grid.
Common Parameters
id (string, required): layer IDwidth (number, required) width of the layerheight (number, required) height of the layeropacity (number, required) opacity of the layerlayerIndex [number, optional, default=0] index of the layerisPickable [bool, optional, default=false] whether layer responses to
mouse eventsLayer-specific Parameters
data (array, required) array of objects: [{ position, color }, ...]unitWidth [number, optional, default=100] unit width of the binsunitHeight [number, optional, default=100] unit height of the binsnpm run start
FAQs
A suite of 3D-enabled data visualization overlays, suitable for react-map-gl
The npm package deck.gl receives a total of 103,736 weekly downloads. As such, deck.gl popularity was classified as popular.
We found that deck.gl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.