1.0.0 • Public • Published


    :warning: This is work in progress. No support plan yet. :warning:

    Abstract 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 which is a WebGL based visualization framework. With, 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.


    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,, which equipped advanced 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, developers are allowed to create graph visualization with minimum efforts while having the capability to override anything they want in the library.


    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 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.


    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 allows complex visualizations to be constructed by composing 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

    Get Started

    import GraphGL, {
    } from '';
    const App = ({data}) => {
      const graph = JSONLoader({
        json: data,
        nodeParser: node => ({id:}),
        edgeParser: edge => ({
          sourceId: edge.sourceId,
          targetId: edge.targetId,
          directed: true,
      return (
          layout={new D3ForceLayout()}
              type: NODE_TYPE.CIRCLE,
              radius: 10,
              fill: 'blue',
              opacity: 1,
            stroke: 'black',
            strokeWidth: 2,

    Setup Dev Environment

    Clone the repo:

    git clone

    Install yarn

    brew update
    brew install yarn

    Install dependencies

    yarn install

    Local Development

    You can write a story and open it in the storybook:

    yarn storybook

    Please create a new story in stories.js in one of the existing folder or make new folder if necessary. Each folder should have a readme file to explain what your story does.


    yarn test

    To get coverage information, use:

    yarn cover


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

    yarn website


    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.


    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    1.54 MB

    Total Files


    Last publish


    • javidhsueh