Datavisualisatie-app met GAE Python, D3.js en Google BigQuery

Stel je voor dat je een grote set gegevens hebt met miljoenen rijen en je wordt geconfronteerd met de taak om informatie uit de gegevens te halen. Hoe begrijp je een grote set gegevens? Het simpele antwoord op deze vraag is dat we dat doen via gegevensvisualisatie, maar wat is dat precies??

Datavisualisatie is de grafische weergave van gegevens om erachter te komen wat er in de informatie verborgen is. In deze driedelige serie maken we een visualisatie-app om informatie te extraheren en betekenis te geven aan een grote set gegevens.

Het opvragen van grote hoeveelheden gegevens zonder de juiste hardware kan leiden tot prestatieproblemen. Google biedt een oplossing voor dit probleem in de vorm van BigQuery. Ondersteund door de infrastructuur van Google kunt u grote hoeveelheden gegevens opvragen. We gebruiken een dataset van Google BigQuery voor onze visualisatietoepassing.

In deze zelfstudie doorloop ik het proces voor het maken van een visualisatietoepassing met Python, Google BigQuery en de JavaScript-bibliotheek D3.js. We zullen Google App Engine (of GAE) gebruiken om onze applicatie te hosten. Deze tutorial veronderstelt dat je een basiskennis hebt van Python en JavaScript. Voor het maken van grafieken gebruiken we D3.js.

Merk ook op dat de code van de bovenstaande tutorial beschikbaar is op GitHub, en een demo wordt gehost op AppSpot.

Aan de slag met Google App Engine 

Stap 1: Downloaden en gebruiken van de GAE Python SDK 

Laten we aan de slag gaan door onze ontwikkelomgeving in te richten. Download de Google App Engine Python SDK en pak deze uit. We zullen het webapp2-framework voor Python gebruiken. 

Uit de documentatie van Google:

Een webapp2-applicatie bestaat uit twee delen: 
1) een of meer RequestHandler-klassen die verzoeken verwerken en antwoorden opbouwen 
2) een WSGIApplication-instantie die inkomende aanvragen naar handlers routeert op basis van de URL.

De bovengenoemde punten zullen duidelijker worden wanneer we onze klasse van de verzoekbehandelaar creëren. Maak een map met de naam PythonD3jsMashup welke onze projectdirectory zal zijn. Navigeer naar de projectdirectory en maak een bestand met de naam app.py. Dit wordt onze applicatiemodule. Laten we een behandeleenheid voor aanvragen maken om de aanvraag te verwerken en een antwoord samen te stellen, en een WSGIA-toepassingsinstantie om aanvragen te routeren. 

 Hier is hoe app.py zou moeten kijken:

import webapp2 class ShowHome (webapp2.RequestHandler): def get (self): ## Codering voor het weergeven van de startpagina ## Dit is de WSGI-toepassingsinstantie die requests-toepassing routeert = webapp2.WSGIApplication ([('/', ShowHome),] , debug = True)

Wanneer een / het verzoek gebeurt, wordt het naar de showhome klasse die de startpagina weergeeft. Laten we de Python-code schrijven om onze startpagina weer te geven. Maak eerst een nieuwe map met de naam templates in de PythonD3jsMashup map. Maak daarbinnen een HTML-pagina genaamd index.html

Het moet de volgende code bevatten:

         

Data Visualization-app

  • Huis
  • Broncode
  • Wat betreft

Data Visualization-app

Python & D3.js Mashup-app

Klik hier

© Bedrijf 2014

Voor het weergeven van sjablonen moeten we de sjabloonbibliotheek importeren. Nadat we dit gedaan hebben, zullen we het gebruiken om de index.html pagina zoals hieronder getoond:

import webapp2 van google.appengine.ext.webapp import template class ShowHome (webapp2.RequestHandler): def get (self): temp_data =  temp_path = 'Sjablonen / index.html' self.response.out.write (template.render (temp_path, temp_data)) application = webapp2.WSGIApplication ([('/', ShowHome),], debug = True)

