[MUSIC SPILLE] 

DAVID Chouinard: Jeg er David Chouinard, og dette er D3. Velkommen. Vi kommer til å lære om D3 i dag. D3 er en Javascript-rammeverk for bygging av en høykvalitets interaktive visualiseringer for weben. Ting som hva vi er se på baksiden av meg, vi kommer til å lære å lage de ting, hva slags grunnleggende om det. Men det kommer til å være kul. La oss komme i gang lage pene bilder. Vi har fått flere demoer av prospektene tilgjengelig. La oss gjøre det. 

Act I, DOM manipulation-- skal vi å starte med en gang å lage kule ting. Først av alt, på venstre side, har vi kode. Til høyre har vi resultatet av vår kode. La oss gå gjennom den. 

La oss lage en sirkel. Hvordan høres det ut? svg.append circle-- vi bare gjort en sirkel. Du trenger ikke tro meg, ikke sant? Det er ikke der. 

Så det vi gjorde rett her er, SVG er skalerbar vektorgrafikk. Dette er måten vi fortelle leseren til lage vektorgrafikk i nettleseren. Hva vi nettopp gjorde akkurat nå er lagt til en sirkel for å bla. 

Løftet er at sirkelen krever litt grunnleggende egenskaper før vi kan faktisk se det. Vi må fortelle det sin x-posisjon, sin y posisjon, dens radius. Vi gjorde ikke fortelle det noe av det, slik at vi ikke ser det akkurat nå. Men la oss si det ting. 

Så først av alt, du har å gi vår sirkel et navn. Så la oss kalle det sirkel. Vår sirkel har et navn nå. Og la oss gi det noen attributter. Hva med cx ville sentrere x, så midten av x-posisjon. La oss si, 200 for 200 piksler. 

La oss gi det en y på 200 piksler i tillegg. Og en r, en radius, på ca 40 piksler. Nå la oss se. Jeg kan ikke stave. 

Der du går. Vi har en sirkel i posisjon 200 piksler, 200 piksler, radius av 40 piksler. Litt kult, ikke sant? Vi har en sirkel. Yeah. 

Så ingen grunn til å følge med. Alle disse eksemplene, alle av koden jeg gjør i dag vil bli gitt elektronisk ved slutten i form av interaktive eksempler med sjekkpunkter på hver handling, og så videre. 

La oss gjøre flere ting. Denne sorte sirkelen er virkelig stygg. Jeg beklager for at feil meldinger der. Det vi går. 

La oss gi det en farge. Hvordan er det? Jeg liker å stålblå. Vel, endret vår sirkel farge. Det er flott. La oss gjøre det semi-transparent også-- semi-transparent. 

Så disse er attributter vi definere på sirkelen. Det første vi gjorde er vi sette en sirkel på siden. Og så skal vi definere en haug med attributter. Noen av disse er nødvendig, som CX, CY, og Radius. Og andre er valgfrie. 

Det er mange flere attributter. Det er mange av dem. For eksempel kan vi ha en slag også, et strøk av rødt. Men la oss ta det. Vi er tilbake til en sirkel, en blå sirkel. 

Så la oss gjøre flere sirkler. Hvordan er det? La oss gjøre en annen sirkel. Dette er spennende, ikke sant? 

Så sier jeg bare kopiere limt hva vi hadde allerede. La oss kalle det circle2. Og la oss gjøre det nøyaktige samme ting og gi det attributter, gitt en x-posisjon på 300. Yay, vi har to sirkler nå. 

Og selvfølgelig, vi kunne oppdatere disse verdiene. Jeg kunne sette den på 400, og nå den beveger seg. Og siden det er irriterende, la oss fjerne det, så circle2.remove. Den er borte nå. 

Så det vi gjør og er bare veldig, very-- dette er svært likt det du kan gjøre i jQuery, for eksempel. Vi bare manipulere DOM, det heter. Du har kanskje hørt det ordet før. Vi skaper ting, sette attributter på ting, fjerne ting. 

