Hướng dẫn sử dụng D3.js để trực quan hóa dữ liệu trong JavaScript

Javascript căn bản | 02/06/2025 by Học Javascript

Trong thế giới ngày nay, dữ liệu đóng vai trò vô cùng quan trọng trong mọi lĩnh vực từ kinh doanh, khoa học đến giáo dục. Tuy nhiên, dữ liệu thô thường khó hiểu và khó sử dụng trực tiếp. Để làm cho dữ liệu trở nên dễ dàng tiếp cận và dễ hiểu hơn, việc trực quan hóa dữ liệu là một công cụ mạnh mẽ.

Trong số các thư viện JavaScript hỗ trợ trực quan hóa, D3.js nổi bật như một giải pháp mạnh mẽ và linh hoạt. D3.js không chỉ giúp tạo ra những biểu đồ cơ bản mà còn cho phép xây dựng các trực quan hóa phức tạp và động, giúp người dùng dễ dàng phân tích và khám phá dữ liệu một cách trực quan. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng D3.js để trực quan hóa dữ liệu, bao gồm các bước cài đặt, tạo biểu đồ cơ bản, tùy biến giao diện và các ứng dụng thực tế.

Giới thiệu về D3.js

D3.js là gì?

D3.js (Data-Driven Documents) là một thư viện JavaScript mã nguồn mở được phát triển để tạo các trực quan hóa dữ liệu động và tương tác trên web. D3.js không chỉ giúp chuyển đổi dữ liệu thành đồ họa mà còn tạo ra các trực quan hóa dữ liệu mạnh mẽ, linh hoạt, sử dụng các công nghệ web hiện đại như HTML, SVG (Scalable Vector Graphics), CSS, và JavaScript. Điểm mạnh của D3.js là khả năng kết hợp dữ liệu với các phần tử HTML, từ đó tạo ra các biểu đồ động, đồ thị và hình ảnh có thể tương tác.

Lý do sử dụng D3.js

D3.js trở thành lựa chọn phổ biến trong việc trực quan hóa dữ liệu nhờ vào một số ưu điểm nổi bật:

Tính tùy biến cao: D3.js cung cấp khả năng tùy chỉnh gần như vô hạn cho người dùng. Bạn có thể tạo ra bất kỳ dạng biểu đồ hoặc trực quan hóa nào, từ các biểu đồ cơ bản đến các biểu đồ phức tạp, như biểu đồ phân tán, bản đồ địa lý, hoặc đồ thị mạng.
Tương tác động và hiệu ứng: D3.js hỗ trợ các hiệu ứng động mượt mà, bao gồm các hiệu ứng chuyển động, tương tác chuột (hover, click), và thay đổi trực quan khi dữ liệu được thay đổi hoặc cập nhật. Điều này giúp người dùng có thể trực tiếp tương tác với dữ liệu thông qua các thao tác trên giao diện.
Khả năng xử lý dữ liệu lớn: D3.js có thể xử lý và hiển thị một lượng dữ liệu rất lớn mà không làm chậm hiệu suất của trang web. Điều này đặc biệt hữu ích khi làm việc với dữ liệu lớn và phức tạp, chẳng hạn như trong các báo cáo tài chính, nghiên cứu khoa học hay phân tích dữ liệu từ các cảm biến.
Tích hợp tốt với các công nghệ web khác: D3.js dễ dàng tích hợp với các công nghệ web phổ biến như React, Angular, và Vue, giúp người dùng xây dựng các ứng dụng web động, bao gồm cả các ứng dụng dữ liệu lớn.

Ứng dụng của D3.js

D3.js có rất nhiều ứng dụng thực tế trong việc trực quan hóa dữ liệu:

Các biểu đồ trực quan cho báo cáo và dashboard: D3.js cho phép tạo ra các biểu đồ và bảng thống kê trực quan, giúp người dùng dễ dàng nắm bắt thông tin từ các báo cáo hoặc bảng điều khiển doanh nghiệp.
Biểu đồ tương tác và đồ thị mạng: D3.js có thể tạo ra các biểu đồ tương tác, đồ thị mạng, nơi các điểm dữ liệu có thể di chuyển, thay đổi kích thước hoặc kết nối lại trong thời gian thực. Điều này rất hữu ích trong việc phân tích mối quan hệ giữa các đối tượng.
Bản đồ và phân tích dữ liệu địa lý: D3.js có khả năng tạo bản đồ động và biểu đồ vùng (choropleth maps) để phân tích dữ liệu địa lý, rất hữu ích trong các ứng dụng như phân tích mật độ dân số, nhiệt độ hoặc tỉ lệ tội phạm ở các khu vực địa lý khác nhau.
Phân tích dữ liệu lớn: D3.js cũng rất hiệu quả trong việc trực quan hóa các bộ dữ liệu lớn và phức tạp, như dữ liệu tài chính, dữ liệu khoa học hay kết quả nghiên cứu.

