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:

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



31 bài viết.
15 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
25 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...
ngminhtrung viết 2 tháng trước
25 5
4 11
Nói thực, tôi cũng không biết gì về (Link) cho đến hôm bị cô bạn (Linh Ngô) đè ra cài ngấu nghiến trên máy và bảo cái này là "bắt buộc" nếu dùng Ma...
ngminhtrung viết 1 tháng trước
4 11
4 0
Vẽ Spirograph bằng D3.js Chắc hồi trẻ con ai cũng đã từng một lần nghịch 1 cái thước "sáng tạo" tên là "Spirograph" (/ˈspīrəˌɡraf/). Khi ấy ta đặt...
ngminhtrung viết 1 tháng trước
4 0
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...
ngminhtrung viết 25 ngày trước
1 0


{{ comment_count }}

bình luận

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

{{userFollowed ? 'Following' : 'Follow'}}
31 bài viết.
15 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á!