ContextQMD
Back to Deck Gl

README

showcases/graph/README.md

9.3.22.2 KB
Original Source

GraphLayer

The GraphLayer example lays out and renders a force-directed network graph.

Two primary layers are implemented in this example:

graph-layer

A "collection layer" that delegates rendering to:

graph-layout-layer

An "adaptor layer" that links a layout (by default, graph-simulation, which uses d3-force) to the renderer.

To parse data into the format required by your layout, and to manage addition / removal of graph elements, use or write a graph "adaptor". Currently, all three of the existing adaptors parse data into an array of nodes and links, but none yet offer support for addition/removal of nodes/links.

There are three different sample datasets; select the dataset to load and render via the DATASET const in app.js.

Usage

Copy the content of this folder to your project. Run

npm install
npm start

Data format

Sample datasets are stored in deck.gl Example Data.

Attribution

facebook-SNAP.csv from Stanford Large Network Dataset Collection (SNAP) Authors: Jure Leskovec and Andrej Krevl Published June 2014

flare.json from Collapsable Force Layout by Mike Bostock.

Icons from The Noun Project