tessl/npm-deck-gl--layers

Core visualization layers for deck.gl providing 2D and 3D rendering primitives for WebGL-based data visualization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Basic Geometric Layers

Name: tessl/npm-deck-gl--layers
Author: tessl

Essential 2D and 3D geometric primitives for fundamental data visualization needs including points, lines, arcs, and columns.

Capabilities

ScatterplotLayer

Renders circles at given coordinates with configurable size, color, and stroke properties.

/**
 * Layer for rendering circles at given coordinates
 */
class ScatterplotLayer<DataT = any> extends Layer<ScatterplotLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<ScatterplotLayerProps<any>>;
}

interface ScatterplotLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Units for radius measurement - 'pixels', 'meters', or 'common' */
  radiusUnits?: Unit;
  /** Scaling multiplier for all radii */
  radiusScale?: number;
  /** Minimum radius in pixels */
  radiusMinPixels?: number;
  /** Maximum radius in pixels */
  radiusMaxPixels?: number;
  
  /** Units for stroke width */
  lineWidthUnits?: Unit;
  /** Scaling multiplier for stroke width */
  lineWidthScale?: number;
  /** Minimum stroke width in pixels */
  lineWidthMinPixels?: number;
  /** Maximum stroke width in pixels */
  lineWidthMaxPixels?: number;
  
  /** Draw stroke outline */
  stroked?: boolean;
  /** Draw filled circle */
  filled?: boolean;
  /** Always face camera vs face up */
  billboard?: boolean;
  /** Enable edge smoothing */
  antialiasing?: boolean;
  
  /** Accessor for point coordinates */
  getPosition?: Accessor<DataT, Position>;
  /** Accessor for radius in specified units */
  getRadius?: Accessor<DataT, number>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for stroke color [r,g,b,a] (0-255) */
  getLineColor?: Accessor<DataT, Color>;
  /** Accessor for stroke width */
  getLineWidth?: Accessor<DataT, number>;
}

Usage Example:

import { ScatterplotLayer } from "@deck.gl/layers";

const layer = new ScatterplotLayer({
  id: 'scatter',
  data: [{position: [0, 0], size: 100, color: [255, 0, 0]}],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getFillColor: d => d.color,
  radiusUnits: 'pixels',
  pickable: true
});

ArcLayer

Renders raised arcs joining pairs of source and target coordinates, ideal for flow maps and connection visualizations.

/**
 * Layer for rendering raised arcs between coordinate pairs
 */
class ArcLayer<DataT = any> extends Layer<ArcLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<ArcLayerProps<any>>;
}

interface ArcLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Create arc along shortest earth surface path */
  greatCircle?: boolean;
  /** Number of segments for arc tessellation */
  numSegments?: number;
  
  /** Units for arc width */
  widthUnits?: Unit;
  /** Scaling multiplier for width */
  widthScale?: number;
  /** Minimum width in pixels */
  widthMinPixels?: number;
  /** Maximum width in pixels */
  widthMaxPixels?: number;
  
  /** Accessor for source coordinates */
  getSourcePosition?: AccessorFunction<DataT, Position>;
  /** Accessor for target coordinates */
  getTargetPosition?: AccessorFunction<DataT, Position>;
  /** Accessor for source color [r,g,b,a] (0-255) */
  getSourceColor?: Accessor<DataT, Color>;
  /** Accessor for target color [r,g,b,a] (0-255) */
  getTargetColor?: Accessor<DataT, Color>;
  /** Accessor for arc width */
  getWidth?: Accessor<DataT, number>;
  /** Accessor for arc height multiplier (0 = flat) */
  getHeight?: Accessor<DataT, number>;
  /** Accessor for arc side tilt for multiple arcs between same points */
  getTilt?: Accessor<DataT, number>;
}

Usage Example:

import { ArcLayer } from "@deck.gl/layers";

