Flowmap

Flowmap

Flowmap

What Problem Does This Solve?

Data visualization with straight or geodesic lines have visual limitations.

When to Use This Pattern

Illustrate connections between points and their associated flow of something. Examples of such can be supply chain apps that show the flow of goods between depots, air travel, migration behavior, the spread of diseases or information or even connections between friends on social media.

What’s the Solution?

Map flow between one or many locations by connecting locations (point features) with directional (convex or concave) bezier curves. Adding animation to the arcs through visual cues like moving arrows or an effect that looks like ‘ants marching’ helps users to easier understand the flow direction. Labeling the start and end points can provide additional information (e.g. distance, number of goods) that is important to the connection and purpose of the map.

Why Use This Pattern?

Studying and analyzing relationships between objects is a common task. Visualizing existing, missing or broken connections is important to understand patterns or issues.
Common approaches for dynamic flow mapping include using straight lines and geodesic lines, both of which have immediate visual limitations. While straight lines are not inherently ugly, overlap or convergence are common across a global datasets. Geodesic lines work well in many cases but can create unwanted behaviors when spanning long distances. Bezier curves address the limitations of the former and improve the aesthetics of the map.

Special Considerations

  • Flowmaps work best at small scales (globally) so that all the connections are visible in their entirety. Unless the connected locations are constrained to a smaller area application developers will need to address ‘partial lines’ through labeling or other navigation techniques that allow users to jump back and forth between the locations.
  • Consider using dark backgrounds (basemaps) with flow arcs that use vibrant or bright colors. Keep the arc thin and apply transparency which will increase the highlight effect for locations that are hubs
  • Keep contextual information (political boundaries, place labels, other operational data) to a minimum

Examples

Canvas Flowmap Layer

Canvas Flowmap Layer

Flowmap (leaflet)

Flowmap (leaflet)

Flowmap of Facebook connections

Flowmap of Facebook connections

References and further reading

Leave a Reply