Nå, her er der det blir interessant. Så senere i koden, kunne vi fortsatt referere til den opprinnelige sirkelen her. Så la oss tilbakestille sin egenskap til cx. La oss si, sin x posisjon til 400. Og jeg kommer til å overgang det, så det er åpenbart. Det vi går. 

Så vi har lagt en sirkel. Vi satt noen attributter. Vi har lagt en annen sirkel, fjernet den. Og så skal vi modifisere den opprinnelige sirkelen. 

Men her er der det blir mye mer interessant. Ikke bare kan vi sette attributter som bare verdier, kan vi si, hei, sirkel, gå til posisjon 200. Vi kan også sette dem som funksjoner. 

Så i stedet for å gi 400 her, vi kan gjøre noen beregning på fly for hva vi ønsker at attributtet skal være. Så dette er hvordan du vil uttrykke det. Vi sier, i stedet for 400, la meg gi deg en funksjon i stedet. Og her, i denne funksjonen, vi kan gjøre noen sprø beregning. 

Vi kunne ta tid og se på noen andre ting og dynamisk bestemme sirkelen hvilken verdi vi ønsker. Hva om vi bare gi det en tilfeldig x posisjon? Så det er det. 

Så hva som sier er, for hver x, kjøre denne funksjonen. Og hva vi gjør er å beregne noen ting, noen tilfeldige ganger bredden og returnere det. Så hver gang vi kjører det, får vi en sirkelen som går til et tilfeldig sted. Det er litt kult. Jeg føler at jeg kunne se på dette for litt. Vi begynner å få til noe interessant her. La oss gjøre dette datadrevet nå. Det er ingen data her. La oss endre det. 

Act II Data Driven Documents-- Så la oss gå tilbake til her. Og la oss bare bli kvitt circle2, fordi vi bare legge til og fjerne det. Så vi egentlig ikke trenger det. Vi må være mye mer flink her. La oss si, vi har noen data av noe slag. En moment-- la oss si, vi hadde data for dette skjemaet. Vi hadde en rekke, bare en haug med tall. Vi har syv tall her, hva disse represent-- mengde i folks bankkonto, hvordan mye de veier, gud vet hva. 

Dette er tall, og vi ønsker å bruke våre sirkler å representere disse tallene en eller annen måte. Vi ønsker å knytte vår sirkler til disse tallene. Så det vi gjør. La oss si, vi ønsker en sirkel for hvert nummer. Vi kunne gjøre den gamle ting vi ble doing-- sirkel append og circle2 og circle3. Men dette kommer ut av kontroll, og det er mye av repeterende logikk. 

Så la oss få mer flink med det. I stedet for å bruke VAR sirkel svg.append at vi var bare bruke, vi kommer til å bruke denne lille blokken her. Jeg ønsker ikke å gå i dybden inn i det alle disse delene gjør. Og det er litt av et avansert tema. Og jeg skulle ønske jeg kunne. 

Men det viktigste å recognize-- og ser du er veldig ofte i D3-kode. Denne tekstblokk basic skaper så mange kretser som det er dataelementer i denne matrisen til høyre her. Så dette skaper så mange sirkler som det er elementer. Det kommer til å skape oss syv sirkler. Og det gjør en veldig, veldig viktig ting. Så la oss kjøre det. La oss ta vår andre sirkel. La oss bare kommentere dette skilles ut og kjøre dette igjen. 

Det vi går. Så vår sirkel her er en mye mørkere, fordi vi har syv sirkler, en på toppen av den andre. Vi nettopp opprettet syv sirkler, en hver for hver av disse dataelementer. Men det er en viktig ting som har skjedd med denne tekstutdrag her. 

Det er at data ble bundet. SÃ¥ hver eneste en av disse dataelementer, 10, 45, 105, var bundet til en bestemt krets. Slik at disse ikke bare skapt en haug med sirkler men knytter de to tingene sammen. 

Og i fremtiden, fordi vi opprettet de kretser med denne D3 funksjon, hvis jeg gir deg en sirkel, kan du gi meg data knyttet til den. Så vi kan spørre D3. Hei, D3, har jeg denne sirkelen. Hva er data som sirkelen har? Og D3 ville fortelle oss 10 eller 45 eller 105. 

