Tree mapping and recursiveness

Tree mapping enables us to see in-depth data from a bird's-eye view. Contrary to comparative charts—such as most of the charts that we have created until now—tree mapping displays tree structured data as a set of nested rectangles, enabling us to visualize their quantitative nature and relationship.

Let's start with a tree mapping that showcases only one level of information.

Getting ready

We will start our application with the number of people in the world, in millions, divided by continent (based on public data from 2011).

var chartData = [
  {name: "Asia", value:4216},
  {name: "Africa",value:1051},
  {name: "The Americas and the Caribbean", value:942},
  {name: "Europe", value:740},
  {name: "Oceania", value:37}
];

We will update this data source later in our example, so keep in mind that this dataset is temporary.

How to do it...

We will start by creating a simple, working, flat tree chart. Let's jump right into it and figure out the steps involved in creating...