Visualizing Relationships

The Project

A GUI inspection tool to visualize relationships of computer system attributes. 

the Users

System administrators in IT operations organizations where systems were managed with Puppet Enterprise, a  model-based configuration management tool set.

With Puppet, a user describes their desired configuration in code, then Puppet configures the system as described. The system is configured in a sequence of events, many of which must take place in a specific order. Puppet creates a mathematical graph to order events. When a user indicates a specific order of a sub-set of these events, and does not do so correctly,  the configuration fails. Using a visual representation of the graph, the user should be able to locate the failed event and the incorrectly defined relationship among the system attributes that caused the failure.


 A visualization of the graph, in the form of a PNG file, was available to users, but it was both difficult to parse and contained no metadata on any of the attributes:

The original PNG export of the graph

Our challenge was to design and build a rich, interactive, easy-to-use version of this graph, that would help users quickly locate and understand any event or attribute relationship.


Few of us had had any experience with mathematical graphs. My first step was to understand how they work, so my team and I would better understand available visualizations, and be able to choose one with confidence.  I organized a mini-course on graph theory for members of the UX and Product teams. We used these to gain a shared understanding of graphs in general, and the Puppet graph in particular.

At the same time, I worked with stakeholders in Customer Service and Support, to better understand the history of the graph, how they'd used it, and what data they believed should be surfaced. Since this tool would be a new feature, and few of our customers were familiar with the static PNG output, this stage of research was conducted internally. 

Once I synthesized this feedback, I ran a 4-day, cross-team workshop. We reviewed user stories, data available, popular visualization tools, performance and storage issues. By the end of the workshop, we had a roadmap, first release requirements, high-level scoping and the entire scrum team shared an understanding of what problems we wanted to solve. 

Schedule and notes from our workshop

Some of our cross-discipline team from: Engineering, Customer service, Product and QA. 

We settled on using d3, based on exploration work already completed by our Customer Support team member. We planned both our initial release, and the fast follow-on. 

Wireframes and sketches for the visualization tool


We introduced both our first release and tested a prototype for our second at Puppet's annual conference to overwhelmingly positive response. We conducted usability testing before our first release, and continued to iterate on the tool as we gathered feedback from the field. 

With the node graph, customers today locate code-based errors more quickly, gain insight into complex system attribute relationships with a mouse-click, take screenshots for compliance reporting, and demonstrate to newer admins how their systems are configured.

Learn more about the Node Graph

The released tool let the user move the visualization around in the manner of a Google map, with details accessible on any node via clicking on the node. Users can expand the graph canvas, filter by relevant criteria, and view any dependencies on a node in a linked visualization (below).

The tool we released allows the user to see two different types of relationships for each node on the graph.