Plotly

#Introducció

Plotly.js és una llibreria que ens permet crear gràfics interactius.

L’usuari també pot interactuar amb aquests gràfics des del navegador, per obtenir informació addicional que seria més difícil presentar en una imatge fixe, i en general la experiència és més atractiva.

Pots consultar aquest projecte: https://gitlab.com/xtec/ts/plotly

#Entorn de treball

Hi ha dues formes de treballar amb Plotly.

La més clàssica és el projecte de Python Plotly Express. Aquesta encara és prou comú degut a que va ser la primera que es va crear, i també perquè el seu ús resulta més senzill per a perfils professionals que no tenen prou coneixements de creació de desenvolupament web.

En canvi, a nosaltres com a especialistes en desenvolupament web ens interessa Plotly Javascript.

Ens interessa delegar la creació del gràfic al client (al navegador, que usa Javascript), ja que pel servidor és molt costós dibuixar gràfics, el servidor ja té prou feina gestionant grans volums de dades! 😀`

#Entorn de treball

Crea un projecte react:

$ bun create vite plot --template react-swc-ts

Afegeix les dependències:

bun add plotly.js react-plotly.js
bun add --dev @types/plotly.js @types/react-plotly.js

Modifica el fitxer App.tsx:

import Plot from 'react-plotly.js' 

export default function App() {
  
  const data = [
    {
      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      mode: "lines",
    },
  ];

  const layout = { title: "Chart Title" };

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

Ja tens el teu primer gràfic 😀 !

{% panel %}

#Atributs

Els gràfics “plotly.js” es descriuen de manera declarativa amb objectes JSON.

Per cada aspecte del gràfic (els colors, les quadrícules, les dades, etc.) tens un atribut JSON.

A l’hora de descriure el gràfic els atributs s’agrupen en dues categories:

1. traces. Objectes que descriuen una única sèrie de dades en un gràfic

2. layout. Atributs que s’apliquen a la resta del gràfic, com ara el títol, l’eix o les anotacions.

Els “traces” es classifiquen per tipus de gràfic (per exemple, “scatter” o “heatmap”).

També tens un altre atribut opcional de configuració: config.

A continuació tens un exemple semblant a l’inicial:

import Plot from 'react-plotly.js'

export default function App() {

  const data = [
    {
      x: [1999, 2000, 2001, 2002],
      y: [10, 15, 13, 17],
    },
  ];

  const layout = {
    xaxis: {
      title: {
        text: "Year"
      }
    },
    yaxis: {
      title: {
        text: "Percent"
      }
    }
  };

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