Sơ đồ phân tán dựa trên JavaScript với các vùng cong trong React

Xây dựng biểu đồ phân tán động với dữ liệu nhiệt độ và độ ẩm

Trực quan hóa các điểm dữ liệu một cách hiệu quả là rất quan trọng khi bạn xử lý nhiều biến. Trong kịch bản này, âm mưu nhiệt độ Và độ ẩm trên một biểu đồ phân tán có thể cung cấp những hiểu biết có giá trị. Biểu đồ phân tán giúp thể hiện mối tương quan và mô hình giữa các biến này, đặc biệt là theo thời gian.

Ngoài một biểu đồ đơn giản, bạn có thể muốn tạo các vùng chuyên biệt để phân tách các vùng của biểu đồ dựa trên một đường cong. Điều này làm tăng thêm độ phức tạp cho sơ đồ của bạn, cung cấp phân tích chi tiết hơn, chẳng hạn như xác định các khu vực có mức độ ẩm khác nhau trong phạm vi nhiệt độ. Điều này có thể là một thách thức, đặc biệt nếu các vùng dựa trên đường cong.

Rất may, có rất nhiều thư viện có sẵn cho Phản ứng và JavaScript đơn giản có thể giúp vẽ các điểm dữ liệu này và thêm các vùng cong. Bằng cách sử dụng các công cụ phù hợp, bạn có thể dễ dàng tạo biểu đồ phân tán với các vùng tùy chỉnh để phân tích dữ liệu tốt hơn. Những công cụ này cho phép sự linh hoạt và chính xác trong việc ánh xạ các mối quan hệ phi tuyến tính.

Trong bài viết này, chúng ta sẽ khám phá cách thu thập điểm dữ liệu và sử dụng các thư viện JavaScript và React phổ biến để vẽ các biểu đồ phân tán có vùng cong. Với thiết lập phù hợp, bạn sẽ có thể ánh xạ dữ liệu nhiệt độ và độ ẩm của mình thành biểu đồ một cách hiệu quả.

Hiểu cách triển khai Biểu đồ phân tán với các vùng cong trong React

Ví dụ đầu tiên trong tập lệnh sử dụng Phản ứng kết hợp với sức mạnh D3.js thư viện để tạo một biểu đồ phân tán với các vùng cong. Biểu đồ phân tán ánh xạ nhiệt độ theo trục x và độ ẩm theo trục y, giúp hình dung mối quan hệ giữa hai biến này. Các điểm dữ liệu được biểu thị bằng các vòng tròn, được vẽ bằng các phương thức D3 `enter()` và `append()` để đảm bảo mỗi điểm dữ liệu đều được thêm vào DOM. Một khía cạnh quan trọng của việc triển khai là sử dụng thang đo tuyến tính với `scaleLinear()`, ánh xạ các giá trị nhiệt độ và độ ẩm tới các vị trí pixel trong SVG, cho phép các điểm được định vị chính xác trên biểu đồ.

Ngoài việc vẽ các điểm dữ liệu, tập lệnh còn vẽ các vùng cong bằng cách sử dụng trình tạo dòng (`d3.line()`). Lệnh này tạo các đường dẫn biểu thị các đường cong giữa các điểm được chỉ định, cho phép vẽ các vùng phi tuyến tính trên biểu đồ phân tán. Trong trường hợp này, `curve(d3.curveNatural)` được áp dụng để tạo các đường cong mượt mà, trông tự nhiên giữa các giá trị nhiệt độ và độ ẩm. Những đường cong này rất quan trọng để xác định các vùng khác nhau trong biểu đồ phân tán, có thể biểu thị các vùng hoặc phạm vi quan tâm cụ thể, chẳng hạn như phạm vi độ ẩm dễ chịu hoặc nguy hiểm dựa trên nhiệt độ.

Ví dụ thứ hai đòn bẩy Chart.js trong React, một thư viện đơn giản nhưng hiệu quả để hiển thị biểu đồ. Thành phần `Scatter` của Chart.js được sử dụng để vẽ các điểm dữ liệu nhiệt độ và độ ẩm. Mặc dù Chart.js không linh hoạt như D3.js trong việc tạo trực quan hóa tùy chỉnh, nhưng nó cung cấp thiết lập trực quan cho các biểu đồ phân tán. Tính năng chính ở đây là plugin `chú thích`, cho phép vẽ hình dạng, đường hoặc vùng trên biểu đồ. Plugin này được sử dụng để ước tính các vùng cong bằng cách vẽ các đường thẳng qua các phần của biểu đồ phân tán, tạo ra sự phân chia trực quan giữa các khu vực quan tâm. Mặc dù các vùng cong được tính gần đúng bằng các đường thẳng, phương pháp này đơn giản và cung cấp một cách nhanh chóng để trực quan hóa các vùng trong biểu đồ phân tán.

