How to visualize a big taxonomy within a single webpage?

Here's a couple more experiments aimed at representing visually a large taxonomy.

Some time ago I looked at ways to visualise a medium-large taxonomy (3000 terms circa) using one of the many visualisation kits out there. It turned out that pretty much all of them can't handle that many terms, but there are other strategies that do come handy for that e.g. hide/reveal terms in the taxonomy based on what level you are looking at.

Why can't I see the whole damn thing in one single page? Because there are too many things to display - you'd think.

So, step 1.

Here's the entire set of elements on a page (well sort of).


Can't we do better than that, though?

At the end of the day, if you assume a (quite modest these days) resolution of 800x600 pixels, you should be able to fit more than 300 9point characters in there (assuming 9 points equal 12 pixels).

Step 2.

Here's another way: a font-size: 7px; and IDs instead of taxon's labels make the visualisation much more compact.

And it does fit in a single window - hurray!


One problem though. This is not very useful with all those meaningless numbers.

Step 3.

So I tried to reduce the size a bit more so to fit the entire taxon label in there.

Also, adding a bit of interactivity so to reveal the hierarchy. The simple mechanism is this: when you click on an element of the taxonomy all of its ancestors get highlighted too. Just to remember this is not a plain list of things, but a tree.


Kind of like this one :-)

Possible next steps:

a) adding arrows to make the hierarchical relationships more evident b) some sort of summary below the subject term in focus c) sorting the terms by hierarchy-level rather than alphabetical order (will it make the taxonomy more intelligible?) be continued..

Cite this blog post:

Michele Pasin. How to visualize a big taxonomy within a single webpage?. Blog post on Published on Aug. 22, 2014.

Comments via Github:

See also: