Rozptylový graf založený na JavaScriptu se zakřivenými zónami v Reactu

Vytvoření dynamického bodového grafu s údaji o teplotě a vlhkosti

Efektivní vizualizace datových bodů je rozhodující, když pracujete s více proměnnými. V tomto scénáři vykreslování teplota a vlhkost na bodovém grafu může poskytnout cenné poznatky. Bodový graf pomáhá reprezentovat korelace a vzory mezi těmito proměnnými, zejména v čase.

Kromě jednoduchého grafu můžete chtít vytvořit specializované zóny, které oddělují oblasti grafu na základě křivky. To vašemu diagramu přidává vrstvu složitosti a poskytuje podrobnější analýzu, jako je definování oblastí s různými úrovněmi vlhkosti v různých teplotních rozsazích. To může být náročné, zvláště pokud jsou zóny založeny na křivkách.

Naštěstí existuje mnoho dostupných knihoven Reagovat a prostý JavaScript, který může pomoci vykreslit tyto datové body a přidat zakřivené zóny. Pomocí správných nástrojů můžete snadno vygenerovat bodový graf s vlastními zónami pro lepší analýzu dat. Tyto nástroje umožňují flexibilitu a přesnost při mapování nelineárních vztahů.

V tomto článku prozkoumáme, jak sbírat datové body a používat oblíbené knihovny JavaScript a React k kreslení bodových grafů se zakřivenými zónami. Se správným nastavením budete moci efektivně mapovat údaje o teplotě a vlhkosti do diagramu.

Pochopení implementace bodového grafu se zakřivenými zónami v Reactu

První příklad ve skriptech využívá Reagovat v kombinaci s mocnými D3.js knihovny pro vytvoření bodového grafu se zakřivenými zónami. Bodový graf mapuje teplotu k ose x a vlhkost k ose y, což pomáhá vizualizovat vztah mezi těmito dvěma proměnnými. Datové body jsou reprezentovány kruhy vykreslenými pomocí metod D3 `enter()` a `append()`, které zajišťují, že každý datový bod bude přidán do DOM. Klíčovým aspektem implementace je použití lineárních měřítek s `scaleLinear()`, která mapuje hodnoty teploty a vlhkosti na pozice pixelů v SVG, což umožňuje správné umístění bodů v grafu.

Kromě vykreslování datových bodů skript kreslí zakřivené zóny pomocí generátoru čar (`d3.line()`). Tento příkaz vytváří cesty, které představují křivky mezi určenými body, což umožňuje vykreslování nelineárních zón přes bodový graf. V tomto případě se použije `curve(d3.curveNatural)` k vytvoření hladkých, přirozeně vypadajících křivek mezi hodnotami teploty a vlhkosti. Tyto křivky jsou kritické pro definování různých zón v bodovém grafu, které mohou představovat specifické oblasti nebo rozsahy zájmu, jako je pohodlný nebo nebezpečný rozsah vlhkosti na základě teploty.

Druhý příklad využívá Chart.js v Reactu, jednodušší, ale efektivní knihovně pro vykreslování grafů. Komponenta Chart.js `Scatter` se používá k vykreslení datových bodů teploty a vlhkosti. Zatímco Chart.js není tak flexibilní jako D3.js pro vytváření vlastních vizualizací, nabízí intuitivní nastavení pro bodové grafy. Klíčovou funkcí je zde plugin `anotace`, který umožňuje kreslení tvarů, čar nebo oblastí do grafu. Tento plugin se používá k aproximaci zakřivených zón nakreslením rovných čar přes části bodového grafu, čímž se vytvoří vizuální rozdělení mezi oblastmi zájmu. Ačkoli jsou zakřivené zóny aproximovány rovnými čarami, je tato metoda přímočará a poskytuje rychlý způsob vizualizace zón v bodovém grafu.

Obě metody zahrnují důležité postupy, jako je škálování dat pomocí `scaleLinear()` v D3.js a využití vestavěných možností pro přizpůsobení měřítek grafu v Chart.js. Tyto přístupy jsou navrženy pro flexibilitu a umožňují vývojářům je upravovat a rozšiřovat pro různé případy použití. Zatímco D3.js nabízí větší kontrolu a přesnost pro kreslení křivek a zón, Chart.js poskytuje rychlejší nastavení pro základní bodové grafy s určitou úrovní přizpůsobení prostřednictvím pluginů, jako je „anotace“. Oba skripty jsou modulární a opakovaně použitelné a nabízejí flexibilitu při vytváření interaktivních bodových grafů se zakřivenými zónami v aplikacích 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;

Prozkoumání alternativních knihoven pro vytváření rozptylových grafů v Reactu

Kromě toho D3.js a Chart.js, existují další robustní knihovny, které zvládnou vytváření bodových grafů v Reagovat. Jednou z takových možností je Plotly, knihovna grafů, která nabízí flexibilitu a snadné použití. Plotly umožňuje interaktivní grafy, včetně bodových grafů, kde můžete nejen vykreslovat data, ale také přidávat zakřivené zóny pomocí anotací nebo možností kreslení tvarů. Plotly přichází s vestavěnou podporou pro responzivní design, díky čemuž je vhodný pro webové aplikace, které se potřebují přizpůsobit různým velikostem obrazovky.

Další alternativou je použití Recharts, knihovna speciálně navržená pro aplikace React. Recharts poskytuje jednodušší API ve srovnání s D3.js a je skvělou volbou pro vývojáře, kteří chtějí rychlé výsledky s minimální konfigurací. Podporuje bodové grafy a vlastní tvary, což umožňuje aproximovat zakřivené zóny. Přestože Recharts nemá rozsáhlé přizpůsobení D3.js, stále je to dobrá volba pro práci se základními rozptylovými grafy, zvláště když jsou klíčovými faktory snadné použití a čitelnost.

A konečně pro ty, kteří chtějí maximální výkon a rychlost vykreslování, CanvasJS je dobrá volba. CanvasJS je lehký a zaměřuje se na použití HTML5 canvas pro kreslení. Dokáže efektivně zpracovávat velké datové sady a podporuje aktualizace v reálném čase, takže se dobře hodí pro aplikace, které vyžadují vysoký výkon. I když může postrádat určitou flexibilitu, kterou nabízí D3.js, CanvasJS je ideální pro aplikace, které vyžadují rychlé vykreslování a odezvu, jako jsou monitorovací panely.