„JavaScript“ pagrįstas sklaidos grafikas su kreivomis zonomis „React“.

Dinaminės sklaidos diagramos kūrimas naudojant temperatūros ir drėgmės duomenis

Veiksmingas duomenų taškų vizualizavimas yra labai svarbus, kai susiduriate su keliais kintamaisiais. Pagal šį scenarijų planavimas temperatūros ir drėgmės sklaidos sklype gali suteikti vertingų įžvalgų. Sklaidos diagrama padeda parodyti koreliacijas ir modelius tarp šių kintamųjų, ypač laikui bėgant.

Be paprasto brėžinio, galbūt norėsite sukurti specializuotas zonas, kurios atskirtų diagramos sritis pagal kreivę. Taip jūsų diagrama tampa sudėtingesnė ir pateikiama išsamesnė analizė, pvz., apibrėžiamos skirtingo drėgmės lygio plotai įvairiuose temperatūros diapazonuose. Tai gali būti sudėtinga, ypač jei zonos yra pagrįstos kreivėmis.

Laimei, yra daug bibliotekų Reaguoti ir paprastą „JavaScript“, kuris gali padėti nubraižyti šiuos duomenų taškus ir pridėti išlenktas zonas. Naudodami tinkamus įrankius galite lengvai sugeneruoti sklaidos diagramą su tinkintomis zonomis, kad galėtumėte geriau analizuoti duomenis. Šie įrankiai suteikia galimybę lanksčiai ir tiksliai nustatyti netiesinius ryšius.

Šiame straipsnyje išnagrinėsime, kaip rinkti duomenų taškus ir naudoti populiarias „JavaScript“ ir „React“ bibliotekas, kad nubrėžtumėte sklaidos diagramas su išlenktomis zonomis. Pasirinkę tinkamą sąranką, galėsite efektyviai susieti temperatūros ir drėgmės duomenis diagramoje.

Išsklaidymo diagramos su kreivomis zonomis įgyvendinimas „React“.

Pirmajame scenarijų pavyzdyje naudojama Reaguoti kartu su galingais D3.js biblioteką, kad sukurtumėte sklaidos diagramą su išlenktomis zonomis. Sklaidos diagrama susieja temperatūrą su x ašimi ir drėgmę su y ašimi, padedant vizualizuoti ryšį tarp šių dviejų kintamųjų. Duomenų taškai pavaizduoti apskritimais, nubraižyti naudojant D3 „enter()“ ir „append()“ metodus, kurie užtikrina, kad kiekvienas duomenų taškas būtų įtrauktas į DOM. Esminis diegimo aspektas yra linijinių skalių naudojimas su „scaleLinear()“, kuris temperatūros ir drėgmės reikšmes susieja su pikselių padėčiais SVG, kad taškai būtų tinkamai išdėstyti diagramoje.

Be duomenų taškų braižymo, scenarijus piešia kreives zonas naudodamas linijų generatorių (`d3.line()`). Ši komanda sukuria kelius, vaizduojančius kreives tarp nurodytų taškų, todėl sklaidos diagramoje galima nubrėžti netiesines zonas. Šiuo atveju kreivė(d3.curveNatural) taikoma norint sukurti lygias, natūraliai atrodančias kreives tarp temperatūros ir drėgmės verčių. Šios kreivės yra labai svarbios apibrėžiant skirtingas sklaidos diagramos zonas, kurios gali parodyti konkrečius dominančius regionus arba diapazonus, pvz., patogus arba pavojingas drėgmės diapazonas, pagrįstas temperatūra.

Antrasis pavyzdys – svertai Chart.js React, paprastesnė, bet efektyvi diagramų atvaizdavimo biblioteka. Chart.js „Scatter“ komponentas naudojamas temperatūros ir drėgmės duomenų taškams nubraižyti. Nors Chart.js nėra tokia lanksti kaip D3.js kuriant pasirinktines vizualizacijas, ji siūlo intuityvią sklaidos diagramų sąranką. Pagrindinė funkcija čia yra „anotacijos“ papildinys, leidžiantis diagramoje piešti figūras, linijas arba sritis. Šis įskiepis naudojamas apytiksliai išlenktoms zonoms apytiksliai nubrėžti tiesias linijas sklaidos diagramos atkarpose, sukuriant vizualius padalijimus tarp dominančių sričių. Nors išlenktos zonos yra aproksimuojamos tiesiomis linijomis, šis metodas yra nesudėtingas ir leidžia greitai vizualizuoti zonas sklaidos diagramoje.

Abu metodai apima svarbias praktikas, pvz., duomenų mastelio keitimą naudojant D3.js „scaleLinear()“ ir įtaisytąsias parinktis diagramos masteliams tinkinti programoje Chart.js. Šie metodai yra skirti lankstumui, todėl kūrėjai gali juos modifikuoti ir išplėsti įvairiems naudojimo atvejams. Nors D3.js siūlo daugiau valdymo ir tikslumo braižant kreives ir zonas, Chart.js suteikia greitesnę pagrindinių sklaidos diagramų sąranką su tam tikru tinkinimo lygiu naudojant papildinius, pvz., „anotaciją“. Abu scenarijai yra moduliniai ir pakartotinai naudojami, todėl „React“ programose galima lanksčiai kurti interaktyvius sklaidos brėžinius su lenktomis zonomis.

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;

Alternatyvių „React“ sklaidos brėžinių kūrimo bibliotekų tyrinėjimas

Be to D3.js ir Chart.js, yra ir kitų patikimų bibliotekų, kuriose galima kurti išsklaidytus brėžinius Reaguoti. Viena iš tokių galimybių yra Plotly, diagramų biblioteka, siūlanti lankstumą ir paprastą naudojimą. Plotly leidžia kurti interaktyvius brėžinius, įskaitant taškinius brėžinius, kuriuose galite ne tik braižyti duomenis, bet ir pridėti išlenktas zonas naudodami anotacijas ar figūrų piešimo galimybes. „Plotly“ yra su integruotu jautraus dizaino palaikymu, todėl jis tinka žiniatinklio programoms, kurias reikia pritaikyti prie skirtingų ekrano dydžių.

Kita alternatyva yra naudojimas Pakartotinaibiblioteka, specialiai sukurta „React“ programoms. „Recharts“ suteikia paprastesnę API, palyginti su D3.js, ir yra puikus pasirinkimas kūrėjams, norintiems greitų rezultatų su minimalia konfigūracija. Jis palaiko sklaidos brėžinius ir pasirinktines formas, todėl galima apytiksliai nustatyti išlenktas zonas. Nors Recharts nėra plačiai pritaikytas D3.js, tai vis tiek yra puiki galimybė tvarkyti pagrindines sklaidos diagramas, ypač kai pagrindiniai aspektai yra naudojimo paprastumas ir skaitomumas.

Galiausiai tiems, kurie nori maksimalaus našumo ir atvaizdavimo greičio, DrobėJS yra geras pasirinkimas. „CanvasJS“ yra lengvas ir orientuotas į HTML5 drobės naudojimą piešimui. Jis gali efektyviai tvarkyti didelius duomenų rinkinius ir palaiko atnaujinimus realiuoju laiku, todėl jis puikiai tinka programoms, kurioms reikalingas didelis našumas. Nors gali trūkti D3.js lankstumo, CanvasJS puikiai tinka programoms, kurioms reikalingas greitas atvaizdavimas ir greitas reagavimas, pvz., prietaisų skydelių stebėjimas.