Share
În partea anterioară a acestui tutorial, am văzut cum să complotăm datele extrase din Google BigQuery în diagrama noastră D3.js. Dar există câteva probleme, cum ar fi faptul că scara nu se modifică dinamic, iar cercurile plotate nu se elimină în căutările ulterioare.
În acest tutorial, vom vedea cum să rezolvăm aceste probleme și să folosim tranzițiile D3.js pentru a anima graficul. De asemenea, vom adăuga anumite funcții pentru a face graficul nostru mai interactiv.
Clonați codul sursă tutorial anterior din GitHub.
git clone https://github.com/jay3dec/PythonD3jsMashup_Part3.git
Înainte de a începe, creați un nou șablon numit displayChart_4.html, care va fi la fel ca displayChart_3.html. De asemenea, adăugați un traseu pentru displayChart_4.html. Acest lucru este făcut doar pentru a menține demo-ul tutorialului anterior intact, deoarece îl voi găzdui pe același URL.
Accentsconagua
clasa DisplayChart4 (webapp2.RequestHandler): def get (auto): template_data = template_path = 'Templates / displayChart_4.html' auto.response.out.write (template.render (template_path, template_data)) application = webapp2.WSGIApplication ('/ displayChart3', DisplayChart4), ('/ getChartData', GetChartData), ('/ displayChart3', DisplayChart3) , ShowHome),], debug = Adevărat)Când apare o schimbare în graficul nostru, apare instantaneu. Folosind tranzițiile D3.js, putem schimba scala netedă.
Acum, dacă aveți o privire la axe atunci când căutăm cuvinte cheie diferite, scalele nu se actualizează. Pentru a corecta acest lucru, vom rebrand noile axe în SVG de fiecare dată când sunt preluate datele.
Deschide displayChart_4.html și în interior CreateChart Funcția JavaScript, după ce au fost adăugate axele, vom rebaliza balanțele pe axe după cum se arată mai jos:
vis.select ( "x.axis.") apel (xAxis).; . Vis.select ( "y.axis") apel (yAxis);
Actualizați codul în GAE și îndreptați-l la http://YourAppspotURL.com/displayChart_4.html. Încercați să căutați câteva cuvinte cheie, să zicem Adam și Cezar, iar la fiecare căutare, cântările pe axe se actualizează, dar schimbarea este instantanee.
Să introducem tranziții în timp ce actualizăm scalele pe fiecare dintre axe. Să începem prin crearea unei tranziții.
var tranziție = vis.transition ();
Implicit, tranziția creată are o durată de 250 ms. De asemenea, putem stabili propria alegere a întârzierii. Să facem întârzierea de 2.000 ms.
var tranziție = vis.transition () durata (2000)
Apoi, vom folosi tranziția creată mai sus, în timp ce încercăm să legăm scalele de axe. Modificați codul de rebindare a scalei.
vis.select ( "x.axis.") apel (xAxis).; . Vis.select ( "y.axis") apel (yAxis);
Utilizați variabila de tranziție creată după cum se arată.
transition.select ( "x.axis") apel (xAxis).; . Transition.select ( "y.axis") apel (yAxis);
Salvați modificările și actualizați codul la GAE și indicați browserul dvs. la adresa http://YourAppspotURL.com/displayChart_4.html. Încercați să căutați un cuvânt cheie și să observați schimbarea cântărilor pe ambele axe. Ar trebui să puteți vedea tranziția animată în timp ce se schimbă cântarul.
Am adăugat tranziții la scalele în schimbare. În mod similar, putem adăuga, de asemenea, tranziții la cercurile care devin reprezentate la fiecare căutare de cuvinte cheie.
Dacă ați observat, există o problemă la care rezultatul căutării este reprezentat grafic. Deși cântarele se actualizează, cercurile plotate nu se actualizează în mod corespunzător în căutările ulterioare. Deci, pentru a rezolva acest lucru vom rebrand noile date în grafic. În CreateChart Funcția JavaScript, adăugați următorul cod, care va rebuga noile date cercurilor care sunt reprezentate grafic.
cercurile .attr ("cx", funcția (d) return xScale (d.anual);) .attr ("cy", funcția (d) ", 10);Folosind datele preluate din setul de date Google BigQuery, am transformat an și numara a datelor utilizând XScale și yScale, astfel încât acesta să poată fi reprezentat grafic în spațiul SVG disponibil.
Salvați modificările și actualizați codul la GAE. Punctați browser-ul dvs. la http://YourAppspotURL.com/displayChart_4.html și încercați să căutați cuvinte cheie. Puteți vedea că datele se actualizează, dar schimbarea este destul de instantanee. Deci, hai să adăugăm tranziții în timp ce recuplam noile date.
(d) return xScale (d.year);) .attr ("cy", funcția (d) return yScale (d.count );) .attr ("r", 10);După cum puteți vedea, tocmai am adăugat o tranziție cu o durată de 1.000 ms. Deci, atunci când datele sunt plotted nu va fi instantaneu, dar va fi un pic animat. Deci, actualizați pur și simplu codul la GAE și încercați să îl actualizați displayChart_4.html pagină. Căutați cuvintele cheie și ar trebui să vedeți cum se întâmplă magia de tranziție.
Acum, dacă ați observat că, după ce ați căutat a doua oară pentru orice cuvânt cheie, datele de căutare anterioare coexistă încă cu cel de-al doilea rezultat al căutării. Deci, pentru a rezolva această problemă vom folosi API-ul de ieșire D3.js pentru a elimina rezultatul anterior. selection.exit (). îndepărtați () elimină cercurile. Vom folosi o tranziție în timp ce eliminăm și cercurile.
cercule.exit () .transition () durata (1000) .remove ();
Actualizați codul la GAE și actualizați displayChart_4.html. Încercați să căutați mai întâi cuvântul cheie , care ar trebui să returneze 19 rezultate și apoi să caute Adam, care ar trebui să returneze 7 rezultate.
Pentru a face ca graficul să arate mai atent, să oferim cercurilor planificate culori distincte. D3.js oferă o scală cu o gamă de 20 de culori numite d3.scale.category20 (). Vom folosi această scală pentru a da culori aleatorii cercurilor noastre.
Ne-am desenat cercurile în roșu după cum se arată:
.stil ("umple", "roșu");Acum, vom crea mai întâi o scară utilizând d3.scale.category20.
var culoare = d3.scale.category20 ();
Apoi, în timp ce umplem cercurile, vom alege culori aleatorii folosind culoare și completați cercurile așa cum se arată mai jos.
.stil ("umple", funcția (d, i) returnare culoare (i););Salvați modificările și încărcați codul în GAE. După ce ați terminat, actualizați pagina și căutați cuvântul cheie Dumnezeu, și ar trebui să vedeți un grafic colorat așa cum este arătat.
Vom folosi un plugin jQuery numit tipsy pentru a adăuga sfaturi de lucru în cercurile noastre. În interiorul tooltipului, vom afișa lucrările lui Shakespeare în care apare cuvântul cheie căutat. Descărcați și includeți sfatul CSS și scriptul în displayChart_4.html.
Pentru a folosi tipsy, trebuie să sunăm pluginul în cercurile din interiorul elementului SVG.
$ ('svg cerc') tipsy (gravitate: 'w', title: function () return 'Titlu pentru cerc');După cum puteți vedea, am inițializat pluginul tipsy în cercuri. Am definit două proprietăți pentru tooltip, gravitatie și titlu. Gravitatea definește direcția pentru poziționarea vârfului de instrument în raport cu indicatorul.
Salvați modificările și actualizați codul la GAE. Reîmprospătați-vă displayChart_4.html, și căutați un cuvânt cheie. Plasați cursorul mouse-ului peste orice cerc și ar trebui să afișeze indicația.
Apoi, vom modifica funcția din interiorul tipsy pentru a analiza numele corpului din setul de date Google BigQuery și pentru ao arăta ca o sugestie.
În interiorul funcției de titlu, acest .__ data__ oferă datele atașate cercului respectiv. Așadar, vom concatena numărătoarea și numele corpului și le vom arăta în tooltipul nostru.
$ ('svg cerc') tipsy (gravitate: 'w', titlu: function () var d = acest .__ data__; return d.count + 'apariții în' + d.corpus;);După cum puteți vedea, am concatenat numerele și numerele corporale care să fie afișate ca o sugestie. Salvați modificările și actualizați codul la GAE. Reîmprospătați pagina, căutați orice cuvânt cheie și plasați mouse-ul peste orice cerc pentru a vedea tooltip-ul.
Aceasta a fost ultima parte a aplicației de vizualizare a datelor utilizând serverele GAE Python, D3.js și Google BigQuery. D3.js este o bibliotecă eficientă JavaScript pentru a crea vizualizări frumoase și interactive. Ceea ce am învățat în aceste serii de tutoriale este doar vârful iceberg-ului, și mai sunt multe de oferit de D3.js. Pentru cunoștințe aprofundate aș recomanda citirea documentației oficiale. Un număr mare de exemple pot fi găsite și pe site-ul oficial.
Codul sursă din acest tutorial este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos!!
