I den første delen av denne serien opprettet vi et Python-program og distribuerte det til Google App Engine (GAE). Fra applikasjonen koblet vi den til et Google BigQuery datasett og hentet dataene i vår søknad. I denne veiledningen ser vi hvordan du visualiserer dataene ved hjelp av JavaScript-biblioteket D3.js.

1. Komme i gang med D3.js

D3.js er et JavaScript-bibliotek for å lage data-drevne dokumenter. Den bruker evnen til HTML5, SVG og CSS3 til å lage interaktive visualiseringer basert på vilkårlig data. Det gjør også bruk av forskjellige transformasjoner for å gjøre visningen visuelt mer tiltalende.

Fra D3.js offisielle nettsted:

D3.js er et JavaScript-bibliotek for å manipulere dokumenter basert på data. D3 hjelper deg med å få data til liv ved hjelp av HTML, SVG og CSS. D3 vekt på webstandarder gir deg de fulle evnene til moderne nettlesere uten å knytte deg til et proprietært rammeverk, kombinere kraftige visualiseringskomponenter og en datastyrt tilnærming til DOM-manipulering.

For å komme i gang med D3.js, last ned og ta med D3.js, eller du kan direkte koble til den nyeste utgivelsen.

Nå er vi alle satt for å lage vår graf ved hjelp av D3.js.

2. Opprette X- og Y-aksene

Først klone du den forrige opplærings kildekoden fra GitHub.

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

Vi lager en ny side for å vise vårt diagram. La oss nevne det displayChart.html. Så navigere til PythonD3jsMashup_Part1 / Maler / og opprett en ny side som heter displayChart.html. Legg til følgende HTML-kode for den:

          
 
 
Diagrammet vil være her!!
 
 
 
© Firma 2014
 
 
  

Naviger til PythonD3jsMashup_Part1 katalog og åpne opp app.py. Nå må vi ta med en rute for den nylig tilførte siden displayChart.html. Nedenfor er en del av app.py der eksisterende ruter er erklært for appen.

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

På samme måte vil vi inkludere en annen rute som heter / displayChart og sett den til DisplayChart klasse som vi erklærer neste. Her er den nylig tilførte ruten:

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

La oss nå opprette en klassebehandler for / displayChart å gjengi malingssiden. Vi bruker template.render funksjon for å vise malingssiden. Her er den nylig tilførte klassen håndterer å vise displayChart.html.

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

Lagre alt og start serveren på nytt.

dev_appserver.py PythonD3jsMashup_Part1 / 

Pek nettleseren din til http: // localhost: 8080 / displayChart, og du bør se den nylig lagt sidemalen.

Skalerbar vektorgrafik (SVG) er et XML-basert bildeformat for tegning av 2D-grafikk med støtte for interaktivitet og animasjon. Vi bruker et SVG-element, som vi tegner grafen på. Så, la oss først lage et SVG-element.

 
Diagrammet vil være her!!
  

La oss nå lage en JavaScript-funksjon kalt InitChart å initialisere diagrammet. Inkluder skriptet på slutten av siden.

Før vi begynner, la oss anta et bestemt sett med data som vist. Senere erstatter vi prøvedataene med dataene fra Google BigQuery datasettet.

