Uz JavaScript balstīta izkliedes diagramma ar izliektām zonām React

Izveidojiet dinamisku izkliedes diagrammu, izmantojot temperatūras un mitruma datus

Efektīva datu punktu vizualizācija ir ļoti svarīga, ja strādājat ar vairākiem mainīgajiem. Šajā scenārijā plānošana temperatūra un mitrums uz izkliedes diagrammas var sniegt vērtīgu ieskatu. Izkliedes diagramma palīdz attēlot korelācijas un modeļus starp šiem mainīgajiem, īpaši laika gaitā.

Papildus vienkāršam grafikam jūs varētu vēlēties izveidot specializētas zonas, kas atdala diagrammas reģionus, pamatojoties uz līkni. Tas padara diagrammu sarežģītāku, nodrošinot detalizētāku analīzi, piemēram, nosakot dažādu mitruma līmeņu apgabalus dažādos temperatūras diapazonos. Tas var būt sarežģīti, it īpaši, ja zonas ir balstītas uz līknēm.

Par laimi, ir pieejamas daudzas bibliotēkas Reaģēt un vienkāršs JavaScript, kas var palīdzēt attēlot šos datu punktus un pievienot izliektas zonas. Izmantojot pareizos rīkus, varat viegli ģenerēt izkliedes diagrammu ar pielāgotām zonām labākai datu analīzei. Šie rīki nodrošina elastību un precizitāti nelineāro attiecību kartēšanā.

Šajā rakstā mēs izpētīsim, kā apkopot datu punktus un izmantot populārās JavaScript un React bibliotēkas, lai uzzīmētu izkliedes diagrammas ar izliektām zonām. Izmantojot pareizo iestatījumu, jūs varēsiet efektīvi kartēt savus temperatūras un mitruma datus diagrammā.

Izpratne par izkliedes diagrammu ar izliektām zonām ieviešanu programmā React

Pirmais piemērs skriptos izmanto Reaģēt kombinācijā ar jaudīgo D3.js bibliotēku, lai izveidotu izkliedes diagrammu ar izliektām zonām. Izkliedes diagramma kartē temperatūru uz x asi un mitrumu uz y asi, palīdzot vizualizēt saistību starp šiem diviem mainīgajiem. Datu punkti ir attēloti ar apļiem, kas attēloti, izmantojot D3 metodes "enter()" un "append()", kas nodrošina katra datu punkta pievienošanu DOM. Būtisks ieviešanas aspekts ir lineāro skalu izmantošana ar `scaleLinear()`, kas temperatūras un mitruma vērtības kartē SVG pikseļu pozīcijās, ļaujot diagrammā pareizi novietot punktus.

Papildus datu punktu zīmēšanai skripts zīmē izliektas zonas, izmantojot līniju ģeneratoru (`d3.line()`). Šī komanda izveido ceļus, kas attēlo līknes starp norādītajiem punktiem, ļaujot uzzīmēt nelineāras zonas virs izkliedes diagrammas. Šajā gadījumā tiek lietota līkne(d3.curveNatural), lai izveidotu vienmērīgas, dabiska izskata līknes starp temperatūras un mitruma vērtībām. Šīs līknes ir būtiskas, lai definētu dažādas zonas izkliedes diagrammā, kas var attēlot konkrētus reģionus vai interešu diapazonus, piemēram, ērtu vai bīstamu mitruma diapazonu, pamatojoties uz temperatūru.

Otrais piemērs sviras Chart.js React ir vienkāršāka, bet efektīva diagrammu renderēšanas bibliotēka. Chart.js komponents "Scatter" tiek izmantots, lai attēlotu temperatūras un mitruma datu punktus. Lai gan Chart.js nav tik elastīgs kā D3.js, lai izveidotu pielāgotas vizualizācijas, tas piedāvā intuitīvu iestatījumu izkliedes diagrammām. Galvenā funkcija šeit ir anotācijas spraudnis, kas ļauj diagrammā zīmēt formas, līnijas vai reģionus. Šis spraudnis tiek izmantots, lai tuvinātu izliektās zonas, velkot taisnas līnijas pāri izkliedes diagrammas sadaļām, radot vizuālu sadalījumu starp interesējošajiem apgabaliem. Lai gan izliektās zonas ir tuvinātas ar taisnām līnijām, šī metode ir vienkārša un nodrošina ātru veidu, kā vizualizēt zonas izkliedes diagrammā.

Abās metodēs ir ietvertas svarīgas metodes, piemēram, datu mērogošana, izmantojot `scaleLinear()' D3.js, un iebūvēto opciju izmantošana diagrammu mērogu pielāgošanai programmā Chart.js. Šīs pieejas ir paredzētas elastībai, ļaujot izstrādātājiem tās modificēt un paplašināt dažādiem lietošanas gadījumiem. Lai gan D3.js piedāvā lielāku kontroli un precizitāti līkņu un zonu zīmēšanai, Chart.js nodrošina ātrāku pamata izkliedes diagrammu iestatīšanu ar zināmu pielāgošanas līmeni, izmantojot tādus spraudņus kā anotācija. Abi skripti ir modulāri un atkārtoti lietojami, piedāvājot elastību interaktīvu izkliedes diagrammu veidošanā ar izliektām zonām React lietojumprogrammās.

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;

Alternatīvu bibliotēku izpēte izkliedes diagrammu izveidei programmā React

Papildus tam D3.js un Chart.js, ir arī citas spēcīgas bibliotēkas, kurās var izveidot izkliedēto diagrammu Reaģēt. Viena no šādām iespējām ir Plotly, diagrammu bibliotēka, kas piedāvā gan elastību, gan ērtu lietošanu. Plotly ļauj izveidot interaktīvus grafikus, tostarp izkliedes diagrammas, kur varat ne tikai attēlot datus, bet arī pievienot izliektas zonas, izmantojot anotācijas vai formas zīmēšanas iespējas. Plotly ir aprīkots ar iebūvētu atbalstu atsaucīgam dizainam, padarot to piemērotu tīmekļa lietojumprogrammām, kurām ir jāpielāgojas dažādiem ekrāna izmēriem.

Vēl viena alternatīva ir izmantošana Atkārtotas diagrammas, bibliotēka, kas īpaši izstrādāta React lietojumprogrammām. Recharts nodrošina vienkāršāku API, salīdzinot ar D3.js, un ir lieliska izvēle izstrādātājiem, kuri vēlas ātrus rezultātus ar minimālu konfigurāciju. Tā atbalsta izkliedes diagrammas un pielāgotas formas, ļaujot tuvināt izliektas zonas. Lai gan Recharts nav plašās D3.js pielāgošanas iespējas, tas joprojām ir labs risinājums pamata izkliedes diagrammu apstrādei, it īpaši, ja galvenie apsvērumi ir lietošanas ērtums un lasāmība.

Visbeidzot, tiem, kas vēlas maksimālu veiktspēju un renderēšanas ātrumu, CanvasJS ir labs variants. CanvasJS ir viegls un koncentrējas uz HTML5 audekla izmantošanu zīmēšanai. Tas var efektīvi apstrādāt lielas datu kopas un atbalsta reāllaika atjauninājumus, padarot to piemērotu lietojumprogrammām, kurām nepieciešama augsta veiktspēja. Lai gan tam var pietrūkt D3.js piedāvātās elastības, CanvasJS ir lieliski piemērots lietojumprogrammām, kurām nepieciešama ātra renderēšana un reaģētspēja, piemēram, informācijas paneļu pārraudzībai.