Op JavaScript gebaseerd spreidingsdiagram met gebogen zones in React

Een dynamisch spreidingsdiagram bouwen met temperatuur- en vochtigheidsgegevens

Het effectief visualiseren van datapunten is van cruciaal belang als u met meerdere variabelen te maken heeft. In dit scenario: plotten temperatuur En vochtigheid op een spreidingsdiagram kan waardevolle inzichten opleveren. Een spreidingsdiagram helpt correlaties en patronen tussen deze variabelen weer te geven, vooral in de loop van de tijd.

Naast een eenvoudig plot, wilt u misschien ook gespecialiseerde zones maken die gebieden van de grafiek scheiden op basis van een curve. Dit voegt een extra laag complexiteit toe aan uw diagram, waardoor een meer gedetailleerde analyse mogelijk wordt, zoals het definiëren van gebieden met verschillende vochtigheidsniveaus over verschillende temperatuurbereiken. Dit kan een uitdaging zijn, vooral als de zones op curven zijn gebaseerd.

Gelukkig zijn er veel bibliotheken beschikbaar voor Reageren en gewoon JavaScript dat kan helpen deze datapunten in kaart te brengen en gebogen zones toe te voegen. Door de juiste tools te gebruiken, kunt u eenvoudig een spreidingsdiagram met aangepaste zones genereren voor een betere gegevensanalyse. Deze tools zorgen voor flexibiliteit en precisie bij het in kaart brengen van niet-lineaire relaties.

In dit artikel onderzoeken we hoe we gegevenspunten kunnen verzamelen en hoe we populaire JavaScript- en React-bibliotheken kunnen gebruiken om spreidingsdiagrammen met gebogen zones te tekenen. Met de juiste configuratie kunt u uw temperatuur- en vochtigheidsgegevens effectief in een diagram in kaart brengen.

Inzicht in de implementatie van een spreidingsdiagram met gebogen zones in React

Het eerste voorbeeld in de scripts maakt gebruik van Reageren in combinatie met de krachtige D3.js bibliotheek om een ​​spreidingsdiagram met gebogen zones te maken. Het spreidingsdiagram brengt de temperatuur in kaart op de x-as en de vochtigheid op de y-as, waardoor de relatie tussen deze twee variabelen zichtbaar wordt. De datapunten worden weergegeven door cirkels, uitgezet met behulp van de D3 `enter()` en `append()` methoden, die ervoor zorgen dat elk datapunt aan de DOM wordt toegevoegd. Een cruciaal aspect van de implementatie is het gebruik van lineaire schalen met `scaleLinear()`, waarmee temperatuur- en vochtigheidswaarden worden toegewezen aan pixelposities binnen de SVG, waardoor de punten correct op de kaart kunnen worden gepositioneerd.

Naast het plotten van datapunten tekent het script gebogen zones met behulp van een lijngenerator (`d3.line()`). Met deze opdracht worden paden gemaakt die krommen tussen gespecificeerde punten vertegenwoordigen, waardoor niet-lineaire zones over het spreidingsdiagram kunnen worden getekend. In dit geval wordt `curve(d3.curveNatural)` toegepast om vloeiende, natuurlijk ogende curven tussen temperatuur- en vochtigheidswaarden te creëren. Deze curven zijn van cruciaal belang voor het definiëren van verschillende zones in het spreidingsdiagram, die specifieke regio's of interessegebieden kunnen vertegenwoordigen, zoals een comfortabel of gevaarlijk vochtigheidsbereik op basis van de temperatuur.

Het tweede voorbeeld is een hefboomeffect Grafiek.js in React, een eenvoudigere maar effectieve bibliotheek voor het weergeven van diagrammen. De Chart.js `Scatter`-component wordt gebruikt om gegevenspunten voor temperatuur en vochtigheid in kaart te brengen. Hoewel Chart.js niet zo flexibel is als D3.js voor het maken van aangepaste visualisaties, biedt het een intuïtieve opstelling voor spreidingsdiagrammen. Een belangrijk kenmerk hier is de plug-in 'annotatie', waarmee vormen, lijnen of gebieden op de kaart kunnen worden getekend. Deze plug-in wordt gebruikt om de gebogen zones te benaderen door rechte lijnen over delen van het spreidingsdiagram te tekenen, waardoor visuele scheidingen tussen de interessegebieden ontstaan. Hoewel de gebogen zones worden benaderd met rechte lijnen, is deze methode eenvoudig en biedt een snelle manier om zones in een spreidingsdiagram te visualiseren.

Beide methoden omvatten belangrijke praktijken, zoals het schalen van gegevens met behulp van `scaleLinear()` in D3.js en het gebruik van ingebouwde opties voor het aanpassen van diagramschalen in Chart.js. Deze benaderingen zijn ontworpen met het oog op flexibiliteit, waardoor ontwikkelaars deze kunnen aanpassen en uitbreiden voor verschillende gebruiksscenario's. Terwijl D3.js meer controle en precisie biedt voor het tekenen van curven en zones, biedt Chart.js een snellere installatie voor eenvoudige spreidingsdiagrammen met een zekere mate van aanpassing via plug-ins zoals `annotation`. Beide scripts zijn modulair en herbruikbaar en bieden flexibiliteit bij het bouwen van interactieve spreidingsdiagrammen met gebogen zones in React-toepassingen.

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;

Alternatieve bibliotheken verkennen voor het maken van spreidingsplots in React

Naast D3.js En Grafiek.js, zijn er andere robuuste bibliotheken die het maken van spreidingsdiagrammen aankunnen Reageren. Eén zo'n optie is Plotly, een kaartbibliotheek die zowel flexibiliteit als gebruiksgemak biedt. Plotly maakt interactieve plots mogelijk, inclusief spreidingsdiagrammen, waarbij u niet alleen gegevens kunt plotten, maar ook gebogen zones kunt toevoegen met behulp van annotaties of mogelijkheden voor het tekenen van vormen. Plotly wordt geleverd met ingebouwde ondersteuning voor responsief ontwerp, waardoor het geschikt is voor webapplicaties die zich moeten aanpassen aan verschillende schermformaten.

Een ander alternatief is het gebruik van Opnieuw in kaart brengen, een bibliotheek die speciaal is ontworpen voor React-toepassingen. Recharts biedt een eenvoudiger API vergeleken met D3.js en is een uitstekende keuze voor ontwikkelaars die snelle resultaten willen met minimale configuratie. Het ondersteunt spreidingsdiagrammen en aangepaste vormen, waardoor het mogelijk is om gebogen zones te benaderen. Hoewel Recarts niet over de uitgebreide aanpassingsmogelijkheden van D3.js beschikt, is het nog steeds een goede optie voor het verwerken van eenvoudige spreidingsdiagrammen, vooral wanneer gebruiksgemak en leesbaarheid belangrijke overwegingen zijn.

Tenslotte, voor degenen die maximale prestaties en weergavesnelheid willen, CanvasJS is een goede optie. CanvasJS is lichtgewicht en richt zich op het gebruik van het HTML5-canvas voor tekenen. Het kan grote datasets effectief verwerken en ondersteunt realtime updates, waardoor het goed geschikt is voor toepassingen die hoge prestaties vereisen. Hoewel het misschien een deel van de flexibiliteit van D3.js mist, is CanvasJS perfect voor toepassingen die snelle weergave en responsiviteit vereisen, zoals het monitoren van dashboards.