JavaScript-alapú szórási diagram görbe zónákkal a Reactban

Dinamikus szórási diagram készítése hőmérséklet- és páratartalomadatokkal

Az adatpontok hatékony megjelenítése kritikus fontosságú, ha több változóval van dolgunk. Ebben a forgatókönyvben cselszövés hőmérséklet és nedvesség szórványképen értékes betekintést nyújthat. A szórásdiagram segít megjeleníteni az e változók közötti összefüggéseket és mintákat, különösen az idő múlásával.

Az egyszerű diagramon túl érdemes speciális zónákat létrehozni, amelyek egy görbe alapján választják el a grafikon régióit. Ez összetettebbé teszi a diagramot, és részletesebb elemzést tesz lehetővé, például különböző hőmérsékleti tartományokban különböző páratartalommal rendelkező területek meghatározását. Ez kihívást jelenthet, különösen, ha a zónák görbéken alapulnak.

Szerencsére sok könyvtár áll rendelkezésre Reagál és egyszerű JavaScript, amely segíthet ezen adatpontok ábrázolásában és ívelt zónák hozzáadásával. A megfelelő eszközök használatával egyszerűen létrehozhat egy szóródási diagramot egyéni zónákkal a jobb adatelemzés érdekében. Ezek az eszközök rugalmasságot és pontosságot tesznek lehetővé a nemlineáris kapcsolatok feltérképezésében.

Ebben a cikkben megvizsgáljuk, hogyan gyűjthetünk adatpontokat, és hogyan használhatunk népszerű JavaScript- és React-könyvtárakat görbe zónákkal rendelkező szóródási diagramok rajzolásához. A megfelelő beállítással hatékonyan leképezheti a hőmérsékleti és páratartalmi adatokat egy diagramra.

Az íves zónákkal rendelkező szórásdiagram megvalósításának megértése a React-ban

A szkriptek első példája használja Reagál az erősekkel kombinálva D3.js könyvtárat görbe zónákkal rendelkező szóródiagram létrehozásához. A szórásdiagram a hőmérsékletet az x tengelyre, a páratartalmat pedig az y tengelyre képezi le, segítve ezzel a két változó közötti kapcsolat megjelenítését. Az adatpontokat körök ábrázolják, amelyeket a D3 "enter()" és "append()" metódusokkal ábrázolnak, amelyek biztosítják, hogy minden adatpont hozzáadásra kerüljön a DOM-hoz. A megvalósítás kulcsfontosságú szempontja a lineáris skálák használata a "scaleLinear()" funkcióval, amely leképezi a hőmérsékleti és páratartalmi értékeket az SVG-n belüli pixelpozíciókra, lehetővé téve a pontok helyes elhelyezését a diagramon.

Az adatpontok ábrázolásán kívül a szkript görbe zónákat rajzol egy vonalgenerátor (`d3.line()`) segítségével. Ez a parancs olyan útvonalakat hoz létre, amelyek görbéket reprezentálnak a megadott pontok között, lehetővé téve a nemlineáris zónák rajzolását a szóródiagramon. Ebben az esetben a "curve(d3.curveNatural)" sima, természetesnek tűnő görbék létrehozása a hőmérséklet és a páratartalom között. Ezek a görbék kritikusak a szóródási diagram különböző zónáinak meghatározásához, amelyek adott régiókat vagy érdeklődési tartományokat képviselhetnek, például egy kényelmes vagy veszélyes páratartalom-tartományt a hőmérséklet alapján.

A második példa kihasználja Chart.js a Reactban, egy egyszerűbb, de hatékony könyvtárban a diagramok megjelenítéséhez. A Chart.js "Scatter" komponense a hőmérsékleti és páratartalom adatpontok ábrázolására szolgál. Bár a Chart.js nem olyan rugalmas, mint a D3.js az egyéni vizualizációk létrehozásához, intuitív beállítást kínál a szórt diagramokhoz. A kulcsfontosságú funkció itt az "annotation" beépülő modul, amely lehetővé teszi alakzatok, vonalak vagy régiók rajzolását a diagramon. Ezt a beépülő modult az ívelt zónák közelítésére használják úgy, hogy egyenes vonalakat húznak a szóródiagram szakaszain, vizuális felosztást hozva létre az érdeklődési területek között. Bár az íves zónákat egyenes vonalakkal közelítjük meg, ez a módszer egyszerű, és gyors módot biztosít a zónák szóródási diagramon való megjelenítésére.

Mindkét módszer fontos gyakorlatokat tartalmaz, mint például az adatok méretezését a `scaleLinear()' használatával a D3.js-ban, és a beépített beállításokat a Chart.js-ben a diagram méretarányának testreszabásához. Ezeket a megközelítéseket a rugalmasságra tervezték, lehetővé téve a fejlesztők számára, hogy módosítsák és kiterjesszék őket a különböző használati esetekre. Míg a D3.js nagyobb vezérlést és pontosságot kínál a görbék és zónák rajzolásához, a Chart.js gyorsabb beállítást biztosít az alapvető szórványdiagramokhoz, bizonyos szintű testreszabással olyan bővítményeken keresztül, mint az "annotation". Mindkét szkript moduláris és újrafelhasználható, rugalmasságot kínálva a React alkalmazásokban ívelt zónákkal rendelkező interaktív szóródási diagramok létrehozásában.

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;

Alternatív könyvtárak felfedezése szórványdiagram létrehozásához a Reactban

Ráadásul D3.js és Chart.js, vannak más robusztus könyvtárak, amelyek képesek kezelni a szórt diagramok létrehozását Reagál. Az egyik ilyen lehetőség a Plotly, egy diagramkönyvtár, amely rugalmasságot és egyszerű használatot kínál. A Plotly lehetővé teszi az interaktív ábrázolásokat, beleértve a szórt diagramokat is, ahol nem csak adatokat ábrázolhat, hanem íves zónákat is hozzáadhat megjegyzésekkel vagy alakrajzi képességekkel. A Plotly beépített támogatással érkezik a reszponzív tervezéshez, így alkalmas olyan webes alkalmazásokhoz, amelyeknek a különböző képernyőméretekhez kell igazodniuk.

Egy másik alternatíva a használata Újradiagramok, egy kifejezetten a React alkalmazásokhoz tervezett könyvtár. A Recharts egyszerűbb API-t biztosít a D3.js-hez képest, és nagyszerű választás azoknak a fejlesztőknek, akik gyors eredményeket szeretnének elérni minimális konfigurációval. Támogatja a szóródási diagramokat és az egyéni alakzatokat, lehetővé téve az íves zónák közelítését. Bár a Recharts nem rendelkezik a D3.js széleskörű testreszabásával, továbbra is erős lehetőség az alapvető szórványdiagramok kezelésére, különösen akkor, ha a könnyű használhatóság és az olvashatóság kulcsfontosságú szempont.

Végül azoknak, akik maximális teljesítményre és renderelési sebességre vágynak, CanvasJS jó lehetőség. A CanvasJS könnyű, és a HTML5 vászon rajzoláshoz való használatára összpontosít. Hatékonyan képes kezelni a nagy adatkészleteket, és támogatja a valós idejű frissítéseket, így jól illeszkedik a nagy teljesítményt igénylő alkalmazásokhoz. Bár előfordulhat, hogy hiányzik belőle a D3.js-ben található rugalmasság, a CanvasJS tökéletes olyan alkalmazásokhoz, amelyek gyors megjelenítést és reakciókészséget igényelnek, például az irányítópultok figyeléséhez.