Messing around wih D3.js and hierarchical data

These days there are a lot of browser-oriented visualization toolkits, such d3.js or jit.js. They’re great and easy to use, but how much do they scale when used with medium-large or very large datasets?

The subject ontology is a quite large (~2500 entities) taxonomical classification developed at Nature Publishing Group in order to classify scientific publications. The taxonomy is publicly available on data.nature.com, and is being encoded using the SKOS RDF vocabulary.

In order to evaluate the scalability of various javascript tree visualizations I extracted a JSON version of the subject taxonomy and tried to render it on a webpage, using out-of-the-box some of the viz approaches made available; here are the results (ps: I added the option of selecting how many levels of the tree can be visualized, just to get an idea of when a viz breaks).

Screen Shot 2014 02 13 at 2 07 50 PM

Some conclusions:

  • The subject taxonomy actually is a poly-hierarchy (=one term can have more than one parent, so really it’s more like a directed graph). None of the libraries could handle that properly, but maybe that’s not really a limitation cause they are meant to support the visualization of trees (maybe I should play around more with force-directed graphs layout and the like..)
  • The only viz that could handle all of the terms in the taxonomy is D3’s collapsible tree. Still, you don’t want to keep all the branches open at the same time! Click on the image to see it with your eyes.
  • CollapsibleTree

  • An approach to deal with large quantities of data is obviously to show them a little bit at a time. The Bar Hierarchy seems a pretty good way to do that, it’s informative and responsive. However it’d be nice to integrate with other controls/visual cues that would tell one what level of depth they’re currently looking at, which siblings are available etc.. etc..
  • BarHiearchy

  • Partition tables also looks pretty good in providing a visual summary of the categories available; however they tend to fail quickly when there are too many nodes, and the text is often not readable at all.. in the example below I had to include only the first 3 levels of the taxonomy for it to be loaded properly!
  • TreeMapD3

    TreeMap

  • Rotating tree. Essentially a Tree plotted on a circle, very useful to provide a graphical overview of the data but it tends to become non responsive quickly.
  • RotatingTree

  • Hierarchical pie chart. A pie chart that allows zooming in so to reveal hierarchical relationships (often also called Zoomable Sunburst). Quite nice and responsive, also with a large amount of data. The absence of labels could be a limiting feature though; you get a nice overview of the datascape but can’t really understand the meaning of each element unless you mouse over it.
  • PieTree

     

    Other stuff out there that could do a better job?

     

    Share/Bookmark






    7 Responses to “Messing around wih D3.js and hierarchical data”

    I really like the Zoomable sunburst (http://bl.ocks.org/mbostock/4348373) to visualize hierarchy.

    fasouto added these pithy words on Jun 25 13 at 10:50 pm

    tx it does look really good, I’ll give it a try!

    Mikele added these pithy words on Jun 26 13 at 1:33 pm

    +1 for Zoomable Sunburst. Please let me know the update when it is implemented.

    abdshomad added these pithy words on Jan 11 14 at 10:32 pm

    Hi – I’ve added a new viz experiment using a version of Zoomable Sunburst with labels. Enjoy :-)

    Mikele added these pithy words on Feb 13 14 at 2:28 pm

    Very nice. Ofcourse I understand the difficulty to show all the labels. But, I would suggest that, if user choose level = 2, show the labels of first and 2nd circle (with different font size). http://nature.michelepasin.org/subjectsviz/d3treepie?levels=2

    Or better to mantain the circles into always show first 3 circles everytime, eventhough the level is 5.

    1st click (level 2): show circle 2, 3, 4
    2nd click (level 3): show circle 3, 4, 5
    3rd click (level 4): show circle 4, 5
    45h click (level 5): show only circle 5

    abdshomad added these pithy words on Feb 14 14 at 12:29 am

    Along with the sunburst, I want to see the hierarchy expressed in text as “node1 > node2 > node3”. Would anybody have made such a viz yet?

    nikhilsheth added these pithy words on Oct 03 17 at 1:10 pm

    […] Messing around wih D3.js and hierarchical data […]

    Over 2000 D3.js Examples and Demos | TechSlides added these pithy words on Feb 02 14 at 3:14 pm