Loading…
Many methods of graph drawing, such as force layouts, do not assign intrinsically-meaningful positions to nodes: the position is only approximate, in the hope that related nodes appear nearby. While intuitive, these methods arguably make poor use of the most effective visual channel (that is, position), and in the worst case produce an indecipherable hairball.
Enter Krzywinski’s hive plot. Hive plots define a linear layout for nodes, grouping nodes by type and arranging them along radial axes based on some property of data. The explicit position encoding has the potential to better reveal the network structure while communicating additional information. Hive plots can also be extended to show aggregate relationships.
Each node above represents a class in a software library. Nodes are divided into three categories. The 12 o’clock axis (the top) shows source nodes—classes with only outgoing dependencies. The bottom-left axis shows target nodes with only incoming dependencies. The remaining nodes in the bottom-right have both incoming and outgoing dependencies; these are duplicated to reveal dependencies within this category.
This grouping immediately reveals much about the different classes. The highest-level implementations (such as layouts and controls) are arranged in the top axis, while interfaces and internal abstractions are in the bottom-right. Heavily-interconnected classes, such as Transitioner and Data, are emphasized by numerous links. The handful of decoupled classes (those with only incoming dependencies) are delineated in the bottom-left. A variation of this design only considers dependencies across package boundaries, painting a different picture.
In a standard hive plot, nodes are sorted by link degree. This example instead arranges node by package, grouping related classes. This better reveals the “macro” structure of the dependencies, while demonstrating the great flexibility of hive plots—you can use any number of methods to group and position nodes along each axis, customizing the layout to suit your needs.
Want more? Other approaches to network visualization are matrix diagrams and hierarchical edge bundling. See also these simpler examples of hive plots. Feedback or questions? Discuss on HN.
Special thanks to Rich Morin for assisting in the implementation of hive plots in D3!