Tracciare le acque: tra Bokeh e D3

Tracciare le acque: tra Bokeh e D3

introduzione

Arriva un momento nella vita di un "low-key ma anche high-key che cerca di diventare un designer e sviluppatore front-end" in cui devono entrare nel mondo delle librerie di grafici.

Le librerie di grafici producono visualizzazioni basate sui dati. Sono il motivo per cui puoi cogliere rapidamente le tendenze dell'aspettativa di vita su FiveThirtyEight o misurare il sentimento nazionale su un'imminente elezione presidenziale (yikes) sul New York Times.

Pensa ai grafici che puoi creare all'interno di Fogli Google, tranne che ora hai diritti di visualizzazione e modifica diretti per la libreria che guida quei grafici. Tu sei il maestro di questi elementi costitutivi di basso livello che costituiscono un "grafico".

Diverse librerie di grafici sono scritte in JavaScript, un linguaggio che è più familiare agli sviluppatori web rispetto alla maggior parte, il che rende l'apprendimento meno scoraggiante. Se eseguite correttamente, le librerie di grafici hanno il potere di portare a casa un messaggio potente e di darti l'opportunità di vedere dei veri dolci visivi.

Recentemente, il nostro team è stato incaricato di creare un'interfaccia che doveva integrare una libreria di grafici per raggiungere l'obiettivo. Di conseguenza, abbiamo dovuto scegliere una libreria che soddisfacesse i nostri casi d'uso specifici. Se valuti correttamente le tue esigenze e scegli una libreria che in qualche modo le soddisfi tutte, la vita è d'oro.

Tuttavia, le biblioteche non sono mai un tipo di affare valido per tutti. Il più delle volte, la tua supposizione iniziale che una libreria sia la corrispondenza perfetta non sarà corretta a causa di ostacoli imprevisti che compaiono.

Forse stai pensando: "Quali sono queste opzioni?", "Come ti sei avvicinato alla scelta di un'opzione?" o "Perché ti sei sentito stupido?" (si riferisce al messaggio Slack sopra).

Questo articolo descriverà il nostro processo di scelta di una libreria di grafici tra la miriade di librerie di grafici JavaScript attualmente disponibili, la decisione critica di passare tra due librerie di grafici (Bokeh e D3.js) ei pro e i contro di ciascuna. Per me, questo era un territorio "inesplorato" e se ti senti allo stesso modo riguardo alla creazione di grafici o alla visualizzazione dei dati in generale, ti sentirai meglio dopo aver letto questo.

Cominciamo!

Perché abbiamo provato prima Bokeh

I nostri bisogni si dividevano in due campi: velocità e interattività . Poiché stavamo gestendo quantità maggiori di dati, la nostra visualizzazione doveva essere in grado di aggiornarsi alla velocità della luce (o almeno a una velocità che non presentasse ritardi percepibili).

La nostra applicazione doveva anche avere l'interattività desiderata che avevamo previsto per l'utente. In uno scenario ideale, la libreria includerebbe già alcune di queste funzioni interattive che potremmo facilmente inserire, invece di doverle scrivere da zero.

Inserisci Bokeh.

A proposito di Bokeh

Bokeh è una libreria destinata principalmente alla creazione di visualizzazioni nel browser da set di dati di grandi dimensioni o in streaming. Queste visualizzazioni vengono create utilizzando Python. Quindi l'API JavaScript di Bokeh prende il tuo script Python ed esegue il rendering dei grafici o dei grafici oltre a gestire le interazioni dell'interfaccia utente nel browser.

Puoi anche scegliere di utilizzare Bokeh Server per gestire lo streaming dei tuoi dati. Nella documentazione Bokeh 0.12.13, si afferma: "Questa capacità di sincronizzare tra Python e il browser è lo scopo principale di Bokeh Server."

Vantaggi

Il bokeh è magico per molte ragioni. Esegue prima il rendering utilizzando WebGL con un fallback HTML5 Canvas, fornisce diversi strumenti incorporati per interagire con i grafici, gestisce set di dati di grandi dimensioni e, infine, crea qualcosa che può andare sul web immediatamente.

La capacità di navigare tra Python e JavaScript è anche incredibilmente potente per la creazione di grafici perché Python ti consente di attingere a strutture di dati utili e strumenti di analisi dei dati, mentre JavaScript traduce i dati manipolati in visualizzazioni intuitive per il browser.

Svantaggi

