graph-layers

Overview

danger

The deck.gl-community repo is specifically set up to collect useful code that no longer has dedicated maintainers. This means that there is often no one who can respond quickly to issues. The vis.gl / Open Visualization team members who try to keep this running can only put a few hours into it every now and then. It is important to understand this limitation. If your project depends on timely fixes, and you are not able to contribute them yourself, deck.gl-community modules may not be the right choice for you.

danger

There is an ambition to phase out React specific code for deck.gl-community modules. This model is expected to be deprecated in the near future.

graph-layers provides Deck.gl layers and utilities for visualizing large graphs with several utility functions.

graph-layers can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.

Abstract

graph-layers is a Deck.gl layer pack for visualizing large graphs with several utility functions. It can build a highly customizable graph visualization through its composable API. The rendering is powered by deck.gl which is a WebGL based visualization framework. With graph-layers, users are enabled to build various type of graph/network applications with minimum efforts while having the capability to extend the existing styles and layouts.

Motivation

Uber originally started this project as Graph.gl. After stopping efforts on Graph.gl, the OpenJS Foundation has resumed efforts.

With graph-layers, developers are allowed to create graph visualization with minimum efforts while having the capability to override anything they want in the library.

Roadmap

TBD, we've just started a reboot to update dependencies and modernize the codebase to reflect current React best practices.

Get Started

import DeckGL from '@deck.gl/react';
import {GraphLayer, D3ForceLayout} from '@deck.gl-community/graph-layers';

const SAMPLE_GRAPH = {
  nodes: [
    {id: 'A'},
    {id: 'B'},
    {id: 'C'}
  ],
  edges: [
    {source: 'A', target: 'B'},
    {source: 'B', target: 'C'},
    {source: 'C', target: 'A'}
  ]
};

const App = () => {
  const layer = new GraphLayer({
    id: 'graph-layer',
    data: SAMPLE_GRAPH,
    layout: new D3ForceLayout(),
    stylesheet: {
      nodes: [
        {
          type: 'circle',
          radius: 10,
          fill: 'blue',
          opacity: 1
        },
        {
          type: 'label',
          text: '@id',
          color: '#ffffff',
          offset: [0, 18]
        }
      ],
      edges: {
        stroke: 'black',
        strokeWidth: 2
      }
    },
    enableDragging: true
  });

  return (
    <DeckGL
      initialViewState={{target: [0, 0], zoom: 1}}
      controller={{doubleClickZoom: false}}
      layers={[layer]}
    />
  );
};

Setup Dev Environment

Clone the repo:

git clone git@github.com:deck.gl-community/graph-layers.git

Install yarn

brew update
brew install yarn

Install dependencies

yarn install

Local Development

You can write a story and open it in the docusaurus (using yarn 1.x):

cd website
yarn
yarn start

Testing

yarn test

To get coverage information, use:

yarn cover

Documentation

You can add your documentation (markdown) in docs/ folder and the new chapter in docs/table-of-contents.json. Open the local website:

cd website
yarn
yarn start

Contributing

PRs and bug reports are welcome. Note that you once your PR is about to be merged, you will be asked to register as a contributor by filling in a short form.