Graph visualization basics pt2: design a graph visualization online app

Part 1 of our graph visualization series for beginners covered the basics of graphs and graph modeling. In part 2, we focus on some practical techniques for designing a graph visualization online app. Follow these and you’ll give your users the tools they need to succeed.

Looking for the rest of the series?

1. Make your graphs interactive, not static

When you’re designing a graph visualization online app, interaction is key. Don’t just present analysts with a static diagram, give them the interactive tools they need to interrogate the data, reveal threats and uncover insight. There has to be a two-way flow of information between the graph visualization app and the user.

In this example, as the analyst focuses on a small part of a large network, the app responds to every click, zoom and hover chart action by revealing more detail on demand. We call these actions events, and they’re controlled by a powerful events engine.

Graph visualizations built with KeyLines and ReGraph are interactive by design

The need for this synergy between user and the chart affects how we’re designing our graph visualization app.

The ultimate guide to graph visualization

The ultimate guide to graph visualization

Everything you need to start designing your best graph visualization application.

Download the guide

2. Don’t plot everything at once

If you were talking to an analyst about how a complex investigation was going, you wouldn’t describe every single item of information at random. You’d focus on the most important points before going into more detail about current lines of inquiry, answering their questions as you go.

It’s the same approach with an interactive graph visualization. You don’t need to cram every piece of information into the chart at once. That’ll just overwhelm analysts who won’t know where to begin their analysis.

Our toolkit technology performance can cope with your largest datasets, but loading 20,000 items in a chart in less than 2 seconds won’t help users make sense of the data.
Our toolkit technology performance can cope with your largest datasets, but loading 20,000 items in a chart in less than 2 seconds won’t help users make sense of the data.

Here’s a better solution: present users with a smaller network initially, but make it easy for them to reveal additional information. The clever + glyphs in this chart tell users that there are further connections to explore.

Users expand their data and load further connections from the backend when they need to.

Another option is to give users the tools to combine similar nodes to make sense of what first appears to be a wall of disconnected components.

Grouping nodes according to property information creates a coherent network of connections.

Using expand or node combining together with panning and zooming means users focus on the exact parts of the visualization they’re interested in.

Pan and zoom reveals key information in this graph visualization, while clever animation alerts users to items of interest.

3. Give more meaning to connections

In part 1 of this blog series, we talked about how turning a conceptual view of our data into a logical one brings data to life. There are so many ways that styling visual properties can help you convey interesting things about the data. We’ll take a look at some of the most effective ones, starting with links.

You can style links however you like: solid, dashed, dotted, directional, curved or colored lines can each tell the user something special about that connection. Notice how the animated dashed connections in the previous example make the direction of traffic clear at a glance.

A powerful way to indicate the volume of traffic or the strength of a connection is using link width. This graph visualization features cell phone traffic over time. The greater the number of calls between phones, the wider the link and the easier it is to spot unusual patterns.

A link can tell a user a lot more about a connection than just who contacted who. Here, link widths represent call volume.

4. Make key entities stand out

If you saw this graph visualization without any context, you’d assume there was something special about the larger nodes. And you’d be right.

Social network analysis algorithms immediately reveal which entities play key roles in the network.
Social network analysis algorithms immediately reveal which entities play key roles in the network.

We’re looking at email data collected by US federal investigators in the wake of the Enron collapse. Our toolkits feature complex social network algorithms that reveal key information about a network, such as which nodes have the greatest influence over others.

That’s what we’re seeing here, but you don’t have to understand how the algorithm works to recognize which nodes are worth investigating further. And because seniority in the organization is also relevant in this scenario, we’ve styled director-level employees with yellow halos.

We’ve used simple circular nodes to represent people, but you might consider using photos or icons if they help to convey meaning.

5. Don’t label everything in advance

Just as you avoid plotting everything on the chart at once, you should also steer clear of cluttering the chart with too much text. Use other techniques instead, such as tooltips that reveal on hover, or information panels detailing search results. The information is in easy reach if analysts need it.

Tooltips can save you cluttering a busy chart with too much text.
Tooltips can save you cluttering a busy chart with too much text.

6. Represent the properties that are important to your data

We’ve seen that you can convey a lot of information with clever item styling and sensible labeling. There’s another powerful node styling option that’s perfect for representing property details: glyphs.

Typically, these are small counters on a node’s border that offer a subtle, quick and easy way to give more information about an item. It means you don’t have to sacrifice any of the details your users need to help reveal insight.

Four different nodes featuring options for using glyphs.
Glyphs offer an economical way to convey node property information.

The versatility of glyphs gives you an opportunity to get creative too. From creating interactive glyphs to using them as labels, find out how to get more from your graphs with glyphs.

7. Don’t overdo it

It’s easy to get carried away when you’re designing your graph visualization application. With so many features and visual styling options, it’s hard not to act like a kid in a candy store. Use every option at the same time in the same chart and you’ll risk giving your users sensory overload.

When you’re designing your graph visualization, ask yourself what kind of experience you’re giving your users. Is it consistent? Accurate? Can they explore and filter easily? Have you shown them what you have in mind? Were they enthusiastic about it?

For a little more practical help, look up our article on how to avoid wrecking your graph visualization.

Give graph visualization a go

These techniques set you on the right path towards building the graph visualization online app your users need. In part 3 we’ll take a closer look at some tips and tricks to enhance your visual styling.

If you’re keen to get started designing your best graph visualization app, request a free trial.

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.


How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse 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 2024.
Read our Privacy Policy.