Serious playtime with the ReGraph playground

10th February, 2020

ReGraph, our graph visualization toolkit for React developers, now includes a game-changing new feature for developers: an interactive code editor and live chart.

It’s called the ReGraph playground, but it’s more than just a plaything.

With the playground, you can write or paste a ReGraph application into your browser, make changes, and instantly visualize the result. It’s all done client-side: your code is executed locally in the browser, with syntax highlighting and code completion provided by the same Monaco editor that powers Microsoft Visual Studio Code.

Visualize changes instantly with the ReGraph playground

Using an encoded URL means you can share code snippets easily and securely. We don’t save anything on our server. In fact, because the source is encoded into the URL hash, it isn’t even sent to the server.

The playground has changed the way we – and our users – share, debug and even test code. Here are just a four reasons why we think you’ll love it.

1. D-I-Y charting

ReGraph makes it easy to visualize complex data sets and create an interactive, highly tactile chart. The playground opens up this experience so you can change the appearance and behavior of the chart on the fly.

With our extensive styling options, you can customize every aspect of your chart, but you don’t have to be a React expert to do it. Anyone can make a chart of their own!

The ReGraph SDK site is full of JavaScript examples and code snippets – and every single one loads into the playground with one click of the playground edit button edit button. You can customize them to your heart’s content, playing with themes and styles, adding your own data, exploring different layouts and options and learning as you go. All without having to download an IDE.

The playground is great fun - but so much more than a plaything
The playground is great fun – but so much more than a plaything

2. Instant collaboration

Teams do their best work together, and the playground is a great collaborative tool.

Our own ReGraph development team uses it to test functionality, interactions and styling, and share their work. Just hit the playground share button share button and send the link to a teammate.

Sharing links is secure and private because your code and data are encoded into the URL hash. When you paste the link, the browser doesn’t even send this part of the URL up to the server.

There’s no need to wait for a build deployment, no intermediate infrastructure to worry about, and no security concerns. It’s so quick to prototype and share playground code that for many users it’s become part of their day-to-day development cycle.

Trying out new layout ideas in the playground
Trying out new layout ideas in the playground

Get started with our toolkit technology

Not using ReGraph yet?

Request a free trial

3. Data is just a paste away

There are two fundamental parts to any data visualization: the app which the user interacts with, and the underlying data.

The ReGraph playground gives you an app right out of the box. All you have to do is add some data.

The playground provides a dedicated data tab to capture your data. ReGraph uses a simple JSON format which describes nodes and links, and you can see an example in the data tab itself. All you have to do is paste in your data and convert it into ReGraph format with a few lines of JavaScript.

Remember, we don’t store your code or data anywhere: everything runs inside the browser and is completely secure.

Real data realized in the playground
Real data realized in the playground

4. Simplified support

Doing data visualization the right way is a challenge: apps can get complicated, data can be messy, and users may find it hard to deliver the insightful tools their analyst’s need.

ReGraph’s development team is on-hand to help you get the best out of your application. But it’s often hard for users to explain exactly what is going wrong. We receive all sorts of creative queries with annotated screenshots and complicated gifs. And in return, we’d respond with out-of-context code fragments. Not any more.

The playground makes support queries easier for all of us. If you can reproduce your issue in the playground and share the link with our team, we can understand precisely what’s going on. And in turn, we can send a working code solution back to you. Everyone’s a winner.

The hairball: so often the first hurdle of connected data visualization
The hairball: so often the first hurdle of connected data visualization

Start playing with ReGraph

We love how the playground has accelerated our own development cycle, but we’re even happier that it’s making life easier for users creating their own graph visualization applications.

Prototyping and sharing code has never been easier and more effective, and learning how ReGraph can bring your connected data to life has never been more fun!

Ready for some serious playtime? Request a free ReGraph trial

More from our blog

Visit our blog