The GraphLayer example lays out and renders a force-directed network graph.
Two primary layers are implemented in this example:
A "collection layer" that delegates rendering to:
- a ScatterplotLayer
- a LineLayer
- (optional) a IconLayer
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.
Copy the content of this folder to your project. Run
npm install
npm start
Sample datasets are stored in deck.gl Example Data.
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
- Burger: lipi
- Fries: Daniel Llamas Soto
- Soda: olcay kurtulus
- Pie: Dara Ullrich