Raztreseni grafikon z ukrivljenimi območji v Reactu, ki temelji na JavaScriptu

Izdelava dinamičnega raztresenega grafa s podatki o temperaturi in vlažnosti

Učinkovita vizualizacija podatkovnih točk je ključnega pomena, ko imate opravka z več spremenljivkami. V tem scenariju načrtovanje temperaturo in vlažnost na razpršenem grafu lahko zagotovi dragocene vpoglede. Raztreseni graf pomaga predstaviti korelacije in vzorce med temi spremenljivkami, zlasti skozi čas.

Poleg preprostega izrisa boste morda želeli ustvariti specializirana območja, ki ločujejo področja grafa na podlagi krivulje. To vašemu diagramu doda plast zapletenosti in zagotavlja podrobnejšo analizo, kot je definiranje območij z različnimi stopnjami vlažnosti v različnih temperaturnih območjih. To je lahko izziv, zlasti če cone temeljijo na krivuljah.

Na srečo je na voljo veliko knjižnic Reagiraj in navaden JavaScript, ki lahko pomaga pri izrisu teh podatkovnih točk in dodajanju ukrivljenih območij. Z uporabo pravih orodij lahko preprosto ustvarite razpršeni graf z območji po meri za boljšo analizo podatkov. Ta orodja omogočajo prilagodljivost in natančnost pri preslikavi nelinearnih odnosov.

V tem članku bomo raziskali, kako zbrati podatkovne točke in uporabiti priljubljeni knjižnici JavaScript in React za risanje razpršenih grafov z ukrivljenimi conami. S pravilno nastavitvijo boste lahko podatke o temperaturi in vlažnosti učinkovito preslikali v diagram.

Razumevanje implementacije raztresenega grafikona z ukrivljenimi območji v Reactu

Prvi primer v skriptih uporablja Reagiraj v kombinaciji z močnimi D3.js knjižnico za ustvarjanje razpršenega grafa z ukrivljenimi območji. Raztreseni graf preslika temperaturo na os x in vlažnost na os y, kar pomaga vizualizirati razmerje med tema dvema spremenljivkama. Podatkovne točke so predstavljene s krogi, narisanimi z metodama D3 `enter()` in `append()`, ki zagotavljata, da je vsaka podatkovna točka dodana v DOM. Ključni vidik implementacije je uporaba linearnih lestvic z `scaleLinear()`, ki preslika vrednosti temperature in vlažnosti v položaje slikovnih pik v SVG, kar omogoča pravilno postavitev točk na grafikonu.

Poleg izrisovanja podatkovnih točk skript riše ukrivljene cone z uporabo generatorja linij (`d3.line()`). Ta ukaz ustvari poti, ki predstavljajo krivulje med določenimi točkami, kar omogoča risanje nelinearnih območij na razpršeni graf. V tem primeru se uporabi `curve(d3.curveNatural)` za ustvarjanje gladkih krivulj naravnega videza med vrednostmi temperature in vlažnosti. Te krivulje so ključnega pomena za definiranje različnih območij na grafu razpršitve, ki lahko predstavljajo določene regije ali obsege zanimanja, kot je udoben ali nevaren razpon vlažnosti glede na temperaturo.

Drugi primer vzvodov Chart.js v Reactu, preprostejši, a učinkoviti knjižnici za upodabljanje grafikonov. Komponenta `Scatter` Chart.js se uporablja za risanje podatkovnih točk o temperaturi in vlažnosti. Čeprav Chart.js ni tako prilagodljiv kot D3.js za ustvarjanje vizualizacij po meri, ponuja intuitivno nastavitev za razpršene diagrame. Ključna funkcija tukaj je vtičnik `annotation`, ki omogoča risanje oblik, črt ali regij na grafikonu. Ta vtičnik se uporablja za približevanje ukrivljenih območij z risanjem ravnih črt čez odseke razpršene ploskve, kar ustvarja vizualne delitve med območji, ki nas zanimajo. Čeprav so ukrivljena območja aproksimirana z ravnimi črtami, je ta metoda enostavna in omogoča hiter način za vizualizacijo območij na razpršenem grafu.

Obe metodi vključujeta pomembne prakse, kot je skaliranje podatkov z uporabo `scaleLinear()` v D3.js in uporaba vgrajenih možnosti za prilagajanje lestvic grafikonov v Chart.js. Ti pristopi so zasnovani za prilagodljivost, kar omogoča razvijalcem, da jih spremenijo in razširijo za različne primere uporabe. Medtem ko D3.js ponuja več nadzora in natančnosti za risanje krivulj in območij, Chart.js zagotavlja hitrejšo nastavitev za osnovne razpršene diagrame z določeno stopnjo prilagajanja prek vtičnikov, kot je `annotation`. Oba skripta sta modularna in ju je mogoče ponovno uporabiti ter ponujata prilagodljivost pri gradnji interaktivnih razpršenih grafov z ukrivljenimi conami v aplikacijah 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;

Raziskovanje alternativnih knjižnic za ustvarjanje razpršenega grafikona v Reactu

Poleg D3.js in Chart.js, obstajajo druge robustne knjižnice, ki lahko obravnavajo ustvarjanje razpršenega grafikona Reagiraj. Ena taka možnost je Plotly, knjižnica grafikonov, ki ponuja prilagodljivost in enostavnost uporabe. Plotly omogoča interaktivne izrise, vključno z razpršenimi izrisi, kjer lahko ne samo izrišete podatke, ampak tudi dodate ukrivljena območja z uporabo opomb ali zmožnosti risanja oblik. Plotly ima vgrajeno podporo za odzivno oblikovanje, zaradi česar je primeren za spletne aplikacije, ki se morajo prilagoditi različnim velikostim zaslona.

Druga možnost je uporaba Recharts, knjižnica, posebej zasnovana za aplikacije React. Recharts ponuja enostavnejši API v primerjavi z D3.js in je odlična izbira za razvijalce, ki želijo hitre rezultate z minimalno konfiguracijo. Podpira razpršene diagrame in oblike po meri, kar omogoča približevanje ukrivljenih območij. Čeprav Recharts nima obsežne prilagoditve D3.js, je še vedno močna možnost za obravnavo osnovnih razpršenih grafov, zlasti kadar sta enostavna uporaba in berljivost ključni dejavniki.

Končno, za tiste, ki želijo največjo zmogljivost in hitrost upodabljanja, CanvasJS je dobra možnost. CanvasJS je lahek in se osredotoča na uporabo platna HTML5 za risanje. Učinkovito lahko obravnava velike nabore podatkov in podpira posodobitve v realnem času, zaradi česar je primeren za aplikacije, ki zahtevajo visoko zmogljivost. Čeprav morda nima nekaj prilagodljivosti, ki jo najdemo v D3.js, je CanvasJS popoln za aplikacije, ki zahtevajo hitro upodabljanje in odzivnost, kot so nadzorne nadzorne plošče.