@deck.gl/react

What is @deck.gl/react?

@deck.gl/react is a library that provides React bindings for deck.gl, a powerful WebGL-powered framework for visual exploratory data analysis of large datasets. It allows you to create highly performant and visually appealing data visualizations in a React application.

What are @deck.gl/react's main functionalities?

Rendering Layers

This code demonstrates how to render a ScatterplotLayer using @deck.gl/react. It sets up a DeckGL component with an initial view state and a ScatterplotLayer that visualizes data points on a map.

import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => (
  <DeckGL
    initialViewState={{
      longitude: -122.45,
      latitude: 37.78,
      zoom: 12
    }}
    controller={true}
    layers={[
      new ScatterplotLayer({
        id: 'scatterplot-layer',
        data,
        getPosition: d => d.position,
        getRadius: d => d.size,
        getColor: [255, 0, 0]
      })
    ]}
  />
);

export default App;

Interactivity

This code demonstrates how to add interactivity to a ScatterplotLayer using @deck.gl/react. The onClick function is triggered when a data point is clicked, displaying an alert with the position of the clicked point.

import React from 'react';
import DeckGL, { ScatterplotLayer } from '@deck.gl/react';

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => {
  const onClick = info => {
    if (info.object) {
      alert(`Clicked on: ${info.object.position}`);
    }
  };

  return (
    <DeckGL
      initialViewState={{
        longitude: -122.45,
        latitude: 37.78,
        zoom: 12
      }}
      controller={true}
      layers={[
        new ScatterplotLayer({
          id: 'scatterplot-layer',
          data,
          getPosition: d => d.position,
          getRadius: d => d.size,
          getColor: [255, 0, 0],
          pickable: true,
          onClick
        })
      ]}
    />
  );
};

export default App;

Custom Layers

This code demonstrates how to create a custom layer by extending the CompositeLayer class in @deck.gl/react. The CustomLayer class renders a ScatterplotLayer with custom properties.

import React from 'react';
import DeckGL, { CompositeLayer } from '@deck.gl/react';

class CustomLayer extends CompositeLayer {
  renderLayers() {
    return [
      new ScatterplotLayer(this.getSubLayerProps({
        id: 'scatterplot',
        data: this.props.data,
        getPosition: d => d.position,
        getRadius: d => d.size,
        getColor: [0, 0, 255]
      }))
    ];
  }
}

const data = [
  { position: [-122.45, 37.78], size: 100 },
  { position: [-122.46, 37.79], size: 200 }
];

const App = () => (
  <DeckGL
    initialViewState={{
      longitude: -122.45,
      latitude: 37.78,
      zoom: 12
    }}
    controller={true}
    layers={[
      new CustomLayer({
        id: 'custom-layer',
        data
      })
    ]}
  />
);

export default App;

Other packages similar to @deck.gl/react

react-map-gl

react-map-gl is a React wrapper for Mapbox GL JS, providing a set of React components for integrating Mapbox maps into React applications. It offers similar functionalities for rendering and interacting with map layers, but is more focused on Mapbox's ecosystem and less on data visualization compared to @deck.gl/react.

react-leaflet

react-leaflet is a React wrapper for Leaflet, a popular open-source JavaScript library for interactive maps. It provides a set of React components for rendering Leaflet maps and layers. While it offers robust mapping capabilities, it is not as optimized for large-scale data visualization as @deck.gl/react.

README

@deck.gl/react

React Components for deck.gl

See deck.gl for documentation.

Changelog

deck.gl [9.1.0-beta.1] - Nov 21 2024

• Generic module props handling in Layer class (#9192)
• Update license headers (#9191)
• Upgrade mjolnir.js to v3 (#9144)
• Remove updateModuleSettings from codebase (#9160)
• Fix countItems in DataFilterExtension (#9158)
• chore: Use WebGLDevice when using webgl-only APIs
• Remove NaN uniform (#9174)
• GPU Aggregation: miscellaneous clean up (#9142)
• GPU Aggregation: Support *ScaleType and *Percentile props (#9130)
• Aggregation UBO 2/2 (#9133)
• Fix GPUAggregator on M chips (#9128)
• Aggregation layers UBO (#9114)
• GPU Aggregation (8/8): Remove legacy aggregator (#9100)
• GPU Aggregation (7/8): ContourLayer (#9099)
• GPU Aggregation (6/8): HexagonLayer (#9098)
• GPU Aggregation (5/8): GridLayer (#9096)
• refactor(json): Remove expression-eval dependency (#9070)
• Update PBR code to use luma pbrMaterial (#9093)
• Lighting UBO (#9074)
• CARTO: HeatmapTileLayer full colorRange (#9068)
• HeatmapLayer UBO (#9071)
• shadow module UBO (#9054)
• ShaderModule type update (#9044)
• core module UBO (#9040)
• carto module UBO (#9038)
• HeatmapLayer fix to work with project UBO (#9037)
• geo-layers UBO (#9036)
• mesh-layers UBO (#9035)
• refactor: Layers UBO (#9008)
• Extensions UBOs (#9001)
• DataFilterExtension UBOs (#8998)
• Move ScatterplotLayer & BitmapLayer to UBOs (#8875)
• GPU Aggregation (4/8): ScreenGridLayer (#8942)
• GPU Aggregation (3/8): CPUAggregator (#8888)
• GPU Aggregation (2/8): GPUAggregator (#8887)
• GPU Aggregation (1/8): Aggregator and AggregationLayer (#8886)
• Use UBOs in project module (#8782)
• Remove WebGL-only triangle-fan topology (#8860)
• feat(layers): Simplify ArcLayer (#8859)
• chore: Remove internal texture parameters (v9.1) (#8851)