News And Posts

intraLibrary Data Visualisation

By Janek Lasocki-Biczysko, April 23, 2013

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.

A few technical points worth sharing that we encountered while building this:

Preparing data for D3

In order to display the taxonomy data using these visualisations we needed to map the response from the REST service to something that D3 can easily wrangle. This turned out to be very simple, the D3 default is that for tree/graph-type layouts, each (JavaScript) node can encapsulate it’s child nodes inside a ‘children’ property (which can be changed to your liking using the D3 API). And so, with the taxonomy data mapped, it was just a case of reusing the code from the D3 examples.

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)

Facebook Twitter LinkedIn Email Google +
...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.