Una libreria di grafici per data scientist che si basa su D3 e stack.gl

introduzione

Plotly è una società informatica con sede a Montreal, Quebec, che sviluppa strumenti di analisi e visualizzazione dei dati online. Fornisce strumenti grafici, analitici e statistici online per individui e librerie di grafici scientifici e di collaborazione per Python, R , MATLAB, Perl, Julia, Arduino e REST. Gli strumenti Plotly possono anche essere usati per modellare grafici interattivi con il taccuino Jupyter.

Plotly è anche il nome del prodotto. Plotly.js è una libreria di grafici che si basa su D3 e stack.gl , che sono componenti WebGL modulari. È una libreria di grafici dichiarativi di alto livello e viene fornita con oltre 40 tipi di grafici, tra cui mappe 3D, statistiche, scientifiche, finanziarie e SVG. Oltre alla libreria JavaScript, Plotly alimenta anche plotly.py e plotly.R . I grafici Plotly sono ampiamente adottati dalla comunità AI/data science, come MLflow , demo Point-E su Hugging Face .

Diamo un'occhiata a come funziona Plotly.

Configura Plotly.js nell'app Create React

Utilizziamo l'app Create React come base per esplorare plotly.js. Il seguente comando crea un progetto React:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

Il grafico a barre

Un grafico a barre presenta dati categorici con barre rettangolari con altezze o lunghezze proporzionali ai valori che rappresentano. Le barre possono essere tracciate verticalmente o orizzontalmente. Un grafico a barre verticali è talvolta chiamato istogramma.

In Plotly , una serie è chiamata data, che è composta da un array di tracce. Ogni oggetto traccia è composto da type, x, ye altre informazioni.

• ximposta le xcoordinate, che sono un array della progressione sequenziale dei valori. Il valore predefinito è una sequenza che inizia da 0, con un incremento di 1.
• yimposta le ycoordinate, che è un array di valori in ogni punto di y.
• Il tipo di grafico a barre è 'bar'.

• Alle righe 3–7, crea un oggetto del formato, con title, widthe height.
• Alle righe 9-18, crea un array di dati composto da due oggetti traccia. Entrambe le tracce sono definite come un tipo di 'bar', insieme ai yvalori.
• Alla riga 21 viene creato il grafico a barre.

Possiamo cambiare una delle barre nell'orientamento orizzontale con questo codice:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

Gli orientamenti misti sono solo a scopo dimostrativo. Probabilmente, i casi d'uso reali hanno tutte le barre con lo stesso orientamento.

Impostare entrambe le barre sull'orientamento orizzontale utilizzando il seguente codice:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

Il grafico a dispersione

Un grafico a linee collega una serie di punti dati utilizzando una linea e un grafico a dispersione visualizza una raccolta di punti. In Plotly, sia i grafici a linee che quelli a dispersione hanno il tipo di 'scatter'. Utilizza modeper determinare la modalità di disegno:

• 'lines': Disegna un grafico a linee.
• 'markers': Disegna un grafico a dispersione.
• 'text': Visualizza un testo.
• 'none': Non visualizza nulla.

Ecco il modificato src/App.js:

• Alle righe 3–7, crea un oggetto del formato, con title, widthe height.
• Alle righe 9-20, crea un array di dati composto da due oggetti traccia. Entrambe le tracce sono definite come tipo di 'scatter', insieme ai yvalori. La prima traccia viene impostata modesu 'lines'e la seconda modesu 'markers'.
• Alla riga 23 viene creato il grafico a dispersione.

Ecco la modificata src/App.jsche utilizza le modalità combinate.

• Alle righe 3–7, crea un oggetto del formato, con title, widthe height.
• Alle righe 9-28, crea un array di dati composto da due oggetti traccia.
  – Alle righe 10–14, la prima traccia imposta la modalità su 'lines+markers'.
  – Alle righe 15–26, le seconde tracce impostano la modalità su 'markers+lines'. Inoltre, imposta marker.colorsu 'green', marker.sizesu 12, line.colorsu 'red'e line.widthsu 3.