Disse tingene er bundet. Det er en veldig, veldig grunnleggende konseptet. La oss se på det. 

Så måten vi skulle spørre D3-- så dette er irrelevant for dette, men bare tro meg på det. Dette er hvordan vi spør D3. Hei, D3, gi meg den første sirkel som du kan finne. Gi meg den første sirkelen du kan finne. Og så kan vi spørre D3, hva er dataene på det, som dette, 10. 

Så vi bare spør D3, finne meg den første sirkelen du kan finne. Hva er dataene? 10, er det faktisk vår første dataelement. Vi kunne spørre det, hei, D3, finne oss vår tredje sirkel. 105. Hvorfor er dette veldig viktig? 

Så akkurat her, jeg nevnte at vi kunne bruke funksjonene. Og jeg nevnte det var en svært mektig ting. Så ikke bare kan våre funksjoner gjøre ting som gjøre noen beregninger, for eksempel, returnere et tilfeldig tall, det kan også gjøre ting basert på dataene. Dette er hva data drevet dokumenter betyr. Det er det D3 står for. 

Så dette x postition-- stedet for å bare si, alle sirkler, få x posisjon 200, vi kunne gi den en funksjon. Og her kan vi gjøre noen beregning. og d her står på plass for dataene. Så hver gang vi har en sirkel, i utgangspunktet, D3 vil skape disse syv sirkler. Og deretter for hvert 

sirkel, det kommer til å gå, hei, circle1 hva er din x posisjon. Tidligere var vi alltid svarer 200. Men nå, spør hver gang D3 oss hva som er din x posisjon, det kommer til å gi us-- vi har den sirkelen, så vi har data. Det kommer til å gi oss data og si, hva vil du utstilling å være, basert på disse data. 

La oss bare tilbake de faktiske data. Så hvis vi kjøre dette, gir dette amerikanske data drevet dokumenter. Disse sirklene er basert i forhold position-- de er baser som en funksjon av dataene. 

Så for den første sirkelen, D3 setter en sirkel. Og så D3 spør oss, hva gjør du vil utstillingen skal være. Og vi bare si, hva dataene er. Gjør utstilling 10. 

Så spør det, hva vil du den utredning for å være for den andre sirkelen. Og vi svarer, 45. Og vi, selvfølgelig, kan gjøre noen beregninger her. Jeg finner at de kretser er slags klemt opp. 

SÃ¥ multiplisere det med tre, multiplisere data med 3. VÃ¥r sirkel bare fikk utvidet ut. VÃ¥r verdi ble tredoblet. 

Sirkelen er virkelig på kanten, så la oss kanskje slags offset det. La oss si, med 20. Her kan du gå. 

Dette er et datavisualisering. Det er en veldig enkel en, men dette gir oss et innblikk i våre data. Det forteller oss at, for eksempel, vi har en liten klynge av elementene. Og vi har en stor avvikende her. Dette gir oss litt informasjon om fordelingen. 

Hvis vi for eksempel for å endre dataene til 150 her og refresh, vår visualisering endres. Dette dokumentet er datadrevet. 

Så selvfølgelig alle disse elementene, alle disse attributtene her, vi kan bruke en funksjon, ikke bare tallene, ikke bare x- og y-posisjoner. Slik at vi kan bruke en funksjon for fargen. Så vi vil gjøre det samme. Vi skal gi det en funksjon. 

Og la oss si, vi kunne ha conditionals i vår funksjon. Denne funksjonen kan være hundre linjer lange. Det kan gjøre veldig, veldig kompliserte ting. 

Så la oss sette en hvis setningen her. La oss si, hvis våre data er mindre enn 50, er at noen terskel at vi er interessert i en eller annen grunn. La oss gjøre det grønne. Ellers, la oss gjøre det rødt. Hvordan er det? Nice. 

Så vår datavisualisering begynner å formidle mer interessant informasjon på mange kanaler. Så nå vet vi litt om fordelingen. Og vi vet at det er en slags avskåret på 50 som vi er interessert i. Vi vet at det er to datapunkter under denne terskelen, og de fleste av dem ovenfor. 

Så som et siste trinn, disse dataene her, det er svært sjelden å se dette sånn. Så la oss bare flytte den ut til en variabel fordi det er renere, som dette. Og så bruker vi den variabelen her. Det er akkurat det samme. Det er bare litt renere. 

Neste opp, Act III, Scales-- Så ett problem rett her er, hvis vi endrer vår data i denne 200 value-- hvis vi endrer det til 400 eller noe og oppdatering, Da denne verdien bare gikk offscreen. Så vår logikk her av hvordan vi gjør de gangene 3 og 20, for å spre den ut og deretter oppveie det litt er virkelig clunky. 

Hva mener de tallene? De er bare hard kodet der. Og de er veldig mye knyttet til dataene. Vi ønsker en datadrevet dokument. Vi vil ha en svært fleksibel dokument, at gitte data, tilpasser seg det og representerer det. 

Hva vi trenger i utgangspunktet er, vi har denne rekke tall 10. 45, 105. Og vi ønsker å kartlegge det ut på bredde, i hele bredden her. Så vi har utvalget av tallene kommer fra 0 til 100. Og vi har denne campus jeg går 20-700, i dette tilfellet. 

Vi slags ønsker å kartlegge det videre. Vi vil skalere det opp og deretter utlignet det litt. Det viser seg at D3 har disse. Det kalles en skala. Så la oss bruke den. 

Måten works-- jeg kommer til å skriver dette opp og deretter forklare det. Dette er en skala. Hva det vil gjøre er, vil det kartlegge verdier fra 1 til 200 for å 20-600. Vi kan sjekke det. Vi kan se at her. 

Så hvis jeg mate den 1-- ett øyeblikk. Gi meg ett sekund. Jeg må ha skrevet feil det. Der du går. Jeg er lei for det. 

Så hva en skala vil gjøre er, vil det ta en verdi og deretter konvertere det, utvide det ut, så det fyller hele spekteret du spør etter. Så i dette tilfellet, hvis vi gir det en, det kommer til å kartlegge det ut på 20. Og hvis vi gir det 200, er det kommer til å kartlegge den videre til 600. Og et sted i mellom, hvis vi får 100, er det kommer til å være et sted på mellom 20 og 600. 

Og selvfølgelig, nå er dette hva vi trenger å fjerne disse hardkodet ting vi har rett der. Så det vi ønsker å gjøre er ta dataene som vi er gitt, at enkelte data element, og gi det til skalere først. Så skala vil skalere det opp. 

Samt-- Oh, vi har en liten feil her. Vi mangler data. Der du går. Og som utvider den ut. 

Det gir oss den samme resultat vi hadde før, men i stedet for å ha dem hard kodet begrensninger. Og hvis størrelsen på vår lerret endringer, f.eks hvis vi ønsker å ha dette over 400 piksler og det squishes ut, vi kan ha det over-- vi kan utvide det, eller vi kan redusere dette venstre marg til noe mindre eller mer enn 20. Disse tallene, disse hardkodet tallene nå fornuftig for oss. 

Og vi kunne gjøre mye mer interessante ting også. Så i stedet for å ha en lineær skala, kanskje vi vil logge en skala. Og som vil gi oss en log skala. 

Så nå vår skala, i stedet for bare vokser ut dette området, det gjør mer avanserte ting. I stedet for at dette område vanskelig kodet, og i stedet for å ha det 600, vi ønsker kanskje å bare bruke bredden, slik at fra 20 til bredden minus 40, 2 ganger margin på den andre siden. Og dette gjør mye mer fornuftig å noen som kan se på koden. 

Interessant, skalaer få veldig, veldig sofistikert også. De gjør en masse interessante ting. Så skalerer ikke nødvendigvis har å operere med like tall. La oss lage en fargeskala. 

Så vårt utvalg kunne be-- vårt domene er 1 til 200. Det er inngangs ting. Men vi ønsker kanskje å kartlegge fra grønt til rødt, f.eks. Og nå, hvis vi passerer det en, vi kommer til å få grønt. Hvis vi gir det 200, vil vi få rødt. Og hvis vi passerer det noe i mellom, det kommer til å bli noen blanding av det, et sted på gradient mellom grønn og rød. 

