În prima parte a acestei serii, am creat o aplicație Python și am implementat-o ​​în Google App Engine (GAE). Din aplicație am conectat-o ​​la un set de date Google BigQuery și am preluat datele în aplicația noastră. În acest tutorial, vom vedea cum să vizualizăm datele utilizând biblioteca JavaScript D3.js.

1. Noțiuni de bază cu D3.js

D3.js este o bibliotecă JavaScript pentru a crea documente bazate pe date. Utilizează capabilitățile HTML5, SVG și CSS3 pentru a crea vizualizări interactive bazate pe date arbitrare. De asemenea, face uz de transformări diferite pentru a face vizualul mai atrăgător.

De pe site-ul oficial D3.js:

D3.js este o bibliotecă JavaScript pentru manipularea documentelor pe baza datelor. D3 vă ajută să aduceți la viață viața folosind HTML, SVG și CSS. Densitatea D3 pe standardele web vă oferă capabilitățile complete ale browserelor moderne fără a vă lega într-un cadru propriu, combinând componente puternice de vizualizare și o abordare bazată pe date la manipularea DOM.

Pentru a începe cu D3.js, descărcați și includeți D3.js sau puteți să vă conectați direct la cea mai recentă versiune.

Acum suntem pregătiți pentru crearea graficului folosind D3.js.

2. Crearea axelor X și Y

Mai întâi, clonați codul sursă tutorial anterior de la GitHub.

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

Vom crea o pagină nouă pentru a afișa graficul nostru. Să spunem asta displayChart.html. Deci navigați la PythonD3jsMashup_Part1 / Șabloane / și creați o nouă pagină numită displayChart.html. Adăugați următorul cod HTML la acesta:

          
 
 
Diagrama va fi aici!!
 
 
 
© Compania 2014
 
 
  

Navigați la PythonD3jsMashup_Part1 director și deschide app.py. Acum trebuie să includeți un traseu pentru pagina nou adăugată displayChart.html. Mai jos este o parte din app.py unde rutele existente sunt declarate pentru aplicație.

