This summer I worked at Akamai to create a tool to visualize the complex relationship between Akamai’s customers’ assets. I utilized D3.js and PHP in order to merge and visualize data from several APIs.
Among the many features of the tool, a custom interactive tutorial system had to be built in order to allow users to engage with the tool and not just follow along. #callback.
Although we started with D3.js basic force layout, it quickly grew complex as we integrated more information into the layout. We originally started with a cookie cutter “mode” for the tool (eg. to view traffic data, or to view dependencies). However, after realizing how limiting this was, we eventually moved toward the idea of “enabling” information. In doing so, users can create their own mash-ups. Above is a mash-up that maybe is more aesthetic than functional.
One of the hacks this tool needed was to make the tree diagram in D3.js allow multiple parents and relationships–yes, arguably this is NOT a tree diagram anymore.
Working with missing data was also interesting. Since the tool was utilizing hacked up data, it had to reconcile some of the issues instinctively to keep the visualization from breaking.
The visualization tool was shown at Akamai’s Edge 2013 conference. Here it is shown implemented on a touch-table.