4 steps to infinitely flexible graph visualization design

When choosing a graph visualization design solution for your application, there’s a lot to consider. It should be a perfect fit for your data, your users and the questions they need to answer. It needs to make a great first impression, and look like a seamless part of your application – not a flashy add-on. The interface needs to feel familiar and intuitive, letting users uncover quick and meaningful insights. And on top of that – it needs to match your designer’s vision exactly.

Our graph visualization toolkits tick all of these boxes. They deliver almost infinite flexibility and customization options. You have full control over your charts’ look and behavior, with rich new node customization and interactivity options.

Find out how clever graph visualization design can solve four of the biggest design challenges you’ll face when developing an application.

A visualization of a sportswear dataset
Transform your graph into your UI with interactive nodes

1: A graph visualization design that stands out from the crowd

It’s a cliche that customers “buy with their eyes”, but it takes a unique and eye-catching application to stand out in a crowded marketplace. And we’re not just talking about aesthetics, although that’s important. You need to convince customers that they’re looking at an app that’s easy to work with, and quick to offer meaningful insights.

When you’re competing in the cyber vendor market, you have especially high design and UI standards to meet. Let’s have a look at a visualization design for a market-leading impact analysis application.

This chart maps out an entire IT infrastructure. Switches, servers, hosts and services are colored by category, and sized to show their connectivity. We’ve muted the colors for less-connected nodes, so that the more important devices stand out; and we’ve added font icons to make it clear what type of infrastructure is represented by each node:

A visualization of an IT infrastructure, with a blue and green color scheme
A ‘dark mode’ visualization of an entire IT infrastructure, using font icons and a calming blue/green palette to show the types of nodes in the graph

When we select a node of interest, the chart adapts to focus on a neat sequential visualization of that particular node and its dependencies:

A sub-section of data visualized in sequential layout
Our sequential layout and curved links make hierarchy relationships clear

Now we can see the names of each individual piece of infrastructure, and understand their relationships and their position in the flow of information.

Clicking on the background brings us back to the full network visualization, where we can toggle from impact analysis to an alerts list view. When we feed alerts data into the chart, it helps us spot problem areas by color coding based on their status:

The same graph visualization design, color coded in reds, oranges and yellows to show alert status
Switching to ‘alerts’ view changes our palette from calming blues to eye-catching reds and yellows

It’s easy for network engineers to prioritize alerts for investigation by clicking on the larger, red nodes. But we also have the option to select an alert from the list on the right. Either way, we can bring up a visualization of a particular host or server that’s triggered an alert:

An isolated area of the chart that's flagged for alert
It’s not just color palettes – custom visualization design will make your users’ experience slicker and more productive

In this example, it’s clear that the root cause of a number of services being down stems from an invalid proxy config on at the server level. Now that we’ve pinned down the problem, we can bring in more detail by zooming in to that specific server:

The node representing server D
Rounded corners and curved links, with multiple icons and fonts inside a single node: turn your application designer’s vision into a reality

Throughout each interaction, the application demonstrates a slick and intuitive UX, starting with the big picture and revealing the root of a problem in just a few seconds.

So you don’t have to throw in every visual trick you know to stand out from the crowd. An elegant graph visualization design will grab the attention it deserves, and build trust right from the outset, delivering on its promise of a great UX.

A screen showing a graph visualization created using ReGraph
EXCLUSIVE: What’s coming in KeyLines 7.0 & ReGraph 4.0

Preview the slick customization and interactivity options in this 30-minute video

WATCH THE WEBINAR

2: Creating a consistent look & feel

Lots of graph visualization applications look great but have a strong visual identity that clashes with your app. You should never have to redesign your app to fit with a tool that you’re integrating with. A visualization component built using our SDKs is completely customizable to your style requirements, giving your application a look that’s so seamlessly on-brand, users will assume it’s entirely home-cooked.

As an example, we’ve built an HR application for Cambridge Intelligence:

A branded HR application with matching organizational chart and staff menu
An organogram view of Cambridge Intelligence, carefully designed to fit with our corporate brand guidelines

We’ve added a graph to our menu panel that takes many of its design cues from Material Design, but we’ve made it look native to the application. We did this by using customization features to apply a branded color scheme, and import staff photos and our logo.

Because the branding and formatting is consistent, users will understand how to interact with the chart and menu. Using our toolkits, it’s easy to create a unified UX that’s stylish and professional – and instantly recognizable as a product from your organization.

3. Giving users the right info at the right time

