I have just finished another chart today in D3.js, it's Circle Pack. Here are some notes before next move:
We can think of hierarchical data as a tree:
To present hierarchical data in charts, we have many options:
We need to go through 2 big steps:
Here is the sample of a hierarchical data. In case of having other kind of data (CSV for example), it's required to convert it into the correct format with method
d3.pack(). Information such as size, padding must be entered at this step.
Start the data join, for each data-embedded element inside the pack layout:
This is one technique. There might have other techniques that I don't know yet.
Until its turn, zoom will call:
d3.transition()which returns the interpolator for calculating the tweens between current view and targeted view. This helps to run smoothly the animation from current view and targeted view.