Nhờ vào những tính năng và ứng dụng này, D3.js là công cụ không thể thiếu đối với các nhà phân tích dữ liệu, nhà khoa học dữ liệu và nhà phát triển web muốn tạo ra các ứng dụng dữ liệu trực quan, động và có tính tương tác cao.

Cài đặt và khởi tạo D3.js

Cách cài đặt D3.js

Sử dụng CDN:
Cách đơn giản nhất để cài đặt D3.js là thông qua CDN. Bạn chỉ cần chèn đoạn mã sau vào trong phần <head> của tài liệu HTML:

<script src="https://d3js.org/d3.v7.min.js"></script>

Đây là cách dễ dàng để bắt đầu mà không cần phải cài đặt gì thêm. Khi sử dụng phương pháp này, bạn không cần tải xuống bất kỳ thư viện nào mà vẫn có thể sử dụng D3.js ngay lập tức.
Cài đặt qua npm/yarn cho các dự án Node.js:
Nếu bạn đang phát triển ứng dụng web với Node.js, bạn có thể cài đặt D3.js qua npm hoặc yarn:

npm install d3
# hoặc với yarn
yarn add d3

Sau khi cài đặt, bạn có thể import D3 vào mã JavaScript của mình như sau:

import * as d3 from 'd3';

Cấu trúc cơ bản của D3.js

D3.js làm việc chủ yếu với các phần tử DOM (Document Object Model) và SVG (Scalable Vector Graphics). Dưới đây là cách sử dụng D3 để thao tác với các phần tử SVG và dữ liệu:

Cách tạo và thao tác với một đối tượng SVG:
Để tạo một phần tử SVG trong HTML, bạn sử dụng phương thức .append() của D3. Ví dụ, để tạo một vùng vẽ SVG trong tài liệu HTML:

const width = 500;
const height = 500;

const svg = d3.select('body')  // Chọn phần tử body trong HTML
  .append('svg')  // Thêm phần tử svg
  .attr('width', width)  // Đặt chiều rộng
  .attr('height', height);  // Đặt chiều cao

Định dạng dữ liệu trong D3.js:
D3.js hỗ trợ làm việc với nhiều loại dữ liệu, bao gồm JSON, CSV và TSV. Ví dụ, để tạo một biểu đồ cột từ một mảng dữ liệu:

const data = [30, 86, 168, 281, 303, 365];

Dữ liệu có thể được tải động từ các tệp CSV hoặc JSON thông qua các phương thức như .csv(), .json() của D3.

Cách sử dụng phương thức .select(), .append(), .data() để thao tác với DOM:

Ví dụ, sử dụng .data() để gắn mảng dữ liệu vào các phần tử SVG:

.select(): Chọn một phần tử đầu tiên trong DOM.
.append(): Thêm một phần tử con vào phần tử đã chọn.
.data(): Gắn dữ liệu vào phần tử DOM.

const bars = svg.selectAll('rect')  // Chọn tất cả các phần tử rect
  .data(data)  // Gắn dữ liệu vào
  .enter()  // Xử lý các phần tử mới
  .append('rect')  // Thêm các phần tử rect mới
  .attr('x', (d, i) => i * 50)  // Đặt vị trí x
  .attr('y', d => height - d)  // Đặt vị trí y
  .attr('width', 40)  // Đặt chiều rộng
  .attr('height', d => d)  // Đặt chiều cao
  .attr('fill', 'steelblue');  // Màu sắc

Cấu hình cơ bản trong D3.js

Tạo các phần tử SVG (rect, circle, line, path):
D3.js cho phép bạn tạo ra các phần tử đồ họa như hình chữ nhật (rect), hình tròn (circle), đường thẳng (line), và đường path (path) trong SVG.

Ví dụ tạo hình tròn:

svg.append('circle')
  .attr('cx', 150)
  .attr('cy', 150)
  .attr('r', 100)
  .attr('fill', 'green');

Cấu hình chiều rộng, chiều cao, trục tọa độ:
D3.js cho phép bạn tạo các trục tọa độ và thiết lập tỷ lệ cho biểu đồ thông qua d3.scaleLinear() hoặc d3.scaleBand().

Ví dụ về tỷ lệ cho biểu đồ cột:

const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);

Trục X và trục Y có thể được tạo ra với các phần tử g (group) và phương thức .call(d3.axisBottom()) hoặc .call(d3.axisLeft()).

Tạo biểu đồ cơ bản với D3.js

Biểu đồ cột (Bar Chart)

Dữ liệu: Bạn có thể sử dụng mảng hoặc đối tượng JSON để cung cấp dữ liệu cho biểu đồ.
Tạo các cột: Sử dụng D3.js để tạo ra các phần tử <rect> trong SVG.
Thêm các trục và nhãn: Sử dụng d3.axisBottom() và d3.axisLeft() để thêm các trục.

Ví dụ tạo biểu đồ cột:

const data = [30, 86, 168, 281, 303, 365];

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([height, 0]);

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - yScale(d))
  .attr('fill', 'steelblue');

Biểu đồ đường (Line Chart)

Tạo đường: Sử dụng d3.line() để tạo ra các đường nối các điểm dữ liệu.
Cấu hình trục: Thêm trục X và Y cho biểu đồ đường.

Ví dụ tạo biểu đồ đường:

const data = [30, 50, 70, 90, 110];
const line = d3.line()
  .x((d, i) => xScale(i))
  .y(d => yScale(d));

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

svg.append('path')
  .data([data])
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('d', line);

Biểu đồ tròn (Pie Chart)

Sử dụng D3 để tạo biểu đồ tròn: D3 cung cấp phương thức .pie() để tính toán góc của các phần trong biểu đồ tròn.
Quản lý dữ liệu dạng góc và màu sắc: Sử dụng các hàm arc và pie để chia tỷ lệ góc.

Ví dụ tạo biểu đồ tròn:

const data = [10, 20, 30, 40];
const color = d3.scaleOrdinal(d3.schemeCategory10);

const pie = d3.pie();
const arc = d3.arc().innerRadius(0).outerRadius(100);

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', `translate(${width / 2}, ${height / 2})`);

const pieChart = svg.selectAll('path')
  .data(pie(data))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', (d, i) => color(i));

Biểu đồ phân tán (Scatter Plot)

Vẽ điểm dữ liệu: Sử dụng circle SVG để tạo các điểm phân tán.
Sử dụng D3 để thêm tooltip khi hover: Tooltip giúp hiển thị thông tin chi tiết về các điểm dữ liệu.

Ví dụ tạo biểu đồ phân tán:

const data = [
  { x: 30, y: 30 },
  { x: 40, y: 90 },
  { x: 80, y: 60 },
  { x

Tùy biến biểu đồ với D3.js

Tùy biến giao diện

D3.js cung cấp cho bạn sự linh hoạt cao trong việc tùy chỉnh giao diện biểu đồ, từ màu sắc đến kích thước và các chi tiết thiết kế khác. Bạn có thể thay đổi mọi phần tử trong biểu đồ, chẳng hạn như các đối tượng SVG, trục tọa độ, nhãn, màu sắc, font chữ, v.v.

Thay đổi màu sắc, kích thước, độ dày của các đối tượng: Một trong những ưu điểm của D3.js là khả năng dễ dàng thay đổi màu sắc, kích thước và độ dày của các đối tượng SVG. Bạn có thể sử dụng các thuộc tính .attr() để thay đổi chúng.

Ví dụ, thay đổi màu sắc và độ dày của các cột trong biểu đồ cột:

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - yScale(d))
  .attr('fill', (d) => d > 100 ? 'red' : 'steelblue')  // Thay đổi màu theo dữ liệu
  .attr('stroke', 'black')  // Thêm viền đen cho các cột
  .attr('stroke-width', 2);  // Đặt độ dày viền

Tùy chỉnh font chữ, màu sắc và các chi tiết thiết kế khác: Bạn có thể dễ dàng thay đổi font chữ và các chi tiết thiết kế khác thông qua thuộc tính .style() hoặc .attr(). Ví dụ, thay đổi font chữ của nhãn trên trục X và Y:

svg.append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(d3.axisBottom(xScale))
  .style('font-family', 'Arial')  // Đặt font chữ cho trục X
  .style('font-size', '14px');    // Đặt kích thước chữ cho trục X

svg.append('g')
  .call(d3.axisLeft(yScale))
  .style('font-family', 'Verdana')  // Đặt font chữ cho trục Y
  .style('font-size', '12px');      // Đặt kích thước chữ cho trục Y

Sử dụng các hiệu ứng trong D3.js

D3.js hỗ trợ các hiệu ứng chuyển động (transition) rất mạnh mẽ, cho phép bạn thay đổi các thuộc tính của phần tử trong một khoảng thời gian. Các hiệu ứng chuyển động giúp biểu đồ trở nên mượt mà và tương tác tốt hơn.

Cách thêm hiệu ứng chuyển động (transition): D3.js có phương thức .transition() giúp tạo hiệu ứng chuyển động. Bạn có thể thay đổi các thuộc tính như vị trí, kích thước, màu sắc trong một khoảng thời gian nhất định.

Ví dụ, tạo hiệu ứng chuyển động khi thay đổi vị trí của các cột trong biểu đồ:

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => height)
  .attr('width', xScale.bandwidth())
  .attr('height', 0)
  .attr('fill', 'steelblue')
  .transition()
  .duration(1000)  // Thời gian chuyển động là 1 giây
  .attr('y', d => yScale(d))  // Đặt lại vị trí Y khi chuyển động
  .attr('height', d => height - yScale(d));  // Thay đổi chiều cao khi chuyển động

Cách thay đổi dữ liệu và làm mới biểu đồ với hiệu ứng: Bạn có thể thay đổi dữ liệu và làm mới biểu đồ một cách mượt mà bằng cách kết hợp với các hiệu ứng chuyển động. Ví dụ, khi thay đổi dữ liệu trong biểu đồ cột, bạn có thể sử dụng hiệu ứng để biểu đồ tự động cập nhật mà không cần phải vẽ lại từ đầu.

// Cập nhật dữ liệu
data = [150, 200, 250, 300, 350, 400];

// Cập nhật các cột
svg.selectAll('rect')
  .data(data)
  .transition()
  .duration(1000)
  .attr('y', d => yScale(d))
  .attr('height', d => height - yScale(d));

Tương tác với biểu đồ

D3.js cho phép bạn thêm các tính năng tương tác cho biểu đồ, như xử lý sự kiện chuột (click, hover, zoom), tạo tooltip, và nhiều tính năng khác để người dùng có thể tương tác với biểu đồ một cách dễ dàng.

Xử lý các sự kiện chuột (click, hover, zoom): Bạn có thể dễ dàng thêm các sự kiện như click, hover, zoom vào các phần tử trong biểu đồ bằng cách sử dụng phương thức .on() của D3.js.

Ví dụ, xử lý sự kiện hover để thay đổi màu sắc của các cột khi di chuột vào

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - yScale(d))
  .attr('fill', 'steelblue')
  .on('mouseover', function(event, d) {
    d3.select(this).attr('fill', 'orange');  // Thay đổi màu khi hover
  })
  .on('mouseout', function(event, d) {
    d3.select(this).attr('fill', 'steelblue');  // Quay lại màu ban đầu khi rời chuột
  });

Tạo tooltip và hiển thị thông tin khi người dùng tương tác với các phần tử: Tooltip là một yếu tố rất quan trọng trong việc trực quan hóa dữ liệu, giúp người dùng xem chi tiết dữ liệu khi hover vào các phần tử biểu đồ.

Ví dụ, tạo tooltip khi hover vào các cột trong biểu đồ:

const tooltip = d3.select('body')
  .append('div')
  .attr('class', 'tooltip')
  .style('position', 'absolute')
  .style('visibility', 'hidden')
  .style('background-color', 'lightsteelblue')
  .style('padding', '5px')
  .style('border-radius', '5px');

svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => xScale(i))
  .attr('y', d => yScale(d))
  .attr('width', xScale.bandwidth())
  .attr('height', d => height - yScale(d))
  .attr('fill', 'steelblue')
  .on('mouseover', function(event, d) {
    tooltip.style('visibility', 'visible')
      .text(`Giá trị: $14`);
  })
  .on('mousemove', function(event) {
    tooltip.style('top', (event.pageY + 5) + 'px')
      .style('left', (event.pageX + 5) + 'px');
  })
  .on('mouseout', function() {
    tooltip.style('visibility', 'hidden');
  });

D3.js cung cấp rất nhiều công cụ mạnh mẽ để tùy biến và tương tác với biểu đồ, từ việc thay đổi kiểu dáng, màu sắc, cho đến việc thêm các hiệu ứng chuyển động và xử lý sự kiện. Bạn có thể tạo ra những biểu đồ trực quan sinh động và có thể tương tác một cách dễ dàng, làm cho dữ liệu trở nên rõ ràng và dễ tiếp cận hơn.

Biểu đồ nâng cao và tính năng đặc biệt bằng JavaScript

Biểu đồ phân lớp (Stacked Bar Chart)

Biểu đồ phân lớp (stacked bar chart) giúp bạn thể hiện các phần của một tổng thể trong các cột, mỗi phần thể hiện một nhóm hoặc danh mục riêng biệt. Loại biểu đồ này rất hữu ích khi bạn muốn so sánh tổng cộng của một tập hợp các giá trị, cũng như muốn phân tích tỷ lệ của từng phần trong tổng thể.

Cách tạo biểu đồ phân lớp cho dữ liệu nhóm: Để tạo biểu đồ phân lớp trong D3.js, bạn cần xử lý dữ liệu sao cho mỗi nhóm có các giá trị riêng biệt, sau đó tính toán các giá trị phân lớp sao cho các cột chồng lên nhau đúng thứ tự.

Ví dụ tạo một biểu đồ phân lớp với dữ liệu nhóm doanh thu theo tháng và các loại sản phẩm khác nhau:

const data = [
  { month: 'Jan', A: 30, B: 50, C: 70 },
  { month: 'Feb', A: 40, B: 60, C: 90 },
  { month: 'Mar', A: 50, B: 70, C: 110 }
];

// Xác định chiều rộng, chiều cao
const width = 500;
const height = 300;

// Tạo scale cho trục X và Y
const xScale = d3.scaleBand()
  .domain(data.map(d => d.month))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.A + d.B + d.C)])
  .nice()
  .range([height, 0]);

// Tạo phần tử SVG
const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

// Thêm các cột phân lớp
let stack = d3.stack()
  .keys(['A', 'B', 'C']);

const layers = stack(data);

svg.selectAll('.layer')
  .data(layers)
  .enter()
  .append('g')
  .attr('class', 'layer')
  .attr('fill', (d, i) => d3.schemeCategory10[i])  // Màu sắc cho mỗi nhóm
  .selectAll('rect')
  .data(d => d)
  .enter()
  .append('rect')
  .attr('x', d => xScale(d.data.month))
  .attr('y', d => yScale(d[1]))  // Y của cột phân lớp
  .attr('height', d => yScale(d[0]) - yScale(d[1]))  // Độ cao của mỗi cột
  .attr('width', xScale.bandwidth());

Quản lý độ cao của các cột thông qua các giá trị tổng: Để có độ cao chính xác cho mỗi cột phân lớp, D3.js sử dụng các hàm .stack() để chồng các nhóm lại với nhau. Dữ liệu đầu vào được phân lớp theo thứ tự từ dưới lên, tạo ra các cột chồng lên nhau.

Biểu đồ mạng (Network Graph)

Biểu đồ mạng (network graph) được sử dụng để biểu diễn các mối quan hệ giữa các đối tượng, thường thấy trong các ứng dụng mạng xã hội, đồ thị quan hệ, hoặc bất kỳ hệ thống nào có các mối liên kết giữa các đối tượng. D3.js cho phép bạn tạo các đồ thị mạng động với các nút (nodes) và liên kết (links) có thể tương tác.

Tạo biểu đồ mạng liên kết giữa các đối tượng: Để tạo biểu đồ mạng trong D3.js, bạn cần khai báo các nút và liên kết, sau đó sử dụng các thuộc tính như forceSimulation() để tạo mô phỏng lực cho các đối tượng trong mạng.

Ví dụ về biểu đồ mạng đơn giản với các nút và liên kết:

const nodes = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
  { id: 3, name: 'C' }
];

const links = [
  { source: 1, target: 2 },
  { source: 2, target: 3 },
  { source: 1, target: 3 }
];

const width = 400;
const height = 400;

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

const simulation = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(links).id(d => d.id))
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter(width / 2, height / 2));

const link = svg.selectAll('.link')
  .data(links)
  .enter()
  .append('line')
  .attr('class', 'link')
  .attr('stroke', '#999')
  .attr('stroke-width', 2);

