Nella prima parte di questa serie, abbiamo creato un'applicazione Python e la abbiamo implementata su Google App Engine (GAE). Dall'applicazione l'abbiamo collegato a un set di dati di Google BigQuery e recuperato i dati nella nostra applicazione. In questo tutorial, vedremo come visualizzare i dati utilizzando la libreria JavaScript D3.js.

1. Introduzione a D3.js

D3.js è una libreria JavaScript per creare documenti basati sui dati. Usa le capacità di HTML5, SVG e CSS3 per creare visualizzazioni interattive basate su dati arbitrari. Inoltre, utilizza diverse trasformazioni per rendere il display visivamente più accattivante.

Dal sito ufficiale D3.js:

D3.js è una libreria JavaScript per manipolare documenti basati su dati. D3 ti aiuta a dare vita ai dati usando HTML, SVG e CSS. L'enfasi di D3 sugli standard web offre tutte le funzionalità dei browser moderni senza legarsi a un framework proprietario, combinando potenti componenti di visualizzazione e un approccio basato sui dati alla manipolazione del DOM..

Per iniziare con D3.js, scarica e includi D3.js oppure puoi collegarti direttamente all'ultima versione.

Ora siamo pronti per creare il nostro grafico usando D3.js.

2. Creazione degli assi X e Y.

In primo luogo, clona il codice sorgente del tutorial precedente da GitHub.

git clone https://github.com/jay3dec/PythonD3jsMashup_Part1.git

Creeremo una nuova pagina per visualizzare il nostro grafico. Diamo un nome displayChart.html. Quindi naviga PythonD3jsMashup_Part1 / templates / e creare una nuova pagina chiamata displayChart.html. Aggiungi il seguente codice HTML ad esso:

          
 
 
Il grafico sarà qui!!
 
 
 
© Azienda 2014
 
 
  

Vai a PythonD3jsMashup_Part1 directory e aprire app.py. Ora dobbiamo includere un percorso per la pagina appena aggiunta displayChart.html. Di seguito è una parte del app.py dove sono dichiarati percorsi esistenti per l'app.

application = webapp2.WSGIApplication ([('/ chart', ShowChartPage), ('/', ShowHome),], debug = True)

Allo stesso modo, includeremo un'altra rotta chiamata / displayChart e impostalo su DisplayChart classe che dichiariamo dopo. Ecco la nuova rotta aggiunta:

application = webapp2.WSGIApplication ([('/ chart', ShowChartPage), ('/ displayChart', DisplayChart), ('/', ShowHome),], debug = True)

Ora, creiamo un gestore di classe per / displayChart per rendere la pagina del modello. Useremo il template.render funzione per visualizzare la pagina del modello. Ecco il gestore della classe appena aggiunto da visualizzare displayChart.html.

class DisplayChart (webapp2.RequestHandler): def get (self): template_data =  template_path = 'Modelli / displayChart.html' self.response.out.write (template.render (template_path, template_data))

Salva tutto e riavvia il server.

dev_appserver.py PythonD3jsMashup_Part1 / 

Posiziona il browser su http: // localhost: 8080 / displayChart e dovresti visualizzare il modello di pagina appena aggiunto.

Scalable Vector Graphics (SVG) è un formato di immagine basato su XML per il disegno di grafica 2D con supporto per l'interattività e l'animazione. Useremo un elemento SVG, sul quale disegneremo il nostro grafico. Quindi, creiamo prima un elemento SVG.

 
Il grafico sarà qui!!
  

Ora, creiamo una funzione JavaScript chiamata INITCHART per inizializzare il grafico. Includi lo script alla fine della pagina.

Prima di iniziare, assumiamo un certo insieme di dati come mostrato. Successivamente, sostituiremo i dati di esempio con i dati del set di dati di Google BigQuery.

var data = ["count": "202", "year": "1590", "count": "215", "year": "1592", "count": "179", " year ":" 1593 ", " count ":" 199 "," year ":" 1594 ", " count ":" 134 "," year ":" 1595 ", " count ":" 176 "," year ":" 1596 ", " count ":" 172 "," year ":" 1597 ", " count ":" 161 "," year ":" 1598 ", " count ":" 199 "," year ":" 1599 ", " count ":" 181 "," year ":" 1600 ", " count ":" 157 "," year ":" 1602 " , "count": "179", "year": "1603", "count": "150", "year": "1606", "count": "187", "year" : "1607", "count": "133", "year": "1608", "count": "190", "year": "1609", "count": "175" , "year": "1610", "count": "91", "year": "1611", "count": "150", "year": "1612"];

