D3.js - Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ
TIL
487
@100daysTIL
37
White

ngminhtrung viết ngày 07/02/2018

D3.js - Biểu diễn dữ liệu dạng tree bằng việc trải nó ra trên bản đồ

Series Today I Learn trong vòng 100 ngày thử thách bản thân - ngày 15. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn nhất có thể). Mời cả nhà cũng tham gia. Tag đề nghị: #100daysTIL.


Treemap trông như thế nào?

alt text

Nó có dùng vào việc gì? Có gì hay?

Treemap dùng để biểu diễn dữ liệu dạng cây. Có nhiều cách để biểu diễn dữ liệu dạng cây, nhưng Treemap có ưu điểm là:

  • tận dụng được không gian biểu diễn
  • thể hiện được giá trị tương đối của từng nhánh trên tổng giá trị. Để nắm bắt được nhanh bản chất của dữ liệu, ưu điểm này của Treemap hơn hẳn so với những loại biểu diễn khác (như Circle Pack, hay Dendrogram, hay Network).

alt text

Cái tên Treemap nghe lạ vậy?

Treemap là kết hợp của từ "tree", ý nói dữ liệu, "map" là bản đồ, ý nói là dữ liệu được trải ra và vẽ như một bản đồ.

Treemap được tạo ra chỉ để vẽ chart? Lịch sử của nó là gì?

Treemap (và thuật toán đằng sau nó) được hình thành từ năm 1990 bởi Ben Shneiderman (giáo sư tại University of Maryland). Mục đích của ông khi tạo treemap là để kiểm tra xem trong nhóm 14 người dùng chung 1 ổ cứng 80MB, thằng nào copy bậy bạ tốn bộ nhớ nhất. Chắc chắn là nếu thời đó có ổ 1TB như bây giờ thì Treemap đã không ra đời.

Thuật toán tạo Treemap là gì?

Là thuật toán để tính xem:

  • nhét hình gì vào trong bản đồ? hình chữ nhật, hình tam giác, hình tròn? chốt là nhét hình chữ nhật.
  • hình nhét vào có kích thước ra sao? cao và rộng thế nào? nhét ngang hay nhét dọc
  • nhét theo chiều nào của dữ liệu? từ cao xuống thấp? từ dưới đi lên? chốt là nhét từ cấp cao nhất xuống thấp nhất.

Với D3.js, hiện tại Mike Bostock sử dụng thuật toán "squarified" (có lẽ bắt nguồn từ chữ "square"), cố gắng tạo các hình chữ nhật với tỷ lệ vàng, giúp cho treemap tạo ra khá dễ nhìn.

Tham khảo thêm:

ngminhtrung 07-02-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

ngminhtrung

28 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
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
White
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
White
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 27 ngày trước
4 0
Bài viết liên quan
White
2 0
Đọc hiểu được type signature là một trong các yếu tố quyết định chuyện bạn có học Haskell được hay không. Đa số chúng ta khi mới tìm hiểu thường g...
Huy Trần viết 8 ngày trước
2 0
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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