By April 23, 2013 2 Comments Read More →

intraLibrary Data Visualisation

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 publicly 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)


    <div il-taxonomy-vis


  // angular app
  var intLibApp = angular.module('intraLibrary', []);

  // our visualisation wrapper directive "il-taxonomy-vis"
  intLibApp.directive('ilTaxonomyVis', function($compile) {
    return {
      scope: {
        // taxonomy data, proxied through this wrapper into it's child directive
        taxonomy: '=',
        // the type of directive that should be rendered inside this wrapper
        type: '='
      link: function(scope, element, attrs) {

        // watch changes on the type
        scope.$watch('type', function(type) {

          // manually attach an 'ilTaxonomyLtrTree' or 'ilTaxonomyCircularTree'
          // directive to this wrapper
          var directiveHtml = '<div il-taxonomy-' + type + '-tree'
                            + ' data-taxonomy="taxonomy"></div>';

          // compile the *element contents* using $compile
          // (injected in the directive constructor)

  // define the D3 visualisation directives
  intLibApp.directive('ilTaxonomyLtrTree', function() { /* ... */ });
  intLibApp.directive('ilTaxonomyCircularTree', function() { /* ... */ });

Turns out that angular actually provides really good support for this, and so we ended up dropping the ‘ilTaxonomyVis’ directive all together, in favour of ng-switch. This enabled us to achieve the desired effect using only declarative HTML

    <div ng-switch="data.visType">
      <div ng-switch-when="ltr"
      <div ng-switch-when="circular"

The visualisation tool can be found here, however it should be treated as a crude experiment / alpha. Note that some really large taxonomies tend to overcrowd the visualisation element.

Posted in: Blogs, Tech Talk

About the Author:

2 Comments on "intraLibrary Data Visualisation"

Trackback | Comments RSS Feed

  1. jad says:

    Hi, nice work, where i can download this directive, i want to test it on my machine ..

Post a Comment