JavaScript-baserad spridningsplot med krökta zoner i React

Bygga en dynamisk spridningsplot med temperatur- och luftfuktighetsdata

Att visualisera datapunkter effektivt är avgörande när du har att göra med flera variabler. I det här scenariot, plottning temperatur och fuktighet på en scatterplot kan ge värdefulla insikter. Ett spridningsdiagram hjälper till att representera korrelationer och mönster mellan dessa variabler, särskilt över tid.

Utöver bara en enkel plot, kanske du vill skapa specialiserade zoner som separerar områden i grafen baserat på en kurva. Detta lägger till ett lager av komplexitet till ditt diagram, vilket ger mer detaljerad analys, som att definiera områden med olika luftfuktighetsnivåer över temperaturområden. Detta kan vara utmanande, speciellt om zonerna är baserade på kurvor.

Tack och lov finns det många bibliotek tillgängliga för Reagera och vanlig JavaScript som kan hjälpa till att plotta dessa datapunkter och lägga till böjda zoner. Genom att använda rätt verktyg kan du enkelt generera ett spridningsdiagram med anpassade zoner för bättre dataanalys. Dessa verktyg möjliggör flexibilitet och precision vid kartläggning av icke-linjära samband.

I den här artikeln kommer vi att utforska hur man samlar in datapunkter och använder populära JavaScript- och React-bibliotek för att rita punktdiagram med böjda zoner. Med rätt inställning kommer du att kunna kartlägga dina temperatur- och luftfuktighetsdata till ett diagram på ett effektivt sätt.

Förstå implementeringen av spridningsdiagram med krökta zoner i React

Det första exemplet i skripten använder Reagera i kombination med det kraftfulla D3.js bibliotek för att skapa en punktdiagram med böjda zoner. Spridningsdiagrammet kartlägger temperatur till x-axeln och fuktighet till y-axeln, vilket hjälper till att visualisera förhållandet mellan dessa två variabler. Datapunkterna representeras av cirklar, plottade med D3-metoderna `enter()` och `append()`, som säkerställer att varje datapunkt läggs till i DOM. En avgörande aspekt av implementeringen är användningen av linjära skalor med `scaleLinear()`, som mappar temperatur- och fuktighetsvärden till pixelpositioner inom SVG, vilket gör att punkterna kan placeras korrekt på diagrammet.

Förutom att plotta datapunkter, ritar skriptet krökta zoner med hjälp av en linjegenerator (`d3.line()`). Det här kommandot skapar banor som representerar kurvor mellan specificerade punkter, vilket gör att icke-linjära zoner kan ritas över spridningsdiagrammet. I det här fallet används "curve(d3.curveNatural)" för att skapa jämna kurvor med naturligt utseende mellan temperatur- och luftfuktighetsvärden. Dessa kurvor är kritiska för att definiera olika zoner i spridningsdiagrammet, som kan representera specifika områden eller områden av intresse, till exempel ett bekvämt eller farligt luftfuktighetsområde baserat på temperaturen.

Det andra exemplet utnyttjar Chart.js i React, ett enklare men effektivt bibliotek för diagramrendering. Chart.js `Scatter`-komponenten används för att plotta temperatur- och luftfuktighetsdatapunkter. Även om Chart.js inte är lika flexibel som D3.js för att skapa anpassade visualiseringar, erbjuder den en intuitiv inställning för spridningsdiagram. En nyckelfunktion här är "annotation"-plugin, som tillåter att rita former, linjer eller regioner på diagrammet. Denna plugin används för att approximera de böjda zonerna genom att rita raka linjer över sektioner av spridningsdiagrammet, vilket skapar visuella uppdelningar mellan de intressanta områdena. Även om de böjda zonerna approximeras med raka linjer, är den här metoden enkel och ger ett snabbt sätt att visualisera zoner i ett spridningsdiagram.

Båda metoderna innehåller viktiga metoder, som att skala data med `scaleLinear()` i D3.js och använda inbyggda alternativ för att anpassa diagramskalor i Chart.js. Dessa tillvägagångssätt är designade för flexibilitet, vilket gör att utvecklare kan modifiera och utöka dem för olika användningsfall. Medan D3.js erbjuder mer kontroll och precision för att rita kurvor och zoner, ger Chart.js en snabbare inställning för grundläggande spridningsdiagram med en viss nivå av anpassning genom plugins som "annotation". Båda skripten är modulära och återanvändbara, vilket erbjuder flexibilitet när det gäller att bygga interaktiva spridningsdiagram med böjda zoner i React-applikationer.

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;

Utforska alternativa bibliotek för att skapa scatterplots i React

Förutom D3.js och Chart.js, det finns andra robusta bibliotek som kan hantera scatterplotskapande i Reagera. Ett sådant alternativ är Plotly, ett kartbibliotek som erbjuder både flexibilitet och användarvänlighet. Plotly tillåter interaktiva plotter, inklusive scatterplots, där du inte bara kan plotta data utan även lägga till krökta zoner med hjälp av anteckningar eller formritningsfunktioner. Plotly kommer med inbyggt stöd för responsiv design, vilket gör den lämplig för webbapplikationer som behöver anpassa sig för olika skärmstorlekar.

Ett annat alternativ är användningen av Recharts, ett bibliotek speciellt designat för React-applikationer. Recharts ger ett enklare API jämfört med D3.js och är ett utmärkt val för utvecklare som vill ha snabba resultat med minimal konfiguration. Den stöder spridningsdiagram och anpassade former, vilket gör det möjligt att approximera böjda zoner. Även om Recharts inte har den omfattande anpassningen av D3.js, är det fortfarande ett starkt alternativ för att hantera grundläggande spridningsdiagram, särskilt när användarvänlighet och läsbarhet är viktiga faktorer.

Slutligen, för de som vill ha maximal prestanda och renderingshastighet, CanvasJS är ett bra alternativ. CanvasJS är lätt och fokuserar på att använda HTML5-duken för att rita. Den kan hantera stora datamängder effektivt och stöder realtidsuppdateringar, vilket gör den till en bra passform för applikationer som kräver hög prestanda. Även om det kanske saknar en del av den flexibilitet som finns i D3.js, är CanvasJS perfekt för applikationer som kräver snabb rendering och lyhördhet, såsom övervakning av instrumentpaneler.