Og i stedet for å ha denne typen clunky logikk vi har her med betinget rett der, vi kunne ha something-- en lineær skala mellom disse. Så vi vil bruke skalaen vi bare opprettet, som vi kalte farge. Og vi ville gi den d, som er vår dataelement. Og der vi går. Vi har en fargeskala. 

Så dette er kartlegging. Så helt til venstre er helt grønn. Helt til høyre er helt rød. Og alt i mellom er en funksjon av d. Vi har en interessant visualiseringer her. Men våre data var litt kjedelig. La oss se hva vi kan gjøre hvis vi hadde mer interessante data. 

Act IV, som arbeider med Data-- det første vi ønsker å gjøre for å gjøre vår visualisering mer interessant er å flytte dataene et annet sted. Det er veldig clunky å ha dataene hard kodet her. Og generelt, vil vi være å spørre noen andre for dataene. Vi skal kanskje ber regjeringen, Census Bureau, hva er din data og deretter plotte det eller spørre noen tredjepart enhet for noen data og deretter bygge en visualisering på det. 

Så det første vi vil gjøre er å flytte det til et annet sted. Så jeg kommer til å lage en fil her kalt data.json. JSON er dataformatet. Du trenger ikke å vite mye om det. Og vi kommer til å kopiere lite data vi har der, lime den inn i det ordrett, gå tilbake til vår visualisering kode her, og bruke denne funksjonen til høyre her. Du trenger ikke å kjenne detaljene. Men hva dette vil gjøre er, det vil finne denne filen, hente det, og returnere det til oss. Så hva dette betyr er, det går og få data.json fil. Og så all koden som er innrykket inside-- hovedsak, all koden vi har det-- vil kjøres bare når vi får data tilbake. Og så kommer det til å kjøre den kode med de dataene vi har. Stor, har vi en visualisering som spørringer for noen kode sted annet, som vanligvis hvor det spør noen data fra et annet sted, som vanligvis hvordan visualiser fungere. 

Men jeg ønsker å gå tilbake til dataene. Slik at dataene fundamentalt i D3-- D3 forbruker data som er en liste over ting. D3 forventer at data bare være en liste av ting, en rekke ting. Det spiller ingen rolle hva disse tingene er, så lenge det er en rekke av dem. 

Så her, for eksempel, kan vi av Selvfølgelig har flytende punkt verdier. Vi kunne ha negative. D3 ikke bryr seg, så lenge som det er en liste over ting. 

Som interessante ting vi kunne ha, kunne vi også har en liste over strenger sånn. Så disse er Crimson overskrifter Jeg plukket opp et par dager siden. Og kanskje du kan finne noen interessant ting om disse noen overskrifter. 

Så igjen, er dette en liste over ting. D3 bryr seg ikke. Disse tilfeldigvis være en streng. Vi har endret våre data. 

La oss gå tilbake til vår visualisering. Nå forventer vår visualisering input til å være nummer. Så vi kommer til å ha å gjøre noen endringer. Så for eksempel, først av alt, kanskje vi ønsker å sette disse sirklene sammen med lengden på overskriften, den antall tegn i overskriften. 

Så hva skal vi gjøre er-- hver gang vår funksjonen kalles med en streng, vi finner det lengde og så pass på at til skala. Fargen, vil jeg komme tilbake at for å stålblå. Og der vi går. Vi har en visualisering av Crimson overskrifter. 

Vår målestokk er en bit av. La oss anta at den lengste overskrift er 100 tegn, så spenner det ut litt. Og vi har en visualisering. Så det virker som de fleste overskrifter er ganske tett sammen, i form av karakter linje. Men en det virkelig skiller seg ut. 

Vi kunne bygge noen verktøy å utforske det mer. Men da jeg jobbet på dette, var jeg nysgjerrig på om, i dette datasettet, overskrifter med et kolon i dem ville være lenger. Jeg antar de ville. 