aplicație = webapp2.WSGIApplication ([('/ diagram', ShowChartPage), ('/', ShowHome), debug = True)

În mod similar, vom include un alt traseu numit / displayChart și setați-l la DisplayChart clasa pe care o declarăm în continuare. Iată noul traseu adăugat:

aplicație = webapp2.WSGIApplication ([/ 'diagram', ShowChartPage), ('/ displayChart', DisplayChart), ('/', ShowHome), debug =

Acum, să creăm un handler de clasă / displayChart pentru a face pagina de șablon. Vom folosi template.render pentru a afișa pagina șablonului. Aici se afișează manualul de clasă nou adăugat displayChart.html.

clasa DisplayChart (webapp2.RequestHandler): def get (auto): template_data =  template_path = 'Templates / displayChart.html' auto.response.out.write (template.render (calea șablonului, datele template))

Salvați totul și reporniți serverul.

dev_appserver.py PythonD3jsMashup_Part1 / 

Punctați browserul la http: // localhost: 8080 / displayChart și ar trebui să vedeți noul șablon de pagină.

Scalable Vector Graphics (SVG) este un format de imagine bazat pe XML pentru desen grafic 2D cu suport pentru interactivitate și animație. Vom folosi un element SVG, pe care ne vom desena graficul. Deci, să creați mai întâi un element SVG.

 
Diagrama va fi aici!!
  

Acum, să creați o funcție JavaScript numită InitChart pentru a inițializa graficul. Includeți scriptul la sfârșitul paginii.

Înainte de a începe, să presupunem un anumit set de date după cum se arată. Mai târziu, vom înlocui datele de probă cu datele din setul de date Google BigQuery.

var 1592 ", " count ":" 179 "," "count": " 1595 ", " count ":" 1593 ", " count ":" 199 "," year " 176 "," anul ":" 1596 ", " contează ":" 172 "," anul ":" 1597 " numărătoarea: "160", "anul": "1602", "anul": "1599", , "count": "160", "count": "150", " : "1607", "contează": "1607", "numără": "133", "anul" , "anul": "1610", "număr": "91", "anul": "1611", "număr": "150", "anul";

Mai întâi, vom defini câteva constante legate de grafic, cum ar fi lățimea, înălțimea și marginea de la stânga, dreapta, sus și de jos, pe care le vom folosi la crearea graficului. Deci, să selectăm elementul SVG folosind d3.select și să ne definim constantele.

var vis = d3.select ("# vizualizare"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, dreapta: 20, jos: 20, stânga: 50;

Pentru a calcula datele noastre, va trebui să definim scale pe întregul X axă și axa Y astfel încât atunci când datele provin dinamic, cântarele se ajustează corespunzător. D3.js oferă un număr de API-uri pentru a face lucrurile mai ușoare. Un astfel de API este d3.scale.linear, pe care îl vom folosi pentru a crea scala bazată pe valorile maxime și minime ale datelor.

Acestea fiind spuse, avem doi noi termeni numiți Gamă și Domeniu. Gamă reprezintă zona în care trebuie să afișăm vizualizarea și Domeniu reprezintă valorile maxime și minime ale datelor pe care le vom vizualiza pe svg zonă.

Acum, vom crea coloanele noastre folosind d3.scale.linear și să definească domeniul și domeniul pentru scările create.  

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

După cum puteți vedea, am definit intervalul de la 20 la 980, astfel încât să nu se ciocnească cu marginile graficului. În domeniu, am setat valorile minime și maxime conform datelor din eșantion.

În mod similar, vom defini și scara pentru axa Y.

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

Deoarece cântarele sunt gata, vom trece la crearea axelor. D3.js oferă un API numit d3.svg.axis pentru a face acest lucru. Deci, vom folosi API-ul pentru a crea axele și pentru a le stabili scările create mai sus.

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

Odată cu crearea scărilor și a axelor noastre, suntem toți pregătiți să le atragem svg. Pentru asta avem nevoie de un container, așa că să creăm unul. 

vis.append ( "svg: g")

Acum, vom seta xAxis pe care am creat-o mai sus svg container după cum se arată mai jos:

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

În mod similar, pentru yAxis:

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

Aici este InitChart funcție pe care tocmai am creat-o. 

funcția InitChart () var data = ["count": "202", "anul": "1590", "count": "215" "1594", "count": "134", "year": "1595",  "numărătoarea": ​​"176", "anul": "1596", "contează": "172", "anul": "1597" "", "număr": "199", "anul": "1599", "număr": " "1602", "count": "179", "year": "1603", "count": "150", "year": " "," anul ":" 1607 ", " contează ":" 133 "," anul ":" 1608 " ":" 175 "," anul ":" 1610 ", " număr ":" 91 "," anul ":" 1611 "; ]; var = d3.select ("# vizualizare"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, right: 20, bottom: 20, left: 50, xScale = d3.scale.linear ([MARGINS.left, WIDTH - MARGINS.right]). domeniu ([1590, 1612]), yScale = d3.scale.Linear () interval ([HEIGHT - MARGINS.top, MARGINS.bottom]). domeniu ([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ți toate modificările și apelați funcția la încărcarea paginii. Reporniți serverul și îndreptați browserul spre http: // localhost: 8080 / displayChart și ar trebui să vedeți ecranul de mai jos.

Dacă aruncați o privire la ecranul de mai sus, arata ca o mizerie. Cele două axe sunt acolo, dar se pare că se suprapun unul pe celălalt. Să facem asta corectată mai întâi.

Pentru a separa ambele axe care se suprapun, ceea ce vom face este să mutați X axă în jos. Vom folosi o proprietate numită transforma pentru a muta X axă jos. Există diferite tipuri de transformări care sunt disponibile. Vom folosi Traduceți transformare specifică pentru al mișca în jos. Folosind transforma transforma putem muta axele pe baza de coordonate. În timp ce folosim traducerea, trebuie să specificăm coordonatele X și Y la care trebuie să fie mutată axa. Deoarece dorim ca axa X să se deplaseze în jos, specificăm doar coordonatele Y și lăsăm coordonatele X la 0. Iată cum arată după adăugarea atributului transform. 

vis.append ("svg: g") .attr ("transform", "traducere (0," + (HEIGHT - MARGINS.bottom) + ")").

Salvați modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 8080 / displayChart și ar trebui să vedeți ecranul de mai jos.

Apoi, trebuie să modificăm orientarea axei Y. Putem specifica orientarea axelor folosind orientarea. Deci, modificați yAxis după cum se arată mai jos, pentru a-și schimba orientarea.

yAxis = d3.svg.axis () .scale (yScale) .orient ("stânga");

Acum, dacă actualizați pagina, nu veți putea vedea axa Y. Este pentru că orientarea axei Y a fost schimbată și a ieșit în afara punctului de vedere spre extrema stângă. Pentru a schimba că vom aplica transforma la axa Y, după cum se arată.

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

După cum puteți vedea din codul de mai sus, pur și simplu am mutat axa Y de-a lungul coordonatei X (20 din stânga) pentru ao aduce în imagine. Salvați modificările și actualizați pagina și ar trebui să vedeți ecranul de mai jos.

Deci aici avem axa X și axa Y, deși arată puțin urât. Să aplicăm câteva stiluri și să le facem să arate bine. Includeți următoarele stiluri CSS:

.axa fill: none; accident vascular cerebral: # 777; forma-redare: crispEdges;  .axis text font-family: Lato; font-size: 13px; 

Adăugați următoarele stiluri CSS la axe utilizând proprietatea atribut CSS.

(0, "+ (HEIGHT - MARGINS.bottom) +") ") .call (" svg: g " (xAxis); ("+" ("+")) .attr ("class", "y axis" );

Actualizați pagina și ar trebui să vedeți ecranul de mai jos:

3. Scalarea dinamică a axelor X și Y

Până acum, am codificat greu valorile minime și maxime pentru domeniu, ceea ce îl face static și inutil când datele devin dinamice. Deci, trebuie să o schimbăm și să o facem dinamică, astfel încât graficul să se micșoreze dinamic.

D3.js oferă funcții numite d3.min și d3.max pentru a obține valorile minime și maxime dintr-o matrice. Putem folosi aceste funcții pentru a obține valorile maxime și minime pentru domeniul nostru, pe baza setului de date de probă. Să presupunem că avem o matrice numită date. Utilizarea d3.min putem obține valoarea minimă.

d3.min (date, funcție (d) retur d.value;)

În mod similar, pentru a obține valoarea maximă:

d3.max (date, funcție (d) return d.value;)

Acum modificăm XScale și yScale pentru a face valorile domeniului dinamice.

(d3.min (date, functie (d) retur (parseInt (an.year) - 5) domeniu (d3.scale.linear () ;), d3.max (date, funcție (d) return parseInt (an., 10);)]); yScale = d3.scale.linear () domeniu ([HEIGHT - MARGINS.top, MARGINS.bottom]) domeniu ([d3.min (data, funcția (d) return (parseInt (d.count) ;), d3.max (date, funcție (d) return parseInt (d.count, 10);)]);

Înfășurați-o

În acest tutorial, am văzut cum să începeți cu biblioteca de vizualizare JavaScript D3.js pentru a crea aplicația noastră de vizualizare. Am creat axele pentru graficul nostru și, de asemenea, am făcut-o dinamică, astfel încât să se scadă cu datele în consecință. 

În următoarea parte a acestei serii, vom folosi datele reale preluate de la Google BigQuery pentru a scala axele de grafice și de asemenea, pentru a începe cu plotarea datelor din grafic.

Codul din acest tutorial este disponibil pe GitHub.