Interaktyvių sklaidos brėžinių kūrimas naudojant „Plotly“ – „SitePoint“.

Taškinės diagramos yra duomenų vizualizacijos tipas, rodantis ryšį tarp dviejų kintamųjų. Jie ypač naudingi nustatant tendencijas, grupes ir iškrypimus duomenų rinkiniuose. Be tinkamų įrankių šių siužetų kūrimas gali būti varginantis procesas, dažnai reikalaujantis daug kodavimo ir projektavimo įgūdžių.

Viena biblioteka, leidžianti greitai sukurti sudėtingus grafikus, yra Siužetas. Plotly yra grafikų biblioteka, kuri leidžia lengvai kurti interaktyvias publikacijos kokybės grafikus internete. Jame siūlomi įvairūs siužetų tipai ir stiliai, o jo interaktyvumas idealiai tinka kuriant išsklaidytus siužetus.

Key Takeaways

• Plotly yra galinga platforma interaktyviems sklaidos brėžiniams kurti, siūlanti plačias tinkinimo parinktis.
• Vanilla JavaScript ir React gali būti naudojami su Plotly kuriant dinamines duomenų vizualizacijas.

Plotly leidžia greitai ir lengvai generuoti sklaidos brėžinius, kurie yra ne tik tikslūs, bet ir labai interaktyvūs. Šis interaktyvumas yra labai svarbus profesionaliems kūrėjams, norintiems suteikti galutiniams vartotojams galimybę nuodugniai tyrinėti duomenis naudojant tokias funkcijas kaip užvedimas, kad būtų rodomi duomenų taškai, slinkimas ir mastelio keitimas.

Kodėl verta rinktis Plotly?

Plotly yra populiarus pasirinkimas tarp kūrėjų kuriant išsklaidytus brėžinius dėl savo išsamių funkcijų, kurios patenkina profesionalius poreikius. Štai kodėl jis išsiskiria:

• Interaktyvumas. Plotly sklaidos brėžiniai nėra tik statiški vaizdai; jie visiškai interaktyvūs. Vartotojai gali priartinti dominančias sritis, užvesti pelės žymeklį, kad gautų daugiau informacijos apie konkrečius duomenų taškus, ir net spustelėti, kad sąveikautų su duomenimis realiuoju laiku. Toks interaktyvumo lygis yra labai svarbus norint atlikti išsamią duomenų analizę, todėl tyrinėjimo procesas tampa daug patogesnis vartotojui.
• Naudojimo paprastumas. Vienas iš svarbiausių Plotly pranašumų yra jo paprastumas. Biblioteka suteikia aukšto lygio sąsają, kuri pašalina detalių diagramų kūrimo sudėtingumą. Tai reiškia, kad kūrėjai gali sukurti sudėtingas vizualizacijas naudodami mažiau kodo, o tai ypač naudinga, kai laikas yra ribotas arba kai dirbama su greitu prototipų kūrimu.
• Tinkinimas. Naudojant Plotly, kiekvienas sklaidos diagramos aspektas gali būti pritaikytas pagal konkrečius jūsų projekto poreikius. Nuo žymeklių spalvos ir dydžio iki ašių išdėstymo ir tinklelio linijų stiliaus, „Plotly“ leidžia valdyti, kaip pateikiami jūsų duomenys. Šis lankstumas užtikrina, kad galutinė vizualizacija atitiktų jūsų dizaino reikalavimus ir efektyviai perteiktų numatytą pranešimą.
• Suderinamumas. „Plotly“ suderinamumas apima ne tik „JavaScript“ ir „React“. Jis gali būti naudojamas su įvairiomis programavimo kalbomis ir sistemomis, todėl tai yra universalus įrankis kūrėjo arsenale. Nesvarbu, ar dirbate su žiniatinklio programa, mobiliąja programėle ar net serverio projektu, Plotly galima sklandžiai integruoti į jūsų darbo eigą.
• Spektaklis. Tvarkyti didelius duomenų rinkinius gali būti sudėtinga, tačiau „Plotly“ sukurta efektyviai juos valdyti. Jis naudoja WebGL atvaizdavimui, kuris padeda išlaikyti našumą neprarandant vizualizacijų kokybės ar reagavimo. Tai ypač svarbu programoms, kurioms reikia atnaujinti duomenis realiuoju laiku, arba tiems, kurie dirba su dideliais duomenimis.
• bendruomenė ir parama. Plotly yra stipri bendruomenė ir turi daug dokumentų, kurie yra neįkainojami ištekliai kūrėjams. Nesvarbu, ar šalinate problemą, ieškote geriausios praktikos, ar ieškote įkvėpimo kitam projektui, bendruomenė ir turima pagalba gali padėti jums pereiti prie šio proceso.

Darbo su Plotly pradžia

Plotly yra grafikų biblioteka, kuri leidžia lengvai kurti interaktyvias publikacijos kokybės grafikus internete. Jame siūlomi įvairūs siužetų tipai ir stiliai, o jo interaktyvumas idealiai tinka kuriant išsklaidytus siužetus.

