Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@deck.gl/aggregation-layers

Package Overview
Dependencies
Maintainers
5
Versions
403
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@deck.gl/aggregation-layers

deck.gl layers that aggregate the input data into alternative representations

  • 9.0.35
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
158K
increased by1.34%
Maintainers
5
Weekly downloads
 
Created

What is @deck.gl/aggregation-layers?

@deck.gl/aggregation-layers is a collection of Deck.gl layers designed for data aggregation and visualization. These layers are optimized for rendering large datasets and provide various aggregation techniques such as grid-based, hexagon-based, and contour-based visualizations.

What are @deck.gl/aggregation-layers's main functionalities?

GridLayer

The GridLayer aggregates data into a grid-based heatmap. Each cell in the grid represents the aggregated data points within that cell. This is useful for visualizing density and distribution of data points over a geographic area.

const {Deck} = require('@deck.gl/core');
const {GridLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new GridLayer({
      id: 'grid-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      extruded: true,
      cellSize: 200,
      elevationScale: 4,
      getPosition: d => d.COORDINATES
    })
  ]
});

HexagonLayer

The HexagonLayer aggregates data into hexagonal bins, providing a hexagon-based heatmap. This is useful for visualizing spatial patterns and density in a more visually appealing way compared to grid-based aggregation.

const {Deck} = require('@deck.gl/core');
const {HexagonLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new HexagonLayer({
      id: 'hexagon-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      extruded: true,
      radius: 200,
      elevationScale: 4,
      getPosition: d => d.COORDINATES
    })
  ]
});

ContourLayer

The ContourLayer generates contour lines based on the density of data points. This is useful for visualizing areas of high and low concentration, similar to topographic maps.

const {Deck} = require('@deck.gl/core');
const {ContourLayer} = require('@deck.gl/aggregation-layers');

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 12
  },
  controller: true,
  layers: [
    new ContourLayer({
      id: 'contour-layer',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json',
      pickable: true,
      contours: [{threshold: 1, color: [255, 0, 0], strokeWidth: 2}],
      cellSize: 200,
      getPosition: d => d.COORDINATES
    })
  ]
});

Other packages similar to @deck.gl/aggregation-layers

Keywords

FAQs

Package last updated on 08 Nov 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc