JavaScript-pohjainen hajontakaavio kaarevilla vyöhykkeillä Reactissa

Dynaamisen hajontakäyrän luominen lämpötila- ja kosteustiedoilla

Datapisteiden tehokas visualisointi on erittäin tärkeää, kun käsittelet useita muuttujia. Tässä skenaariossa juoni lämpötila ja kosteus hajakuvaajalla voi tarjota arvokkaita oivalluksia. Sirontadiagrammi auttaa edustamaan näiden muuttujien välisiä korrelaatioita ja kuvioita, erityisesti ajan mittaan.

Pelkän kaavion lisäksi saatat haluta luoda erikoisalueita, jotka erottavat kaavion alueet käyrän perusteella. Tämä lisää kaavioon monimutkaisuutta ja tarjoaa yksityiskohtaisemman analyysin, kuten erilaisten kosteustasojen alueiden määrittämisen lämpötila-alueilla. Tämä voi olla haastavaa, varsinkin jos vyöhykkeet perustuvat käyriin.

Onneksi tarjolla on monia kirjastoja Reagoi ja tavallinen JavaScript, joka voi auttaa piirtämään nämä datapisteet ja lisäämään kaarevia vyöhykkeitä. Käyttämällä oikeita työkaluja voit helposti luoda hajontakaavion mukautetuilla vyöhykkeillä parantaaksesi tietojen analysointia. Nämä työkalut mahdollistavat joustavuuden ja tarkkuuden epälineaaristen suhteiden kartoittamisessa.

Tässä artikkelissa tutkimme, kuinka kerätä tietopisteitä ja käyttää suosittuja JavaScript- ja React-kirjastoja piirtämään sirontakaavioita kaarevilla vyöhykkeillä. Oikealla asetuksella voit kartoittaa lämpötila- ja kosteustietosi kaavioon tehokkaasti.

Kaarevien vyöhykkeiden hajontakaavion toteutuksen ymmärtäminen Reactissa

Skriptien ensimmäinen esimerkki käyttää Reagoi yhdessä voimakkaiden kanssa D3.js kirjasto luodaksesi hajontakaavion kaarevilla vyöhykkeillä. Sirontakaavio kartoittaa lämpötilan x-akselille ja kosteuden y-akselille, mikä auttaa visualisoimaan näiden kahden muuttujan välisen suhteen. Datapisteet esitetään ympyröillä, jotka on piirretty D3-menetelmillä "enter()" ja "append()", jotka varmistavat, että jokainen datapiste lisätään DOM:iin. Tärkeä näkökohta toteutuksessa on lineaaristen asteikkojen käyttö "scaleLinear()" -toiminnolla, joka kartoittaa lämpötila- ja kosteusarvot pikselipaikkoihin SVG:ssä, jolloin pisteet voidaan sijoittaa oikein kaavioon.

Datapisteiden piirtämisen lisäksi komentosarja piirtää kaarevia vyöhykkeitä viivageneraattorilla (`d3.line()`). Tämä komento luo polkuja, jotka edustavat tiettyjen pisteiden välisiä käyriä, mikä mahdollistaa epälineaaristen vyöhykkeiden piirtämisen sirontakuvaajan päälle. Tässä tapauksessa käyrä(d3.curveNatural) luodaan tasaiset, luonnollisen näköiset käyrät lämpötila- ja kosteusarvojen välille. Nämä käyrät ovat kriittisiä eri vyöhykkeiden määrittämisessä sirontakaaviossa, jotka voivat edustaa tiettyjä alueita tai kiinnostavia alueita, kuten mukavaa tai vaarallista kosteusaluetta lämpötilan perusteella.