Uno svantaggio di Bokeh, tuttavia, è che è limitato nel grado di interattività che una visualizzazione può avere. Bokeh consente di "tracciare" nel senso più convenzionale: offre una tela 2D simile a una griglia con assi come linea di base. E va bene, perché spesso è ciò di cui l'utente ha bisogno e vuole. Gli utenti esperti di Bokeh possono creare cose davvero belle (vedi esempi qui).

Ma se volessi creare una visualizzazione che andasse al di fuori delle caratteristiche convenzionali di un grafico, come la simulazione di forze tra gli atomi e il trascinamento degli atomi in giro, non so come potrei farlo in Bokeh.

Bokeh è pensato anche per lo sviluppo in Python, non in JavaScript. Di seguito sono riportati esempi di grafici a barre in Bokeh utilizzando Python. È semplicissimo e pulito.

Bokeh Barchart utilizzando Python (tramite Jupyter Notebook)

Prima di iniziare a utilizzare Bokeh, abbiamo preso la decisione consapevole di creare script in JavaScript anziché in Python perché l'intera applicazione web era ed è costruita su un framework JavaScript. Nessuna documentazione di Bokeh è in JavaScript (è in Python, come ci si aspetterebbe), e il tentativo di entrare sotto il cofano di JavaScript si è rivelato difficile.

Se stai lavorando con glifi di basso livello, è vero che tutto ciò che è possibile in Python è possibile in JavaScript con Bokeh. Tuttavia, se stai appena iniziando a imparare entrambe le lingue come me, tradurre la sintassi tra i due non è intuitivo.

Inoltre, ci sono limitazioni al JavaScript Bokeh.Chartse alle Bokeh.PlottingAPI di alto livello : alcuni sono deprecati, altri rendono davvero difficile modificare le caratteristiche della trama. Gli esempi seguenti sono i miei tentativi di creare grafici Bokeh in JavaScript.

Bokeh Grafico a barre di basso livello utilizzando Javascript

Bokeh Grafico a barre di alto livello utilizzando l'API Javascript Bokeh.Charts

Maggiori informazioni sullo sviluppo in JavaScript con Bokeh qui. Come puoi vedere, JavaScript con la libreria di Bokeh perde le righe di codice più semplici che abbiamo osservato durante lo sviluppo con Python. Penso che ci sia voluta circa un'ora di giocherellare con la console per aggiungere un contorno bianco alle barre e un titolo nel mio grafico di alto livello, che ribadisce la mia lotta per navigare al di fuori dei confini Bokeh.Chartsdell'API JavaScript quando si desidera modificare i dettagli visivi del grafico.

Infine, c'è più documentazione e utilizzo attivo di altre librerie di grafici , come D3.js o three.js, rispetto a Bokeh. Con collaboratori e utenti più attivi di una libreria arriva un filemaggiore probabilità di trovare la soluzione necessaria per correggere un bug specifico.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Perché siamo passati a D3

Quindi siamo rimasti bloccati. Eravamo arrivati ​​al punto in cui "questa libreria si adatta alle nostre esigenze, ma è una seccatura continuare a fare cose in JavaScript e forse raggiungeremo il limite un giorno quando ci renderemo conto di aver bisogno di qualcosa che non è disponibile in Bokeh adesso." Freddo.

Immettere D3.

La nostra preoccupazione iniziale con D3 era che avrebbe reso le nostre visualizzazioni troppo lentamente, date le passate esperienze con il rendering di SVG nel browser con maggiori quantità di dati. Sapevamo anche che la curva di apprendimento per D3 era significativamente più alta della curva di apprendimento di Bokeh.

Ma eravamo ancora ottimisti data la popolarità di D3, la quantità infinita di applicazioni D3 ben documentate e il nostro atteggiamento "Get Sh * t Done" ... quindi abbiamo deciso di provarlo comunque.

Informazioni su D3

D3.js è una libreria JavaScript che enfatizza l'associazione dei dati. Ti dà il potere unico di generare elementi nel DOM e associare datum / dati agli elementi contemporaneamente. Con una libreria completamente basata sui dati, puoi aggiungere elementi in modo dinamico durante l'aggiunta o la rimozione di punti dati e la transizione tra set di dati. D3 offre anche un maggiore controllo sull'estetica e l'interattività del risultato finale, il che significa che puoi cavartela creando le visualizzazioni più bizzarre / meravigliose.

Vantaggi