Plotly nustatymas

Vaniliniam JavaScript: Galite įtraukti Plotly tiesiai į savo HTML:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Reaguoti: įdiekite Plotly naudodami npm:

npm install plotly.js-dist-min

Tada importuokite jį į „React“ komponentą:

import Plotly from 'plotly.js-dist-min';

Pagrindinės sklaidos diagramos kūrimas

Pradėkime nuo pagrindinės sklaidos diagramos.

Vanilla JavaScript:

const data = [{
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
}];

const layout = {
  title: 'Basic Scatter Plot',
  xaxis: { title: 'X-Axis' },
  yaxis: { title: 'Y-Axis' }
};

Plotly.newPlot('myDiv', data, layout);

Atidarius HTML failą naršyklėje, jūsų pagrindinė sklaidos diagrama turėtų atrodyti taip, kaip nurodyta toliau.

Reaguoti:

import React from 'react';
import Plot from 'react-plotly.js';

function ScatterPlot() {
  const data = [{
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    mode: 'markers',
    type: 'scatter'
  }];

  const layout = {
    title: 'Basic Scatter Plot',
    xaxis: { title: 'X-Axis' },
    yaxis: { title: 'Y-Axis' }
  };

  return <Plot data={data} layout={layout} />;
}

export default ScatterPlot;

Bėk npm start savo React projekte ir turėtumėte pamatyti kažką panašaus į šį:

Išsklaidytų brėžinių tobulinimas

Galite pagerinti sklaidos diagramas pridėdami daugiau pėdsakų, tinkindami žymeklius ir pridėdami komentarų.

Kelių pėdsakų pridėjimas:

const trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter',
  name: 'Dataset 1'
};

const trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'markers',
  type: 'scatter',
  name: 'Dataset 2'
};

const data = [trace1, trace2];

Plotly.newPlot('myDiv', data);

Žymeklių pritaikymas:

const trace = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'markers',
  type: 'scatter',
  marker: {
    color: 'rgb(219, 64, 82)',
    size: 12
  }
};

const data = [trace];

Plotly.newPlot('myDiv', data);

Interaktyvaus sklaidos diagramos kūrimas

Interaktyvūs sklaidos grafikai leidžia vartotojams tiesiogiai susisiekti su duomenų taškais.

Vanilla JavaScript:

const trace = {
  x: [1, 2, 3, 4],
  y: [10, 11, 12, 13],
  mode: 'markers',
  type: 'scatter',
  marker: { size: 12 }
};

const layout = {
  title: 'Interactive Scatter Plot',
  xaxis: { title: 'X Axis' },
  yaxis: { title: 'Y Axis' },
  hovermode: 'closest'
};

Plotly.newPlot('myDiv', [trace], layout);

document.getElementById('myDiv').on('plotly_click', function(data){
  alert('You clicked on a data point!');
});

Jei norite interaktyvios sklaidos diagramų peržiūros, peržiūrėkite ši CodePen demonstracija.

Žiūrėkite rašiklį Siužetas vanilei pateikė Binara Prabhanga (@Binara-Prabhanga) įjungta CodePen.

Reaguoti:

import React from 'react';
import Plot from 'react-plotly.js';

class InteractiveScatterPlot extends React.Component {
  onPlotClick = (data) => {
    alert(You clicked on a data point with coordinates (${data.points[0].x}, ${data.points[0].y}) );
  };

  render() {
    const trace = {
      x: [1, 2, 3, 4],
      y: [10, 11, 12, 13],
      mode: 'markers',
      type: 'scatter',
      marker: { size: 12 }
    };

    const layout = {
      title: 'Interactive Scatter Plot',
      xaxis: { title: 'X Axis' },
      yaxis: { title: 'Y Axis' },
      hovermode: 'closest'
    };

    return <Plot data={[trace]} layout={layout} onClick={this.onPlotClick} />;
  }
}

export default InteractiveScatterPlot;

Norėdami pamatyti, kaip veikia sklaidos diagramos, patikrinkite ši CodeSandbox demonstracija.

Apvyniojimas

Šioje mokymo programoje aprašyti sklaidos brėžinių kūrimo naudojant „Plotly“ pagrindai, įskaitant aplinkos nustatymą, pagrindinio brėžinio kūrimą, jo patobulinimą papildomomis funkcijomis ir interaktyvumą.

Jei norite patikrinti šių grafikų kodą, čia yra mano CodeSandbox demonstracinė versija.

Eksperimentuokite su šiais pavyzdžiais ir tyrinėkite Plotly dokumentaciją, kad gautumėte daugiau išplėstinių funkcijų ir tinkinimo parinkčių. Jei ieškote informacijos, kaip sukurti puikias duomenų vizualizacijas, turime čia yra patogus vadovas.

DUK apie Plotly