Navigeer vervolgens naar de projectdirectory PythonD3jsMashup en maak een bestand met de naam app.yaml. Dit bestand fungeert als een configuratiebestand voor onze applicatie. Het zou er zo uit moeten zien:

toepassing: appid versie: 1 runtime: python27 api_version: 1 threadsafe: true handlers: - url: /.* script: app.application

Zoals u kunt zien, hebben we een aantal dingen gedefinieerd in de app.yaml. De meeste parameters spreken voor zich. De handlers richtlijn dicteert dat elke URL-aanvraag overeenkomt /.* worden afgehandeld door het toepassingsobject in de app module.

Als u de toepassing lokaal wilt uitvoeren, navigeert u naar de GAE SDK en voer de volgende opdracht uit:

./dev_appserver.py 

Richt uw browser op http: // localhost: 8080 en u zou deze pagina moeten zien:

Een app implementeren in AppSpot 

Vervolgens zullen we onze app implementeren in de Google App Engine. Log eerst in op de GAE-console om de app te implementeren:

Klik vanuit het dashboard op de Applicatie maken knop.

Vervolgens ziet u een scherm dat lijkt op het onderstaande scherm. Typ een applicatie herkenner en Aanmeldings titel voor de app en klik Applicatie maken.

Zodra de applicatie succesvol is geregistreerd, wordt u begroet met een succesbericht:

Noteer de rode omcirkelde tekst die later als applicatie-identificator zal worden gebruikt.

Klik op de dashboard link. Vanuit het linkermenu in het Dashboard, onder de Toediening tab, klik op de Applicatie instellingen. Je ziet het volgende scherm:

Noteer het Naam serviceaccount. We hebben dit nodig in de Google-ontwikkelaarsconsole.

Wijzig vervolgens de toepassing naam voor pythond3jsmashup in app.yaml.

toepassing: pythond3jsmashup versie: 1 runtime: python27 api_version: 1 threadsafe: true handlers: - url: /.* script: app.application

Om de app nu op GAE te implementeren, navigeert u naar GAE Python SDK en typt u de volgende opdracht:

./appcfg.py update PythonD3jsMashup /

Als u eenmaal bent geïmplementeerd, probeert u de AppSpot-URL te bekijken.

Aan de slag met Google BigQuery

Als u aan de slag wilt met Google BigQuery, meldt u zich aan bij de Google API-console. U zou een dashboard moeten zien met alle beschikbare projecten in uw Google-account. Klik op de projectnaam PythonD3jsMashup.

 

Noteer het Projectnummer, die we gebruiken tijdens het verbinden met Google BigQuery.

Klik in het menu aan de linkerkant op de API's & auth tab. Klik op de weergegeven items APIs. Nu zou u een lijst met beschikbare API's moeten zien:

BigQuery API is UITGESCHAKELD. Klik op de UIT status om het te veranderen OP.

Klik op de projectnaam pythond3jsmashup in het menu aan de linkerkant en klik machtigingen. Klik Lid toevoegen en voeg de Naam serviceaccount (die we eerder genoteerd hebben) met "Can edit" permissies zoals hieronder getoond:

Gegevens verzamelen van Google BigQuery

Tot nu toe hebben we onze eenvoudige app gemaakt en deze op GAE geïmplementeerd met BigQuery API ingeschakeld. Vervolgens verbinden we met een van de vrij beschikbare datasets op BigQuery. 

Laten we beginnen met het maken van een nieuwe pagina met de naam  Templates / chart.html waar we de visualisatie zullen laten zien. Maak een methode om de. Te routeren Klik hier link op onze startpagina naar chart.html

Hier is hoe het eruit ziet:

class ShowChartPage (webapp2.RequestHandler): def get (self): temp_data =  temp_path = 'Sjablonen / chart.html' self.response.out.write (template.render (temp_path, temp_data))