Con nostra sorpresa, le visualizzazioni D3 che abbiamo creato con i nostri set di dati erano molto burrose. Ci siamo subito resi conto che D3 è strutturato specificamente per il rendering rapido, nonostante gli enormi array che stavamo passando alla libreria.

Invece di passare i punti dati uno per uno e generare il rispettivo SVG, il che può essere piuttosto noioso, D3 ti consente di associare l'intero set di dati ai tuoi SVG prima che esistano. Gli SVG vengono quindi generati a fuoco rapido e associati ai rispettivi punti dati tutto in una volta.

È come uno chef in cucina che riceve un elenco di ordini in una volta e può preparare il cibo in un ordine che omette tempi di attesa non necessari, piuttosto che aspettare sempre di ricevere l'ordine successivo dopo aver preparato un piatto.

La parte migliore di D3 è che offre ampie opportunità per interazioni e transizioni fluide tra i set di dati. Poiché il nostro obiettivo finale era ed è responsabilizzare l'utente, volevamo creare una visualizzazione che invitasse un individuo a interagire con essa.

D3 è pensato anche per lo sviluppo di JavaScript. Non ci sarebbe stato più "scavare sotto il cofano" dell'API JavaScript come stavamo facendo con Bokeh. L'esempio di grafico a barre che ho creato utilizzando BokehJS in precedenza in questo articolo è mostrato di seguito utilizzando la libreria D3.

D3 Barchart

Sì, ci sono linee di codice più complesse rispetto al codice richiesto per un grafico Bokeh. Ci sono voluti più tempo ed energia per riprendere. Ma hai il controllo completo su ogni piccolo dettaglio del tuo grafico, ed è tutto documentato da qualche parte online (probabilmente tramite il creatore, Mike Bostock). È davvero fantastico.

Infine, negli ultimi anni è stato ampiamente utilizzato D3 per visualizzare le elezioni americane del 2017, il movimento delle popolazioni di rifugiati, i tassi di vaccinazione dei neonati per l'OMS e innumerevoli altre tendenze e storie. Di conseguenza, D3 ha raccolto una notevole quantità di visibilità e attenzione, il che porta a utenti più attivi e nuovi modi per utilizzare la libreria ogni giorno.

Quando si sceglie una libreria per un lungo periodo e si tiene presente che anche i propri compagni di squadra dovranno impararla alla fine, è assolutamente cruciale considerare la comunità attuale e futura di collaboratori della biblioteca. Una biblioteca con una comunità in continua espansione è l'ideale e D3 sembra promuovere quel tipo di comunità.

Svantaggi

La curva di apprendimento iniziale è più alta per D3 rispetto a Bokeh, supponendo che tu stia sviluppando in Python con Bokeh. JavaScript è più dettagliato di Python. Tuttavia, se come noi avevi intenzione di sviluppare in JavaScript, vale la pena arrancare attraverso i tutorial di D3.

È difficile capire come funzionano le selezioni, cosa significano .enter () e .exit () e la magia che accade con una semplice riga di codice (.transition () anybody?). MA - una volta che ti sei concentrato sulla struttura unica di D3 di supporre che le cose esistano prima che esistano, le possibilità sono infinite.

In definitiva, i vantaggi di D3 hanno superato lo sforzo e il tempo per impararlo e avevamo la sensazione che il passaggio a D3 sarebbe stato un buon investimento a lungo termine.

Conclusione

Così il gioco è fatto! Stiamo ancora utilizzando e imparando attivamente D3 mentre integriamo la libreria nella nostra applicazione e nel nostro team. Anche se solo perché stiamo andando avanti con D3 non significa che non useremo Bokeh per un'applicazione diversa in futuro. Ci sono pro e contro in ogni libreria di grafici ed è importante riflettere costantemente per determinare se è necessario continuare con la libreria corrente o iniziare a esplorare altre opzioni.

Prima di scegliere una libreria di grafici, conosci le tue esigenze specifiche e non aver paura di tuffarti a capofitto nelle acque inesplorate delle librerie di grafici con queste esigenze in mente. Se qualcosa non funziona la prima volta, prova qualcosa di nuovo che sembra promettente.

Si tratta di esplorare, documentare e ricontrollare te stesso e i tuoi compagni di squadra per continuare a far evolvere il progetto in modo produttivo.

Avanti!

Se hai commenti, correzioni, suggerimenti o semplicemente vuoi parlare, non esitare a scrivermi a [email protected] Puoi trovare alcuni dei miei lavori su //mandilicai.com/.