Grafic de dispersie bazat pe JavaScript cu zone curbate în React

Construirea unui diagramă de dispersie dinamică cu date de temperatură și umiditate

Vizualizarea eficientă a punctelor de date este esențială atunci când aveți de-a face cu mai multe variabile. În acest scenariu, complot temperatură şi umiditate pe o diagramă de dispersie poate oferi informații valoroase. Un grafic de dispersie ajută la reprezentarea corelațiilor și modelelor dintre aceste variabile, în special în timp.

Dincolo de un simplu grafic, este posibil să doriți să creați zone specializate care să separe regiunile graficului pe baza unei curbe. Acest lucru adaugă un strat de complexitate diagramei dvs., oferind o analiză mai detaliată, cum ar fi definirea zonelor cu diferite niveluri de umiditate în intervalele de temperatură. Acest lucru poate fi o provocare, mai ales dacă zonele se bazează pe curbe.

Din fericire, există multe biblioteci disponibile pentru Reacţiona și JavaScript simplu care poate ajuta la trasarea acestor puncte de date și la adăugarea de zone curbe. Folosind instrumentele potrivite, puteți genera cu ușurință un grafic de dispersie cu zone personalizate pentru o mai bună analiză a datelor. Aceste instrumente permit flexibilitate și precizie în maparea relațiilor neliniare.

În acest articol, vom explora cum să colectăm puncte de date și să folosim bibliotecile populare JavaScript și React pentru a desena diagrame de dispersie cu zone curbe. Cu configurația corectă, veți putea să vă mapați datele de temperatură și umiditate într-o diagramă în mod eficient.

Înțelegerea implementării diagramei de dispersie cu zone curbe în React

Primul exemplu din scripturi utilizează Reacţiona în combinaţie cu cei puternici D3.js bibliotecă pentru a crea un grafic de dispersie cu zone curbe. Graficul de împrăștiere mapează temperatura pe axa x și umiditatea pe axa y, ajutând la vizualizarea relației dintre aceste două variabile. Punctele de date sunt reprezentate prin cercuri, reprezentate grafic folosind metodele D3 `enter()` și `append()`, care asigură că fiecare punct de date este adăugat la DOM. Un aspect crucial al implementării este utilizarea scărilor liniare cu `scaleLinear()`, care mapează valorile de temperatură și umiditate la pozițiile pixelilor din SVG, permițând poziționarea corectă a punctelor pe diagramă.

Pe lângă trasarea punctelor de date, scriptul desenează zone curbe folosind un generator de linii (`d3.line()`). Această comandă creează trasee care reprezintă curbe între punctele specificate, permițând trasarea unor zone neliniare peste diagrama de dispersie. În acest caz, `curve(d3.curveNatural)` este aplicat pentru a crea curbe netede, cu aspect natural între valorile de temperatură și umiditate. Aceste curbe sunt esențiale pentru definirea diferitelor zone din diagrama de dispersie, care pot reprezenta anumite regiuni sau intervale de interes, cum ar fi un interval confortabil sau periculos de umiditate bazat pe temperatură.

Al doilea exemplu are efect de pârghie Chart.js în React, o bibliotecă mai simplă, dar eficientă pentru randarea diagramelor. Componenta „Scatter” Chart.js este folosită pentru a reprezenta punctele de date de temperatură și umiditate. În timp ce Chart.js nu este la fel de flexibil ca D3.js pentru crearea de vizualizări personalizate, oferă o configurare intuitivă pentru graficele de dispersie. O caracteristică cheie aici este pluginul „adnotare”, care permite desenarea formelor, liniilor sau regiunilor pe diagramă. Acest plugin este folosit pentru a aproxima zonele curbe prin trasarea de linii drepte pe secțiuni ale diagramei de dispersie, creând diviziuni vizuale între zonele de interes. Deși zonele curbe sunt aproximate cu linii drepte, această metodă este simplă și oferă o modalitate rapidă de a vizualiza zonele într-un diagramă de dispersie.

Ambele metode încorporează practici importante, cum ar fi scalarea datelor folosind `scaleLinear()` în D3.js și utilizarea opțiunilor încorporate pentru personalizarea scalelor diagramelor în Chart.js. Aceste abordări sunt concepute pentru flexibilitate, permițând dezvoltatorilor să le modifice și să le extindă pentru diferite cazuri de utilizare. În timp ce D3.js oferă mai mult control și precizie pentru desenarea curbelor și zonelor, Chart.js oferă o configurare mai rapidă pentru graficele de dispersie de bază cu un anumit nivel de personalizare prin plugin-uri precum „adnotare”. Ambele scripturi sunt modulare și reutilizabile, oferind flexibilitate în construirea de diagrame de dispersie interactive cu zone curbe în aplicațiile 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;

Explorarea bibliotecilor alternative pentru crearea diagramelor de dispersie în React

În plus față de D3.js şi Chart.js, există și alte biblioteci robuste care se pot ocupa de crearea diagramelor de dispersie Reacţiona. O astfel de opțiune este Plotly, o bibliotecă de diagrame care oferă atât flexibilitate, cât și ușurință în utilizare. Plotly permite diagrame interactive, inclusiv diagrame de împrăștiere, în care nu puteți doar să trasați date, ci și să adăugați zone curbe folosind adnotări sau capabilități de desenare a formei. Plotly vine cu suport încorporat pentru design responsive, făcându-l potrivit pentru aplicațiile web care trebuie să se adapteze la diferite dimensiuni de ecran.

O altă alternativă este utilizarea Recarturi, o bibliotecă special concepută pentru aplicațiile React. Recharts oferă un API mai simplu în comparație cu D3.js și este o alegere excelentă pentru dezvoltatorii care doresc rezultate rapide cu o configurație minimă. Acceptă diagrame de dispersie și forme personalizate, făcând posibilă aproximarea zonelor curbe. Deși Recharts nu are personalizarea extinsă a D3.js, este totuși o opțiune puternică pentru gestionarea graficelor de dispersie de bază, mai ales atunci când ușurința în utilizare și lizibilitatea sunt considerații cheie.

În cele din urmă, pentru cei care doresc performanță maximă și viteză de randare, CanvasJS este o opțiune bună. CanvasJS este ușor și se concentrează pe utilizarea pânzei HTML5 pentru desen. Poate gestiona seturi mari de date în mod eficient și acceptă actualizări în timp real, ceea ce îl face potrivit pentru aplicațiile care necesită performanțe ridicate. Deși s-ar putea să îi lipsească o parte din flexibilitatea găsită în D3.js, CanvasJS este perfect pentru aplicațiile care necesită randare rapidă și receptivitate, cum ar fi monitorizarea tablourilor de bord.