Crea grafici di dati basati su JavaScript con Billboard.js

Grafica e grafica svolgono un ruolo fondamentale nel miglioramento dei contenuti web. Con la tecnologia moderna è così facile aggiungere immagini personalizzate come icone SVG nella tua pagina.

Ma un'altra visuale sorprendente che puoi costruire da zero è una carta web.

Questo può aiutarti a rappresentare graficamente i dati in modo che i tuoi visitatori possano rapidamente scremare le informazioni pertinenti. E invece di scrivere un grafico tu stesso puoi usare una libreria come Billboard.js per fare tutto il lavoro pesante.

Questo è in realtà costruito su D3, che è una libreria di visualizzazione dei dati JavaScript. È facilmente il più popolare là fuori, rendendolo la dipendenza più sicura che si possa desiderare.

Con Billboard.js puoi accedere all'API D3 in modo rapido e semplice. L'obiettivo principale di Billboard è la facilità d'uso, che lo rende accessibile a chiunque . Anche se è utile avere qualche esperienza con JavaScript, non è certamente necessario essere esperti.

Basta notare che l'intero codebase usa la sintassi ES6 che può essere fonte di confusione per gli sviluppatori JS meno esperti.

Finché sai come compilare il codice dovresti stare bene. In realtà abbiamo coperto alcune funzioni interessanti di ES6, se vuoi saperne di più.

Tutti i dettagli tecnici su questo plugin possono sembrare belli. Ma probabilmente vuoi solo sapere cosa può fare .

Dai un'occhiata alla pagina demo e fai clic su alcuni esempi dal vivo.

Troverai di tutto, dai grafici a torta ai grafici a dispersione e ai grafici a barre animati personalizzati.

Con Billboard.js hai il pieno controllo sui tuoi dati . Puoi controllare come appare sulla pagina, come è strutturato e quale tipo di funzionalità UI / UX aggiungi (se ce ne sono).

È davvero una fantastica libreria di carte ed è una delle più facili da raccogliere. Dai un'occhiata al repository GitHub del progetto per saperne di più.

Puoi anche scavare questo snippet su CodePen se vuoi giocare con il codice nel tuo browser.