It’s important for your users to get the information they need exactly when it becomes most relevant. They should be able to self-direct through a visualization smoothly and intuitively, and quickly uncover the answers buried in their data.

This IT network visualization gives a simple overview of a complex dataset. The chart comprises just four nodes, representing a central server and the cities it’s connected to:

A simple graph visualization design representing an IT network
The high-contrast color scheme draws the user’s eye directly to the alert

We’ve made certain design choices to make sure the user won’t get overwhelmed by information at any stage. With just a few clicks, they can carry out an investigation that’s clear and streamlined, allowing them to make business-critical decisions with confidence.

We’re featuring only the most important information at the top level. We get an instant understanding of our IT infrastructure, its connections and the alert we need to focus on – and that’s all down to the customization choices we’ve made.

Red glyphs on the nodes show us how many items each one contains. The combos function – our advanced grouping feature – allows us to investigate further, expanding nodes to show their contents:

The same chart with one node expanded to show its contents
Digging deeper to explore the area flagged with an alert

As we dig deeper, our node customizations give us the key information we need, as we need it – without cluttering up the chart.

The color coding makes it easy to identify the source of the alert. Once we’ve narrowed down our investigation to two specific devices, we can highlight the corresponding nodes and examine their connections, while sending the rest of the chart items to the background so you can still see them in context:

Animated links showing directional relationships make it easy to understand the wider potential impact of the alert

We’ve used node customization here to make some incredibly complex, time sensitive and critical data easy to navigate. The contrasting colors and recognizable font icons let us paint a swift picture of our network and its components. Users can identify the relationships between them, and cut through the noise to find the section of infrastructure that needs urgent attention. When a network has been compromised, a clean visualization can not only help identify the root cause, but give the user the information they need to prevent it happening again.

A visualization design that puts the user in control

Node customization isn’t all about visual styling – it can bring in a whole new level of interactivity, allowing users to control the chart as they explore it.

The visualization below represents sportswear vendors and their products. The vendors are represented by familiar logos. We’ve added detailed information about products and prices to the nodes, which the user can reveal on zoom. And if we want to know about a specific product, we can instantly access related web content, by following a link within the node. Another link lets us remove products that aren’t relevant to our investigation, to keep the chart as clean and relevant as possible.

These heavily customized nodes are richly informative and interactive, but they’re still neatly laid out, and the level of detail doesn’t distract the user:

A closer view of a section of the chart revealing added information on products
Explore rich node customization and interactivity options in our toolkits

4. Bring your designer’s vision to life

Many organizations make big investments in user experience design, and that means working with experts who have very detailed and well-informed plans for how your application should look and behave. Your designer and developer have a common goal – building an intuitive and rewarding UX – and a good SDK will empower them to work together to achieve that.

Using our toolkits, you can meet the most specific graph visualization design vision without slowing down your project, and without making any compromises. And if you’re looking for a style or a feature that you’re not sure how to achieve, our excellent support team will do their best to help you make it happen.

This app visualizes CPU usage in an IT infrastructure. Zoomed out, we have a clean and tidy overview of servers connected to a Wide Area Network (WAN), color-coded by type. The devices are grouped according to their physical location on the floor of a building:

A visualization of an IT infrastructure
This chart gives a clear overview of the devices that make up the infrastructure

This visualization needs to match the innovative design features of the wider application. No problem – our SDK can easily recreate them. Notice the dynamic color changing progress bars that indicate the level of CPU usage. Hovering over any node grays out the others, to make it easier to focus on what’s important:

Close up of an individual device showing a red power bar gauge
Coming soon: add dynamic customizations to your nodes, like this color changing progress bar

Again, this chart is simple, clean and easy to scan for issues at a zoomed out level, and information-rich when we zoom into a specific area of interest. Users see at a glance where problem areas are and what devices might need attention.

Challenges accepted?

KeyLines and ReGraph deliver almost infinite flexibility and customization options – if you can dream it, we can help you build it.

Whether you’re working on a new product or looking to upgrade an existing application, you’ll get the expert support and collaboration tools you need to face up to every design challenge.

Sign up to a free trial or get in touch.

A screen showing a hybrid graph and timeline visualization created using ReGraph and KronoGraph
FREE: Start your trial today

Visualize your data! Request full access to our SDKs, demos and live-coding playgrounds.

TRY OUR TOOLKITS

How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers

“case

Looking for success stories?

Read our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2023.
Read our Privacy Policy.