Gràfic de dispersió basat en JavaScript amb zones corbes a React

Construcció d'un diagrama de dispersió dinàmic amb dades de temperatura i humitat

Visualitzar els punts de dades de manera eficaç és fonamental quan es tracta de diverses variables. En aquest escenari, trama temperatura i humitat en un diagrama de dispersió pot proporcionar informació valuosa. Un diagrama de dispersió ajuda a representar correlacions i patrons entre aquestes variables, especialment al llarg del temps.

Més enllà d'un simple gràfic, és possible que vulgueu crear zones especialitzades que separin regions del gràfic en funció d'una corba. Això afegeix una capa de complexitat al vostre diagrama, proporcionant una anàlisi més detallada, com ara definir àrees de diferents nivells d'humitat en els intervals de temperatura. Això pot ser un repte, sobretot si les zones es basen en corbes.

Afortunadament, hi ha moltes biblioteques disponibles Reacciona i JavaScript senzill que pot ajudar a traçar aquests punts de dades i afegir zones corbes. Mitjançant les eines adequades, podeu generar fàcilment un diagrama de dispersió amb zones personalitzades per a una millor anàlisi de dades. Aquestes eines permeten flexibilitat i precisió en el mapeig de relacions no lineals.

En aquest article, explorarem com recopilar punts de dades i utilitzar les biblioteques populars de JavaScript i React per dibuixar diagrames de dispersió amb zones corbes. Amb la configuració adequada, podreu mapar les vostres dades de temperatura i humitat a un diagrama de manera eficaç.

Comprensió de la implementació del diagrama de dispersió amb zones corbes a React

El primer exemple dels scripts utilitza Reacciona en combinació amb els poderosos D3.js biblioteca per crear un diagrama de dispersió amb zones corbes. El diagrama de dispersió mapa la temperatura a l'eix x i la humitat a l'eix y, ajudant a visualitzar la relació entre aquestes dues variables. Els punts de dades es representen mitjançant cercles, representats mitjançant els mètodes D3 `enter()` i `append()`, que asseguren que cada punt de dades s'afegeix al DOM. Un aspecte crucial de la implementació és l'ús d'escales lineals amb `scaleLinear()`, que mapeja els valors de temperatura i humitat a posicions de píxels dins de l'SVG, permetent que els punts es col·loquin correctament al gràfic.

A més de traçar punts de dades, l'script dibuixa zones corbes mitjançant un generador de línies (`d3.line()`). Aquesta ordre crea camins que representen corbes entre punts especificats, permetent dibuixar zones no lineals sobre el gràfic de dispersió. En aquest cas, s'aplica "curve(d3.curveNatural)" per crear corbes suaus i d'aspecte natural entre els valors de temperatura i humitat. Aquestes corbes són crítiques per definir diferents zones del gràfic de dispersió, que poden representar regions o intervals d'interès específics, com ara un rang d'humitat còmode o perillós en funció de la temperatura.

El segon exemple aprofita Chart.js a React, una biblioteca més senzilla però eficaç per a la representació de gràfics. El component "Dispersió" de Chart.js s'utilitza per representar punts de dades de temperatura i humitat. Tot i que Chart.js no és tan flexible com D3.js per crear visualitzacions personalitzades, ofereix una configuració intuïtiva per als diagrames de dispersió. Una característica clau aquí és el connector "anotació", que permet dibuixar formes, línies o regions al gràfic. Aquest connector s'utilitza per aproximar les zones corbes dibuixant línies rectes a través de les seccions del diagrama de dispersió, creant divisions visuals entre les àrees d'interès. Tot i que les zones corbes s'aproximen amb línies rectes, aquest mètode és senzill i proporciona una manera ràpida de visualitzar zones en un diagrama de dispersió.

Tots dos mètodes incorporen pràctiques importants, com ara l'escala de dades mitjançant `scaleLinear()' a D3.js i l'ús d'opcions integrades per personalitzar les escales de gràfics a Chart.js. Aquests enfocaments estan dissenyats per a la flexibilitat, permetent als desenvolupadors modificar-los i ampliar-los per a diferents casos d'ús. Tot i que D3.js ofereix més control i precisió per dibuixar corbes i zones, Chart.js ofereix una configuració més ràpida per a gràfics de dispersió bàsics amb cert nivell de personalització mitjançant complements com "anotació". Tots dos scripts són modulars i reutilitzables, oferint flexibilitat a l'hora de crear gràfics de dispersió interactius amb zones corbes a les aplicacions 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;

Explorant biblioteques alternatives per a la creació de diagrames de dispersió a React

A més de D3.js i Chart.js, hi ha altres biblioteques robustes que poden gestionar la creació de diagrames de dispersió Reacciona. Una d'aquestes opcions és Plotly, una biblioteca de gràfics que ofereix flexibilitat i facilitat d'ús. Plotly permet gràfics interactius, inclosos els gràfics de dispersió, on no només podeu traçar dades, sinó també afegir zones corbes mitjançant anotacions o capacitats de dibuix de formes. Plotly inclou suport integrat per al disseny responsiu, el que el fa adequat per a aplicacions web que s'han d'ajustar a diferents mides de pantalla.

Una altra alternativa és l'ús de Recartes, una biblioteca dissenyada específicament per a aplicacions React. Recharts proporciona una API més senzilla en comparació amb D3.js i és una opció fantàstica per als desenvolupadors que volen resultats ràpids amb una configuració mínima. Admet diagrames de dispersió i formes personalitzades, cosa que permet aproximar zones corbes. Tot i que Recharts no té l'extensa personalització de D3.js, encara és una opció sòlida per gestionar els diagrames de dispersió bàsics, especialment quan la facilitat d'ús i la llegibilitat són consideracions clau.

Finalment, per a aquells que volen el màxim rendiment i velocitat de renderització, CanvasJS és una bona opció. CanvasJS és lleuger i se centra a utilitzar el llenç HTML5 per dibuixar. Pot gestionar grans conjunts de dades de manera eficaç i admet actualitzacions en temps real, la qual cosa el fa ideal per a aplicacions que requereixen un alt rendiment. Tot i que pot faltar part de la flexibilitat que es troba a D3.js, CanvasJS és perfecte per a aplicacions que requereixen una representació ràpida i una capacitat de resposta, com ara taulers de control.