2

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!

Improve this question

2 Answers 2

Reset to default
1

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

Improve this answer
3
  • Thanks for your ideas, I incorporated the idea of very thin stripes on the line to show direction :)
    – goodforenergy
    Oct 28, 2015 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, 2015 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!
    – goodforenergy
    Oct 29, 2015 at 1:44
1

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.

Improve this answer
2
  • 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!
    – goodforenergy
    Oct 28, 2015 at 11:47
  • I'm glad you found my answer useful.
    – JeromeR
    Oct 28, 2015 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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