• Alla riga 31 viene creato il grafico a dispersione.

Quanto segue dataArrayaggiunge texta modeper entrambe le tracce, insieme a una matrice di valori di testo. Ecco il codice:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Funziona, tranne per il fatto che ci sono alcune sovrapposizioni tra marcatori e testo.

Possiamo spostare le posizioni del testo per evitare sovrapposizioni:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Abbiamo visto xe ydimensioni in un grafico Plotly, e c'è un'altra dimensione, la dimensione del colore, nei grafici a dispersione. Nell'esempio seguente, creiamo un grafico con sette tracce di dispersione orizzontale con marcatori. Questi marcatori vengono utilizzati per spiegare come funziona la dimensione del colore.

Ecco il nostro grafico obiettivo:

Ed ecco la modifica src/App.js:

• Alle righe 10–18, trace 0definisce yi valori come [6, 6, 6, 6, 6, 6](riga 12) e marker.colorcome un semplice colore 'red'(riga 15).

• Alle righe 19–28, trace 1definisce yi valori be [5, 5, 5, 5, 5, 5](riga 21) e marker.colorscalebe [[0, 'green'], [1, 'blue']](riga 24). colorscaleè un array contenente array che mappano un valore normalizzato su una stringa di colore rgb, rgba, hex, hsl, hsv o denominata. Come minimo, è richiesta una mappatura per i valori più basso (0) e più alto (1). colorscaleha effetto solo se marker.colorè impostato su un array numerico (riga 25).

• Alle righe 29–39, trace 2definisce yi valori da essere [4, 4, 4, 4, 4, 4](riga 31). Poiché marker.colorscalenon è definito, colorscaleviene applicato il valore predefinito. marker.cmin(riga 35) imposta il limite inferiore del dominio del colore e marker.cmax(riga 36) imposta il limite superiore del dominio del colore. In caso contrario, marker.cmine marker.cmaxsarà detratto da marker.color(riga 34).

• Alle righe 40–49, trace 3definisce yi valori da essere [3, 3, 3, 3, 3, 3](riga 42). marker.cmid(riga 46) imposta il punto medio del dominio del colore scalando marker.cmine/o marker.cmaxin modo che sia equidistante da questo punto.

• Alle righe 50–59, trace 4definisce yi valori da essere [2, 2, 2, 2, 2, 2](riga 52). Oltre a definire colorscale, possiamo usare un nome di tavolozza predefinito dall'elenco: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', 'Picnic', , 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu'e 'YlOrRd'. Per trace 4, marker.colorscaleè impostato su 'Greens'(riga 56).

• Alle righe 60–69, trace 5definisce yi valori be [1, 1, 1, 1, 1, 1](riga 62) e marker.colorscalebe 'YlOrRd'(giallo o rosso, riga 66).

• Alle righe 70–85, trace 6definisce yi valori be [0, 0, 0, 0, 0, 0](riga 72) e marker.colorscalebe 'Jet'(riga 76).

• Alle righe 78–83 in trace 6, colorbarè definito con title, orientation, xe y. colorbarè impostata con orientamento orizzontale (riga 80) per evitare di sovrapporre la legenda. colorbar.ximposta la xposizione della barra dei colori, con un numero compreso tra o uguale a -2 e 3.
  Il valore predefinito è 1,02. colorbar.yimposta la posizione y della barra dei colori, con un numero compreso tra o uguale a -2 e 3. Il valore predefinito è 0,5. In trace 6, colorbar.xè impostato su 0,48 (riga 81) ed colorbar.yè impostato su -0,2 (riga 82). La posizione è stata spostata dall'alto (impostazione predefinita per l'orientamento orizzontale) al basso, accanto a trace 6. Mostra come corrisponde la dimensione del colore dei punti sparsi colorbar.

