Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
A suite of 3D-enabled data visualization overlays, suitable for react-map-gl
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 GPU-powered, highly performant framework for large-scale data visualization.
npm install deck.gl
deck.gl offers an extensive catalog of pre-packaged visualization "layers", including ScatterplotLayer, ArcLayer, TextLayer, GeoJsonLayer, 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:
import {ScatterplotLayer} from '@deck.gl/layers';
/**
* data is an array of object in the shape of:
* {
* "name":"Montgomery St. (MONT)",
* "address":"598 Market Street, San Francisco CA 94104",
* "entries":"43430",
* "exits":"45128",
* "coordinates":[-122.401407,37.789256]
* }
*/
const scatterplotLayer = new ScatterplotLayer({
id: 'bart-stations',
data: 'https://github.com/visgl/deck.gl-data/blob/master/website/bart-stations.json',
getRadius: d => Math.sqrt(d.entries) / 100,
getPosition: d => d.coordinates,
getColor: [255, 228, 0],
});
import DeckGL from 'deck.gl';
<DeckGL width="100%" height="100%" longitude={-122.4} latitude={37.78} zoom={8} controller={true} layers={[scatterplotLayer]} />
import {Deck} from '@deck.gl/core';
const deck = new Deck({
container: document.body,
width: '100vw',
height: '100vh',
longitude: -122.4,
latitude: 37.78,
zoom: 8,
controller: true,
layers: [scatterplotLayer]
});
Questions? Submit an issue on our GitHub page.
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
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.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.