de Praveen Dubey

O introducere în plotly.js – o bibliotecă de grafice open source

O introducere in plotlyjs o biblioteca de grafice open
Sursă: Unsplash

Plotly.js este o bibliotecă ideală pentru aplicațiile JavaScript care utilizează grafice și diagrame. Există câteva motive pentru care să luați în considerare utilizarea acestuia pentru următorul dvs. proiect de vizualizare a datelor:

  1. Plotly.js folosește atât D3.js (SVG), cât și WebGL pentru redarea grafică
  2. Plotly.js este un „pachet all-in-one” cu module d3.js și stack.gl
  3. Funcționează cu schema JSON
  4. Plotly.js acceptă diagrame de bază, statistice, științifice, financiare și de hărți.

De asemenea, peste 9000 de stele pe sursa sa deschisă Github este un indicator puternic pentru creșterea comunității sale.

O introducere in plotlyjs o biblioteca de grafice open

Utilizare și exemple

Să analizăm setările și câteva exemple pentru o înțelegere mai bună și practică.

Mai întâi, includeți fișierul din CDN-ul său.

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

În continuare, să trasăm un mic grafic care arată numerele și pătratele lor:

1612079706 751 O introducere in plotlyjs o biblioteca de grafice open

Codul pentru a genera acest grafic este mai jos:

<head>   <!-- Include Plotly.js -->   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<body>  <div id="myDiv">      <!-- Plotly chart will be drawn inside this DIV -->  </div>
<script>    var trace = {        x: [1, 2, 3, 4, 5, 6, 7, 8],        y: [1, 4, 9, 16, 25, 36, 49, 64],        mode: 'line'    };
var data = [ trace ];   Plotly.newPlot('myDiv', data);
</script></body>

Configurarea de bază se poate face cu includerea unui fișier, un element DOM și un script pentru reprezentare.

După includerea bibliotecii Plotly.js în <head>, am definit un empty

pentru a trasa graficul.

Plotly.new() desenează un nou complot în<div> element, suprascriind orice existing complot și în acest caz noi used myDiv. Intrarea va be a

element și câteva date.

Observați includerea mode în variabila de urmărire. Poate fi orice combinație de "lines", "markers", "text" alăturat cu un "+" SAU "none".

Exemplele includ "lines", "markers", "lines+markers", "lines+markers+text", "none".

Aici am folosit markers. Observați că primiți doar puncte marcate în coordonatele grafice și nu vedeți linia conectată în toate punctele.

1612079706 613 O introducere in plotlyjs o biblioteca de grafice open

Trasați mai multe linii acum doar adăugând valori la data variabil:

<head>   <!-- Include Plotly.js -->   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body>  <div id="myDiv">  <!-- Plotly chart will be drawn inside this DIV --></div>  <script>    var trace1 = {        x: [1, 2, 3, 4],        y: [10, 15, 13, 17],        mode: 'lines',        type: 'scatter'      };
var trace2 = {        x: [2, 3, 4, 5],        y: [16, 5, 11, 9],        mode: 'marker',        type: 'scatter'      };
var trace3 = {        x: [1, 2, 3, 4],        y: [12, 9, 15, 12],        mode: 'lines+markers',        type: 'scatter'      };
var data = [trace1, trace2, trace3];
Plotly.newPlot('myDiv', data);  </script></body>
1612079706 128 O introducere in plotlyjs o biblioteca de grafice open

Legenda într-un grafic este legat de datele afișate grafic în zona grafică a graficului.

Deocamdată nu avem etichete, iar legenda arată ca:

1612079706 277 O introducere in plotlyjs o biblioteca de grafice open

Să le actualizăm folosind opțiuni precum text,textfont ,textpostion pentru personalizarea etichetelor noastre de date. Acestea ar trebui transmise cu seturi de date individuale.

<head>   <!-- Include Plotly.js -->   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<body>  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>  <script>    var trace1 = {          x: [1, 2, 3, 4, 5],          y: [100, 60, 30, 60, 10],          mode: 'lines+markers+text',          type: 'scatter',          name: 'Beta',          text: ['Mobile A', 'Mobile B', 'Mobile C', 'Mobile D', 'Mobile E'],          textposition: 'top center',          textfont: {          family:  'Raleway, sans-serif'        },        marker: { size: 12 }      };
var trace2 = {        x: [1.5, 2.5, 3.5, 4.5, 5.5],        y: [100, 10, 70, 150, 40],        mode: 'lines+markers+text',        type: 'scatter',        name: 'Alpha',        text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],        textfont : {          family:'Times New Roman'        },        textposition: 'bottom center',        marker: { size: 12 }      };
var data = [ trace1, trace2 ];
var layout = {        xaxis: {          range: [ 0.75, 5.25 ]        },        yaxis: {          range: [0, 200]        },        legend: {          y: 0.5,          yref: 'paper',          font: {            family: 'Arial, sans-serif',            size: 20,            color: 'black',          }        },        title:'Data Labels on the Plot'      };
Plotly.newPlot('myDiv', data, layout);  </script></body>
1612079707 784 O introducere in plotlyjs o biblioteca de grafice open

