Giới thiệu

Trực quan hóa truyền đạt thông tin theo cách phổ quát và làm cho nó đơn giản để chia sẻ ý tưởng với người khác. Biểu đồ, Sơ đồ, Đồ thị và Bản đồ là những công cụ trực quan hóa Dữ liệu phổ biến để hiểu dữ liệu dễ dàng và nhanh chóng. Những công cụ tương tác và năng động này được sử dụng để truyền đạt ý tưởng kinh doanh của chúng tôi để chia sẻ với khán giả và người dùng mục tiêu của chúng tôi. Có rất nhiều Thư viện biểu đồ và biểu đồ JavaScript có sẵn, nhưng việc chọn đúng thư viện cho ứng dụng web của bạn có những thách thức riêng.

Bài viết này sẽ nêu bật những thách thức mà chúng tôi gặp phải trong một trong các trường hợp sử dụng kinh doanh và phân tích của chúng tôi trước khi đến D3.js.

Vấn đề phải đối mặt

  • Hình ảnh được sử dụng để đại diện cho đồ thị.
  • Các applet Java được sử dụng để vẽ các biểu đồ không được hỗ trợ trong các trình duyệt mới nhất.
  • Không có tương tác người dùng trong Đồ thị tĩnh.
  • Khi dữ liệu thay đổi, chúng ta cần tải lại biểu đồ để cập nhật.
  • Không thể vẽ nhiều loại biểu đồ bằng cách sử dụng cùng một bộ dữ liệu.
  • Mã phía máy chủ yêu cầu.

Dung dịch

Có rất nhiều thư viện JavaScript trả phí và miễn phí có sẵn để trực quan hóa dữ liệu mà không cần mã hóa phía máy chủ. Sau khi phân tích nhiều công cụ trực quan hóa dữ liệu JavaScript (Biểu đồ JS, Biểu đồ Google, Biểu đồ tổng hợp, Biểu đồ Zing và D3.js), tôi nhận ra hầu hết chúng cung cấp các tùy chọn biểu đồ được xác định trước để sử dụng và tùy chỉnh. D3 cho phép bạn xây dựng các biểu đồ tùy chỉnh phức tạp bằng HTML, SVG và CSS mà không cần bất kỳ bổ trợ nào. 

Công cụ trực quan hóa dữ liệu JavaScript

Biểu đồ JS

Chart.js sử dụng HTML 5 và Canvas để hiển thị biểu đồ và polyfill để hỗ trợ các trình duyệt web cũ. Nó bao gồm nhiều loại biểu đồ (Line, Bar, radar, cực, bánh và bánh rán, v.v.), mỗi loại trong mô-đun riêng để chúng tôi có thể sử dụng chúng theo yêu cầu của chúng tôi. Nó cung cấp các biểu đồ sạch và phẳng, kích thước tệp của nó rất nhỏ. Nó là nguồn mở và miễn phí sử dụng.

Biểu đồ Google

Biểu đồ được hiển thị bằng HTML5 và SVG để cung cấp khả năng tương thích trình duyệt chéo (bao gồm VML cho các phiên bản IE cũ hơn) và tính di động đa nền tảng cho iPhone, iPad và Android. Nó cung cấp các biểu đồ đường đơn giản cho các bản đồ Tree phức tạp và cũng cung cấp các hàm Zoom và PAN cho một vài loại biểu đồ. Nó là miễn phí, nhưng không phải là nguồn mở.

Biểu đồ tổng hợp

Biểu đồ Fusion cung cấp hơn 80 biểu đồ và 1000 bản đồ và đó là một giải pháp hoàn chỉnh hơn Biểu đồ của Google. HTML 5 và SVG được sử dụng để hiển thị biểu đồ và Biểu đồ Fusion cũng hỗ trợ các thiết bị di động. Nó hỗ trợ một loạt các biểu đồ như spline, cột, thanh, bản đồ và thước đo góc, trong số những thứ khác. Nó cung cấp hơn 90 loại biểu đồ và 965 bản đồ. Nó là tốt nhất cho một loạt các biểu đồ tùy biến. Nó là miễn phí cho phi thương mại và trả tiền cho người dùng thương mại.

Biểu đồ Zing

Biểu đồ Zing cung cấp hơn 100 loại biểu đồ để phù hợp với dữ liệu của bạn và cung cấp API phong phú cho phép bạn tải dữ liệu mới và sửa đổi biểu đồ hiện có. Biểu đồ Zing tải dữ liệu theo thời gian thực và cung cấp cho bạn khả năng tùy chỉnh và sử dụng các chủ đề biểu đồ của riêng bạn. Nó cung cấp một cách tuyệt vời để trình bày dữ liệu của bạn bằng cách sử dụng hệ thống làm mới / nguồn cấp dữ liệu. Nó có thể hữu ích khi sử dụng một nguồn dữ liệu bên ngoài. Nó là miễn phí, nhưng không phải là nguồn mở.

D3.js

