In het eerste deel van deze serie hebben we een Python-applicatie gemaakt en deze geïmplementeerd in Google App Engine (GAE). Vanuit de toepassing hebben we deze gekoppeld aan een Google BigQuery-gegevensset en de gegevens opgehaald in onze applicatie. In deze zelfstudie zullen we zien hoe we de gegevens kunnen visualiseren met behulp van de JavaScript-bibliotheek D3.js.

1. Aan de slag met D3.js

D3.js is een JavaScript-bibliotheek om op gegevens gebaseerde documenten te maken. Het gebruikt de mogelijkheden van HTML5, SVG en CSS3 om interactieve visualisaties te maken op basis van willekeurige gegevens. Het maakt ook gebruik van verschillende transformaties om het display visueel aantrekkelijker te maken.

Van de officiële site van D3.js:

D3.js is een JavaScript-bibliotheek voor het manipuleren van documenten op basis van gegevens. D3 helpt u gegevens tot leven te brengen met behulp van HTML, SVG en CSS. D3's nadruk op webstandaarden biedt u de volledige mogelijkheden van moderne browsers zonder uzelf te binden aan een eigen framework, waarbij krachtige visualisatiecomponenten en een datagedreven benadering van DOM-manipulatie worden gecombineerd.

Download en neem D3.js op om aan de slag te gaan met D3.js, of u kunt rechtstreeks een koppeling naar de nieuwste release maken.

Nu zijn we klaar voor het maken van onze grafiek met D3.js.

2. De X- en Y-assen maken

Kopieer eerst de vorige broncode van de zelfstudie vanuit GitHub.

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

We zullen een nieuwe pagina maken om onze grafiek weer te geven. Laten we het een naam geven displayChart.html. Dus navigeer naar PythonD3jsMashup_Part1 / Templates / en maak een nieuwe pagina genaamd displayChart.html. Voeg de volgende HTML-code eraan toe:

          
 
 
Kaart zal hier zijn!!
 
 
 
© Bedrijf 2014
 
 
  

Navigeer naar de PythonD3jsMashup_Part1 map en open app.py. Nu moeten we een route toevoegen voor de nieuw toegevoegde pagina displayChart.html. Hieronder is een deel van de app.py waar bestaande routes worden gedeclareerd voor de app.

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

Evenzo nemen we nog een geroepen route op / displayChart en zet het op de DisplayChart klasse die we hierna verklaren. Dit is de nieuw toegevoegde route:

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

Laten we nu een klassenhandler maken voor / displayChart om de sjabloonpagina weer te geven. We zullen de gebruiken template.render functie om de sjabloonpagina weer te geven. Hier is de nieuw toegevoegde klasse-handler die moet worden weergegeven displayChart.html.

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

Sla alles op en herstart de server.

dev_appserver.py PythonD3jsMashup_Part1 / 

Richt uw browser op http: // localhost: 8080 / displayChart en u zou de nieuw toegevoegde paginasjabloon moeten zien.

Scalable Vector Graphics (SVG) is een op XML gebaseerd afbeeldingsformaat voor het tekenen van 2D-afbeeldingen met ondersteuning voor interactiviteit en animatie. We zullen een SVG-element gebruiken, waarop we onze grafiek zullen tekenen. Laten we eerst een SVG-element maken.

 
Kaart zal hier zijn!!
  

Laten we nu een JavaScript-functie maken die wordt genoemd InitChart om de kaart te initialiseren. Voeg het script toe aan het einde van de pagina.

Voordat we aan de slag gaan, laten we een bepaalde set gegevens aannemen zoals wordt weergegeven. Later vervangen we de voorbeeldgegevens door de gegevens uit de Google BigQuery-gegevensset.

var data = ["count": "202", "year": "1590", "count": "215", "year": "1592", "count": "179", " year ":" 1593 ", " count ":" 199 "," year ":" 1594 ", " count ":" 134 "," year ":" 1595 ", " count ":" 176 "," jaar ":" 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" , "jaar": "1610", "count": "91", "year": "1611", "count": "150", "year": "1612"];

Eerst definiëren we enkele constanten die aan de grafiek zijn gerelateerd, zoals de breedte, hoogte en marge van links, rechts, boven en onder, die we gebruiken tijdens het maken van de grafiek. Laten we dus het SVG-element selecteren met d3.selecteer en definieer onze constanten.

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

Om onze gegevens te kunnen plotten, moeten we schalen definiëren voor de hele database X-as en Y-as zodanig dat wanneer gegevens dynamisch worden geleverd, de schalen overeenkomstig worden aangepast. D3.js biedt een aantal API's om dingen eenvoudiger te maken. Een dergelijke API is d3.scale.linear, die we zullen gebruiken om onze schaal te maken op basis van de maximale en minimale gegevenswaarden.

Dat gezegd hebbende, hebben we twee nieuwe termen genoemd reeks en Domein. reeks vertegenwoordigt het gebied dat we hebben om de visualisatie weer te geven en Domein vertegenwoordigt de maximale en minimale waarden van gegevens die we op de visualiseren svg Gebied.

Nu maken we onze schalen met behulp van d3.scale.linear en definieer het bereik en domein voor de gemaakte schalen.  

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

Zoals u kunt zien, hebben we het bereik van 20 tot 980 gedefinieerd, zodat het niet in botsing komt met de grafische randen. In het domein hebben we de minimum- en maximumwaarden ingesteld volgens de voorbeeldgegevens.

Op dezelfde manier definiëren we ook de schaal voor de Y-as.

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

Omdat de schalen klaar zijn, gaan we verder met het maken van de assen. D3.js biedt hiervoor een API met de naam d3.svg.axis. Dus we zullen de API gebruiken om de assen te maken en de hierboven gecreëerde schalen voor hen in te stellen.

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

