Share
In het vorige deel van deze zelfstudie hebben we gezien hoe u gegevens die zijn opgehaald uit Google BigQuery, in onze D3.js-grafiek kunt zetten. Maar er zijn een paar problemen, zoals het feit dat de schaal niet dynamisch verandert en dat de geplotte cirkels niet worden verwijderd bij volgende zoekopdrachten.
In deze zelfstudie zullen we zien hoe we deze problemen kunnen oplossen en D3.js-overgangen kunnen gebruiken om de grafiek te animeren. We voegen ook bepaalde functies toe om onze grafiek interactiever te maken.
Kloon de vorige broncode van de zelfstudie uit GitHub.
git clone https://github.com/jay3dec/PythonD3jsMashup_Part3.git
Maak voordat u aan de slag gaat een nieuw sjabloon met de naam displayChart_4.html, welke hetzelfde zal zijn als displayChart_3.html. Voeg ook een route toe voor displayChart_4.html. Dit is gedaan om de demo van de vorige tutorial intact te houden, omdat ik hem op dezelfde URL zal hosten.
Accentsconagua
klasse DisplayChart4 (webapp2.RequestHandler): def get (self): template_data = template_path = 'Sjablonen / 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)Wanneer een verandering in onze grafiek optreedt, gebeurt dit onmiddellijk. Met behulp van D3.js-overgangen kunnen we de schaal soepel laten verlopen.
Als u nu naar de assen kijkt wanneer we naar verschillende zoekwoorden zoeken, worden de schalen niet bijgewerkt. Om dit te corrigeren, koppelen we de nieuwe assen opnieuw aan de SVG telkens wanneer de gegevens worden opgehaald.
Doe open displayChart_4.html en in de CreateChart JavaScript-functie, nadat de assen zijn toegevoegd, zullen we de schalen opnieuw verbinden aan de assen, zoals hieronder weergegeven:
vis.select ( "x.axis.") call (xAs).; . Vis.select ( "y.axis") call (Y-as);
Werk de code bij tot GAE en wijs uw browser naar http://YourAppspotURL.com/displayChart_4.html. Probeer bijvoorbeeld een aantal trefwoorden te zoeken Adam en Caesar, en bij elke zoekopdracht worden de schalen op de assen bijgewerkt, maar de wijziging is onmiddellijk.
Laten we overgangen introduceren terwijl we de schaal van elk van de assen bijwerken. Laten we beginnen met het creëren van een overgang.
var transition = vis.transition ();
Standaard heeft de gemaakte overgang een duur van 250 ms. We kunnen ook onze eigen keuze voor vertraging instellen. Laten we de vertraging 2.000 ms maken.
var transition = vis.transition (). duration (2000)
Vervolgens gebruiken we de hierboven gemaakte overgang terwijl we proberen de schalen aan de assen te binden. Wijzig de herhalingscode van de schaal.
vis.select ( "x.axis.") call (xAs).; . Vis.select ( "y.axis") call (Y-as);
Gebruik de transitie-variabele gemaakt zoals weergegeven.
transition.select ( "x.axis") call (xAs).; . Transition.select ( "y.axis") call (Y-as);
Sla de wijzigingen op en werk de code bij naar GAE en richt uw browser naar http://YourAppspotURL.com/displayChart_4.html. Zoek naar een sleutelwoord en observeer de verandering in de schalen op beide assen. Je zou in staat moeten zijn om de geanimeerde overgang te zien terwijl de schalen veranderen.
We hebben overgangen toegevoegd aan de veranderende schalen. Op dezelfde manier kunnen we ook overgangen toevoegen aan de kringen die worden geplot bij elke zoekopdracht op trefwoord.
Als je het hebt gemerkt, is er een probleem met het uit te zetten zoekresultaat. Hoewel de schalen worden bijgewerkt, worden de geplotte cirkels niet bijgewerkt in opeenvolgende zoekopdrachten. Dus om dit op te lossen, zullen we de nieuwe gegevens opnieuw in de grafiek opnemen. In de CreateChart JavaScript-functie, voeg de volgende code toe, die de nieuwe gegevens koppelt aan de cirkels die worden geplot.
circles .attr ("cx", functie (d) return xScale (d.year);) .attr ("cy", functie (d) keer yScale (d.count);) .attr ("r terug ", 10);Met behulp van de gegevens die zijn opgehaald uit de Google BigQuery-dataset, hebben we het jaar en tellen van de gegevens met behulp van xScale en yScale, zodat het kan worden geplot in de beschikbare SVG-ruimte.
Sla de wijzigingen op en werk de code bij naar GAE. Richt uw browser op http://YourAppspotURL.com/displayChart_4.html en probeer naar trefwoorden te zoeken. U kunt zien dat de gegevens worden bijgewerkt, maar de wijziging is vrij onmiddellijk. Laten we dus overgangen toevoegen terwijl de nieuwe gegevens opnieuw worden gebundeld.
circles.transition (). duration (1000) .attr ("cx", functie (d) return xScale (d.year);) .attr ("cy", functie (d) return yScale (d.count );) .attr ("r", 10);Zoals je ziet hebben we zojuist een overgang toegevoegd met een duur van 1.000 ms. Dus wanneer de gegevens worden geplot, zal deze niet onmiddellijk zijn, maar een beetje geanimeerd zijn. Dus werk eenvoudigweg de code bij naar GAE en probeer het te vernieuwen displayChart_4.html pagina. Zoek naar trefwoorden en je zou de overgangsmagie zien gebeuren.
Als u nu opmerkt, na een tweede keer te hebben gezocht voor een zoekwoord, bestaan de eerdere zoekgegevens nog steeds naast het tweede zoekresultaat. Om dit probleem op te lossen, gebruiken we de exit API van D3.js om het vorige resultaat te verwijderen. selection.exit (). verwijder () verwijdert de cirkels. We gebruiken een overgang terwijl we ook de cirkels verwijderen.
circles.exit () .transition (). duration (1000) .remove ();
Werk de code bij tot GAE en vernieuw deze displayChart_4.html. Probeer eerst naar het trefwoord te zoeken De, welke ongeveer 19 resultaten zou moeten teruggeven, en dan zoeken naar Adam, welke 7 resultaten zou moeten opleveren.
Om onze grafiek er aantrekkelijker uit te laten zien, laten we de geplotte cirkels verschillende kleuren geven. D3.js biedt een schaal met een reeks van 20 opgeroepen kleuren d3.scale.category20 (). We gebruiken deze schaal om willekeurige kleuren aan onze kringen te geven.
We hebben onze kringen in rood weergegeven zoals weergegeven:
.stijl ("vullen", "rood");Nu maken we eerst een schaal met behulp van d3.scale.category20.
var color = d3.scale.category20 ();
Vervolgens zullen we tijdens het vullen van de cirkels willekeurige kleuren kiezen met behulp van de kleur schaal en vult de cirkels zoals hieronder getoond.
.stijl ("vullen", functie (d, i) retourkleur (i););Sla de wijzigingen op en upload de code naar GAE. Als u klaar bent, vernieuwt u uw pagina en zoekt u naar het trefwoord God, en je zou een kleurrijke grafiek moeten zien zoals getoond.
We zullen een jQuery-plugin genaamd tipsy gebruiken om tooltips aan onze kringen toe te voegen. Binnen de tooltip tonen we de werken van Shakespeare waarin het gezochte sleutelwoord verschijnt. Download en voeg de aangeschoten CSS en het script toe displayChart_4.html.
Om aangeschoten te gebruiken, moeten we de plug-in van de cirkels in het SVG-element bellen.
$ ('svg circle'). tipsy (zwaartekracht: 'w', title: function () return 'Title for Circle');Zoals je ziet hebben we de aangeschoten plug-in op de cirkels geïnitialiseerd. We hebben twee eigenschappen voor de tooltip gedefinieerd, zwaartekracht en titel. Zwaartekracht definieert de richting voor het positioneren van de knopinfo ten opzichte van de aanwijzer.
Sla de wijzigingen op en werk de code bij naar GAE. Ververs je displayChart_4.html, en zoek naar een sleutelwoord. Plaats de muiscursor op een willekeurige cirkel en de tooltip zou moeten verschijnen.
Vervolgens passen we de functie inside tipsy aan om de corpusnaam uit de Google BigQuery-dataset te ontleden en te laten zien als een tooltip.
In de titelfunctie, Deze data__ geeft de gegevens gekoppeld aan de betreffende cirkel. Dus we voegen de graaf- en corpusnaam samen en tonen deze in onze tooltip.
$ ('svg circle'). tipsy (zwaartekracht: 'w', titel: functie () var d = this .__ data__; return d.count + 'occurrences gevonden in' + d.corpus;);Zoals u kunt zien, hebben we de tel- en corpusnamen samengevoegd om als tooltip te laten zien. Sla de wijzigingen op en werk de code bij naar GAE. Vernieuw de pagina, zoek naar een willekeurig trefwoord en plaats de muis op een willekeurige cirkel om de knopinfo te zien.
Dit was het laatste deel van de app Data Visualization met GAE Python, D3.js en Google BigQuery-series. D3.js is een effectieve JavaScript-bibliotheek voor het maken van prachtige en interactieve visualisaties. Wat we in deze serie tutorials hebben geleerd, is slechts het topje van de ijsberg en er is nog veel meer dat D3.js te bieden heeft. Voor een grondige kennis zou ik aanraden de officiële documentatie te lezen. Een groot aantal voorbeelden is ook te vinden op de officiële site.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!!