const node = svg.selectAll('.node')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('class', 'node')
  .attr('r', 10)
  .attr('fill', 'blue');

simulation.on('tick', () => {
  link.attr('x1', d => d.source.x)
      .attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x)
      .attr('y2', d => d.target.y);

  node.attr('cx', d => d.x)
      .attr('cy', d => d.y);
});

Sử dụng D3.js để tạo các nút và liên kết động: Các nút và liên kết trong đồ thị mạng có thể di chuyển và thay đổi vị trí khi mô phỏng lực thay đổi. D3.js cung cấp tính năng forceSimulation() để mô phỏng chuyển động của các phần tử trong đồ thị.

Sử dụng D3.js với dữ liệu thời gian

D3.js hỗ trợ rất tốt việc xử lý và trực quan hóa dữ liệu thời gian. Bạn có thể vẽ các biểu đồ thời gian (time series), sử dụng các trục X và Y để hiển thị các mốc thời gian và giá trị theo từng thời điểm.

Biểu đồ thời gian (Time Series): Để hiển thị dữ liệu thời gian, bạn cần chuyển đổi dữ liệu thành định dạng thời gian và sử dụng các scale đặc biệt cho trục thời gian.

Ví dụ về biểu đồ thời gian với D3.js:

const data = [
  { date: '2021-01-01', value: 30 },
  { date: '2021-02-01', value: 50 },
  { date: '2021-03-01', value: 70 }
];

const parseDate = d3.timeParse('%Y-%m-%d');
data.forEach(d => d.date = parseDate(d.date));

const width = 500;
const height = 300;

const xScale = d3.scaleTime()
  .domain(d3.extent(data, d => d.date))
  .range([0, width]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([height, 0]);

const svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

// Vẽ đường biểu diễn dữ liệu thời gian
const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value));

svg.append('path')
  .data([data])
  .attr('class', 'line')
  .attr('d', line)
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 2);

Cách hiển thị dữ liệu theo mốc thời gian với các trục X và Y: Trục thời gian X sử dụng d3.scaleTime() để thiết lập phạm vi thời gian, trong khi trục Y có thể dùng d3.scaleLinear() hoặc d3.scaleLog() tùy thuộc vào loại dữ liệu. Cấu hình các trục thời gian này sẽ giúp bạn hiển thị mốc thời gian chính xác trên biểu đồ.

Với những tính năng nâng cao này, D3.js giúp bạn tạo ra các biểu đồ động, tương tác và trực quan hóa dữ liệu phức tạp một cách dễ dàng. Biểu đồ phân lớp giúp phân tích dữ liệu nhóm, biểu đồ mạng hỗ trợ việc hiển thị các mối quan hệ giữa các đối tượng, và các biểu đồ thời gian cung cấp cách tiếp cận mạnh mẽ cho việc phân tích dữ liệu theo thời gian.

Làm việc với dữ liệu động và tải dữ liệu từ các nguồn khác bằng JavaScript

Lấy dữ liệu từ API

D3.js hỗ trợ việc truy xuất dữ liệu từ các nguồn ngoài như file CSV, JSON hoặc từ API RESTful. Điều này đặc biệt hữu ích khi bạn muốn trực quan hóa dữ liệu thời gian thực hoặc dữ liệu thay đổi liên tục.

Sử dụng d3.json() để lấy dữ liệu JSON:

d3.json('https://api.example.com/data.json')
  .then(data => {
    // xử lý dữ liệu và cập nhật biểu đồ
    updateChart(data);
  })
  .catch(error => console.error(error));

Sử dụng d3.csv() để lấy dữ liệu từ file CSV:

d3.csv('data.csv')
  .then(data => {
    data.forEach(d => {
      d.value = +d.value;
    });
    drawChart(data);
  });

D3 tự động phân tích cú pháp dữ liệu từ các định dạng phổ biến, giúp bạn dễ dàng chuyển dữ liệu thành mảng đối tượng và bắt đầu trực quan hóa.

Cập nhật biểu đồ theo dữ liệu mới

Khi dữ liệu thay đổi, bạn không cần vẽ lại biểu đồ từ đầu. D3 cung cấp các phương pháp để cập nhật biểu đồ một cách hiệu quả bằng cách sử dụng data binding.

Cập nhật dữ liệu động:

