I'm designing / implementing an animated visualisation of flow of people between departments in a building.

Departments are presented as circular nodes, where the size of the node indicates volume at a given time. Connections between nodes need to indicate volume of flow between departments.

I'm struggling to decide how to present the flow of people, given that the graph has many overlapping paths, and this could cause the visualisation to quickly become too busy or unclear.

My graph has at least 5 nodes, and people can flow from any node to any other. There are also entry and exit nodes I've excluded for simplicity.

Graph with 5 interconnected nodes

Line width is one option to indicate volume of flow, although direction of flow may be difficult to represent.

I also thought about using small coloured circles moving along the paths (as in the example at the top of this page), but I feel that might get too cluttered with so many paths overlapping.

In short, I'm looking for a clear way to present directional flow in a graph with multiple overlapping paths. Any suggestions appreciated. Thanks!


The simplest solution would be to employ arrows at the line ends.

Alternatives are graphics that show direction of the flow. They can be animated in the loop in a close up and stay static in the zoomed out view to reduce clutter.

enter image description here

  • Thanks for your ideas, I incorporated the idea of very thin stripes on the line to show direction :) Oct 28 '15 at 11:45
  • Glad to help, Helen! Do you mind checking my answer as a chosen one?) It helps my carma grow :-)
    – Zoe K
    Oct 28 '15 at 13:48
  • Zoe - I think you and Jerome both contributed equally, so I'm not going to select either as a definite answer. I will upvote you (both) though, as soon as my reputation allows! Oct 29 '15 at 1:44

Building on Zoe's suggestion … if the flow is in two directions, show two arrow heads. And for clarity, consider when to quantify the movement.

Movement in two directions

For legibility, think about whether to keep the quantity (text) upright on the screen, rather than perpendicular to the arrow direction.

I wouldn't animate the arrow to show direction, because that turns the illustration into a circus of visual distractions.

Similarly, I wouldn't stutter the line, because more objects make the image more difficult to interpret.

You might consider whether the colours are useful. Typically, the meaning of colour is poorly understood.

Get specific only when needed

Perhaps the quantities only need to be present when the user toggles Show movement—but be sure to specify the period during which the movement occurred. (Was it an hour? A month?)

The same applies to the count for the circles themselves. (Is a large circle 10? 1000?) Perhaps a toggle to Show the counts could reveal and hide all this detail in one simple toggle.

  • 1
    Hi Jerome, thanks so much for your suggestions. I actually found an example where I think the [thin lines work pretty well ](bl.ocks.org/nitaku/1adb4033d7078f7d005e) but I took what you said about colour into consideration and removed the unnecessary colouring of nodes, so there was less visual distraction. I also added reference scales for the size of the nodes. Cheers! Oct 28 '15 at 11:47
  • I'm glad you found my answer useful.
    – JeromeR
    Oct 28 '15 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.