Published originally at


Using D3, the MultiLevel pie chart is constructed from a hierarchical data (shown below). This could be achieved by modifying the original example of pie chart in mike’s blog.

The implementation is a 2 step process. In the first step the hierarchical data is stored for each level and in the second step the corresponding pie charts are drawn (by tweaking inner and outer radius) for each level, using the stored data.

To store the data for each level, I have used BFS (Breadth First Search) to traverse the array of objects and then storing the each level’s data in an array, where the index of the array being the level of the in the nested object structure. I modified a little, the solution proposed in this blog to achieve the same.


Once the data for each level is obtained, the all that remains is drawing multiple pie chart circles iteratively (for each level), one outside the other. I am using the function “drawPieChart” shown in below code (also explained in Mike’s blog) for each level by iterating over the stored multiLevel Data.


One point to notice in above code is, to have inner radius of the outer pie chart as outer radius of it’s immediate inner pie chart and so on, we used:

Refer following codepen snippet for complete working code:

See the Pen Multi-Level Pie Chart Using D3 by Pankaj Kumar (@pankajkumar005) on CodePen.0

The hierarchical data looks like: