Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
D3.js - Packs of circles to present hierarchical data
D3.js - Packs of circles to present hierarchical data
Note1: I decided to challenge myself with a series of "Today I Learn" for 100 days. Non-stop. This is the TIL of day 08. One day one question one short answer. Please join with me. Proposed tag: #100daysTIL.
Note2: To make it more difficult, for every 7 posts in Vietnamese, there will be one in English.
I have just finished another chart today in D3.js, it's Circle Pack. Here are some notes before next move:
What is "Circle Pack"
- Circle Pack chart belongs to a group of charts that help visualizing hierarchical data.
- We can think of hierarchical data as a tree:
- the "top" node is called "root", there is only one "root".
- Passing through all middle-level nodes (which have both parents and children), we arrive at the lowest level of the tree called "leaves".
- Leaves have only parents, no children attached.
- To present hierarchical data in charts, we have many options:
- Tree
- Treemap
- Cluster
- Dendrogram
- Circle Pack
- Partition
- The name "Circle Pack" might be explained via its visualization: each level of data is gathered in one pack. Each pack is illustrated as a circle.
An example of Circle Pack chart:
To draw a "Circle Pack" in D3.js
We need to go through 2 big steps:
Step 1: Prepare the hierarchical data.
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.hierarchy()
.
Step 2: Draw the chart "Circle Pack"
- Setup the pack layout with
d3.pack()
. Information such as size, padding must be entered at this step. - Pass the hierarchical data to the pack layout.
- Start the data join, for each data-embedded element inside the pack layout:
- draw a circle
- insert label
To make the "Circle Pack" zoomable
This is one technique. There might have other techniques that I don't know yet.
- Disable the pointer-events triggers for root and all leaves.
- Insert event listener "onclick" into each middle-level nodes.
- If node is "clicked", run the function zoom.
- 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. - the interpolator will be passed into function zoomTo()
- function zoomTo() is to calibrate dimensions of all circles and text of the targeted view to fit with current svg' size.
- the trick here is to keep varible view at global scope, so it can be updated frequently by function zoomTo().
-
Sample code can be found here: https://bl.ocks.org/mbostock/7607535
Conclusion:
- The logic of code is fairely straightforward, but it needs more time for digging further to really understand d3.transition() and d3.interpolate inside out.
- To check if the feature "zoom" could be wrote in a different way.
References:
ngminhtrung 30-01-2018