Innanzitutto, definiremo alcune costanti relative al grafico, ad esempio larghezza, altezza e margine da sinistra, destra, superiore e inferiore, che utilizzeremo durante la creazione del grafico. Quindi, selezioniamo l'elemento SVG usando d3.select e definiamo le nostre costanti.

var vis = d3.select ("visualizzazione #"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, right: 20, bottom: 20, left: 50;

Per tracciare i nostri dati, dovremo definire le scale attraverso il Asse X. e asse Y in modo tale che quando i dati arrivano dinamicamente, le scale si adattano di conseguenza. D3.js fornisce un numero di API per semplificare le cose. Una di queste API è d3.scale.linear, che useremo per creare la nostra scala in base ai valori dei dati massimi e minimi.

Detto questo, abbiamo due nuovi termini chiamati Gamma e Dominio. Gamma rappresenta l'area che dobbiamo visualizzare la visualizzazione e Dominio rappresenta i valori massimi e minimi dei dati che visualizzeremo sul svg la zona.

Ora, creeremo le nostre scale usando d3.scale.linear e definire l'intervallo e il dominio per le scale create.  

xScale = d3.scale.linear (). range (MARGINS.left, WIDTH - MARGINS.right) .domain ([1590,1612]);

Come puoi vedere, abbiamo definito l'intervallo da 20 a 980 in modo che non entri in collisione con i bordi del grafico. Nel dominio, abbiamo impostato i valori minimi e massimi secondo i dati di esempio.

Allo stesso modo, definiremo anche la scala per l'asse Y..

yScale = d3.scale.linear (). range (HEIGHT - MARGINS.top, MARGINS.bottom) .domain ([91,215]);

Poiché le scale sono pronte, ci sposteremo verso la creazione degli assi. D3.js fornisce un'API chiamata d3.svg.axis per fare ciò. Quindi, useremo l'API per creare gli assi e impostare su di essi le scale create sopra.

xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale);

Con le nostre scale e gli assi creati, siamo pronti a disegnarli sul svg. Per questo abbiamo bisogno di un contenitore, quindi creiamo uno. 

vis.append ( "svg: g")

Ora, imposteremo il asseX che abbiamo creato sopra al svg contenitore come mostrato di seguito:

vis.append ("svg: g") .call (xAxis);

Allo stesso modo, per il asseY:

vis.append ("svg: g") .call (yAxis);

Ecco il INITCHART funzione che abbiamo appena creato. 

function InitChart () var data = ["count": "202", "year": "1590", "count": "215", "year": "1592", "count": "179", "year": "1593", "count": "199", "year": "1594", "count": "134", "year": "1595",  "count": "176", "year": "1596", "count": "172", "year": "1597", "count": "161", "year": "1598 ", " count ":" 199 "," year ":" 1599 ", " count ":" 181 "," year ":" 1600 ", " count ":" 157 "," anno ":" 1602 ", " count ":" 179 "," year ":" 1603 ", " count ":" 150 "," year ":" 1606 ", " count ":" 187 "," year ":" 1607 ", " count ":" 133 "," year ":" 1608 ", " count ":" 190 "," year ":" 1609 ", " conteggio ":" 175 "," anno ":" 1610 ", " conteggio ":" 91 "," anno ":" 1611 ", " conteggio ":" 150 "," anno ":" 1612 " ]; var vis = d3.select ("visualizzazione #"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, right: 20, bottom: 20, left: 50, xScale = d3.scale.linear () .range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([1590, 1612]), yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). dominio ([91, 215]), xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale); vis.append ("svg: g") .call (xAxis); vis.append ("svg: g") .call (yAxis); 

Salva tutte le modifiche e chiama la funzione al caricamento della pagina. Riavvia il server e indirizza il browser a http: // localhost: 8080 / displayChart e dovresti riuscire a vedere la schermata sottostante.

Se dai un'occhiata alla schermata sopra, sembra un casino. I nostri due assi ci sono, ma sembrano sovrapporsi l'un l'altro. Prendiamo quello corretto prima.

