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'},
    }
  }}/>
);
                    

Try ReGraph for yourself

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 internal third-party dependencies on two libraries: Lodash and Web Font Loader.

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

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
Amazon Neptune logo
DataStax logo
JanusGraph logo
ArangoDB logo
Elasticsearch logo
OrientDB logo
Cayley logo
Microsoft Azure CosmosDB logo
Titan 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.

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.

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.

Can I try ReGraph for free?

Of course! Request a ReGraph trial

From our blog

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

Visit the blog