Introduction to Hierarchical Data

Introduction

Let’s explore another type of data, hierarchical data. Hierarchical data is an arrangement of data objects in which the items are represented as being above, below, or at the same level as one another.

We can visualize hierarchical data as a tree where each branch has further branches. The nodes at the lowest levels are known as leaf nodes. In the above illustration, China, India, the UK, France, the USA, and Canada are all leaf nodes.

Can we visualize hierarchical data in D3.js? Yes, we can! D3.js provides popular layouts like treemaps, tidytree, and packed circles to visualize hierarchical data. But we will only look into treemaps in this course.

Treemaps

Before visualizing hierarchical data, let’s define what treemaps are and how they are used to visualize hierarchical data. Treemaps display hierarchical data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then further divided into smaller rectangles that represent sub-branches. The treemap will only show the names of leaf nodes. A leaf node’s rectangle area is proportional to the data it represents. The leaf nodes are colored to show a separate dimension of the data.

The advantage of treemaps is that, by construction, they make efficient use of space. As a result, they can display thousands of items on the screen simultaneously.

Following is the treemap of the above illustration on the basis of population.