var data = ["count": "202", "år": "1590", "count": "215", "år": "1592", "count": "179" år ":" 1593 "," år ":" 1594 ", " count ":" 134 "," år " 176 "," år ":" 1596 "," tall ":" 172 "," år ":" 1597 ", teller ":" 199 "," år ":" 1599 ", " telle ":" 181 "," år ":" 1600 ", , "år": "1606", "count": "187", "år": "160", "år" : "1607", "count": "133", "år": "1608", "count": "190", "år": "1609", "count": "175" , "år": "1610", "telle": "91", "år": "1611", "telle": "150", "år": "1612"];

Først skal vi definere noen få konstanter relatert til grafen, for eksempel bredden, høyden og marginen fra venstre, høyre, topp og bunn, som vi skal bruke mens du oppretter grafen. Så, la oss velge SVG-elementet ved å bruke d3.select og definere våre konstanter.

var vis = d3.select ("# visualisering"), WIDTH = 1000, HEIGHT = 500, MARGINS = topp: 20, høyre: 20, bunn: 20, venstre: 50;

For å plotte dataene våre må vi definere skalaer over X-akse og Y-aksen slik at når dataene kommer dynamisk, justerer skalaene tilsvarende. D3.js gir en rekke APIer for å gjøre tingene enklere. En slik API er d3.scale.linear, som vi skal bruke til å lage vår skala basert på maksimale og minste dataværdier.

Når det er sagt, har vi to nye vilkår kalt Område og Domene. Område representerer området vi må vise visualiseringen og Domene representerer maksimum og minimumsverdier for data som vi vil visualisere på svg område.

Nå lager vi våre skalaer med d3.scale.linear og definer rekkevidde og domene for de opprettede skalaene.  

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

Som du ser, har vi definert rekkevidde fra 20 til 980 slik at det ikke kolliderer med grafkanter. I domenet har vi satt minimums- og maksimumsverdiene i henhold til eksempeldataene.

På samme måte skal vi også definere skalaen for Y-aksen.

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

Siden skalaene er klare, beveger vi seg mot å skape aksene. D3.js gir en API kalt d3.svg.axis for å gjøre dette. Så, vi bruker API til å lage aksene og angi de ovenfor opprettede skalaene til dem.

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

Med våre skalaer og akser opprettet, er vi alle klar til å tegne dem på svg. For det trenger vi en container, så la oss lage en. 

vis.append ( "svg: g")

Nå setter vi inn x-akse som vi opprettet over til svg beholder som vist nedenfor:

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

Tilsvarende, for yAkse:

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

Her er InitChart funksjonen som vi nettopp har opprettet. 

funksjonen InitChart () var data = ["count": "202", "år": "1590", "count": "215", "år": "1592", "count" "179", "år": "1593", "tall": "199", "år": "1594", "teller": "176", "år": "1596", "telle": "172", "år": "1597", "telle": "161", "år": "1598 "", "år": "1600", "teller": "157", "år": "1599", ":" 1602 ", " count ":" 179 "," år ":" 1603 ", " count ":" 150 "," år ":" 1606 ", " count ":" 187 "," år ":" 1607 ", " count ":" 133 "," år ":" 1608 ", " count ":" 190 "," år ":" 1609 " ":" 175 "," år ":" 1610 ", " count ":" 91 "," år ":" 1611 ", " count ":" 150 "," år ":" 1612 " ]; var vis = d3.select ("# visualisering"), WIDTH = 1000, HEIGHT = 500, MARGINS = topp: 20, høyre: 20, bunn: 20, venstre: 50, xScale = d3.scale.linear .range ([MARGINS.left, WIDTH - MARGINS.right]) .domæne ([1590, 1612]), yScale = d3.scale.linear () .vidde ([HEIGHT - MARGINS.top, MARGINS.bottom]). domene ([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); 

Lagre alle endringene og ring funksjonen på sidebelastning. Start serveren på nytt og pek nettleseren din til http: // localhost: 8080 / displayChart, og du bør kunne se under skjermen.

Hvis du ser på skjermbildet ovenfor, ser det ut som et rot. Våre to akse er der, men de synes å overlappe hverandre. La oss få det korrigert først.

For å skille begge overlappende akser, er det vi skal gjøre, flytte X-akse nedover. Vi bruker en eiendom som kalles forvandle å flytte X-akse ned. Det finnes ulike typer transformasjoner som er tilgjengelige. Vi bruker oversette spesifikk transformasjon for å flytte den nedover. Ved å bruke oversette transformere kan vi flytte aksene basert på koordinater. Når du bruker oversette, må vi spesifisere X- og Y-koordinatene som aksen må flyttes til. Siden vi vil at X-aksen skal bevege seg nedover, spesifiserer vi bare Y-koordinaten og la X-koordinatet stå på 0. Her ser du hvordan det ser ut etter at du har lagt til transformasjonsattributtet. 

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

Lagre endringene og start serveren på nytt. Pek nettleseren din til http: // localhost: 8080 / displayChart, og du bør se nedenstående skjermbilde.

Deretter må vi endre orienteringen av Y-aksen. Vi kan spesifisere aksens orientering ved hjelp av orientering. Så modifiser yAkse som vist nedenfor for å endre retningen.

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

Nå, hvis du oppdaterer siden, vil du ikke kunne se Y-aksen. Det er fordi orienteringen av Y-aksen er endret, og den har gått utenfor utsikten til ekstremt til venstre. For å endre det vil vi søke forvandle til Y-aksen som vist.

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

Som du kan se fra koden ovenfor, flyttet vi bare Y-aksen langs X-koordinaten (20 fra venstre) for å bringe den inn i bildet. Lagre endringene og oppdatere siden, og du bør se nedenstående skjermbilde.

Så her har vi X-aksen og Y-aksen, selv om de ser litt stygg ut. La oss bruke noen stiler og få dem til å se bra ut. Inkluder følgende CSS-stiler:

.aksebane fill: none; hjerneslag: # 777; form-gjengivelse: crispEdges;  .axis tekst font-family: Lato; font-size: 13 piksler; 

Legg til følgende CSS-stiler til aksene ved hjelp av CSS-attributtegenskapen.

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

Oppdater siden, og du bør se nedenstående skjermbilde:

3. Skalering av X- og Y-aksene dynamisk

Inntil nå har vi hardkodede minimums- og maksimumverdiene for domenet, noe som gjør det statisk og ubrukelig når data blir dynamisk. Så, vi må endre det og gjøre det dynamisk, slik at grafen skalerer seg dynamisk.

D3.js gir funksjoner kalt d3.min og d3.max for å få minimums- og maksimumverdiene fra en matrise. Vi kan bruke disse funksjonene for å få maksimale og minimale verdier for vårt domene, basert på utvalgsdatasettet. Anta at vi har en gruppe som heter data. Ved hjelp av d3.min vi kan få minimumsverdien.

d3.min (data, funksjon (d) return d.value;)

På samme måte, for å få maksimal verdi:

d3.max (data, funksjon (d) return d.value;)

Nå endrer vi XScale og ySkala for å gjøre domeneværdiene dynamiske.

xScale = d3.scale.linear () .område ([MARGINS.left, WIDTH - MARGINS.right]) .domæne ([d3.min (data, funksjon (d) return (parseInt (d.år) - 5) ;), d3.max (data, funksjon (d) return parseInt (d.year, 10);)])); yScale = d3.scale.linear () .avstand ([HEIGHT - MARGINS.top, MARGINS.bottom]). domene ([d3.min (data, funksjon (d) return (parseInt (d.count) - 5) ;), d3.max (data, funksjon (d) return parseInt (d.count, 10);)]));

Pakke det opp

I denne veiledningen så vi hvordan du kommer i gang med JavaScript-visualiseringsbiblioteket D3.js for å lage vår visualiseringsapp. Vi skapte aksene for grafen vår og gjorde det også dynamisk, slik at det skaleres med dataene tilsvarende. 

I neste del av denne serien bruker vi de faktiske dataene hentet fra Google BigQuery for å skalere graferaksene og også komme i gang med å plotte dataene på grafen.

Kode fra denne opplæringen er tilgjengelig på GitHub.