JavaScripti-põhine hajuvusdiagramm kõverate tsoonidega Reactis

Temperatuuri ja niiskuse andmetega dünaamilise hajumisgraafiku koostamine

Andmepunktide tõhus visualiseerimine on kriitilise tähtsusega, kui tegelete mitme muutujaga. Selle stsenaariumi korral süžee temperatuuri ja niiskus hajusdiagramm võib anda väärtuslikke teadmisi. Hajumisdiagramm aitab kujutada nende muutujate vahelisi korrelatsioone ja mustreid, eriti aja jooksul.

Lisaks lihtsale joonisele võiksite luua spetsiaalseid tsoone, mis eraldavad graafiku piirkonnad kõvera alusel. See muudab teie diagrammi keerukamaks, pakkudes üksikasjalikumat analüüsi, näiteks määratledes temperatuurivahemikus erineva niiskustasemega alad. See võib olla keeruline, eriti kui tsoonid põhinevad kõveratel.

Õnneks on saadaval palju raamatukogusid Reageerige ja tavaline JavaScript, mis aitab neid andmepunkte joonistada ja kõveraid tsoone lisada. Õigeid tööriistu kasutades saate hõlpsasti luua kohandatud tsoonidega hajuvusdiagrammi andmete paremaks analüüsimiseks. Need tööriistad võimaldavad mittelineaarsete seoste kaardistamisel paindlikkust ja täpsust.

Selles artiklis uurime, kuidas koguda andmepunkte ning kasutada populaarseid JavaScripti ja Reacti teeke, et joonistada kõverate tsoonidega hajuvusgraafikuid. Õige seadistuse korral saate oma temperatuuri ja niiskuse andmed tõhusalt diagrammile kaardistada.

Reactis kõverate tsoonidega hajuvusdiagrammi rakendamise mõistmine

Skriptide esimene näide kasutab Reageerige kombinatsioonis võimsaga D3.js raamatukogu, et luua kõverate tsoonidega hajuvusdiagramm. Hajumisdiagramm kaardistab temperatuuri x-teljega ja niiskuse y-teljega, aidates visualiseerida nende kahe muutuja vahelist seost. Andmepunkte kujutavad ringid, mis on joonistatud D3 meetodi "enter()" ja "apend()" abil, mis tagavad, et iga andmepunkt lisatakse DOM-i. Rakenduse oluliseks aspektiks on lineaarsete skaalade kasutamine funktsiooniga "scaleLinear()", mis kaardistab temperatuuri ja niiskuse väärtused pikslite positsioonidele SVG-s, võimaldades punkte graafikul õigesti paigutada.

Lisaks andmepunktide joonistamisele joonistab skript joongeneraatori (`d3.line()`) abil kõveraid tsoone. See käsk loob rajad, mis kujutavad kõveraid määratud punktide vahel, võimaldades hajuvusdiagrammi peale tõmmata mittelineaarseid tsoone. Sel juhul rakendatakse kõverat „curve(d3.curveNatural)”, et luua sujuvad ja loomulikud kõverad temperatuuri ja niiskuse väärtuste vahel. Need kõverad on kriitilise tähtsusega hajuvusdiagrammi erinevate tsoonide määratlemisel, mis võivad kujutada konkreetseid huvipakkuvaid piirkondi või vahemikke, näiteks mugavat või ohtlikku temperatuurivahemikku.

Teine näide võimendab Chart.js Reactis, mis on lihtsam, kuid tõhus diagrammide renderdamise teegi. Chart.js'i "Scatter" komponenti kasutatakse temperatuuri ja niiskuse andmepunktide joonistamiseks. Kuigi Chart.js ei ole kohandatud visualiseerimiste loomiseks nii paindlik kui D3.js, pakub see hajusdiagrammide jaoks intuitiivset seadistust. Siin on võtmefunktsiooniks annotatsiooni plugin, mis võimaldab joonistada diagrammile kujundeid, jooni või piirkondi. Seda pistikprogrammi kasutatakse kõverate tsoonide ligikaudseks määramiseks, tõmmates hajuvusdiagrammi lõikudele sirgeid jooni, luues huvipakkuvate alade vahel visuaalseid jaotusi. Kuigi kõverad tsoonid on ligikaudsed sirgjoontega, on see meetod lihtne ja võimaldab kiirelt tsoone hajuvusdiagrammil visualiseerida.

Mõlemad meetodid hõlmavad olulisi tavasid, nagu andmete skaleerimine failis D3.js funktsiooni `scaleLinear() abil ja sisseehitatud suvandite kasutamine diagrammi skaala kohandamiseks rakenduses Chart.js. Need lähenemisviisid on loodud paindlikuks, võimaldades arendajatel neid erinevatel kasutusjuhtudel muuta ja laiendada. Kui D3.js pakub kõverate ja tsoonide joonistamiseks suuremat juhtimist ja täpsust, siis Chart.js pakub kiiremat seadistamist põhiliste hajuvusdiagrammide jaoks koos teatud tasemega kohandamisega pistikprogrammide, nagu "annotatsioon" kaudu. Mõlemad skriptid on modulaarsed ja korduvkasutatavad, pakkudes paindlikkust kõverate tsoonidega interaktiivsete hajuvusgraafikute koostamisel Reacti rakendustes.

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;

Alternatiivsete raamatukogude uurimine hajusdiagrammi loomiseks Reactis

Lisaks sellele D3.js ja Chart.js, on ka teisi tugevaid teeke, mis saavad hakkama hajusdiagrammide loomisega Reageerige. Üks selline võimalus on Plotly, graafikuteek, mis pakub nii paindlikkust kui ka kasutuslihtsust. Plotly võimaldab interaktiivseid graafikuid, sealhulgas hajutatud graafikuid, kus saate lisaks andmete joonistamisele lisada ka kõveraid tsoone, kasutades annotatsioone või kujundi joonistamise võimalusi. Plotlyl on tundliku disaini sisseehitatud tugi, mistõttu see sobib veebirakendustele, mis peavad kohanema erinevate ekraanisuurustega.

Teine võimalus on kasutada Taaskaardid, spetsiaalselt Reacti rakenduste jaoks loodud raamatukogu. Recharts pakub D3.js-iga võrreldes lihtsamat API-d ja on suurepärane valik arendajatele, kes soovivad minimaalse konfiguratsiooniga kiireid tulemusi. See toetab hajutatud graafikuid ja kohandatud kujundeid, mis võimaldab ligikaudselt hinnata kõveraid tsoone. Kuigi Rechartsil pole D3.js laialdast kohandamist, on see siiski hea võimalus põhiliste hajuvusgraafikute käsitlemiseks, eriti kui kasutusmugavus ja loetavus on võtmetähtsusega kaalutlused.

Lõpuks neile, kes soovivad maksimaalset jõudlust ja renderduskiirust, CanvasJS on hea variant. CanvasJS on kerge ja keskendub HTML5 lõuendi kasutamisele joonistamiseks. See suudab tõhusalt käsitleda suuri andmekogumeid ja toetab reaalajas värskendusi, mistõttu sobib see hästi rakendustele, mis nõuavad suurt jõudlust. Kuigi sellel võib puududa D3.js-i paindlikkus, sobib CanvasJS suurepäraselt rakenduste jaoks, mis nõuavad kiiret renderdamist ja reageerimisvõimet, näiteks armatuurlaudade jälgimiseks.