const layer = new ArcLayer({
  id: 'arcs',
  data: [
    {from: [-122.4, 37.8], to: [-74.0, 40.7], color: [255, 0, 0]}
  ],
  getSourcePosition: d => d.from,
  getTargetPosition: d => d.to,
  getSourceColor: d => d.color,
  getTargetColor: d => d.color,
  getWidth: 5
});

LineLayer

Renders straight line segments between pairs of source and target coordinates.

/**
 * Layer for rendering straight line segments between coordinate pairs
 */
class LineLayer<DataT = any> extends Layer<LineLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<LineLayerProps<any>>;
}

interface LineLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Units for line width */
  widthUnits?: Unit;
  /** Scaling multiplier for width */
  widthScale?: number;
  /** Minimum width in pixels */
  widthMinPixels?: number;
  /** Maximum width in pixels */
  widthMaxPixels?: number;
  
  /** Accessor for source coordinates */
  getSourcePosition?: AccessorFunction<DataT, Position>;
  /** Accessor for target coordinates */
  getTargetPosition?: AccessorFunction<DataT, Position>;
  /** Accessor for line color [r,g,b,a] (0-255) */
  getColor?: Accessor<DataT, Color>;
  /** Accessor for line width */
  getWidth?: Accessor<DataT, number>;
}

ColumnLayer

Renders extruded 3D columns (cylinders or prisms) at specified coordinates with configurable height and styling.

/**
 * Layer for rendering 3D extruded columns
 */
class ColumnLayer<DataT = any> extends Layer<ColumnLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<ColumnLayerProps<any>>;
}

interface ColumnLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Number of sides for cylinder geometry */
  diskResolution?: number;
  /** Base radius of columns */
  radius?: number;
  /** Rotation angle in degrees */
  angle?: number;
  /** Custom base geometry vertices */
  vertices?: Position[] | null;
  /** Position offset [x, y] */
  offset?: [number, number];
  /** Radius multiplier (0-1) */
  coverage?: number;
  /** Height scaling multiplier */
  elevationScale?: number;
  
  /** Draw extruded sides */
  extruded?: boolean;
  /** Draw wireframe */
  wireframe?: boolean;
  /** Draw filled surfaces */
  filled?: boolean;
  /** Draw stroke outlines */
  stroked?: boolean;
  /** Use flat shading */
  flatShading?: boolean;
  
  /** Accessor for column base position */
  getPosition?: Accessor<DataT, Position>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for stroke color [r,g,b,a] (0-255) */
  getLineColor?: Accessor<DataT, Color>;
  /** Accessor for stroke width */
  getLineWidth?: Accessor<DataT, number>;
  /** Accessor for column height */
  getElevation?: Accessor<DataT, number>;
}

GridCellLayer

Specialized column layer optimized for rendering grid cells, typically used for heatmaps and grid visualizations.

/**
 * Specialized column layer for grid cell rendering
 */
class GridCellLayer<DataT = any> extends ColumnLayer<DataT> {
  static layerName: string;
  static defaultProps: DefaultProps<GridCellLayerProps<any>>;
}

interface GridCellLayerProps<DataT> extends ColumnLayerProps<DataT> {
  /** Cell size in coordinate units */
  cellSize?: number;
  /** Grid coverage multiplier (0-1) */
  coverage?: number;
}

Usage Example:

import { ColumnLayer } from "@deck.gl/layers";

const layer = new ColumnLayer({
  id: 'columns',
  data: [
    {position: [0, 0], height: 1000, color: [255, 0, 0]}
  ],
  getPosition: d => d.position,
  getElevation: d => d.height,
  getFillColor: d => d.color,
  radius: 100,
  extruded: true
});

Common Properties

All basic geometric layers share these common properties:

Data-driven styling: Use accessor functions to map data properties to visual attributes
WebGL acceleration: Optimized for rendering large datasets
Picking support: Enable pickable: true for mouse interaction
Unit flexibility: Support for pixels, meters, and common units where applicable
Type safety: Generic data types for TypeScript development