Met onze schalen en bijlen gemaakt, zijn we allemaal klaar om ze te tekenen op de svg. Daarvoor hebben we een container nodig, dus laten we er een maken. 

vis.append ( "svg: G")

Nu gaan we het instellen xAs die we hierboven hebben gemaakt naar de svg container zoals hieronder getoond:

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

Evenzo, voor de Y-as:

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

Hier is de InitChart functie die we zojuist hebben gemaakt. 

functie InitChart () var data = ["count": "202", "year": "1590", "count": "215", "year": "1592", "count": "179", "jaar": "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 "," jaar ":" 1607 ", " count ":" 133 "," year ":" 1608 ", " count ":" 190 "," year ":" 1609 ", " count ":" 175 "," year ":" 1610 ", " count ":" 91 "," year ":" 1611 ", " count ":" 150 "," year ":" 1612 " ]; var vis = d3.select ("# visualization"), WIDTH = 1000, HEIGHT = 500, MARGE = top: 20, right: 20, bottom: 20, left: 50, xScale = d3.scale.linear () .range ([MARGINS.links, WIDTH - MARGINS.recht]). domein ([1590, 1612]), yScale = d3.scale.linear (). bereik ([HEIGHT - MARGINS.top, MARGINS.bottom]). domein ([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); 

Sla alle wijzigingen op en bel de functie bij het laden van de pagina. Start de server opnieuw op en wijs uw browser naar http: // localhost: 8080 / displayChart en u zou het onderstaande scherm kunnen zien.

Als je naar het bovenstaande scherm kijkt, ziet het eruit als een puinhoop. Onze twee assen zijn er, maar ze lijken elkaar te overlappen. Laten we dat eerst corrigeren.

Om de overlappende assen van elkaar te scheiden, verplaatsen we de X-as naar beneden. We zullen een eigenschap gebruiken genaamd transformeren om het te verplaatsen X-as naar beneden. Er zijn verschillende soorten transformaties die beschikbaar zijn. We zullen de gebruiken vertalen specifieke transformatie om het naar beneden te verplaatsen. Met vertaaltransformatie kunnen we de assen verplaatsen op basis van coördinaten. Tijdens het gebruik van vertalen moeten we de X- en Y-coördinaten opgeven waarnaar de as moet worden verplaatst. Omdat we willen dat de X-as naar beneden gaat, specificeren we alleen de Y-coördinaat en laten we de X-coördinaat op 0. Hier is hoe het eruit ziet na het toevoegen van het transformatekenmerk. 

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

Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 8080 / displayChart en u zou het onderstaande scherm moeten zien.

Vervolgens moeten we de oriëntatie van de Y-as wijzigen. We kunnen de oriëntatie van de as opgeven met behulp van orient. Dus wijzig het Y-as zoals hieronder getoond om zijn oriëntatie te veranderen.

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

Als u nu de pagina vernieuwt, kunt u de Y-as niet zien. Dat komt doordat de oriëntatie van de Y-as is gewijzigd en deze helemaal buiten het beeld is gegaan. Om dat te veranderen, passen we toe transformeren naar de Y-as zoals weergegeven.

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

Zoals je kunt zien aan de hand van de bovenstaande code, hebben we de Y-as langs de X-coördinaat verplaatst (20 van links) om hem in beeld te brengen. Sla de wijzigingen op en ververs de pagina en je zou het onderstaande scherm moeten zien.

Dus hier hebben we onze X-as en Y-as, hoewel ze er een beetje lelijk uitzien. Laten we een aantal stijlen toepassen en ze er goed uit laten zien. Neem de volgende CSS-stijlen op:

.aspad invullen: geen; beroerte: # 777; vorm-rendering: crispEdges;  .axis tekst font-family: Lato; font-size: 13px; 

Voeg de volgende CSS-stijlen aan de assen toe met behulp van de eigenschap CSS-eigenschap.

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

Ververs de pagina en je zou het onderstaande scherm moeten zien:

3. Schalen van de X- en Y-assen op dynamische wijze

Tot nu toe hebben we de minimum- en maximumwaarden voor het domein hard gecodeerd, waardoor het statisch en nutteloos is wanneer gegevens dynamisch worden. We moeten het dus veranderen en dynamisch maken, zodat de grafiek dynamisch wordt geschaald.

D3.js biedt functies genaamd d3.min en d3.max om de minimum- en maximumwaarden uit een array te halen. We kunnen deze functies gebruiken om de maximale en minimale waarden voor ons domein te krijgen, op basis van de voorbeeldgegevensset. Stel dat we een array hebben met de naam data. Gebruik makend van d3.min we kunnen de minimumwaarde krijgen.

d3.min (gegevens, functie (d) return d.value;)

Evenzo, om de maximale waarde te krijgen:

d3.max (gegevens, functie (d) return d.value;)

Nu wijzigen we de xScale en yScale om de domeinwaarden dynamisch te maken.

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

Inpakken

In deze zelfstudie hebben we gezien hoe u aan de slag kunt gaan met de JavaScript-visualisatiebibliotheek D3.js om onze visualisatie-app te maken. We hebben de assen voor onze grafiek gemaakt en deze ook dynamisch gemaakt, zodat deze overeenkomstig de gegevens wordt geschaald. 

In het volgende deel van deze serie gebruiken we de werkelijke gegevens die zijn opgehaald uit Google BigQuery om de grafiekassen te schalen en om ook aan de slag te gaan met het plotten van de gegevens in de grafiek.

Code van deze tutorial is beschikbaar op GitHub.