function updateChart(newData) {
  const bars = svg.selectAll('rect')
    .data(newData);

  // Cập nhật cột hiện tại
  bars
    .transition()
    .duration(500)
    .attr('height', d => yScale(d.value))
    .attr('y', d => height - yScale(d.value));

  // Thêm mới nếu có phần tử mới
  bars.enter()
    .append('rect')
    .attr('x', (d, i) => i * 30)
    .attr('y', d => height - yScale(d.value))
    .attr('width', 20)
    .attr('height', d => yScale(d.value))
    .attr('fill', 'steelblue');

  // Xoá phần tử dư
  bars.exit().remove();
}

Thao tác động với dữ liệu: Bạn có thể thêm, xóa, hoặc cập nhật dữ liệu bằng cách thao tác trực tiếp với mảng dữ liệu nguồn và gọi lại hàm cập nhật biểu đồ như ví dụ trên.

Ứng dụng thực tế và ví dụ minh họa bằng JavaScript

Xây dựng dashboard phân tích dữ liệu

D3.js là công cụ lý tưởng để xây dựng các dashboard tương tác nhằm theo dõi các chỉ số như doanh thu, số lượng khách hàng, hiệu suất sản phẩm theo thời gian...

Ví dụ:

Biểu đồ tròn hiển thị tỷ lệ doanh thu theo danh mục sản phẩm.
Biểu đồ cột hiển thị doanh thu theo tháng.
Biểu đồ đường theo dõi số lượng đơn hàng mỗi tuần.
Biểu đồ phân tán thể hiện mối liên hệ giữa số lần truy cập và tỷ lệ chuyển đổi.

Bạn có thể bố trí các biểu đồ bằng HTML/CSS, và sử dụng D3 để cập nhật dữ liệu đồng bộ giữa các biểu đồ khi người dùng tương tác.

Trình bày dữ liệu học máy hoặc AI

D3.js có thể giúp trực quan hóa các kết quả trong quy trình huấn luyện và đánh giá mô hình:

Ma trận nhầm lẫn (confusion matrix): Sử dụng bảng màu (color scale) để biểu diễn số lượng đúng/sai giữa các lớp dự đoán và nhãn thật.
Độ chính xác, độ nhạy (precision, recall, F1-score): Trực quan hóa bằng biểu đồ cột hoặc radar chart.
Tiến trình huấn luyện: Dùng biểu đồ đường thể hiện loss và accuracy qua từng epoch.

Ví dụ:

const accuracyData = [
  { epoch: 1, accuracy: 0.65 },
  { epoch: 2, accuracy: 0.72 },
  { epoch: 3, accuracy: 0.80 }
];

// Vẽ biểu đồ đường thể hiện độ chính xác theo epoch

Phân tích dữ liệu lớn

D3.js có khả năng tối ưu hóa hiển thị dữ liệu lớn thông qua:

Virtual rendering (chỉ vẽ những gì hiển thị).
Tương tác zoom/pan để khám phá tập dữ liệu rộng.
Kết hợp với các thư viện như Crossfilter hoặc Redux để xử lý logic lọc dữ liệu phía client.

Ứng dụng thực tế:

Phân tích log hệ thống.
Trực quan hóa số liệu tài chính hàng triệu dòng.
Biểu đồ heatmap thể hiện tương tác người dùng theo thời gian.

Nhờ tính linh hoạt và khả năng tùy chỉnh mạnh mẽ, D3.js là lựa chọn hàng đầu cho các ứng dụng yêu cầu trực quan hóa dữ liệu một cách chính xác, thẩm mỹ và tương tác cao.

Kết bài

D3.js là một công cụ mạnh mẽ và linh hoạt cho việc trực quan hóa dữ liệu trong JavaScript. Mặc dù có độ phức tạp cao hơn so với các thư viện biểu đồ khác, nhưng D3.js mang lại khả năng tùy biến sâu và kiểm soát hoàn toàn đối với cách hiển thị dữ liệu trên web. Việc thành thạo D3.js giúp bạn không chỉ tạo ra các biểu đồ bắt mắt mà còn có thể xây dựng những trải nghiệm tương tác dữ liệu phức tạp, phù hợp với các dự án nghiên cứu, dashboard phân tích hoặc ứng dụng khoa học dữ liệu. Nếu bạn đang hướng đến việc thể hiện dữ liệu một cách sống động và sáng tạo, D3.js chắc chắn là một lựa chọn đáng để đầu tư thời gian học hỏi và khai thác.