: Best way to display large amounts of hierarchical information in a web application I have a web application that shows a lot of information that is rather mundane. The information is related

@Kaufman565

If you're completely lost, there's a recent (late 2013) book that's a very good, practical, clear introduction to information graphics: Design for Information by Isabel Meirelles.

The question mentions digging into hierarchical data: one classic way of allowing people to do this is with a multi-layer interactive treemap.



It's quite hard to find really good examples of these outside of specialist software suites. Here's a few:


This D3.js demo, despite just being a software demo, is probably the clearest example (though unhelpfully the content is meaningless)
Here's one on US budgets from the NY Times. This one isn't as good as NY Times graphics usually are - think something like this, but instead of being a big mess with unreadable labels that become readable when you click and zoom in, think of different layers and each box divides into sections when you click and zoom on it, then further into deeper layers from there, more like the D3 demo. Here's a nicer looking NY Times one, but there's only one layer.
Here's a very basic example of the principle from Google. Think this, but with more layers and some kind of "go back" functionality that works.
Often with things like this, it's better to have the supplementary info off the chart, with the chart acting as visual context and a navigation aid to the main content, rather than arbitrarily constricting the main content. This Tableau demo is an okay example of the principle of the chart controlling and switching between other page content. The MarketWatch Market Map (formerly SmartMoney Market Map, featured in the Isabel Meirelles book above) is another good example.


There are loads of tools out there for generating them - D3.js (mentioned above) is a good open source one (uses Javascript to create SVG).

A very functional (but quite ugly) example of a treemap where you can dig down as many layers as needed through a hierarchy of information is this old free Windows desktop application, SpaceSniffer, designed to help people explore where their disk space has gone. It's a very early example of the treemap visualisation technique being put to use to solve a practical problem.

Vote Up Vote Down