Så la oss finne ut. La oss bruke farge kanal som vi gjorde før, å kode noen om hvorvidt det er et kolon eller nei. Så vi kommer til å bruke en betinget igjen. Du trenger ikke å vite detaljene i dette, men dette er hvordan vi sjekke en streng for et bestemt tegn i Javascript, igjen, ikke relevant. 

Men hvis vi ikke finner en tykktarm, vil vi returnere grønt. Og hvis vi gjør det, vil vi returnere rødt. Så igjen, overskrifter som har et kolon vil være rød. Dette er hva dette means-- hyggelig. 

Så det virker som min hypotese er bumped. Det er bare to. Vi har bare seks datapunkter og bare to hadde kolon. Men det virker litt mer på den nedre ende, i virkeligheten. Overskrifter med kolon synes generelt å være kortere, i hvert fall i våre data set-- interessant. 

La oss vende tilbake som til stålblå og deretter se hva vi kan gjøre med selv mer interessante data. Så igjen, nevnte jeg at data i D3 er en liste over ting. Vi har sett tall av mange typer. Vi har sett strenger. Men ting kan også være gjenstander. 

De kan være kompliserte ting som inkluderer en rekke ting. Å si at mer tydelig, i de fleste tilfeller, har vi ønsker å bygge hvert datapunkt som mer komplisert enn bare én verdi. Hvis du kan tenke en database om studenter, det kan være en student navn, en student-ID, og en masse ting forbundet med en spesiell rekord, ikke bare en streng eller et tall. Så la oss se på det. 

Dette er en slike datasett. Dette er et datasett om jordskjelv. Så alt her på vår liste eller matrise ting inneholder mange ting selv. Så hver datapunkt et omfang og et koordinatsystem. Og koordinerer seg selv inneholde to ting. 

Så hver dag er nå mye mer komplisert og mye mer interessant og inneholder mye mer interessant informasjon. La oss se vi kan bygge ut av det. Retur tilbake til her, igjen, ved hjelp vår histogram sirkel visualisering vi har bygget, la oss se om vi kan bygge en visualisering av magnitude distribusjon i vår datasettet. 

Så her er det samme konseptet. Men nå, inneholder d flere ting. d inneholder mange dataelementer. Så vi får d tilbake. D3 gir oss d. Og vi svare ved å finne omfanget av d og deretter passerer det til skala. 

Og da må vi endre vår skala, selvfølgelig. Så størrelsene rett og slett ikke gå mye mer enn 10 år. Egentlig har det aldri vært 10 magnitude jordskjelv. Men det er slags vår øvre slutt, vår øvre spekteret. 

La oss oppdatere. Nice, har vi en visualisering. Det er interessant å note-- så det er to datapunkter som er nesten nøyaktig på toppen av hverandre andre, i form av omfanget. Du ser dette ved opacity vi bruker. 

Vi har geografiske data nå. Vi har breddegrader og lengdegrad. Kanskje vi kunne gjøre noe mye mer interessant med det. La oss finne noen mer interessant måte å visualisere dette mer komplisert data vi har tilgang til. 

Act V, Mapping-- fundamentalt, vi ønsker å sette disse på et kart. Jeg mener, dette er hvor dette går. Vi ønsker å kode informasjon om stilling av disse jordskjelvmålinger, samt deres størrelse, fordi vi har det nå. Vi forstår hvordan å konsumere mer kompliserte data. 

Det første vi skal gjøre er lage et kart, et bakgrunnskart. Jeg kommer til å gå gjennom dette meget raskt. Dette er vanskelig kode. Det er enda en av de oppskrifter du egentlig ikke må forstå fullt ut for deg å bruke. Men dette er koden. Denne koden her skaper et kart. 

Vi kommer ikke til å gå i detalj. Men overfladisk, hva den gjør er, Det spør denne us.json fil, som er en datafil som den vi hadde før. Det er mer komplisert, selvfølgelig. Men i dette tilfellet, alt hvert datapunkt er denne tilstanden og har en liste over breddegrader og lengdegrad som definerer et polygon, som form, at staten. 

