How ReGraph’s powerful performance measures up

16th March, 2020

Picture this: your dev team spends time and effort creating a quality graph visualization application for your users. It integrates seamlessly with your chosen graph database. It’s intuitively designed and fun to use. It displays beautifully stylized charts. Perfect, right?

Not quite.

They’re all important features, but if you build an app with a toolkit that doesn’t prioritize advanced performance, your users may find your product slow and frustrating.

Analysts need to load huge datasets fast, navigate fully-responsive charts and customize items without time lags. Fail to deliver that and your app misses its potential.

Here’s what 40,000 chart items look like in an app built using ReGraph, our graph visualization toolkit for React developers
Here’s what 40,000 chart items look like in an app built using ReGraph, our graph visualization toolkit for React developers

In this post, we focus on performance rates in ReGraph, our graph visualization toolkit for React developers. We take a closer look at the benchmarks that prove how powerful your apps could be.

A quick note about WebGL & measuring FPS

Our graph visualization toolkits are powered by the Web Graphics Library (WebGL) to guarantee superior performance rates. We’ve written in detail about this rendering component before. In short, it makes apps built using KeyLines and ReGraph work smarter and harder by letting the graphics processing unit (GPU) take the strain. As a result, your users can visualize bigger and more complicated datasets.

We measure performance by counting the number of individual frames per second (FPS) our WebGL engine displays. High frame rates mean smooth transitions and sharp images – exactly what your users expect.

To save having to create your own performance test frameworks, we’ve included a showcase demo on the ReGraph SDK site. Let’s see how it measures up.

Get started with our toolkit technology

Not using ReGraph yet?

Request a free trial

Tracking chart item loading & layout metrics

We start (relatively) small by loading 1,000 items. Let’s apply colorful styling so they stand out more. At 59 FPS the chart is drawn in an instant.

ReGraph loads 1,000 chart items in 0.17 seconds at a frame rate of 59 per second
ReGraph loads 1,000 chart items in 0.17 seconds at a frame rate of 59 per second

Loading 20x as many items isn’t a problem for ReGraph. The useful log confirms that nodes and links are added in less than two seconds.

20,000 items loaded into our visualization in less than 2 seconds
20,000 items loaded into our visualization in less than 2 seconds

So far we’ve ignored the chart contents, each featuring a jumbled mass of overlapping connections. They’re great for gathering performance metrics, but neither of these examples is of practical use until we apply a layout.

Running the organic layout algorithm reveals the structure of the data fast
Running the organic layout algorithm reveals the structure of the data fast

After a smooth transition, we see the overall shape of the data. It forms branches of connections spread out to make them more distinct. Again, the FPS and log time are impressive.

Expanding graphs without compromising speed

The smart approach is to design an app that matches the way analysts operate. Sometimes they prefer to start small and focus on key items of interest before widening their investigation to include associated connections.

We can test this scenario easily by expanding relevant data into the chart from the backend. No need to visualize everything upfront: ReGraph’s superior performance extends the dataset by 2,000 items at speed.

Expanding 2,000 nodes and links into our 5,000 item chart then applying a layout in less than three seconds

Once extra items are added, ReGraph applies the organic layout automatically to bring out the data’s underlying structures.

Selecting items - shown here with a red outline - before expanding in additional connections make it easier to spot what’s new
Selecting items – shown here with a red outline – before expanding in additional connections make it easier to spot what’s new

Benchmarking animations the easy way

Our ReGraph performance demo makes your tester’s life easier too. It supports a randomize option to return the chart to its original rectangular mass of items between layouts. That way, it’s easy to capture how fast ReGraph animates the layout for each of the six chart item options ranging up to 40,000 nodes and links.

To measure how well ReGraph performs when it animates chart items, randomize the chart and then apply a layout
To measure how well ReGraph performs when it animates chart items, randomize the chart and then apply a layout

Customize charts without impacting on performance

ReGraph can be fully customized to suit your particular use case. The styling options we’ve applied here happen instantaneously, even on massive charts.

When you design the right visual model, analysts can choose the colors, font icons, glyphs and images that best match their scenario without compromising on performance. In this way, they can turn generic chart items into real-world representations, helping them spot patterns and outliers more easily.

Flags on nodes to represent countries of origin are instantly recognizable
Flags on nodes to represent countries of origin are instantly recognizable

A final word on best practice

It’s tempting to load the chart with every item in your dataset. Just because you can, it doesn’t mean you should.

Our toolkits can handle big data, but visualizing masses of connections won’t necessarily help analysts find insight. For practical tips on aggregating and filtering large datasets into something manageable and useful, see Five steps to tackle big graph data visualization.

Time to start performing

We’ve always prioritized performance in our toolkit technology. ReGraph’s powerful rendering gives your analysts the quality and speed they expect from a superior graph visualization tool.

Don’t just take our word for it. To try this performance demo yourself, request a free trial and you’ll get full access to the ReGraph SDK site.

More from our blog

Visit our blog