@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

The README file is missing

Changelog

[5.2.0-beta.1] - April 11 2018

• format changelog
• Move "fragile" carto pure JS example to wip folder (#1674)
• update whats new (#1682)
• Clean up npm scripts (#1657)
• replace deck.gl-layers with @deck.gl/experimental-layers (#1681)
• Support non-monospace fonts in TextLayer (#1680)
• use fetch instead of d3-request/json in examples (#1639)
• add text-layer screenshot to what's new (#1678)
• Publish standalone bundle with the main package (#1671)
• Clean up cell layers code (#1675)
• regenerate font atlas when fontFamily changed (#1669)
• Expose MapController class and enable it to be used with Deck.controller prop (#1666)
• ignore standalone module for now (#1670)
• Fix auto resize and controller (#1656)
• What's new update (#1667)
• fix website dependencies (#1665)
• fix example tests (#1644)
• add linter to ci test (#1664)
• fix bootstrap (#1663)
• fix(docs): wdith to width typo (#1658)
• Add TextLayer demo (#1646)
• Module split PR1 (#1651)
• Deck Component: auto resize handling (#1389)