• Alla riga 94 viene creato il grafico a dispersione con sette dimensioni colore.

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

Apparentemente, colorbarsi sovrappone alla leggenda. Invece di rendere colorbarorizzontale, possiamo cambiare la legenda in orizzontale.

Ecco il modificato src/App.js.

• Alle righe 7–9, legendè impostato su orizzontale.
• Alle righe 81–83, l'orientamento di colorbarviene rimosso. Il valore predefinito è verticale ( 'v').

L'esempio sopra mostra che la dimensione del colore è vibrante e facile da usare.

Opzioni di configurazione

Quando si passa il mouse sull'angolo in alto a destra di un grafico, modebarviene visualizzato con un elenco di pulsanti. Da sinistra a destra, è Download, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, Reset axes, e Plotly Logo.

• Download: Scarica il grafico tramite il browser. Per impostazione predefinita, scarica un file PNG di dimensione 700x450. Ecco l'esempio per configurarlo per scaricare un file SVG denominato 'custom_image', e della dimensione 800x600.

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

L'impostazione scrollZoomsu true consente agli utenti di eseguire lo zoom avanti e indietro utilizzando la rotellina del mouse.

const configObj = {
  scrollZoom: true,
};

• Box Select: Permette di selezionare una parte del grafico con un riquadro.

• Lasso Select: Permette di selezionare una parte della carta con bordo libero.

• Zoom in: Rende l'immagine più grande e più vicina.

• Zoom out: Rende l'immagine più piccola e più lontana.

• Autoscale: Guarda tutti i punti (dati) nel grafico e cambia il layout per mostrarli tutti.
• Reset axes: Ritorna ai dettagli del layout specificati per il grafico, anche se questo lascia fuori alcuni punti.
• Plotly Logo: Il tooltip mostra la versione di Plotly e facendo clic su di essa si accede ahttps://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• Disattiva la reattività alla larghezza e all'altezza:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

Oggetti di scena per gestori di eventi

Nella sezione precedente, abbiamo introdotto Box Selecte Lasso Select, Queste parti selezionate del grafico. Qual è il caso d'uso per questo?

Il grafico che ascolta l' selectevento può reagire alla selezione dell'utente.

Ecco il modificato src/App.js:

• Alla riga 10, rende Box selectl'azione predefinita di modebar.
• Alle righe 98–101, crea un oggetto di configurazione, che rende modebarsempre visibile e nasconde il logo Plotly sul file modebar.
• Alle righe 103–105, viene creato un gestore di selezione per registrare le selectedinformazioni.
• Alla riga 109, il grafico viene creato con oggetti di scena di layout, data, confige onSelected.

Sulla console Inspect selectedvengono visualizzate le informazioni che possono essere utilizzate per creare applicazioni.

Ecco l'elenco degli oggetti di scena per i gestori di eventi: , onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, onBeforeExport, onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, onHover, onInitialized, onLegendClick, onLegendDoubleClick, onPurge, onRelayout, onRelayouting, onRestyle, onRedraw, onSelected, onSelecting, onSliderChange, onSliderEnd, onSliderStart, , , , e .onSunburstClickonTransitioningonTransitionInterruptedonUnhoveronUpdateonWebGlContextLost

Conclusione

Abbiamo mostrato come funziona plotly.js per grafici a barre e grafici a dispersione. Oltre alle funzionalità complete del grafico, la sua dimensione del colore è vibrante e facile da usare. I suoi modebarpulsanti sono eccessivi e potenti. Tuttavia, manca l'accessibilità.

Rispetto a Highcharts , i grafici statistici e scientifici di Plotly sono ampiamente adottati dalla comunità di AI/data science. Daremo esempi nei seguenti articoli.

Grazie per aver letto.

Want to Connect? 

If you are interested, check out my directory of web development articles.