Pas ook de verzoekbehandelaar aan om het verzoek te routeren / grafiek naar ShowChartPage zoals hieronder getoond:

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

Wijzig vervolgens de href attribuut van de Klik hier link zoals getoond:

Klik hier

Probeer nu de app uit te voeren en klik op Klik hier, en je zou doorgestuurd moeten worden naar chart.html.

Vervolgens proberen we onze app te verifiëren met Google BigQuery en enkele gegevens op te halen. Voor verificatie hebben we Google API Python-client nodig. Download google-api-python-client-gae-1.2.zip en pak het uit in de projectmap.

Neem de volgende bibliotheken op in app.py.

importeer httplib2 van apiclient.discovery import build van oauth2client.appengine import AppAssertionCredentials

Ten eerste moeten we om een ​​dataset van BigQuery te doorzoeken een BigQuery-service bouwen zoals getoond: 

url = 'https://www.googleapis.com/auth/bigquery' credentials = AppAssertionCredentials (scope = url) httpss = credentials.authorize (httplib2.Http ()) bigquery_service = build ('bigquery', 'v2', http = httpss)

Ten tweede moeten we een query maken die we zullen uitvoeren tegen de BigQuery-gegevensset. We zullen de Shakespeare dataset gebruiken. Hier is de vraag die we zullen uitvoeren tegen de dataset:

queryData = 'query': 'SELECT-woord van [publicdata: samples.shakespeare] LIMIT 1000'

Om de gegevens te doorzoeken, maken we een taak van de bigquery_service:

tableData = bigquery_service.jobs ()

En zoek vervolgens uit de gecreëerde taak:

response = tableData.query (projectId = PROJECT_NUMBER, body = queryData) .execute ()

Vervangen PROJECTNUMMER met het projectnummer dat we eerder hadden genoteerd. Dus, hier is het aangepaste app.py:

importeer httplib2 import webapp2 uit google.appengine.ext.webapp importeer sjabloon uit apiclient.discovery importeer build van oauth2client.appengine import AppAssertionCredentials url = 'https://www.googleapis.com/auth/bigquery' PROJECT_NUMBER = 'xxxxxxxxxxxxx' credentials = AppAssertionCredentials (scope = url) httpss = credentials.authorize (httplib2.Http ()) bigquery_service = build ('bigquery', 'v2', http = httpss) class ShowChartPage (webapp2.RequestHandler): def get (self): temp_data =  temp_path = 'Sjablonen / chart.html' queryData = 'query': 'SELECT-woord van [publicdata: samples.shakespeare] LIMIT 1000' tableData = bigquery_service.jobs () response = tableData.query (projectId = PROJECT_NUMBER, body = queryData) .execute () self.response.out.write (response) # self.response.out.write (template.render (temp_path, temp_data)) class ShowHome (webapp2.RequestHandler): def get (self): template_data =  template_path = 'Sjablonen / index.html' self.response.out.write (template.render (template_path, template_data)) a pplication = webapp2.WSGIApplication ([('/ chart', ShowChartPage), ('/', ShowHome),], debug = True)

Het antwoord van de vraag zou worden afgedrukt op chart.html. Sla al uw code op en upload de gewijzigde code naar GAE via appcfg.py update PythonD3jsMashup /.

Als u nu uw browser naar http://pythond3jsmashup.appspot.com/chart verwijst, ziet u de json-reactie terug van het opvragen van de dataset.

Conclusie

In deze zelfstudie hebben we een Python-applicatie gemaakt en geïmplementeerd in Google App Engine. We hebben onze applicatie verbonden met Google BigQuery en gegevens opgehaald uit de vrij beschikbare dataset. 

Vervolgens proberen we de gegevens opgehaald uit Google BigQuery te analyseren en te visualiseren met JavaScript-bibliotheek D3.js. Aarzel in de tussentijd niet om vragen of opmerkingen in de feed hieronder te plaatsen.