CRviz: Scalable design for network visualization
This post is the second of 3 about CRviz, a network visualization tool developed by Cyber Reboot.
In a previous post we discussed the limitations of existing network visualization tools and explained why we need better, more scalable techniques to help us see what’s on our networks. In this post we explain how we designed CRviz — an open source tool that uses an interactive “enclosure diagram” to visualize network devices — to overcome some of these limitations.
CRviz is our first attempt at visualizing networks differently. It’s still an early prototype, and it’s still under development. That said, we want to share the tool in this formative stage both because we think that our approach has the potential to improve the scalability and legibility of network data, and also because we’re actively looking for feedback. So please send us your suggestions and comments!
When we first began designing CRviz, we identified four main goals for the initial implementation: scalability, minimal visual clutter, extensibility / flexibility, and a clear & simple “base layer.” In this post we briefly explain these goals and then show you the design strategies we used in order to meet them.
(Goal 1) Scalability
Ultimately, we hope that CRviz will support interactive exploration of 10s or 100s of thousands of nodes, but for the initial version we set 5,000 nodes as a minimum threshold to demonstrate the scalability of our approach. This means that CRviz should not only be able to ingest data regarding 5,000 nodes (each of which may be associated with 10s of attributes), but also provide a legible way to visualize and explore these 5,000 nodes.
(Goal 2) Minimal visual clutter
Following Edward Tufte’s advice, we aimed to minimize visual clutter and maximize “data-ink;” the portion of “ink” (or colored pixels, in our case) used to communicate useful information about a network. We aimed to remove extraneous marks and unnecessary complexity, such as the overlapping lines that make so many network visualizations look like “hairballs.”
(Goal 3) Extensibility / flexibility
We knew we’d never be able to anticipate all of the questions future CRviz users would have about their networks, or all of the specific attributes they might want to visualize, so we set out to make CRviz extensible and flexible enough to support a wide variety of user-defined inquiries.
(Goal 4) A clear & simple “base layer”
We wanted our visualization to have a cleanly designed base layer, onto which users could layer additional information as needed. We imagined this base layer as a navigable “map” with a fixed geography that users could explore at will. By removing unnecessary complexity in the base layer, we hoped to overcome some of the scalability and perceptual limitations that plague existing tools.
After we identified these four goals for CRviz, we developed and applied a variety of design strategies in order to meet them. These strategies included: a visual hierarchy, user-defined attributes, anchoring, restrained use of color, and scalable exploration.
(Strategy 1) Visual Hierarchy
CRviz is designed around a visualization technique called an enclosure diagram. Users organize network devices into a visual hierarchy of groups and sub-groups, based on attributes they choose. In this visualization of a synthetic 400-node dataset generated with a tool we released called “gensynet,” network devices are grouped first by subnet, then by operating system.
The three large circles represent the three subnets; within each of these large circles several smaller circles represent different operating system groups. The devices running those operating systems are represented by even smaller black circles (or “nodes”). This hierarchical organization makes it easy to see and compare how many objects of each type are in the network. For example, we can see that on subnet 10.153.172.0/24 (top center), there are more Linux devices (22, middle row, far left) than iOS devices (12, top row, far left). We can also see that there are 15 devices on this subnet for which the operating system could not be determined. These “unknown OS” nodes are shown inside the red “unknown” (bottom row, right).
In some cases, it may not be necessary (or practical) to show individual nodes. Turning off the “show nodes” function in the Control Panel reveals counts instead. Also, by varying the relative sizes of each group as a function of the number of elements in that group, the visualization provides a quick impression of node counts of different types.
(Strategy 2) User-defined attributes
These groups and subgroups are completely configurable by the user. By dragging and dropping attribute “tags” in the Control Panel onto the “Group By” and “Then By” drop targets, a user can organize network devices according to attributes of interest. He or she can also create as many hierarchical levels as there are attributes in the data. Then, based on the selected attributes, CRviz auto-generates a visualization of the network, grouping devices according to the desired hierarchy.
For example, the visualization below shows the same network as the previous images, but here, devices are grouped by subnet and then by role.
And this visualization shows a much larger (4000 node) network, grouped first by role, then by operating system.
Apparently, 266 people still haven’t given up their Blackberries.
(Strategy 3) Anchoring
CRviz’s interactive enclosure diagram is similar to the D3 “circle packing” algorithm (available here), but with one major difference. Whereas the stock D3 circle-packing layout is optimized to save space and preserve an overall circular shape of each group, our modified layout algorithm preserves the relative location of circles in order to enable comparison between different states of the network. We call this new feature “anchoring.”
In this image, the top row shows how the D3 circle-packing algorithm handles changes in the sizes of circles. With each change (t1 to t2 to t3), circles are repositioned to optimize the overall shape and compactness of the group. However, the relative positions of individual circles are not maintained. The red and blue circles jump around in a seemingly random way, destroying visual continuity between states. The bottom row shows how this is corrected with “anchoring.” Along this row, the blue node increases in size from t1 to t2 to t3, but it stays in the same location relative to the other nodes (i.e. top left). By maintaining the relative orientation of circles, CRviz facilitates the potential for visual comparison across different states of the network.
(Strategy 4) Restrained use of color
The CRviz base map — a visual hierarchy of groups and subgroups determined by user-defined attributes — reflects a minimal use of color. The basic visualization is rendered in greyscale, except for things that are “unknown,” which are shown in red, in an effort to draw users’ attention to these anomalies. CRviz’s greyscale base map makes it easy to add more information to the visualization by coloring nodes in different ways.
This visualization (above) shows a 1400 node network, grouped first by subnet, then by operating system. Individual nodes are colored by role (by selecting “Role” from the “Color By” drop down menu in the Control Panel). Colors are automatically assigned and a popup legend allows users to turn the color on and off for specific values.
For example, in the zoomed-in view (above) only the code repositories are colored (light green). This type of visual filter enables quick comparisons across groups. For example, here we can see that there are 3 code repos on subnet 10.105.7.0/24, 2 running Mac OS X and 1 running BSD. Subnet 10.114.78.0/24 has 4 code repos, all running Linux.
Color can also be assigned to groups. The above image shows a zoomed-in view of subnet 10.44.214.0/24. We can see (by comparing the light purple subgroups) that more internal web servers are running Windows (6) than BSD (1).
(Strategy 5) Scalable exploration
Several interaction features support scalable exploration of groups and subgroups, including traditional zoom & pan, clicking on a group to zoom into that group, and hovering over a group or node to reveal more information in a “tool-tip.” To help with navigation of large networks, in the next version we are considering a “mini-map” feature (shown below) that will show users the location of a zoomed-in view, in relation to the entire network.
And of course we didn’t want folks who work with the lights down to feel excluded, so we Included a “dark theme” as well.
In this post we’ve explained how CRviz can help users visualize networks at scale. In our upcoming post, CRviz: Initial release, we will explain how CRviz works under the hood and show you where and how you can try out the tool for yourself.
