Точкова діаграма на основі JavaScript із викривленими зонами в React

Побудова динамічної діаграми розсіювання з даними температури та вологості

Ефективна візуалізація точок даних має вирішальне значення, коли ви маєте справу з кількома змінними. У цьому сценарії змова температура і вологість на точковій діаграмі може дати цінну інформацію. Діаграма розсіювання допомагає представити кореляції та закономірності між цими змінними, особливо в часі.

Крім простого графіка, ви можете створити спеціалізовані зони, які відокремлюють області графіка на основі кривої. Це ускладнює вашу діаграму, забезпечуючи більш детальний аналіз, як-от визначення областей з різними рівнями вологості в діапазонах температур. Це може бути складно, особливо якщо зони засновані на кривих.

На щастя, доступно багато бібліотек Реагувати і простий JavaScript, який може допомогти побудувати ці точки даних і додати вигнуті зони. Використовуючи відповідні інструменти, ви можете легко створити діаграму розсіювання з настроюваними зонами для кращого аналізу даних. Ці інструменти забезпечують гнучкість і точність відображення нелінійних зв’язків.

У цій статті ми розглянемо, як збирати точки даних і використовувати популярні бібліотеки JavaScript і React для малювання діаграм розсіювання з вигнутими зонами. Завдяки правильному налаштуванню ви зможете ефективно відобразити дані про температуру та вологість у діаграмі.

Розуміння реалізації діаграми розсіювання з викривленими зонами в React

Перший приклад у сценаріях використовує Реагувати у поєднанні з могутнім D3.js бібліотека для створення діаграми розсіювання з вигнутими зонами. Діаграма розсіювання відображає температуру на осі x і вологість на осі y, допомагаючи візуалізувати зв’язок між цими двома змінними. Точки даних представлені колами, нанесеними за допомогою методів D3 `enter()` і `append()`, які забезпечують додавання кожної точки даних до DOM. Важливим аспектом реалізації є використання лінійних масштабів із `scaleLinear()`, який зіставляє значення температури та вологості з позиціями пікселів у SVG, що дозволяє правильно розташовувати точки на діаграмі.

Окрім побудови точок даних, скрипт малює вигнуті зони за допомогою генератора ліній (`d3.line()`). Ця команда створює шляхи, які представляють криві між вказаними точками, дозволяючи малювати нелінійні зони на діаграмі розсіювання. У цьому випадку `curve(d3.curveNatural)` застосовано для створення плавних природних кривих між значеннями температури та вологості. Ці криві мають вирішальне значення для визначення різних зон на діаграмі розсіювання, які можуть представляти конкретні регіони або діапазони інтересу, наприклад комфортний або небезпечний діапазон вологості на основі температури.

Другий приклад важелів Chart.js у React, простішій, але ефективній бібліотеці для відтворення діаграм. Компонент `Scatter` Chart.js використовується для побудови точок даних температури та вологості. Хоча Chart.js не такий гнучкий, як D3.js, для створення користувацьких візуалізацій, він пропонує інтуїтивно зрозуміле налаштування для діаграм розсіювання. Ключовою функцією тут є плагін `аннотації`, який дозволяє малювати форми, лінії або області на діаграмі. Цей плагін використовується для наближення викривлених зон шляхом малювання прямих ліній через ділянки діаграми розсіювання, створюючи візуальні поділки між областями інтересу. Хоча вигнуті зони апроксимуються прямими лініями, цей метод простий і забезпечує швидкий спосіб візуалізації зон на діаграмі розсіювання.

Обидва методи включають важливі практики, такі як масштабування даних за допомогою `scaleLinear()` у D3.js і використання вбудованих параметрів для налаштування масштабу діаграми в Chart.js. Ці підходи створені для гнучкості, дозволяючи розробникам змінювати та розширювати їх для різних випадків використання. Тоді як D3.js пропонує більше контролю та точності для малювання кривих і зон, Chart.js забезпечує швидше налаштування базових діаграм розсіювання з деяким рівнем налаштування за допомогою плагінів, таких як `аннотація`. Обидва скрипти є модульними та придатними для багаторазового використання, пропонуючи гнучкість у створенні інтерактивних діаграм розсіювання з вигнутими зонами в програмах 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;

Вивчення альтернативних бібліотек для створення діаграми розсіювання в React

На додаток до D3.js і Chart.js, існують інші надійні бібліотеки, які можуть працювати зі створенням діаграми розсіювання Реагувати. Одним із таких варіантів є Plotly, бібліотека діаграм, яка пропонує як гнучкість, так і простоту використання. Plotly дозволяє створювати інтерактивні діаграми, включно з діаграмами розсіювання, де можна не лише наносити дані, але й додавати вигнуті зони за допомогою анотацій або можливостей малювання фігур. Plotly поставляється з вбудованою підтримкою адаптивного дизайну, що робить його придатним для веб-додатків, які потребують адаптації до різних розмірів екрана.

Ще одна альтернатива - використання Повторні картки, бібліотека, спеціально розроблена для програм React. Recharts надає простіший API порівняно з D3.js і є чудовим вибором для розробників, яким потрібні швидкі результати з мінімальною конфігурацією. Він підтримує точкові діаграми та користувацькі форми, що дозволяє наближати вигнуті зони. Хоча Recharts не має таких широких налаштувань, як D3.js, він все ще є сильним варіантом для обробки базових діаграм розсіювання, особливо коли ключовими факторами є простота використання та читабельність.

Нарешті, для тих, хто хоче отримати максимальну продуктивність і швидкість відтворення, CanvasJS це хороший варіант. CanvasJS є легким і фокусується на використанні полотна HTML5 для малювання. Він може ефективно обробляти великі набори даних і підтримує оновлення в реальному часі, що робить його хорошим додатком для програм, які потребують високої продуктивності. Хоча йому може не вистачати гнучкості D3.js, CanvasJS ідеально підходить для додатків, які вимагають швидкого рендерингу та чутливості, наприклад для панелей моніторингу.