Skip to content

Latest commit

 

History

History

graph

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
data
data
 
 
graph-layer
graph-layer
 
 
README.md
README.md
 
 
app.css
app.css
 
 
app.js
app.js
 
 
deckgl-overlay.js
deckgl-overlay.js
 
 
index.html
index.html
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

README.md

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