Share
Nella parte precedente di questo tutorial, abbiamo visto come tracciare i dati recuperati da Google BigQuery nel nostro grafico D3.js. Ma ci sono alcuni problemi, come il fatto che la scala non cambia in modo dinamico, e i cerchi tracciati non vengono rimossi nelle ricerche successive.
In questo tutorial vedremo come risolvere questi problemi e utilizzare le transizioni D3.js per animare il grafico. Aggiungeremo anche alcune funzionalità per rendere il nostro grafico più interattivo.
Clona il codice sorgente dell'esercitazione precedente da GitHub.
git clone https://github.com/jay3dec/PythonD3jsMashup_Part3.git
Prima di iniziare, crea un nuovo modello chiamato displayChart_4.html, che sarà lo stesso di displayChart_3.html. Inoltre, aggiungere un percorso per displayChart_4.html. Questo è fatto solo per mantenere intatta la demo del tutorial precedente, dato che lo ospiterò sullo stesso URL.
Accentsconagua
class DisplayChart4 (webapp2.RequestHandler): def get (self): template_data = template_path = 'Modelli / displayChart_4.html' self.response.out.write (template.render (template_path, template_data)) application = webapp2.WSGIApplication ( [('/ chart', ShowChartPage), ('/ displayChart', DisplayChart), ('/ displayChart3', DisplayChart3), ('/ displayChart4', DisplayChart4), ('/ getChartData', GetChartData), ('/' , ShowHome),], debug = True)Quando si verifica un cambiamento nel nostro grafico, si verifica istantaneamente. Usando le transizioni D3.js, possiamo rendere il cambiamento di scala scorrevole.
Ora, se osservi gli assi quando cerchiamo parole chiave diverse, le scale non vengono aggiornate. Per correggere ciò, ricolleghiamo i nuovi assi a SVG ogni volta che i dati vengono recuperati.
Aprire displayChart_4.html e dentro il CreateChart Funzione JavaScript, dopo che gli assi sono stati aggiunti, ricolleghiamo le scale agli assi come mostrato di seguito:
vis.select ( "asse X".) chiamata (asseX).; . Vis.select ( "asse Y") chiamata (asseY);
Aggiorna il codice a GAE e indirizza il browser a http://YourAppspotURL.com/displayChart_4.html. Prova a cercare alcune parole chiave, ad esempio Adamo e Cesare, e su ogni ricerca le scale sugli assi vengono aggiornate ma il cambiamento è istantaneo.
Introduciamo le transizioni mentre aggiorniamo le scale su ciascuno degli assi. Iniziamo creando una transizione.
var transition = vis.transition ();
Per impostazione predefinita, la transizione creata ha una durata di 250 ms. Possiamo anche impostare la nostra scelta del ritardo. Facciamo il ritardo di 2.000 ms.
var transition = vis.transition (). duration (2000)
Successivamente, utilizzeremo la transizione creata sopra mentre proviamo a legare le scale agli assi. Modifica il codice di rebinding della scala.
vis.select ( "asse X".) chiamata (asseX).; . Vis.select ( "asse Y") chiamata (asseY);
Usa la variabile di transizione creata come mostrato.
transition.select ( "asse X") chiamata (asseX).; . Transition.select ( "asse Y") chiamata (asseY);
Salvare le modifiche e aggiornare il codice in GAE e puntare il browser su http://YourAppspotURL.com/displayChart_4.html. Prova a cercare una parola chiave e osserva il cambiamento delle scale su entrambi gli assi. Dovresti essere in grado di vedere la transizione animata mentre le scale cambiano.
Abbiamo aggiunto transizioni alle scale mutevoli. Allo stesso modo, possiamo anche aggiungere transizioni ai cerchi che vengono tracciati su ogni ricerca di parole chiave.
Se hai notato, c'è un problema con il risultato della ricerca che viene tracciata. Sebbene le scale vengano aggiornate, i cerchi tracciati non vengono aggiornati di conseguenza nelle ricerche successive. Quindi, per risolvere questo problema, ricolleghiamo i nuovi dati al grafico. Nel CreateChart Funzione JavaScript, aggiungi il seguente codice, che rebind i nuovi dati ai cerchi che vengono tracciati.
circles.attr ("cx", function (d) return xScale (d.year);) .attr ("cy", function (d) return yScale (d.count);) .attr ("r ", 10);Utilizzando i dati recuperati dal set di dati di Google BigQuery, abbiamo trasformato il file anno e contare dei dati usando xScale e yScale, in modo che possa essere tracciato nello spazio SVG disponibile.
Salva le modifiche e aggiorna il codice su GAE. Punta il tuo browser su http://YourAppspotURL.com/displayChart_4.html e prova a cercare parole chiave. Puoi vedere che i dati vengono aggiornati, ma il cambiamento è abbastanza istantaneo. Quindi, aggiungiamo le transizioni mentre riconciliamo i nuovi dati.
circles.transition (). duration (1000) .attr ("cx", function (d) return xScale (d.year);) .attr ("cy", function (d) return yScale (d.count );) .attr ("r", 10);Come puoi vedere, abbiamo appena aggiunto una transizione con una durata di 1.000 ms. Quindi, quando i dati vengono tracciati, non sarà istantaneo, ma sarà un po 'animato. Quindi semplicemente aggiornare il codice a GAE e provare ad aggiornare il displayChart_4.html pagina. Cerca parole chiave e dovresti vedere la magia della transizione.
Ora, se hai osservato, dopo aver cercato una seconda volta una parola chiave, i dati di ricerca precedenti coesistono ancora con il secondo risultato di ricerca. Pertanto, per risolvere questo problema, utilizzeremo l'API di uscita D3.js per rimuovere il risultato precedente. selection.exit (). remove () rimuove i cerchi. Utilizzeremo una transizione durante la rimozione dei cerchi.
circles.exit () .transition (). duration (1000) .remove ();
Aggiorna il codice su GAE e aggiorna displayChart_4.html. Prova a cercare prima la parola chiave Il, che dovrebbe restituire circa 19 risultati e quindi cercare Adamo, che dovrebbe restituire 7 risultati.
Per rendere il nostro grafico un po 'più accattivante, diamo ai cerchi tracciati colori diversi. D3.js fornisce una scala con una gamma di 20 colori chiamati d3.scale.category20 (). Useremo questa scala per dare colori casuali alle nostre cerchie.
Abbiamo stilizzato i nostri cerchi in rosso come mostrato:
.style ("fill", "red");Ora, prima creiamo una scala usando d3.scale.category20.
var color = d3.scale.category20 ();
Successivamente, durante il riempimento dei cerchi selezioneremo i colori casuali usando il colore ridimensionare e riempire i cerchi come mostrato di seguito.
.style ("fill", function (d, i) return color (i););Salva le modifiche e carica il codice su GAE. Una volta terminato, aggiorna la pagina e cerca la parola chiave Dio, e dovresti vedere un grafico colorato come mostrato.
Useremo un plugin jQuery chiamato brillo per aggiungere suggerimenti alle nostre cerchie. All'interno del tooltip, mostreremo le opere di Shakespeare in cui appare la parola chiave cercata. Scarica e includi i suggerimenti di CSS e script in displayChart_4.html.
Per usare brilli, dobbiamo chiamare il plugin sui cerchi all'interno dell'elemento SVG.
$ ('svg circle'). tipsy (gravità: 'w', titolo: function () return 'Title for Circle');Come puoi vedere, abbiamo inizializzato il plug-in di suggerimenti sulle cerchie. Abbiamo definito due proprietà per il suggerimento, gravità e titolo. Gravità definisce la direzione per posizionare il suggerimento relativo al puntatore.
Salva le modifiche e aggiorna il codice su GAE. Aggiorna il tuo displayChart_4.html, e cercare una parola chiave. Posiziona il cursore del mouse su qualsiasi cerchio e dovrebbe visualizzare il suggerimento.
Successivamente, modificheremo la funzione all'interno di bruscamente per analizzare il nome del corpus dal set di dati di Google BigQuery e mostrarlo come suggerimento.
All'interno della funzione del titolo, questo .__ data__ dà i dati collegati con il cerchio particolare. Quindi, concateneremo il nome del conteggio e del corpus e mostreremo nel nostro tooltip.
$ ('svg circle'). tipsy (gravità: 'w', titolo: function () var d = questo .__ data__; return d.count + 'occorrenze trovate in' + d.corpus;);Come puoi vedere, abbiamo concatenato i nomi del conteggio e del corpus per mostrarli come suggerimento. Salva le modifiche e aggiorna il codice su GAE. Aggiorna la pagina, cerca una parola chiave e posiziona il mouse su qualsiasi cerchio per visualizzare il suggerimento.
Questa era l'ultima parte dell'app Data Visualization che utilizzava GAE Python, D3.js e Google BigQuery. D3.js è una libreria JavaScript efficace per la creazione di visualizzazioni belle e interattive. Quello che abbiamo imparato in queste serie di tutorial è solo la punta dell'iceberg, e c'è molto di più che D3.js ha da offrire. Per una conoscenza approfondita, consiglierei di leggere la documentazione ufficiale. Un gran numero di esempi può anche essere trovato sul sito ufficiale.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!!