Så hva D3 vil gjøre er lik til hva vi gjorde før. Det vil be om at og binde det til et element. Og det er en funksjon som vil kartlegge dette elementet ut, basert på de breddegrader og lengdegrad. Du kan lese mer om det. Og jeg anbefaler det. 

Det er koblingene på slutten av denne koden postet. Og koden blir kommentert. I det lenker til videre på dette. Jeg anbefaler at du slå det opp. Men hva vi bryr oss om er dette anslaget funksjon. Jeg ønsker å gå gjennom det. 

Først av alt, la meg vise du at, ja, vi har et kart. Kartene er kult. Så la oss se på dette produktfunksjon. 

Projeksjon er veldig mye som en skala, skalaer igjen. SÃ¥ hva produksjon for denne projeksjon funksjon ikke er, kan vi passere det lengdegrad og latitudes-- i dette tilfellet disse verdiene her er det latissimus-lengter av bygningen vi sitter i retten now-- til projeksjon. Og projeksjon vil konvertere det inn x og y pikselverdier. 

Så hva projeksjon gjør er svært lik våre skala. Det tar våre breddegrader og lengdegrad som representerer en hel verden og krymper og dimensjonering som ned til torget som vi ønsker, at vi har gitt det. I dette tilfellet er vi passerer disse verdiene. Og det er å gi oss, vel, at på skjermen betyr 640 piksler. Hele denne skjermen er 700 piksler bred, slik som gjør oss om her, og 154 piksler ned, som jeg vil Estimatet er ganske mye her. 

Så tar de lat-lengter, som representere noe på hele kloden og knuse og flytte det rundt å gi oss x og y pikselverdier, dette er det første som er gjøres i denne kartleggingen kode. Og deretter resten av kode forbruker data og deretter tilordne de lat-lengter på noe på skjermen din. 

Men vi kommer til å bruke dette anslaget funksjoner, fordi det viser seg vi har Lat-lengter lengter også. Ser tilbake på våre data, har vi breddegrader og lengdegrad for hver observasjon. Så la oss bruke projeksjon. 

Så se på vår utstilling, vi ønsker vår exposition-- vi har en bredde og en lengdegrad. Men vi ønsker pikselverdier. Og det viser seg, vi har nøyaktig hva vi want-- projeksjon. Veldig mye som vi var ved hjelp av skalaen akkurat her, vi nå kommer til å bruke projeksjon og passerer det koordinerer. Så det første vi doing-- så vi er får d, som er individuell data element av en individuell jordskjelv lesing. Det første vi gjør er å få koordinatene. Greit, vi har koordinatene. 

Den andre tingen vi gjør er passere den videre til projeksjon. Projeksjon konverterer disse koordinatene i pikselverdier, x og y. Og så det siste vi ønsker å gjøre er å bare få x, som dette tilfellet er den første. Det er den første av de to tingene som er returnert av projeksjon. 

Vi vil gjøre det samme for y. Men i stedet, vil vi gå tilbake det andre elementet, y. Gjør deg klar for å oppdatere. Ooh, ekstra karakter her-- fin, har vi en datadrevet dokument som er skjule dette JSON-fil av objekter, lage et kart, og endre attributt i forhold til data å projisere den på et kart. Dette er virkelig interessant. Dette er kult. 

La oss ta det opp et hakk. Jeg mener, vi har to stykker av informasjon med hvert datapunkt. Jeg mener, tre. Vi har koordinatene, som er en x og y. Og vi har den størrelsesorden. 

Vi trenger å kode magnitude eller annen måte. Vi har en rekke kanaler. Vi kan bruke farger. Vi kan bruke radius. Vi kunne bruke opacity. Vi kunne bruke mange ting i kode. Noen av disse attributter og mange mer som ikke er listet opp her, fordi de er valgfritt, vi kunne bruker å kode disse dataene, hjerneslag og alle disse tingene jeg har nevnt. 

La oss gjøre radius. Jeg tror radius er den mest intuitive. Så igjen, vil vi erstatte det hardkodet 40 og gjøre noen beregninger. Vi vil bruke vår favoritt skala igjen. Og vi er forbi d. Men ikke d fordi vi vil at omfanget d. d er bare datapunkt. Vi passerer omfanget å skalere. 