Al fine di separare entrambi gli assi sovrapposti, quello che faremo è spostare il Asse X. verso il basso. Useremo una proprietà chiamata trasformare spostare il Asse X. giù. Esistono diversi tipi di trasformazioni disponibili. Useremo il tradurre trasformazione specifica per spostarlo verso il basso. Usando translate transform possiamo spostare gli assi in base alle coordinate. Durante l'uso di translate, dobbiamo specificare le coordinate X e Y a cui l'asse deve essere spostato. Poiché vogliamo che l'asse X si sposti verso il basso, specifichiamo solo la coordinata Y e lasciamo la coordinata X a 0. Ecco come appare dopo aver aggiunto l'attributo transform. 

vis.append ("svg: g") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")") .call (xAxis);

Salva le modifiche e riavvia il server. Indirizza il tuo browser a http: // localhost: 8080 / displayChart e dovresti vedere la schermata sottostante.

Successivamente, dobbiamo cambiare l'orientamento dell'asse Y. Possiamo specificare l'orientamento dell'asse usando l'orient. Quindi modifica il asseY come mostrato di seguito per cambiare il suo orientamento.

yAxis = d3.svg.axis () .scale (yScale) .orient ("left");

Ora se aggiorni la pagina non sarai in grado di vedere l'Asse Y. È perché l'orientamento dell'asse Y è stato modificato ed è andato oltre la vista all'estrema sinistra. Per cambiare che applicheremo trasformare all'asse Y come mostrato.

vis.append ("svg: g") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis);

Come puoi vedere dal codice precedente, abbiamo semplicemente spostato l'asse Y lungo la coordinata X (20 da sinistra) per portarlo nella foto. Salva le modifiche e aggiorna la pagina e dovresti vedere la schermata sottostante.

Quindi qui abbiamo il nostro asse X e l'asse Y, anche se sembrano un po 'brutti. Applichiamo alcuni stili e li rendiamo belli. Includi i seguenti stili CSS:

.percorso dell'asse riempimento: nessuno; Corsa: # 777; forma rendering: crispEdges;  testo .axis font-family: Lato; font-size: 13px; 

Aggiungi i seguenti stili CSS agli assi usando la proprietà dell'attributo CSS.

vis.append ("svg: g") .attr ("classe", "asse x") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")") .call (asseX); vis.append ("svg: g") .attr ("classe", "asse y") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)") .call (yAxis );

Aggiorna la pagina e dovresti vedere la schermata seguente:

3. Ridimensionamento dinamico degli assi X e Y.

Fino ad ora, abbiamo codificato i valori minimi e massimi per il dominio, il che lo rende statico e inutile quando i dati diventano dinamici. Quindi, dobbiamo cambiarlo e renderlo dinamico in modo che il grafico si riduca dinamicamente.

D3.js fornisce funzioni chiamate d3.min e d3.max per ottenere i valori minimi e massimi da una matrice. Possiamo utilizzare queste funzioni per ottenere i valori massimi e minimi per il nostro dominio, in base al set di dati di esempio. Supponiamo di avere un array chiamato dati. utilizzando d3.min possiamo ottenere il valore minimo.

d3.min (data, function (d) return d.value;)

Allo stesso modo, per ottenere il valore massimo:

d3.max (data, function (d) return d.value;)

Ora modifichiamo il xScale e yScale per rendere dinamici i valori del dominio.

xScale = d3.scale.linear (). range ([MARGINS.left, WIDTH - MARGINS.right]). domain ([d3.min (data, function (d) return (parseInt (d.year) - 5) ;), d3.max (data, function (d) return parseInt (d.year, 10);)]); yScale = d3.scale.linear (). range ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([d3.min (dati, funzione (d) ritorno (parseInt (d.count) - 5) ;), d3.max (data, function (d) return parseInt (d.count, 10);)]);

Avvolgendolo

In questo tutorial, abbiamo visto come iniziare con la libreria di visualizzazione JavaScript D3.js per creare la nostra app di visualizzazione. Abbiamo creato gli assi per il nostro grafico e lo abbiamo reso dinamico in modo che si adatti ai dati di conseguenza. 

Nella parte successiva di questa serie, utilizzeremo i dati effettivi recuperati da Google BigQuery per ridimensionare gli assi del grafico e anche iniziare a tracciare i dati sul grafico.

Il codice di questo tutorial è disponibile su GitHub.