Graph visualization basics pt2: designing your best 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 building a graph visualization app. Follow these and you’ll give your users the tools they need to succeed.

1. Make your graphs interactive, not static

When you’re designing a graph visualization, 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.

The need for this synergy between user and graph visualization affects how we design our app. Which leads us nicely to…

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.

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.

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.

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

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.

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.

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.

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.

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 application 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 on your first graph visualization application already, request a free trial.

The ultimate guide to graph visualization

Everything you need to start building effective graph visualizations

Download the white paper