Aspectul altor atribute vizuale precum titlul și adnotările vor fi definite într-un obiect numit de obicei layout.

Până acum am văzut câteva exemple de linie, haideți să trasăm rapid o diagramă cu bare folosind 'bar' ca tip.

var data = [{  x: ['Company X', 'Company Y', 'Company Z'],  y: [200, 140, 230],  type: 'bar'}];
Plotly.newPlot('myDiv', data);
1612079707 542 O introducere in plotlyjs o biblioteca de grafice open

De asemenea, puteți schimba fișierul type în datele de mai sus afișate pentru produse și dispozitive mobile prin schimbare scatter la bar.

var trace = {        x: [1.5, 2.5, 3.5, 4.5, 5.5],        y: [100, 10, 70, 150, 40],        mode: 'lines+markers+text',        type: 'bar',        name: 'Alpha',        text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],        textfont : {          family:'Times New Roman'        },        textposition: 'top',        marker: { size: 12 }      };

Iată un exemplu care schimbă opacitatea de bar:

var trace2 = {          x: ['Alpha', 'Beta', 'Gamma'],          y: [100, 200, 500],          type: 'bar',          name: 'Opacity Example',          marker: {            color: 'rgb(204,204,204)',            opacity: 0.5          }};
1612079707 616 O introducere in plotlyjs o biblioteca de grafice open

Am creat câteva diagrame de bază și am vorbit despre câteva opțiuni care pot fi modificate cu ușurință pentru a obține diferite variații ale aceluiași grafic.

Să continuăm graficând un set de date meteorice folosind doar câteva linii de cod.

Folosesc setul de date de la github-ul bcdunbar și va încerca să descompună întregul proces în mai mulți pași.

Să începem.

Pasul 1. Configurare inițială

Adăugați plotly.js în fișierul HTML. Aceasta include fișierul JavaScript, gol div element și substituent pentru scripturi.

<html><head>  <!-- Include Plotly.js file from CDN --&gt;  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head><body><!-- DIV will be used for charts --><div id="mapDiv"></div>  <script>  // JS code for plot  </script></div></body></html>

Pasul 2. Set de date

Deoarece setul nostru de date este în format CSV, îl putem folosi Plotly.d3.csv. Citeste intern datele CSV dintr-un apel AJAX.

Cod de împachetare pentru reprezentare:

Plotly.d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/meteorites_subset.csv', function(err, rows){
Plotly.plot('mapDiv', data, layout);
});

Pasul 3. Jeton de acces

Obțineți jetonul de acces Mapbox din care am folosi Aici.

Plotly.plot are nevoie de două lucruri principale: data și layout care definește ce tip de date vor fi utilizate și cum ar trebui să fie trasate pe ecran.

Pasul 4. Aspectul hărții

var layout = {  title: 'Demonstration of Meteorite Landing using Plotly.js',  font: { color: 'white'  },  dragmode: 'zoom',   mapbox: {    center: {  lat: 38.03697222,   lon: -90.70916722    },     style: 'light',     zoom: 2  },   paper_bgcolor: '#191A1A',   plot_bgcolor: '#191A1A',   showlegend: true,  annotations: [{  x: 0,  y: 0,    text: 'NASA',    showarrow: false  }]};

Observați că folosim mapbox pentru a defini toate configurațiile hărții, inclusiv centru, nivel de zoom, culoare și legende.

Apoi adăugați simbolul pe care l-am creat la pasul 3 folosind:

Plotly.setPlotConfig({    mapboxAccessToken: 'your token here'});

Pasul 5. Procesați datele

Ultimul lucru de care avem nevoie este să adăugăm obiectul nostru de date din sursa CSV:

var classArray = unpack(rows, 'class');  var classes = [...new Set(classArray)];
function unpack(rows, key) {    return rows.map(function(row) { return row[key]; });  }
var data = classes.map(function(classes) {    var rowsFiltered = rows.filter(function(row) {        return (row.class === classes);    });    return {       type: 'scattermapbox',       name: classes,       lat: unpack(rowsFiltered, 'reclat'),       lon: unpack(rowsFiltered, 'reclong')    };  });

Acum avem date, aspect, simbol și hartă … Iată rezultatul final:

O introducere in plotlyjs o biblioteca de grafice open

Aceasta a fost o demonstrație de complotare, cu abordare pas cu pas a trasării unui set de date de hartă folosind plotly.js. Puteți găsi o mulțime de exemple pe Complot documentație pentru a începe.

Sper că acest lucru v-a oferit o introducere bună la Plotly js.

Asigurați-vă că trimiteți feedback-ul dvs. mai jos și codul pentru acest lucru poate fi găsit pe my Github.

#introducere #în #plotlyjs #bibliotecă #grafice #open #source

O introducere în plotly.js – o bibliotecă de grafice open source