Graphically visualising your data has always been used to lead to a deeper understanding of the information you are dealing with. Recently, dynamic and interactive data visualisations have become much more prolific because of the wide range of tools and frameworks available to designers and developers. Among the more popular options, D3.js has been heavily adopted on the web because of it’s power, and it’s ease of use.
At Intrallect we decided to prototype a tool to visualise some of the data made available by our products. Our main product, intraLibrary, has a thorough suite of web services that can be consumed and mapped into a simple format, and was a perfect candidate.
One of the REST web services exposed by intraLibrary provides the Taxonomy structure of your data. Some of our clients have implemented extensive taxonomies in their systems, and while the intraLibrary taxonomy browse tree is a simple and powerful way to navigate the taxonomy, it often doesn’t provide a ‘big picture’ view.
As a simple experiment, we have developed an intraLibrary Taxonomy visualisation tool, using D3 (and a bit of AngularJS). The execution of this tool is pretty simple, as it leverages two of the publically available D3 examples: Collapsible Tree Layout & Node Link Tree.
Preparing data for D3
Dynamically Changing the Data View
We used AngularJS to manage the data, and created AngularJS directives for each of the view types. Swapping directives in the DOM is not inherently obvious, but it’s also not at all complicated. We achieved this by setting up a wrapper directive that $watched a type property, and updated itself whenever it changed. The process involves generating the directive HTML, which is appended to the wrapping element, and then compiled using the wrapping directive’s scope (see the code snippet below)