Toinen esimerkki hyödyntää Chart.js Reactissa, yksinkertaisemmassa mutta tehokkaassa kirjastossa kaavioiden hahmontamiseen. Chart.js:n "Scatter"-komponenttia käytetään lämpötila- ja kosteustietopisteiden kuvaamiseen. Vaikka Chart.js ei ole yhtä joustava kuin D3.js mukautettujen visualisointien luomiseen, se tarjoaa intuitiivisen asennuksen sirontakaavioille. Tärkeä ominaisuus tässä on "merkintä"-laajennus, joka mahdollistaa muotojen, viivojen tai alueiden piirtämisen kaavioon. Tätä laajennusta käytetään kaarevien vyöhykkeiden lähentämiseen piirtämällä suoria viivoja sirontakaavion osien poikki, mikä luo visuaalisia jakoja kiinnostavien alueiden välille. Vaikka kaarevat vyöhykkeet on arvioitu suorilla viivoilla, tämä menetelmä on suoraviivainen ja tarjoaa nopean tavan visualisoida vyöhykkeet sirontakaaviossa.

Molemmissa menetelmissä on tärkeitä käytäntöjä, kuten tietojen skaalaus käyttämällä D3.js:n `scaleLinear()-komentoa ja Chart.js:n kaavion mittakaavan mukauttamista koskevia sisäänrakennettuja vaihtoehtoja. Nämä lähestymistavat on suunniteltu joustaviksi, joten kehittäjät voivat muokata ja laajentaa niitä erilaisiin käyttötapauksiin. D3.js tarjoaa paremman hallinnan ja tarkkuuden käyrien ja vyöhykkeiden piirtämiseen, kun taas Chart.js tarjoaa nopeamman asennuksen perussirontakaavioille jossain määrin mukautetuilla laajennuksilla, kuten "annotation". Molemmat skriptit ovat modulaarisia ja uudelleenkäytettäviä, mikä tarjoaa joustavuutta interaktiivisten sirontakaavioiden rakentamisessa kaarevilla vyöhykkeillä React-sovelluksissa.

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;

Vaihtoehtoisten kirjastojen tutkiminen sirontakuvaajan luomiseen Reactissa

Lisäksi D3.js ja Chart.js, on muitakin vankkoja kirjastoja, jotka pystyvät luomaan sirontadiagrammia Reagoi. Yksi tällainen vaihtoehto on Plotly, kaaviokirjasto, joka tarjoaa sekä joustavuutta että helppokäyttöisyyttä. Plotly mahdollistaa interaktiiviset kaaviot, mukaan lukien sirontakuvaajat, joissa voit paitsi piirtää tietoja myös lisätä kaarevia vyöhykkeitä käyttämällä huomautuksia tai muotopiirustusominaisuuksia. Plotlyssa on sisäänrakennettu tuki responsiiviselle suunnittelulle, mikä tekee siitä sopivan verkkosovelluksille, joiden on mukautettava eri näyttökokoja.

Toinen vaihtoehto on käyttää Rechartskirjasto, joka on erityisesti suunniteltu React-sovelluksiin. Recharts tarjoaa yksinkertaisemman sovellusliittymän verrattuna D3.js:ään ja on loistava valinta kehittäjille, jotka haluavat nopeita tuloksia minimaalisella kokoonpanolla. Se tukee sirontakuvioita ja mukautettuja muotoja, mikä mahdollistaa kaarevien vyöhykkeiden lähentämisen. Vaikka Rechartsissa ei ole D3.js:n laajaa räätälöintiä, se on silti vahva vaihtoehto perussirontakaavioiden käsittelyyn, varsinkin kun helppokäyttöisyys ja luettavuus ovat tärkeitä näkökohtia.

Lopuksi, niille, jotka haluavat maksimaalista suorituskykyä ja renderöintinopeutta, CanvasJS on hyvä vaihtoehto. CanvasJS on kevyt ja keskittyy HTML5-kankaan käyttöön piirtämiseen. Se pystyy käsittelemään suuria tietojoukkoja tehokkaasti ja tukee reaaliaikaisia ​​päivityksiä, joten se sopii hyvin sovelluksiin, jotka vaativat korkeaa suorituskykyä. Vaikka siitä saattaa puuttua D3.js:n joustavuus, CanvasJS sopii täydellisesti sovelluksiin, jotka vaativat nopeaa renderöintiä ja reagointikykyä, kuten kojetaulujen valvontaan.