D3.js - Packs of circles to present hierarchical data

Minh-Trung Nguyễn viết ngày 30/01/2018

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:

alt text

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


  • 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.


ngminhtrung 30-01-2018

Bình luận

{{ comment.user.name }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa


Minh-Trung Nguyễn

58 bài viết.
72 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
44 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 3 tháng trước
44 15
27 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 7 tháng trước
27 5
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 2 tháng trước
16 4
Bài viết liên quan
1 0
D3.js nội suy các khung hình Ghi chú: Series Today I Learn trong vòng 100 ngày thử thách bản thân ngày 07. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn...
Minh-Trung Nguyễn viết 6 tháng trước
1 0
0 0
CSS pointerevents Ghi chú: Series Today I Learn trong vòng 100 ngày thử thách bản thân: ngày 01. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn nhất có t...
Minh-Trung Nguyễn viết 6 tháng trước
0 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
72 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!