D3 examples: visualise a hierarchy as a dynamic tree | Biodiversity Projects

D3 examples: visualise a hierarchy as a dynamic tree

From Rob Schmuecker's Collapsible, Zoomable and Drag 'n' Dropable Tree Layout D3 demo. This amazing demonstration from Rob Schmuecker shows how the D3 library can be used to build a fully interactive tree view of hierarchical data. It's showing the 'flare' demo dataset, but the actual data is unimportant to us. The interesting thing is how this visualisation puts control into the hands of the person exploring it.

In this sample, you can pan by dragging the image with your mouse. Use the mouse-wheel to zoom in and zoom out. You can expand and collapse nodes by clicking on them. In this example you can even move nodes around and re-assign them to different parents by dragging and dropping them.

You can imagine how a view similar to this could be an incredibly powerful way of exploring a taxonomic dataset and the relationships between different organisms, or a way of representing different groups of morphological characters as a part of an interface for supplying their values in a multi-access key. Read more about the relevance of data visualisation to Tomorrow's Biodiversity here.