D3.js là một thư viện JavaScript để tạo trực quan hóa tương tác động cho các trình duyệt web hiện đại. D3 giúp bạn đưa dữ liệu vào cuộc sống bằng cách sử dụng HTML, SVG và CSS. Sự nhấn mạnh của D3 về các tiêu chuẩn web cung cấp cho bạn toàn bộ khả năng của các trình duyệt hiện đại mà không cần buộc mình vào một khung độc quyền, kết hợp các thành phần trực quan hóa mạnh mẽ và cách tiếp cận dựa trên dữ liệu để thao tác DOM.

D3.js biến đổi các bảng dữ liệu tùy ý của bạn thành đồ họa trực quan tuyệt đẹp với toàn bộ sức mạnh và tính linh hoạt của các ngôn ngữ web tiêu chuẩn như HTML5, CSS3 và JavaScript.

Nó là nguồn mở và miễn phí sử dụng.       

Tại sao D3.js?  

D3.js cung cấp cho bạn tùy chọn tạo biểu đồ và đồ thị tùy chỉnh, trong khi các thư viện khác chỉ cung cấp biểu đồ được xác định trước để bạn sử dụng và tùy chỉnh. Có nhiều cách để trực quan hóa dữ liệu của chúng tôi nhưng tính linh hoạt, linh hoạt và cộng đồng phát triển tốt xung quanh D3.js làm cho nó trở thành một lựa chọn tuyệt vời để khám phá. D3 hỗ trợ dữ liệu lớn để tạo hình ảnh động và nó cực kỳ nhanh và nhạy.

Dưới đây là một số tính năng chính của D3:

  • Hỗ trợ tất cả các trình duyệt hiện đại (Internet Explorer, Firefox, Safari, Chrome và Opera) và miễn phí sử dụng.
  • Hỗ trợ nhiều bố cục để xây dựng các biểu đồ phức tạp.
  • Cho phép bạn lọc dữ liệu một cách nhanh chóng.
  • Nó có thể xử lý tích hợp bản đồ.

  • Cung cấp cho bạn khả năng cập nhật biểu đồ khi tập dữ liệu gốc của bạn đã thay đổi.

  • Cung cấp cho bạn khả năng tùy chỉnh chủ đề và màu sắc của biểu đồ.

  • Nhiều tùy chọn giao diện người dùng như Thu phóng, Chú giải công cụ, Xuất, Bộ lọc kéo và thả, v.v.

  • Tích hợp với AngularJs.

Mã mẫu D3.js để vẽ các vòng kết nối

var spaceCircles = [30, 70, 110];
var svgContainer = d3.select("body").append("svg")
 .attr("width", 200)
 .attr("height", 200);
var circles = svgContainer.selectAll("circle")
  .data(spaceCircles)
  .enter()
  .append("circle");

var circleAttributes = circles
   .attr("cx", function (d) {return d;})
   .attr("cy", function (d) {return d;})
   .attr("r", 20)
   .style("fill", function(d) {
     var  returnColor;
 if (d===30) { returnColor = "green"
 } else if (d ===70) {returnColor = "purple"
 }else if (d ===110) {returnColor = "red"}
 return returnColor;
   });


Kết quả:


Nguồn dữ liệu ngoài của D3.js

D3 có chức năng tích hợp cho phép bạn tải Tài nguyên dữ liệu ngoài bên dưới.

CSV (Giá trị được phân tách bằng dấu phẩy)

JSON

Tập tin văn bản

Một tài liệu HTML

Các tùy chọn Bố cục tích hợp của D3.js:

Một bố cục gói gọn một chiến lược để bố trí các yếu tố dữ liệu một cách trực quan, liên quan đến nhau. Nó có thể đơn giản như xếp các thanh trong biểu đồ hoặc phức tạp như ghi nhãn bản đồ. Các bố cục lấy một tập hợp dữ liệu đầu vào, áp dụng thuật toán hoặc heuristic và xuất các vị trí / hình dạng kết quả để hiển thị dữ liệu gắn kết.

Phân vùng - phân vùng đệ quy một cây nút thành sunburst hoặc icicle.

Pie - tính toán góc bắt đầu và kết thúc cho các cung trong biểu đồ hình tròn hoặc bánh rán.

Ngăn xếp - tính đường cơ sở cho từng chuỗi trong thanh xếp chồng hoặc biểu đồ vùng.

Cây - định vị một cây của các nút gọn gàng.

Treemap - sử dụng phân khu không gian đệ quy để hiển thị một cây các nút.


Các khung liên quan dựa trên D3

Dc.js là thư viện JavaScript được xây dựng dựa trên D3.js và nó được sử dụng để giúp lọc dữ liệu nhanh chóng.

NVD3 áp dụng các biểu đồ và thành phần biểu đồ có thể sử dụng lại từ D3.js mà không lấy đi sức mạnh mà D3 mang lại cho bạn.

Hạn chế D3

Sự phức tạp và linh hoạt của D3.js dẫn đến việc nó là một công cụ tốn thời gian để tìm hiểu cho nhiều người dùng mới.