UPDATE: Mentre molti degli strumenti presentati in questo articolo del 2012 sono ancora efficaci e si sono sviluppati per diventare ancora più utili, potreste essere interessati alla nostra serie più recente sugli Interactive Data Viz Tools.
Complex Data Visualization Tools
Benvenuti indietro per la seconda parte della mia serie sugli strumenti di visualizzazione dati interattiva (dataviz). Nella parte 1, abbiamo coperto tre strumenti interessanti per la visualizzazione di grafici e diagrammi e molti altri tipi di dati su una pagina web. Nella seconda parte, diamo un’occhiata ad altri tre strumenti che sono un po’ più complessi ma che hanno delle incredibili capacità di visualizzazione dei dati.
- jQuery Visualize (Parte 1)
- Google Charts (Parte 1)
- Highcharts (Parte 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit è un’offerta molto robusta e personalizzabile. Uno dei suoi principali punti di forza è un approccio unico al rendering dei dati. Oltre a strumenti di filtraggio, ordinamento e ricerca facili da usare, ti permette di usare un modello HTML (chiamato “lente” in Exhibit) da costruire per ottenere tutto sulla pagina esattamente come vuoi tu. È quasi come un mini-CMS per dataviz dove puoi accedere ai tuoi dati attraverso i valori degli attributi direttamente nella lente. Per i progetti che richiedono un alto grado di sensibilità al look and feel, questo estremo livello di flessibilità per costruire visualizzazioni di dati è fantastico.
- Tipi di visualizzazione supportati: Grafici a linee, mappe, grafici a dispersione, elenchi multi-filtro, linee temporali, diagrammi temporali e altro ancora… con widget!
- Fonti di input dei dati: JSON, foglio elettronico
- Uscita dati: HTML
- Opzioni di stile: CSS
- Tipo: Libreria Javascript
PROS
Flessibile & Approccio potente al design
Mi piace molto l’approccio di Exhibit, dove i dati sono presentati attraverso una “lente” – un guscio template HTML in cui sono inseriti gli elementi. Questo rende il sistema completamente personalizzabile e con stile CSS, il che significa che i designer lo amano, e la creazione di coerenza per i marchi dei clienti è un gioco da ragazzi.
Filtraggio forte/ordinamento/ricerca
Lasciare che gli utenti filtrino i dati in base a qualsiasi numero di criteri è incredibilmente utile, e trasforma le informazioni da contenuto statico in una vera funzione interattiva. Il filtraggio è integrato in Exhibit ed è facile da implementare. Il filtraggio sul lato server può essere un lavoro pesante (per non dire costoso), quindi Exhibit si distingue davvero nel rendere il filtraggio dell’utente incredibilmente facile e veloce. Lo stesso vale per l’ordinamento e la ricerca. Exhibit rende molto facile dare agli utenti del tuo sito il controllo per ottenere esattamente la visione dei tuoi dati che vogliono, e quindi una comprensione più preziosa del perché è importante.
Documentazione forte
Il salto in strumenti complessi di dataviz può essere un’impresa e richiede qualche prova ed errore. Exhibit accelera davvero il processo con una grande documentazione sul loro sito web e alcuni eccellenti tutorial per principianti.
Widgets!
Vuoi spingere Exhibit ancora più in là? Puoi aggiungere funzionalità con i widget. Ci sono widget disponibili per raccolte di bibliografie e citazioni, un visualizzatore di immagini in stile CoverFlow, linee temporali e timeplot, solo per nominarne alcuni. Questo tipo di estensione del prodotto rende Exhibit una delle opzioni più robuste e flessibili per la visualizzazione dei dati.
CONS
Curva di apprendimento ripida
Come le altre librerie più complesse, c’è più codifica coinvolta con Exhibit rispetto alla maggior parte delle opzioni, e avere precedente esperienza Javascript è sicuramente molto utile. Tuttavia, ho trovato i tutorial davvero ben fatti e divertenti da fare, quindi una volta che si inizia, è davvero facile andare avanti.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit è una bella suite di strumenti per creare grafici e tabelle su una pagina web. Presenta una bella lista di tipi di grafici supportati e introduce alcune caratteristiche di animazione nel mix (ad esempio, le barre di un grafico a barre possono espandersi alla loro dimensione quando il grafico viene caricato – questo genere di cose). Le animazioni sono carine e possono sicuramente aggiungere un ulteriore livello di eleganza al tuo sito. Ci sono anche alcune caratteristiche interattive interessanti, come applicare un “filtro” a un grafico cliccando su di esso. Il grafico poi mostra solo la serie su cui hai cliccato finché non rimuovi il filtro. Dai un’occhiata alle demo per vedere di cosa è capace questo toolkit.
- Tipi di visualizzazione supportati: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Uscita: Tela
- Styling: Parametri Javascript
- Tipo: Libreria Javascript
PROS
Tipi di grafici unici
Mi piacciono molto i vari tipi di visualizzazione non standard disponibili in InfoVis Toolkit. Questo strumento potrebbe essere eccessivo per l’occasionale grafico a torta, ma potrebbe davvero brillare quando devi avvicinarti alle opzioni di visualizzazione per dati più complicati.
Animazioni / Interazioni
Le animazioni sono una grande aggiunta a queste tabelle e grafici. Conferiscono una bella qualità simile a quella di Flash a questi grafici che è davvero piacevole. E la capacità di interagire con questi grafici – trascinando cose in giro e manipolando il grafico (come questo) è molto bello e potrebbe essere davvero utile.
CONS
Curva di apprendimento
Con tutte queste grandi caratteristiche arriva la complessità e, anche se la documentazione sul sito sembra essere buona, questo strumento richiede una buona esperienza Javascript per ottenere il massimo da esso.
D3.js
Wow, D3.js è forte! Mi sono appena perso per qualche ora a curiosare nel sito di D3 e le possibilità sembrano infinite. Questo strumento richiede sicuramente un alto livello di competenza con Javascript e JSON, ma genera alcuni splendidi e sofisticati grafici. Date un’occhiata agli esempi.
D3 non è proprio come gli altri. Non è uno strumento di creazione di grafici “pronto all’uso”, ma piuttosto una struttura per disegnare elementi basati sui dati. Il sito web di D3 lo dice meglio: “Piuttosto che fornire un sistema monolitico con tutte le caratteristiche di cui si può avere bisogno, D3 risolve solo il nocciolo del problema: la manipolazione efficiente dei documenti basati sui dati.”
E, dal momento che è possibile creare grafica SVG, si potrebbe utilizzare questo output ovunque, comprese le applicazioni di stampa. D3 potrebbe essere il centro di un flusso di lavoro di pubblicazione web/stampa per un progetto graficamente pesante.
- Tipi di visualizzazione supportati: Tutti? Il cielo è il limite.
- Input di dati: JSON, GeoJSON, CSV
- Output: HTML, SVG
- Styling: CSS, Javascript
- Tipo: Libreria Javascript
PROS
Flessibilità illimitata
Potete praticamente usare D3.js per disegnare qualsiasi cosa vogliate in base ai dati. Questo è uno strumento incredibile per le persone che creano nuove visualizzazioni di dati e visualizzazioni costruite su serie di dati molto grandi.
Output
Molto bello che si possa dire a D3 di creare elementi HTML così come SVG. Sicuramente apre la porta allo stile con i CSS, che è l’ideale.
CONS
Curva di apprendimento
Devi essere una persona esperta in Javascript, JSON e matematica per far saltare i cerchi a D3. E alcuni degli esempi lasciano la mente sbalordita, ma andate avanti e seguite il tutorial. Non è così male e, se avete familiarità con jQuery o Prototype, molto di questo vi sembrerà familiare. E molto non lo sarà…
Conclusione
Questi sei prodotti sono solo la punta dell’iceberg del dataviz. Ci sono dozzine di altri ottimi prodotti là fuori. Ma questi dovrebbero darvi una buona idea di ciò che sta accadendo e un senso della gamma di capacità e complessità del mondo del dataviz interattivo.