The Graph Visualization Toolkit for React

The Graph Visualization Toolkit for React

Getting Started With ReGraph. ReGraph is a React toolkit for developers to add powerful, interactive graph data visualizations to their applications quickly and easily.

To help you get started with ReGraph, this step-by-step tutorial covers everything you need to know. Once we’ve created our visualization in a React app, we’ll load an example network of suspected terrorists and show how easy it is to apply the key analysis techniques your users need to uncover threats.

Before the tutorial, let’s learn a little more about ReGraph.

ReGraph: How it works

ReGraph contains two React components, a chart and a time bar. Both components are designed from the ground-up to fit into modern React environments. The fully data-driven approach allows for modern, responsive, and declarative visualization of your data.

Powered by WebGL, ReGraph offers fast, reliable performance even when visualizing large, complex networks. And like React, it works with all major browsers and devices.

ReGraph comes loaded with high-performance graph analysis functions and other features to help analysts discover critical insights more quickly. They can take advantage of social network analysis measures, advanced map-based analysis, automatic layouts, grouping and combining, and much more.

We’ll look at a couple of these in more detail — but first, let’s get ReGraph working in an app.

Step 1: Add ReGraph to your React project

If you don’t have a React project set up, you can bootstrap one in seconds with create-react-app:

npx create-react-app my-regraph-app

Next, download ReGraph. If you haven’t already, join the EAP. You’ll get full access to the ReGraph SDK site containing the latest ReGraph package, detailed developer tutorials, interactive demos, and a fully-documented API.

Add ReGraph to your project by installing it with a package manager. We’ll use npm:

npm install ../path/to/regraph-0.5.0.tgz

Step 2: Import ReGraph and create a chart

To access ReGraph from your app, simply import it alongside React:

import React from ‘react’;
import { Chart } from ‘regraph’;

You can then render the Chart in JSX. To create a chart and load a dummy item, use:

<Chart items={{
   node1: {
      color: ‘#bbdefb’,
      label: { text: 'Welcome to ReGraph!' }
    }
}}/>

And that’s it: ReGraph is running in your application!

Step 3: Load data

ReGraph works with any data repository — databases, web services, CSV files, etc. All you have to do is convert the data into the simple JavaScript format ReGraph expects. Here’s what our converted network of suspected terrorists looks like:

// A node with id N8
N8: {
  color: '#ff867c',
  label: {
    text: 'Mohammed Ibrahim Makkawi',
  },
  data: {
    country: 'Afghanistan',
  }
},
// A link between N8 and N99
'N8/p/N99': {
  id1: 'N8',
  id2: 'N99',
  width: 5,
  color: '#f3e5f5'
}

You’ll find descriptions of every supported prop, event, and style option on the ReGraph SDK site.

Next, we pass this object into the items prop of our chart and ReGraph automatically draws it for us. In a React app, we usually load our items from the app state or props. We’ll read from state in this example, which means we can re-render whenever the items change:

componentDidMount() {
  const data = await loadData();
  const items = convertData(data);
  this.setState({ items });
}
render() {
  const { items } = this.state;
  <Chart items={items} />
}

The items prop is fully reactive. When you pass a new object into it, ReGraph looks for changes since its last render and updates the chart if necessary. New items slide into view, removed items fade out, and color and position changes transition with smooth animation.

That’s it! We’ve got our chart working and our data loaded. Now let’s see how we can make sense of our chart.

Make sense of your graph visualizations

Right now, it’s hard to get useful insight from our complex network of connections, but ReGraph comes with a range of features to help you understand the data. Let’s focus on two of them: combos and SNA measures.

Reducing clutter with combos

In very busy charts with lots of nodes and links, it’s hard to differentiate between what’s important and what’s not.

The smart way to reduce the number of items is to group together nodes with similar properties. We call these combined nodes combos. For example, our dataset contains the country of origin for each terrorist suspect. Grouping suspects by country gives us a beautifully clean high-level view of the data:

Notice how ReGraph automatically combines multiple links between nodes into a single link between combos.

Creating combos in ReGraph is really straightforward. You just set the combine prop to tell ReGraph which data properties to use for grouping. Setting the level property will enable or disable combos:

<Chart
  items={items}
  combine={{properties: [‘country’], level: 1}}
/>

We can still drill down into the detail when we need it by “opening” each combo to show what’s inside. If there’s a specific node worth investigating further, we can easily highlight the nodes and combos it's connected to.

Sizing nodes by SNA centrality

Graph theory provides a number of ways to assess the importance of each node, which ReGraph exposes as a number of social network analysis (SNA) functions.

Analyzing social connections in any network can reveal important information about information flow, hidden subnetworks, dependencies, and influential nodes.

An effective way to make highly-connected nodes stand out is by making them larger. Here, we’ve counted how many connections each terrorist suspect has and sized them accordingly:

ReGraph supports other powerful SNA centrality measures too, including betweenness to find the ‘gatekeepers’ in a network, and closeness to identify how easily a node can reach the rest of the network.

All these measures are available through function calls with simple APIs — very similar to the example above — so experimenting with them is easy. The ReGraph SDK also features interactive examples of centrality measures to show how they reveal different insights from your data.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Further reading

How to Build First React Website

☞ The Complete React Native and Redux Course

☞ React Native - The Practical Guide

☞ React Native: Advanced Concepts

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development


This post was originally published here

reactjs react-native javascript graphql database web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.