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

@deck.gl/react

Package Overview
Dependencies
Maintainers
7
Versions
476
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@deck.gl/react

React Components for deck.gl

  • 6.3.0-alpha.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
163K
increased by13.59%
Maintainers
7
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 25 Oct 2018

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