Phân tích chuyên sâu về D3
(d3indepth.com)- D3 in Depth là tài liệu học tập dựa trên D3 6·7, trình bày quá trình tạo trực quan hóa dữ liệu tùy biến bằng D3.js
- Tài liệu tập trung vào xây dựng trực quan hóa tùy biến hơn là chỉ cách dùng các biểu đồ đơn giản, đồng thời giúp người học nắm cả các thành phần cấu thành trực quan hóa trên web
- Nền tảng cơ bản về HTML, SVG, CSS, JavaScript được kết nối với công việc dùng D3, nhờ đó hỗ trợ hiểu về biểu đạt dữ liệu trên nền web
- Nội dung cũng liên kết với các tài liệu về dashboard và data story sử dụng React, Chart.js, Leaflet, từ đó tạo nên lộ trình học trực quan hóa bằng JavaScript
- Với độc giả muốn học D3 chuyên sâu, đây có thể được dùng như tài liệu nhập môn lẫn nâng cao, kết hợp giữa hiểu khái niệm và thực hành
Phạm vi mà D3 in Depth đề cập
- D3 in Depth dành cho D3 phiên bản 6 và 7
- Có thể học cách tạo trực quan hóa dữ liệu tùy biến bằng D3.js
- Tài liệu cũng đề cập HTML, SVG, CSS, JavaScript như những thành phần nền tảng cần thiết để xây dựng trực quan hóa trên web
Tài liệu trực quan hóa JavaScript có thể xem cùng
- Data Dashboards with JavaScript trình bày cách tạo dashboard dữ liệu bằng React, Chart.js, Leaflet
- Visualising Data with JavaScript trình bày cách tạo biểu đồ và data story bằng Chart.js, Leaflet, D3, React
- Một nhận xét của độc giả đánh giá cao tài liệu này trong số các sách về D3, cho rằng nội dung rõ ràng, dễ theo dõi và nền tảng khái niệm vững chắc
1 bình luận
Ý kiến trên Hacker News
Đây là một thư viện đặt thêm nhiều quy ước và tiện ích lên trên D3 để tạo graph, chart và plot
Xa hơn nữa còn có Observable Framework[2], một trình tạo site tĩnh cho dashboard trực quan hóa, hỗ trợ Plot, D3 và nhiều thư viện khác
1: https://observablehq.com/plot/
2: https://observablehq.com/framework/
Với nhiều loại plot, việc trực tiếp thao tác dữ liệu SVG thực ra thường dễ hơn, và cũng không quá khó
Tôi mong có thư viện hoặc framework giúp thao tác đầu ra SVG hoặc canvas dễ hơn. Những chỉnh sửa nhỏ phải cực kỳ dễ, nhưng framework càng ở cấp cao thì càng khó đi chệch khỏi con đường đã định
Tài liệu cũng khá ổn, nhưng thiếu một phần API reference dùng được, nên không tiện để khám phá tính năng
Tôi cố tránh tối đa việc tạo graph bằng HTML5 canvas, nên hy vọng có một cách thiết kế mới nào đó
Sửa: bật tăng tốc phần cứng thì mượt hơn, nhưng ngay cả trên Ryzen 9 vẫn lag hơn kỳ vọng
Nếu bảo tôi giải phương trình vi phân riêng phần sau 10 năm không động tới, có lẽ tôi còn lấy lại cảm giác nhanh hơn
Tôi cũng thấy tài liệu tham chiếu của D3 thật sự tệ hại
Dù vậy, giờ có vẻ nó đã ổn định hơn. Tôi bắt đầu viết theo phong cách mệnh lệnh hơn với Svelte+D3 thay vì chỉ dùng D3, và nhờ đó mới bắt nhịp được
Việc hiểu các phần tử được tạo ra cũng dễ hơn so với cách sau đó soi các phần tử đã sinh bằng devtools
Trang này hữu ích cho việc dùng D3 cùng Svelte: https://svelte.recipes/
80% công việc của tôi gần với ứng dụng, 10% là hệ thống, 10% là phân tích dữ liệu; thỉnh thoảng tôi tạo notebook Jupyter trong 2 tuần rồi không nhìn lại trong 2 tháng
Hầu hết thư viện vẽ plot có rất nhiều quy tắc tùy ý phải ghi nhớ, và thường có nhiều ngôn ngữ chuyên biệt theo miền nho nhỏ. Kiểu như một chuỗi đơn giản lại được diễn giải phức tạp hơn
atoirất nhiềuHơn nữa, ở nhiều mảng như quyết định phạm vi trục, xử lý lượng điểm rất lớn, theo quan điểm của tôi đều có gì đó sai sai
D3 bắt bạn tự làm nhiều thứ, nhưng các interface cho việc đó về mặt khái niệm lại trực quan. Tôi nghĩ thà làm cho đúng bằng D3.js còn hơn dùng thứ mã tổng quát cồng kềnh, nhiều lỗi của người khác với API tạo cảm giác như lắp một con tàu trong chai
Rất dễ dùng sai, khó debug và cũng khó hiểu
Điều đó không có nghĩa là vấn đề này dễ giải. Nếu cần tạo đồ họa dựa trên dữ liệu rất cụ thể, có lẽ tôi vẫn sẽ chọn D3
So sánh API theo tiêu chuẩn đó thật ra có vẻ không công bằng
Nên tránh tối đa loại mã mà ngay cả tác giả cũng khó hiểu, và D3 là ví dụ tiêu biểu cho loại thư viện đó
Ví dụ, nếu vẽ dữ liệu trong khoảng 0–100 điểm lên màn hình 1080p kích thước 1920x1080, đến một lúc nào đó bạn phải quyết định sẽ scale dữ liệu thế nào cho phù hợp với phép chiếu lên màn hình
Bạn có thể tự tính toán, hoặc giao việc tính toán cho một thư viện như D3
Ngay cả khi không vẽ dữ liệu trên web, rồi sẽ có lúc bạn cần vẽ dữ liệu ở đâu đó, và khi đó việc tìm được công cụ đóng vai trò tương tự trong hệ sinh thái ấy sẽ rất hữu ích
Tôi nhớ là mình phải scale các hình chữ nhật vẽ trên graph sao cho phù hợp với kích thước PNG đang tạo
Tất nhiên nó rất nhỏ nhặt và hoàn toàn khác với những điều tuyệt vời mà D3 có thể làm, nhưng đó là một trải nghiệm tuyệt vời đầu tiên khi tự tay tạo ra hình ảnh trên máy tính
Cá nhân tôi chưa bao giờ thấy D3 trực quan. Có thể vấn đề là nó cố làm quá nhiều thứ ở quá nhiều mức trừu tượng
Nếu chỉ nói về việc chiếu dữ liệu thì dễ hiểu, nhưng có lẽ vì phép chiếu lại gắn chặt với trục và các thành phần khác
Tôi cho rằng phép tính khác biệt giữa
selectvàselectmà mbostock gọi là phần trừu tượng cốt lõi của D3, gần với một tiện ích để viếtpaint()có thể tái nhập hơnChỉ là các câu lệnh paint được biểu diễn thành câu lệnh builder, bản thân chúng được gói trong phạm vi select, và có thêm lớp trang trí là có thể tách nhỏ ra cho nhiều hiệu ứng khác nhau
Đặc biệt trong các ví dụ animation, phần D3 làm ít đến mức đáng ngạc nhiên; việc dùng vòng lặp bên ngoài và theo dõi trạng thái theo thời gian thì bạn phải tự làm
D3 cũng không cung cấp abstraction để đóng gói visualization, dù là dưới dạng hàm hay dạng khác; phần này được để lại như bài tập cho người đọc
Với người mới dùng D3, tất cả những điều này là một bất ngờ lớn, thậm chí gây sốc. Nó giống như khi đưa vào một database mới mà chỉ có thư viện I/O file, chỉ mục B-tree và query optimizer, rồi bạn phải tự nối tất cả lại với nhau
Đây là dạng thay mô-đun thao tác DOM của D3,
d3-select, bằng React. Việc điều này khả thi và hoạt động tốt chính là bằng chứng cho thấy thiết kế của D3 rất xuất sắcTùy mục tiêu của bạn, nó có thể là công cụ cần thiết hoặc không
Tôi vẫn dùng nhiều hàm hỗ trợ như easing hay scaling, nhưng các component thực tế thì đang làm bằng framework hiện đại. Trường hợp của tôi là Vue 3 và TypeScript
Dù vậy, tôi vẫn biết ơn D3.js vì những năm tháng đẹp đẽ mà nó mang lại và vì đã dạy tôi nhiều thực hành tốt trong trực quan hóa dữ liệu
Các default và demo của Mike Bostock từng là nguồn cảm hứng và ví dụ về chuẩn mực tốt, đồng thời cũng rất hợp với chủ nghĩa tối giản của Tufte
D3 và jQuery giống nhau ở một mức độ nào đó, và cả hai đều rất dễ thành spaghetti code. Những công cụ như VisX thêm khá nhiều cấu trúc lên trên D3 mà chúng dùng, giúp mọi thứ duy trì được sự sane
Tuy nhiên tôi tò mò liệu bạn có cảm thấy nó hạn chế theo kiểu phải vật lộn với công cụ khi muốn làm thứ tùy biến hơn so với dùng D3 thuần không
Một công cụ khác lấy cảm hứng từ GG là ggplot2, cái tên cũng rất phù hợp, dành cho ngôn ngữ R
Nó cung cấp interface ngắn gọn hơn nhiều và gần với functional hơn, đồng thời cũng rất hợp với một công cụ hiếm gặp tên Rush, tức R one-liner cho shell, có thể nhận CSV qua pipe để nhanh chóng tạo đồ họa
Những công cụ kiểu này thường dựa vào tính năng của trình duyệt, hoặc dùng các giải pháp server-side rendering khá vụng về với headless browser để tạo ở phía server
Đặc biệt, sẽ rất tốt nếu có thể tạo biểu đồ Venn bằng lập trình. Lạ là gần như không có gì trong mảng này
Một vài thư viện biểu đồ JavaScript có hỗ trợ, nhưng nhìn chung có vẻ gần như không được hỗ trợ
gnuplot trông có vẻ tốt nhưng không hỗ trợ biểu đồ Venn
Nó cũng là dependency của OpenSearch Dashboards, cho phép người dùng tạo dashboard tùy chỉnh trên dữ liệu log và observability[2]
Thư viện Vega có vẻ có thể giảm bớt phần nào vấn đề độ khó khi học D3 mà những người khác nói tới
[1] https://vega.github.io/vega/docs/
[2] https://opensearch.org/docs/latest/dashboards/visualize/vega...