Building with ReGraph

Use React to build and deploy high performance graph visualization tools quickly

What is ReGraph?

Regraph is a toolkit for visualizing connected data in React. It provides a number of fully-reactive, customizable components that you can embed in your own applications.

How does it work?

ReGraph provides two visualization components: a chart and a time bar. Simply push your data into them through props and they’ll update automatically.

To update, filter, style or highlight items in the data, just push an updated item’s object into the component on the next render: ReGraph figures out how to smoothly update the visualization to reflect the change.

Like other React components, ReGraph sits in the front end of your application – completely separate from the back end – and can be added to your existing bundles. Data is passed as a plain JavaScript object: it’s up to you how to deliver data to the client.

import React from 'react';
import { Chart } from 'regraph';

const FamilyTree = () => (
  <Chart items={{
    luke: {label: {text: 'Luke Skywalker'}},
    leia: {label: {text: 'Princess Leia'}},
    link: {
      id1: 'luke',
      id2: 'leia',
      label: {text: 'Siblings'},
    }
  }}/>
);

Join the ReGraph Early Access Program

Why Build with ReGraph?

Designed for React, and only React

If you’re a React developer looking for a graph visualization toolkit, ReGraph is designed for you.

Enjoy all the benefits of React including component-based state and data flow management, efficient rendering, and JSX-coded elements with clear syntax. The data-driven API is intuitive and declarative: you describe what you want ReGraph to draw, not how to draw it.

Robust & advanced features

ReGraph comes loaded with high-performance features to analyze your biggest datasets.

ReGraph components allow you to visualize time-based and geospatial data, while advanced layouts and graph analysis functions help you make sense of it. There’s also powerful rendering of large data sets across all modern browsers.

It’s scaleable & flexible

ReGraph is completely separate from the back end. You can choose whatever system you want to integrate with, and whatever data source you want to visualize.

You can also take advantage of React’s complementary tools and features including Redux, Flux and Hooks.

High-quality developer experience

A fully-documented API and detailed developer guides provide expert first-line support.

There are dynamic demos for every feature with downloadable examples to save you coding from scratch. And if you contact support, our experienced React developers are here to help.

Lightweight, secure and scalable

ReGraph is a front-end application that works seamlessly in any environment. No need to change your existing setup: you choose where to host it.

Fully agnostic, ReGraph works with virtually any data repository. For added security between server and web browser, simply set up a secure channel using SSL.

There’s no need for specialist visualization servers. ReGraph’s simple, data-driven API renders the graph every time your data changes.

Live demos and fully-documented code for every ReGraph object
Powerful

Powerful, fast and easy to use

ReGraph components use WebGL rendering under-the-hood for fast performance. This offloads much of the heavy lifting to the device’s GPU.

The additional processing power means you can visualize large and complex networks easily.

Can’t always use WebGL? As a fallback, there’s HTML5 Canvas. It uses the same API, so no need to worry about which platform you’re running on.

Minimal dependencies

ReGraph works with React, and the core library has a third-party dependency on the lodash utility library.

If you’re using map mode, add Leaflet version 1.3.4 to your project and import it into your app. This’ll draw map tiles and handle user interactions.

If you’re using font icons, use the FontLoader component included in the ReGraph package and make sure fonts are loaded on the page before redrawing the chart.

React logo

Trusted by developers

Many high profile applications around the world use our visualization technology.

Meet our customers

Any browser, any device

ReGraph works in all major browsers on desktops, tablets or cell phones.

Supported browsers and devices

Integrate with your favorite database

ReGraph works with virtually any database. If your data can be parsed into JSON format, ReGraph can visualize it.

Neo4j logo
DataStax logo
Titan logo
JanusGraph logo
ArangoDB logo
Elasticsearch logo
OrientDB logo
Cayley logo
Microsoft Azure CosmosDB logo
Amazon Neptune logo
Stardog logo
Memgraph logo

Frequently asked questions

Is ReGraph open source?

No. ReGraph is a commercially-licensed React SDK. Having a dedicated team on the project means we can guarantee frequent releases, fixes and expert support.

Can I ship ReGraph to customers?

Not right now. The Early Access Program (EAP) offers the chance to try out ReGraph and give feedback that could help shape its future, but any applications you build should not be shipped to customers yet. Once the EAP ends, we’ll announce that ReGraph is ready to deploy to production.

Can I try ReGraph for free?

Of course! Sign up for the ReGraph Early Access Program

What’s ReGraph’s performance like?

Performance rates depend on many factors including server hardware, browser and size of the visualized network.

The ReGraph WebGL renderer can handle networks of 100,000 items, but in reality, the human brain can only interpret a few hundred nodes at most.

Your users can rely on ReGraph’s advanced filtering, grouping and merging features to manage the data and find the insight they’re after.

How do I use ReGraph with my data?

Once your data is converted to the JSON format ReGraph needs, objects are sent to the client and passed to the chart’s items prop ready to be rendered to the chart.

From our blog

Our blog is full of useful materials and tutorials to help you make the most of our network visualization technology.

Bringing chord diagrams to life with graph visualizations

There are so many visualization options to choose from. In this post, we examine the pros and cons of one popular choice: chord diagrams.

Graphing the Deal: Party Politics and Brexit

The UK political system is usually relatively stable, but it’s going through something of a crisis right now. Our parliamentary democracy is gridlocked.

Game of Nodes: Visualizing a 13-14th century social network

In this blog post, we’ll bring a medieval community to life. Our graph visualizations will help us gain insight into peasant network connections through lawsuits.

Visit the blog