Introduction

Graph.gl is a React component 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.gl, 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 started to build its own knowledge graph since two years ago, and uGraph, the knowledge graph exploration tool was created since then. With the capability of querying large graph data and different ways to explore graph, it’s getting more urgent to produce more produce more different graph visualization applications. To quickly build a graph visualization, we start to extract the code from uGraph and build a reusable React component for graph visualization, Graph.gl, which equipped advanced Deck.gl rendering capability and several useful graph algorithms and operations. Although there are a great number of commercial graph visualization tools, only a few of them allow users to extend the layout and customization. With Graph.gl, developers are allowed to create graph visualization with minimum efforts while having the capability to override anything they want in the library.

Goal

We plan to open source this library that can help the community to create their own solutions for the graph. Open source helps promoting the brand of visualization team at Uber, which could help with recruiting. Once Graph.gl is mature and stable enough, we will start to integrate it with several Uber internal tools, such as Jupyter notebook and Querybuilder as a graph visualization tool.

Roadmap

Phase 1 - 2019 Q3

• Customization: easily change the appearance of nodes and links.
• Flexibility: able to extend and create new graph layout algorithms.
• Compatible with deck.gl: allows complex visualizations to be constructed by composing deck.gl layers, and makes it easy to package and share new graph visualizations as reusable layers.
• Interaction: support clicking detection, viewport manipulation.
• Speed / Performance: able to draw medium(5000+ nodes) to large (10,000+ nodes) sized graphs quickly with interactive speed.
• Testability: able to test each module easily.
• Well documentation and a gallery of examples.
• Modular architecture: clean interface between the renderer, layout-engine, and the graph attribute calculation. Users can choose to use our solution as a whole, or to switch out either module if they need to use their own.

Phase 2 - 2019 Q4 - 2020 Q1

• Support dynamic graph - streaming data.
• Leverage GPU computation power to get high performance rendering and layout calculation.
• Pre/Post graph calculation modules, ex: shortest path, pagerank, community detection, HITS
• 2D / 3D rendering
• Client/Server side rendering
• Support arrow data and some other popular graph data format.
• Multiple Modules: each layout/computation module should be published as separated modules so we can reduce the code size.
• Pure JavaScript Support