Working with Hierarchical Data

In the previous chapter, we created some basic visualizations, a donut, a line chart, and some area charts. The data we visualized was rather simple, with no dependencies between the various data elements. In this chapter, we're going to look at how to visualize a different kind of data structure: hierarchical data. With hierarchical data, the data can be represented as a tree of data elements, where elements can have parent nodes and child nodes. D3 provides several different ways we can visualize this data. In this chapter, we're going to explore the following subjects:

• We're going to start by visualizing hierarchical data as a simple horizontal tree. Besides just showing the data, we'll also show you how you can zoom and pan around the visualization using standard D3 functionality.
• One of the disadvantages of using a standard horizontal tree to visualize data...

Tree-based visualizations

While looking at data to use for this section, I stumbled upon a couple of samples where the tree of life was visualized. The tree of life contains a complete (or partial) taxonomy of all the living organisms in the world, from the smallest bacteria to apes and humans. The following image nicely shows what such a visualization could look like (from http://www.botany.wisc.edu/):

While this data is well-suited for visualizing in a tree, finding data in a form that can be visualized like this is a bit more difficult. Eventually, I found the Integrated Taxonomic Information System (ITIS), which provides much of the raw data for the Encyclopedia of Life (http://www.eol.org). While the Encyclopedia of Life provides a nice view on this data, it doesn't allow you to download trees or associated data. Luckily though, ITIS provides access to the raw data, and also allows you to download complete...

Treemap and partition

Trees work well for visualizing the nested structure of a taxonomy (or any other kind of tree), but what we can't easily visualize are the values attached to each of the node. Say, for instance, that each of our end nodes in our taxonomy had an additional value attached. This attached value would represent some information about that specific species (for example, the current total population). In a tree-based visualization, this would be difficult to represent. We could perhaps change their size, but then we'd quickly run out of space. When you have such a value that you want to represent besides the structure, a treemap or partition visualization might be better suited. The following figure shows the biggest cities in a large number of countries:

In this section, we're going to use these two visualizations to show some nested data. The data we used in the previous section...

Alternative visualizations using partition and pack layouts

Besides the treemap visualization, D3 also provides a couple of other ways of visualizing hierarchical data in approximately the same way. With a partition layout, the rectangles aren't nested but are shown together; and the pack layout uses circles instead of rectangles.

We won't go into too much detail in the following two sections, since the steps shown for the treemap layout are the same as for the pack and partition layouts.

Data visualized using a partition layout

The following image is an example of visualizing the same data, but this time in a pack layout:

The code for this example can be found in the DVD3/chapter-03/D03-04.js file.

Data visualized using a pack layout

Another way to visualize the same data is by using circles. The code, once again, looks pretty much the same as the previous examples. This time, however, we create circle elements based on a provided radius, instead of rectangle elements:

We won't go into the details here on how to use this layout type. If you want to explore this example further, look at the DVD3/chapter-03/D03-05.js file.

Summary

That wraps it up for this chapter on visualizing hierarchical data. With D3, we can easily visualize this kind of data through different visualizations. Once you've got your data, you first need to create a nested structure of it. D3 offers helper functions for this (d3.nest and d3.stratify) that take care of converting row-based data to a structure that can be passed into the chart functions (such as tree and treemap). We've also seen that not all data can be visualized properly with the available visualizations. The normal tree works well for visualizing trees, but can quickly result in very large charts. Luckily, D3 offers a d3.zoom function, which allows you to pan and zoom around the chart. We've also seen that by changing how the x and y coordinates are projected, we can quickly change the way the chart looks. With our radial tree, we showed that large tree structures can be visualized...