Costruisci rapidamente grafici dinamici su D3 con Plottable.js

Il libero Libreria D3.js è solo uno dei tanti che ti permette creare una grafica interattiva sulla pagina. Mentre D3 è forse il più popolare del gruppo, imparare a usarlo non è un compito facile.

Ecco perchè Plottable.js è una libreria così preziosa. È un progetto open source gratuito costruito su D3.js, rendere più facile per chiunque creare grafici di dati interattivi da zero.

Questa libreria gestisce tutto il lavoro sporco, così puoi concentrarti su aspetti specifici come i dati. stampabili genera il codice corretto per dimensione e posizione di qualsiasi grafico che scegli.

Ogni grafico ha il suo Componente in Plottable dove puoi copia / incolla il codice del modello per ricostruire il grafico da solo. Al momento della stesura, è possibile selezionare da 10 stili del grafico della trama, inclusi grafici a barre, grafici a torta, grafici a dispersione e grafici area.

Puoi ricostruire i componenti individualmente e personalizzare le loro impostazioni in modo dinamico. In questo modo, puoi facilmente modificare elementi interattivi, colori, animazioni, posizionamenti, dimensioni e qualsiasi altra cosa tu abbia bisogno.

Il libreria completa è disponibile su GitHub se vuoi sfogliare il codice sorgente e scaricare una copia.

Ma il modo migliore per imparare è attraverso l'esempio. Ecco perché dovresti dare un'occhiata al loro grafici di esempio che eseguono Plottable per vedere come funziona in azione.

Ogni grafico è completamente interattivo, con il codice sorgente da avviare. Se vuoi ricostruire un grafico simile, copia / incolla il codice JS e riformatta secondo necessità.

Ho due preferiti personali dal loro sito: il Calendario Heatmap modellato sulla scheda di attività di GitHub e sul Grafici sincronizzati con funzioni di selezione dinamica.

Se non hai mai usato D3.js prima di allora, avrai difficoltà ad imparare questa libreria. Soprattutto, perché è scritto in TypeScript, quindi probabilmente vorrai prenderlo anche tu. Il codice finale è compilato in ES5 JavaScript, quindi dovrebbe funziona in tutti i principali browser.

Se sei disposto a tuffarti dai un'occhiata al loro Pagina Tutorial pieno di risorse utili. Imparerai tutto ciò di cui hai bisogno per iniziare con Plottable e creare grafici dinamici basati sul web da zero.