La oss prøve det igjen. Ooh, det fungerer ikke. Hvorfor virker det ikke? 

Så husk hva skala gjør. La oss se på skalaen igjen. Skala kart fra 1 til 10 på til 22 til 600, mer eller mindre. 600 er enorme. Dette er grunnen til at vi får dette. 

Så vi ønsker å endre vår målestokk til noe mer fornuftig. La oss si, vi ønsker 0-60. 60 er stor, men 10 jordskjelv er utrolig sjelden. Faktisk har de aldri skjedd. 

Så hva dette vil gjøre er, vil det ta vår størrelsesorden som går fra 1 til 10 og kartlegge den på å utvide den ut. Og kartlegge det videre til 0-60. La oss oppdatere. 

Nice, har vi en visualisering. Dette er flott. Dette er faktiske data. Du vil legge merke til, i min lille leketøy eksempel, det største jordskjelvet er rett på toppen av oss. Men det er det. Vi har en dato drevet visualisering som forbruker data og gir oss virkelig interessant informasjon. Ja, la oss legge til noen interaktivitet til det. Jeg nevnte at var den sterke kraft av D3. 

Så her, for hvert element, er vi beskriver en haug med attributter. Men vi kan også beskrive hva vi ønsker å skje med interaktivitet elementer. For eksempel kan vi beskrive hva som skjer når vi musen over. Og veldig likt det, som vil ta en funksjon, svært lik attributter vi hadde før, hvor vi gjør noe til element når vi sveve over det. 

Så første vi må gjøre er å velge det elementet, å finne det i utgangspunktet, i nettleseren. og da kunne vi sette et attributt til det. Så det jeg gjør her er, når vi holder over noe, vil vi få dette elementet og deretter sette sin opacity tilbake til 1, til fullstendig ugjennomsiktig. La oss se hva som ser ut som. 

Det synes vi har en ekstra semikolon her. Så hvis vi sveve over her, det blir full. Men nå, selvfølgelig, det forblir fullt, fordi vi må beskrive hva som skjer når fjerne vår markøren. Så la oss gjøre akkurat det på mouseout, i motsetning til mouse. 

Og vi vil tilbakestille det til hva vi hadde before-- 0,5. Og nå, hver gang vi hover, vi får en full sirkel. Det hjelper oss å se hva vi vi velger i hovedsak. 

Og nå la oss gjøre dette virkelig flott. La oss koble denne til reelle data. Så la oss be kunne USGS om sine data. Så US Geological Survey har data om jordskjelv. De har en offentlig API som er i stand å bli fortært i JSON-format. Så la oss gjøre det. 

Så dette er en bit av koden som kobles til USGS API. Og det er litt av prosessering på det. Dette er ikke relevant, men det forenkler til en enkelt dataformat som en vi hadde før. Så jeg bli kvitt vår samtale til vår falske data.json på filen. Og i stedet, jeg ringer USGS hovedsak. 

La oss oppdatere, hyggelig. Dette er faktiske, reelle data fra denne uken for jordskjelv. Dette er virkelig interessant. Dette er ikke overraskende for oss, men det finnes en masse av jordskjelv på West Coast i California. Men jeg syntes det var veldig interessant at det var så mange jordskjelv i Alaska, og tilsynelatende, her i Midtvesten. Jeg mener, interessant, og vi er gode. Det er konklusjonen. 

Men fundamentalt, dette er hva D3 hjelper oss til å gjøre. Det hjelper oss ta data, bind det til elementer i DOM, og har disse elementene endres som en funksjon av data, har disse attributtene, alle de mange attributter for elementene, alle være nyttig for kanalene å formidle informasjon. 

D3 er et utrolig kraftig bibliotek og utrolig veldrevet. Dette er noen kraftige saker. Data visualisering er en utrolig kraftig verktøy for å formidle til folk dype innsikter som får til deres kjerne og hjelper dem til å forstå, i dette dyp og intuitiv måte, hvordan data fungerer og hvordan data endrer våre liv.