@deck.gl/core

What is @deck.gl/core?

@deck.gl/core is a framework-agnostic WebGL-powered library for visualizing large-scale data sets. It provides a set of highly performant, customizable layers and tools for building complex data visualizations.

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

Layer Management

This code demonstrates how to create a Deck instance and add a GeoJsonLayer to visualize geographical data. The layer management feature allows you to add, remove, and update layers dynamically.

const { Deck, GeoJsonLayer } = require('@deck.gl/core');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new GeoJsonLayer({
      id: 'geojson-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
      filled: true,
      pointRadiusMinPixels: 5,
      getPointRadius: 100,
      getFillColor: [255, 0, 0, 200]
    })
  ]
});

Custom Layer Creation

This code shows how to create a custom layer by extending the base Layer class. Custom layers allow you to define your own rendering logic and integrate it with the Deck.gl framework.

const { Layer } = require('@deck.gl/core');

class CustomLayer extends Layer {
  initializeState() {
    const { gl } = this.context;
    // Initialize WebGL state
  }

  draw({ uniforms }) {
    const { gl } = this.context;
    // Draw using WebGL
  }
}

const customLayer = new CustomLayer({
  id: 'custom-layer',
  data: []
});

deck.setProps({
  layers: [customLayer]
});

Interactivity

This code demonstrates how to add interactivity to layers, such as hover and click events. The ScatterplotLayer is made pickable, and event handlers are provided to log information when the user interacts with the layer.

const { Deck, ScatterplotLayer } = require('@deck.gl/core');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new ScatterplotLayer({
      id: 'scatterplot-layer',
      data: [{ position: [-122.45, 37.8], size: 100 }],
      getPosition: d => d.position,
      getRadius: d => d.size,
      getColor: [255, 0, 0],
      pickable: true,
      onHover: info => console.log('Hovered:', info),
      onClick: info => console.log('Clicked:', info)
    })
  ]
});

Other packages similar to @deck.gl/core

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a wide range of features for rendering 3D scenes, including support for WebGL, shaders, and various geometries. Compared to @deck.gl/core, Three.js is more general-purpose and lower-level, requiring more manual setup for data visualization tasks.

leaflet

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. It is lightweight and easy to use, with a focus on simplicity and performance. While Leaflet is excellent for creating interactive maps, it does not offer the same level of performance and customization for large-scale data visualizations as @deck.gl/core.

d3

D3.js (Data-Driven Documents) is a powerful JavaScript library for creating dynamic and interactive data visualizations in the web browser. It provides a wide range of tools for manipulating documents based on data. D3.js is highly flexible and can be used to create custom visualizations, but it requires more effort to achieve the same level of performance and interactivity as @deck.gl/core.

README

@deck.gl/core

These are deck.gl's core library classes.

See deck.gl for documentation.

Changelog

deck.gl [v9.1.0-beta.3] - Jan 15 2025

• CARTO: Support gzip compression in RasterLayer (#9352)
• DataFilterExtension category filtering uint32 attribute (#9350)