Share
I den forrige delen av denne opplæringen så vi hvordan du plotter data hentet fra Google BigQuery til vårt D3.js-diagram. Men det er noen problemer, som det faktum at skalaen ikke endres dynamisk, og kretsene plottet ikke blir fjernet på etterfølgende søk.
I denne veiledningen ser vi hvordan du løser disse problemene, og bruker D3.js-overganger til å animere grafen. Vi legger også til visse funksjoner for å gjøre grafen mer interaktiv.
Klon den forrige opplærings kildekoden fra GitHub.
git klon https://github.com/jay3dec/PythonD3jsMashup_Part3.git
Før du begynner, opprett en ny mal som heter displayChart_4.html, som vil være det samme som displayChart_3.html. Legg også til en rute for displayChart_4.html. Dette er gjort bare for å holde demo av den forrige opplæringen intakt, siden jeg skal være vert for den på samme URL.
Accentsconagua
klasse DisplayChart4 (webapp2.RequestHandler): def get (selv): template_data = template_path = 'Maler / displayChart_4.html' self.response.out.write (template.render (template_path, template_data)) application = webapp2.WSGIAapplication ('/ displayChart4', DisplayChart4), ('/ getChartData', GetChartData), ('/'), ('/ displayChart', DisplayChart), ('/ displayChart3', DisplayChart3) , ShowHome),], debug = True)Når det skjer en endring i grafen vår, skjer det øyeblikkelig. Ved å bruke D3.js overganger, kan vi gjøre skalaendringen jevn.
Nå, hvis du ser på aksene når vi søker etter forskjellige søkeord, blir vektene ikke oppdatert. For å korrigere det, rebindes de nye aksene til SVG hver gang dataene hentes.
Åpne opp displayChart_4.html og inne i CreateChart JavaScript-funksjonen, etter at aksene er lagt til, vil vi binde skalaene til aksene som vist nedenfor:
vis.select ( "x.axis".) samtale (x-akse).; . Vis.select ( "y.axis") samtale (yAkse);
Oppdater koden til GAE og pek nettleseren din til http://YourAppspotURL.com/displayChart_4.html. Prøv å søke etter noen søkeord, si Adam og Caesar, og på hvert søk blir skalaene på aksene oppdatert, men endringen er øyeblikkelig.
La oss innføre overganger mens vi oppdaterer skalaer på hver av aksene. La oss begynne med å opprette en overgang.
var overgang = vis.overgang ();
Som standard har overgangen opprettet en varighet på 250 ms. Vi kan også sette vårt eget valg av forsinkelse. La oss gjøre forsinkelsen 2000 ms.
var overgang = vis.overgang (). varighet (2000)
Deretter bruker vi overføringen som er opprettet ovenfor, mens du prøver å binde skalaene til aksene. Endre skalaen for gjenopprettingskoden.
vis.select ( "x.axis".) samtale (x-akse).; . Vis.select ( "y.axis") samtale (yAkse);
Bruk overgangsvariabelen som er opprettet som vist.
transition.select ( "x.axis") samtale (x-akse).; . Transition.select ( "y.axis") samtale (yAkse);
Lagre endringene og oppdater koden til GAE, og pek nettleseren din til http://YourAppspotURL.com/displayChart_4.html. Prøv å søke etter et søkeord og observere endringen i skalaene på begge aksene. Du bør kunne se den animerte overgangen mens skalaene endres.
Vi la til overganger til skiftene. På samme måte kan vi også legge til overganger til kretsene som blir plottet på hvert søkeordssøk.
Hvis du la merke til, er det et problem med at søkeresultatet blir plottet. Selv om skalaene blir oppdatert, blir de plottede kretsene ikke oppdatert tilsvarende i etterfølgende søk. Så, for å løse dette, kobler vi de nye dataene til grafen. I CreateChart JavaScript-funksjonen, legg til følgende kode, som vil binde de nye dataene til kretsene som blir plottet.
sirkler .attr ("cx", funksjon (d) return xScale (d.year);) .attr ("cy", funksjon (d) return yScale (d.count);) .attr ", 10);Ved å bruke data hentet fra Google BigQuery datasettet, forvandlet vi år og telle av dataene ved bruk av XScale og ySkala, slik at den kan plottes i det tilgjengelige SVG-rommet.
Lagre endringene og oppdater koden til GAE. Pek nettleseren din til http://YourAppspotURL.com/displayChart_4.html og prøv å søke etter søkeord. Du kan se at dataene blir oppdaterte, men endringen er ganske øyeblikkelig. Så la oss legge til overganger mens du gjenoppretter de nye dataene.
sirkler.transisjon () .svar (1000) .attr ("cx", funksjon (d) return xScale (d.år);) .attr ("cy", funksjon (d) returnér yScale (d.count );) .attr ("r", 10);Som du ser, har vi nettopp lagt til en overgang med en varighet på 1000 ms. Så når dataene blir plottet, vil det ikke være øyeblikkelig, men vil være litt animert. Så bare oppdater koden til GAE, og prøv å oppdatere koden displayChart_4.html side. Søk etter nøkkelord, og du bør se overgangsmagisk hendelsen.
Nå, hvis du har observert, etter å ha søkt en annen gang for et søkeord, eksisterer de tidligere søkedataene fortsatt med det andre søkeresultatet. Så, for å løse dette problemet bruker vi D3.js exit API for å fjerne det forrige resultatet. selection.exit (). fjern () fjerner kretsene. Vi bruker en overgang mens du også fjerner kretsene.
circles.exit () .transition (). varighet (1000) .remove ();
Oppdater koden til GAE og oppdater displayChart_4.html. Prøv å søke først etter søkeordet De, som skal returnere rundt 19 resultater, og deretter søke etter Adam, som skal returnere 7 resultater.
For å gjøre grafen vår litt mer tiltalende, la oss gi de plottede sirklene forskjellige farger. D3.js gir en skala med et utvalg av 20 farger kalt d3.scale.category20 (). Vi bruker denne skalaen for å gi tilfeldige farger til våre kretser.
Vi har stylet våre kretser i rødt som vist:
.stil ("fyll", "rød");Nå skal vi først lage en skala ved hjelp av d3.scale.category20.
var farge = d3.scale.category20 ();
Neste, mens du fyller sirklene, velger vi tilfeldige farger med farge skala og fyll sirklene som vist nedenfor.
.stil ("fyll", funksjon (d, i) returfarge (i););Lagre endringene og last opp koden til GAE. Når du er ferdig, oppdater siden og søk etter søkeordet Gud, og du bør se en fargerik graf som vist.
Vi bruker et jQuery-plugin som heter tipsy for å legge til verktøytips i våre kretser. Inne i verktøytipset viser vi verkene til Shakespeare der det søkte søkeordet vises. Last ned og ta med tipsy CSS og script i displayChart_4.html.
For å bruke tipsy, må vi ringe pluginet i kretsene i SVG-elementet.
$ ('svg sirkel'). tipsy (tyngdekraft: 'w', tittel: funksjon () retur 'Tittel for Circle');Som du kan se har vi initialisert tipsy-plugin på kretsene. Vi har definert to egenskaper for verktøytipset, tyngde og tittel. Gravity definerer retningen for posisjonering av verktøytipset i forhold til pekeren.
Lagre endringene og oppdater koden til GAE. Oppdater din displayChart_4.html, og søke etter et søkeord. Plasser musepekeren over en hvilken som helst sirkel, og den skal vise verktøytipset.
Deretter vil vi endre funksjonen inne i tipsy for å analysere corpusnavnet fra Google BigQuery datasettet og vise det som et verktøytips.
Inne i tittelfunksjonen, dette .__ data__ gir dataene knyttet til den aktuelle sirkelen. Så vi sammenkaller telle- og korpusnavnet og viser dem i vårt verktøytips.
$ ('svg sirkel'). Tipy (tyngdekraft: 'w', tittel: funksjon () var d = dette .__ data__; return d.count + 'forekomster funnet i' + d.corpus;);Som du kan se, konkluderte vi telle- og korpusnavnene som et verktøytips. Lagre endringene og oppdater koden til GAE. Oppdater siden, søk etter et søkeord, og legg musen over en hvilken som helst sirkel for å se verktøytipset.
Dette var den siste delen av Datavisualiseringsappen ved hjelp av GAE Python, D3.js og Google BigQuery-serien. D3.js er et effektivt JavaScript-bibliotek for å skape vakre og interaktive visualiseringer. Det vi lærte i denne serien av opplæringsprogrammer er bare toppen av isfjellet, og det er mye mer som D3.js har å tilby. For grundig kunnskap vil jeg anbefale å lese den offisielle dokumentasjonen. Et stort antall eksemplarer kan også bli funnet på det offisielle nettstedet.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor!!