Cả hai phương pháp đều kết hợp các phương pháp thực hành quan trọng, chẳng hạn như chia tỷ lệ dữ liệu bằng cách sử dụng `scaleLinear()` trong D3.js và sử dụng các tùy chọn tích hợp sẵn để tùy chỉnh tỷ lệ biểu đồ trong Chart.js. Các phương pháp tiếp cận này được thiết kế linh hoạt, cho phép các nhà phát triển sửa đổi và mở rộng chúng cho các trường hợp sử dụng khác nhau. Trong khi D3.js cung cấp nhiều khả năng kiểm soát và độ chính xác hơn để vẽ các đường cong và vùng, Chart.js cung cấp khả năng thiết lập nhanh hơn cho các biểu đồ phân tán cơ bản với một số mức độ tùy chỉnh thông qua các plugin như `chú thích`. Cả hai tập lệnh đều có tính mô-đun và có thể tái sử dụng, mang lại sự linh hoạt trong việc xây dựng các biểu đồ phân tán tương tác với các vùng cong trong ứng dụng React.

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const ScatterPlotWithCurves = ({ data }) => {
  const svgRef = useRef();
  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr('width', 500)
      .attr('height', 500);
    const xScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.temperatureC), d3.max(data, d => d.temperatureC)])
      .range([0, 500]);
    const yScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.humidity), d3.max(data, d => d.humidity)])
      .range([500, 0]);
    svg.selectAll('.dot')
      .data(data)
      .enter().append('circle')
      .attr('cx', d => xScale(d.temperatureC))
      .attr('cy', d => yScale(d.humidity))
      .attr('r', 5);
    // Add zones using curved paths
    const lineGenerator = d3.line()
      .x(d => xScale(d[0]))
      .y(d => yScale(d[1]))
      .curve(d3.curveNatural);
    svg.append('path')
      .datum([[30, 60], [40, 70], [50, 80]])
      .attr('d', lineGenerator)
      .attr('stroke', 'red')
      .attr('fill', 'none');
  }, [data]);
  return <svg ref={svgRef}></svg>;
};
export default ScatterPlotWithCurves;

import React from 'react';
import { Scatter } from 'react-chartjs-2';
const ScatterPlot = ({ data }) => {
  const chartData = {
    datasets: [{
      label: 'Temperature vs Humidity',
      data: data.map(d => ({ x: d.temperatureC, y: d.humidity })),
      borderColor: 'blue',
      pointBackgroundColor: 'blue',
    }],
  };
  const options = {
    scales: {
      x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Temperature (°C)' } },
      y: { title: { display: true, text: 'Humidity (%)' } },
    },
    plugins: {
      annotation: { // Plugin to draw curved zones
        annotations: [{
          type: 'line',
          xMin: 30, xMax: 50, yMin: 60, yMax: 80,
          borderColor: 'red', borderWidth: 2,
        }],
      },
    },
  };
  return <Scatter data={chartData} options={options} />;
};
export default ScatterPlot;

Khám phá các thư viện thay thế để tạo biểu đồ phân tán trong React

Ngoài ra D3.js Và Chart.js, có những thư viện mạnh mẽ khác có thể xử lý việc tạo biểu đồ phân tán trong Phản ứng. Một trong những lựa chọn như vậy là Plotly, một thư viện biểu đồ cung cấp cả tính linh hoạt và dễ sử dụng. Plotly cho phép tạo các biểu đồ tương tác, bao gồm các biểu đồ phân tán, nơi bạn không chỉ có thể vẽ biểu đồ dữ liệu mà còn có thể thêm các vùng cong bằng cách sử dụng chú thích hoặc khả năng vẽ hình. Plotly đi kèm với sự hỗ trợ tích hợp cho thiết kế đáp ứng, giúp nó phù hợp với các ứng dụng web cần điều chỉnh cho các kích thước màn hình khác nhau.

Một giải pháp thay thế khác là sử dụng biểu đồ lại, một thư viện được thiết kế đặc biệt cho các ứng dụng React. Recharts cung cấp API đơn giản hơn so với D3.js và là lựa chọn tuyệt vời cho các nhà phát triển muốn có kết quả nhanh chóng với cấu hình tối thiểu. Nó hỗ trợ các biểu đồ phân tán và hình dạng tùy chỉnh, giúp có thể tính gần đúng các vùng cong. Mặc dù Recharts không có tùy chỉnh rộng rãi như D3.js, nhưng đây vẫn là một lựa chọn mạnh mẽ để xử lý các biểu đồ phân tán cơ bản, đặc biệt khi tính dễ sử dụng và khả năng đọc là những yếu tố chính cần cân nhắc.

Cuối cùng, đối với những người muốn có hiệu suất và tốc độ kết xuất tối đa, CanvasJS là một lựa chọn tốt. CanvasJS rất nhẹ và tập trung vào việc sử dụng canvas HTML5 để vẽ. Nó có thể xử lý các tập dữ liệu lớn một cách hiệu quả và hỗ trợ cập nhật theo thời gian thực, khiến nó phù hợp với các ứng dụng yêu cầu hiệu suất cao. Mặc dù có thể thiếu một số tính linh hoạt như trong D3.js, CanvasJS hoàn hảo cho các ứng dụng yêu cầu khả năng hiển thị và phản hồi nhanh, chẳng hạn như giám sát trang tổng quan.