The Data Visualisation Catalogue Blog




Chart Combinations: with Arc Diagrams

When combining an Arc Diagram with another form of data visualization, the additional graph markers can be placed on or aligned with the connecting nodes of an Arc Diagram.

This allows for an additional variable (or multiple variables) to be added to the diagram. This additional variable is of course connected (or relevant) with the node data.

So for example, if an individual node represents a single person in a network, the arcs represent who they’re messaging, and then the additional variable marker (say a bar) attached to the node has a length proportional to the number of messages that user has sent.

+ Bar Chart

First up is an illustration of the previously presented example: a combination of a Bar Chart with an Arc Diagram.

diagram

Working together with pastor Christoph Römhild, Christ Harrison produced an Arc Diagram that visualises biblical cross-references. Here, each arc represents the 63,779 cross-references found in the Bible. Chris also combined this diagram with bars at the bottom, which each represent a chapter in the Bible with the lengths corresponding to the number of verses contained within it.

diagram
Source: Bible Cross-References, Chris Harrison

+ Stacked Bar Chart

Of course, if an Arc Diagram can be combined with a Bar Chart, you can be sure that a Stacked Bar Graph can be applied as well.

diagram

The 100% Stacked Bar Chart variation can also be applied. In the example below, the stacked bars have been fixed to have a uniform total width as a way of displaying part-to-a-whole relationship at each node.

diagram

+ Histogram

Applying a Histogram or Multi-set Bar Chart be done like in the example below, where each node contains a cluster of bars.

diagram

+ Unit Chart

Another way to display discreet, numerical comparisons could be through the use of a Unit Chart. Here, a shape is used to represent a numerical unit (for example, 1 block = 10).

diagram

+ Pictogram Chart

Instead of using simple shapes, you could instead substitute them for more detailed icons and uses a Pictogram Chart to combine with an Arc Diagram.

diagram

+ Span Chart

Another way to use bar markets on an Arc Diagram could be through the use of a Span Chart – especially if you’re looking to display ranged data. Here, the bars are not attached to each node, but are aligned to them. An axis could also be displayed along with the chart to give readers the ability to read values.

diagram

And if you want to have two variables or display sections of the ranges or show a part-to-a-whole relationship of the ranges, then the bars here can be split.

diagram

+ Proportional Area Chart

Numerical quantities can also be displayed fairly well through the use of shape areas (like on a Proportional Area Chart) on each node.

The example below from Martin Dittus visualizes data from IRC (Internet Relay Chat) communication behaviour to see who is speaking to whom, and who is namedropping whom. Here, the size of the circles represents the number of messages sent by each user. The varying color shades of the circles is based on the average message length.

diagram
Source: IRC Arcs

If unlike in the example above, your Arc Diagram doesn’t have arcs on the bottom the top and the bottom, then an alternative design could be to use semi-circles on the bottom half to reduce clutter and overlapping of the shapes areas on the arcs.

diagram

+ Pie or Donut Chart

Replacing nodes with Pie Charts or Donut Charts is a straightforward way to display percentages, although they’re not so fantastic to compare across.

diagram

The example below is part of a chart by Gaston Sanchez, which visualizes the script from the original Star Wars trilogy. Here, the semi-circle Donut Charts have been used to show the amount each character speaks across the three movies. The size of each semi-circle Donut Chart is also proportional to the amount of dialogue that character has in total.

diagram
Source: Star Wars Arc Diagram, Gaston Sanchez

If having arcs connecting to other arcs is too much for you, then an alternative design for this chart combination would be to flip the ‘arches’ onto the bottom.

diagram

+ Waffle Chart

A clearer way of displaying and comparing percentages could be to use a Waffle Chart under each node.

diagram

+ Heatmap

To combine an Arc Diagram with a Heatmap, all you need is to shade shapes near or on each node. Multiple data series can be displayed with additional rows of shaded blocks.

diagram

+ Line Graph

It’s possible to combine an Arc Diagram with a Line Graph, by aligning each point to a node and varying the vertical positioning based on a value axis.

Despite this possibility, this chart combination isn’t actually visualizing data over time (unless each node represents a series of uniformly distributed points in time).

diagram

+ Area Graph

Combining with an Area Graph is also another possibility. But like with the previously mentioned Line Graph combination, this isn’t necessarily showing data changing over time and is most likely just showing the data values increasing or decreasing over each node.

diagram

+ Word Cloud

If your network is connected with text-based data, then combining the Arc Diagram with varying sized text like in a Word Cloud is an option.

Here, you could display a few different variables on the text through the choice of word listing, ordering, and making the size of the words proportional to the frequency of occurrence or some other numerical variable.

This chart combination is useful for comparing bodies of text that occur within an interconnected network. For example, in a messaging network, where the arcs signify who is messaging who and the text visualization underneath the nodes shows the most commonly used words or phrases being exchanged.

diagram

+ Boxplot

Displaying data distribution can be done by aligning Boxplot markers with each node.

diagram

+ Dot Distribution Plot

A simpler way of displaying data distribution can be done by combining with a Dot Distribution Plot.

diagram

+ Barcode Plot

Another way to display data distribution with an Arc Diagram is to combine it with a Barcode Plot.

The example below by Matthias Dittrich contains an example of this combination. Here, all emails of a particular weekday were shown on a 24-hour time strip. The replied e-mails are represented by the arcs linking to the original e-mail source. The goal of this visualization was to show when and how fast emails were being answered.

diagram
Source: 5 Jahre Designerlist, Matthias Dittrich
Chart Combinations Chart Types

Next post:

Top 10 Most Viewed Chart Reference Pages in 2018

Blog Home

Previous post:

So What’s the Buzz Surrounding VR Data Visualization?