[Musik spiller] 

DAVID Chouinard: Jeg er David Chouinard, og det er D3. Velkommen. Vi kommer til at lære om D3 i dag. D3 er en JavaScript rammer til opbygning af en høj kvalitet interaktive visualiseringer til internettet. Ting som det, vi er seeing i ryggen af ​​mig, vi vil lære at lave dem, ting, slags det grundlæggende i det. Men det vil være cool. Lad os komme i gang gøre smukke billeder. Vi har fået flere demoer af udsigterne til rådighed. Lad os gøre det. 

Act I, DOM manipulation-- vi vil til at starte med det samme at gøre seje ting. Først og fremmest til venstre, har vi kode. Til højre har vi resultatet af vores kode. Lad os gå igennem det. 

Lad os lave en cirkel. Hvordan lyder det? svg.append circle-- Vi har lige lavet en cirkel. Du behøver ikke tro mig, ikke? Det er der ikke. 

Så hvad vi gjorde her er, SVG er skalerbar vektorgrafik. Det er den måde, vi fortæller browseren til gøre vektorgrafik i browseren. Hvad vi lige gjorde lige nu tilsættes en cirkel for at gennemse. 

Løftet er, at cirklen kræver lidt grundlæggende egenskaber før vi rent faktisk kan se det. Vi har brug for at fortælle det sin X-position, dens y position, dets radius. Vi ikke fortælle det noget af det, så vi ikke ser det lige nu. Men lad os sige det stuff. 

Så først og fremmest, du har fået at give vores kreds et navn. Så lad os kalde det cirkel. Vores cirkel har et navn nu. Og lad os give det et par attributter. Hvad med cx ville centrere x, så midten af ​​X-positionen. Lad os sige, 200 for 200 pixels. 

Lad os give det en y på 200 pixels samt. Og en R, en radius på omkring 40 pixels. Lad os nu se. Jeg kan ikke stave. 

Der du går. Vi har en cirkel ved position 200 pixels, 200 pixels, radius af 40 pixels. Slags cool, ikke? Vi har en cirkel. Ja. 

Så ingen grund til at følge med. Alle disse eksempler, alle koden jeg gør i dag vil blive ydet online i slutningen i form af interaktive eksempler med checkpoints på enhver handling, og så videre. 

Lad os gøre flere ting. Denne sorte cirkel er virkelig grimme. Jeg er ked af, at fejl meddelelser lige der. Der vi går. 

Lad os give det en farve. Hvordan er det? Jeg kan lide at stålblå. Nå, vores kreds skiftede farve. Det er godt. Lad os gøre det halvgennemsigtige too-- halvgennemsigtig. 

Så dette er egenskaber vi definerer på cirklen. Det første, vi gjorde, er vi sætter en cirkel på siden. Og så er vi definere en flok af attributter. Nogle af disse er påkrævet, Ligesom CX, CY, og Radius. Og andre er valgfri. 

Der er mange flere egenskaber. Der er en masse af dem. For eksempel kunne vi have en slagtilfælde samt, et slagtilfælde rød. Men lad os fjerne det. Vi er tilbage til en cirkel, en blå cirkel. 

Så lad os gøre flere kredse. Hvordan er det? Lad os lave en anden cirkel. Det er spændende, ikke? 

Så jeg siger bare Copy-Pasted hvad vi allerede havde. Lad os kalde det circle2. Og lad os gøre det nøjagtige samme ting og give det attributter, givet en x position 300. Yay, vi har to cirkler nu. 

Og selvfølgelig kunne vi opdatere disse værdier. Jeg kunne sætte det på 400, og nu er det bevæger sig. Og da det er irriterende, lad os fjerne det, så circle2.remove. Det er gået nu. 

Så det, vi laver, og er bare meget, very-- dette er meget lig det, du kan gøre i jQuery, f.eks. Vi er lige manipulere DOM, det hedder. Du har måske hørt, at ordet før. Vi skaber ting, indstilling attributter på ting, fjerne ting. 

Nu, her er hvor det bliver interessant. Så senere i koden, kunne vi stadig henvises til den oprindelige cirkel her. Så lad os nulstille sin attribut til cx. Lad os sige, dens x position til 400. Og jeg har tænkt mig at skifte at, så det er indlysende. Der vi går. 

Så vi tilføjet en cirkel. Vi sætter nogle attributter. Vi har tilføjet en anden cirkel, fjernet det. Og så er vi ændre den oprindelige cirkel. 

Men her er hvor det bliver meget mere interessant. Vi kan ikke kun sætte attributter som netop værdier, kan vi sige, hey, cirkel, gå til position 200. Vi kan også indstille dem som funktioner. 

Så i stedet for at give 400 her, vi kan gøre nogle beregning om flyve for, hvad vi ønsker at attribut til at være. Så dette er, hvordan du ville udtrykke det. Vi siger, i stedet for 400, så lad mig give dig en funktion i stedet. Og her, inde i denne funktion, Vi kan gøre enhver vanvittig beregning. 

Vi kunne tage tid og se på nogle andre ting og dynamisk bestemme cirklen hvilken værdi, vi ønsker. Hvad med vi bare give det en tilfældig X-position? Så det er det. 

Så hvad der siger er, for hver x, køre denne funktion. Og det, vi gør, er at beregne nogle ting, en tilfældige gange bredden og returnere det. Så hver gang vi kører, at vi får en cirkel, der går til en tilfældig plads. Det er lidt cool. Jeg føler, at jeg kunne se på dette for lidt. Vi er begyndt at komme til noget interessant her. Lad os gøre disse data drevet nu. Der er ingen data her. Lad os ændre det. 

Act II, Data Driven Documents-- Så lad os vende tilbage til her. Og lad os bare slippe af circle2, fordi vi bare tilføje og fjerne det. Så vi har ikke rigtig brug for det. Vi skal være meget mere klog her. Lad os sige, at vi har nogle data af en slags. Man moment-- lad os sige, vi havde data af denne formular. Vi havde en matrix, bare en flok numre. Vi har syv numre her, uanset disse represent-- beløb i folks bankkonto, hvordan meget de vejer, Gud ved hvad. 

Disse tal, og vi ønsker at bruge vores cirkler at repræsentere disse numre eller anden måde. Vi ønsker at binde vores cirkler af disse numre. Så det, vi gør. Lad os sige, vi vil have en cirkel for hvert nummer. Vi kunne gøre det gamle ting vi doing-- cirkel append og circle2 og circle3. Men det får ud af hånden, og der er en masse af at gentage logik. 

Så lad os få mere smart med det. I stedet for at bruge var cirkel svg.append at vi blot brugte, vi kommer til at bruge denne lille blok her. Jeg ønsker ikke at gå i dybden i, hvad alle disse dele gør. Og det er lidt af en avanceret emne. Og jeg ville ønske, jeg kunne. 

Men den vigtigste ting at recognize-- og du vil se meget ofte i D3 kode. Denne blok af tekst basic skaber så mange cirkler som der er dataelementer i dette array her. Så det skaber så mange kredse som der er elementer. Det kommer til at skabe os syv cirkler. Og det gør en virkelig, virkelig centrale ting. Så lad os køre det. Lad os fjerne vores andre cirkel. Lad os bare kommentere dette skilles ud og køre det igen. 

Der vi går. Så vores cirkel her er der en parti mørkere, fordi vi har syv cirkler, en oven på den anden. Vi har lige oprettet syv cirkler, en hver for hver af disse dataelementer. Men der er en vigtig ting, der skete med dette uddrag lige her. 

Det er, at data var bundet. Så hver eneste af disse dataelementer 10, 45, 105, var bundet til en bestemt cirkel. Så disse ikke blot skabt en flok af cirkler men binder de to ting sammen. 

Og i fremtiden, fordi vi skabte de kredse med dette D3 funktion, hvis jeg giver dig en cirkel, kan du give mig de data, der er forbundet med det. Så vi kan spørge D3. Hey, D3, jeg har denne cirkel. Hvad er de data, cirklen har? Og D3 ville fortælle os 10 eller 45 eller 105. 

Disse ting er bundet. Det er en meget, meget grundlæggende koncept. Lad os se på det. 

Så den måde, vi vil bede D3-- så dette er irrelevant for dette, men bare tro mig på det. Det er sådan, vi beder D3. Hey, D3, giv mig den første cirkel, som du kan finde. Giv mig den første cirkel, du kan finde. Og så kunne vi spørge D3, hvad der er data om det, som dette, 10. 

Så vi bare spørge D3, finde mig den første cirkel, du kan finde. Hvad er dens data? 10, der er faktisk vores første dataelement. Vi kunne spørge det, hey, D3, finder os vores tredje cirkel. 105. Hvorfor er det virkelig vigtigt? 

Så lige her, nævnte jeg at vi kunne bruge funktionerne. Og jeg nævnte det var en meget kraftfuld ting. Så ikke alene kan vores funktioner gøre ting Ligesom gøre nogle beregninger, for eksempel, returnere et tilfældigt tal, kan det også gøre ting baseret på data. Dette er, hvad data drevet dokumenter betyder. Det er, hvad D3 står for. 

Så dette x postition-- stedet for bare at sige, alle de kredse, få X-position 200, vi kunne give det en funktion. Og her kan vi gøre nogle beregninger. og d her står på plads for data. Så hver gang vi har en cirkel, dybest set, D3 vil skabe disse syv cirkler. Og så for hver 

cirkel, det kommer til at gå, hey, circle1 hvad er din X-position. Tidligere var vi altid besvare 200. Men nu, hver gang D3 spørger os, hvad er din X-position, det kommer til at give os-- vi har at cirkel, så vi har data. Det kommer til at give os oplysninger og sige, hvad vil du redegørelsen at være, baseret på disse data. 

Lad os bare returnere de faktiske data. Så hvis vi køre dette, dette giver Amerikanske data drevet dokumenter. Disse kredse er baseret i forhold position-- de er baser som en funktion af dataene. 

Så for den første cirkel, D3 sætter en cirkel. Og så D3 beder os, hvad gør du ønsker, at redegørelsen skal være. Og vi bare sige, hvad dataene. Gør redegørelsen 10. 

Så spørger det, hvad vil du have den redegørelse at være for den anden cirkel. Og vi svare: 45. Og vi selvfølgelig kan gøre nogle beregning her. Jeg finder, at disse kredse er lidt squished op. 

Så ganges med 3, multipliceres data med 3. Vores cirkel lige blevet udvidet ud. Vores værdi blev tredoblet. 

Cirklen er virkelig på kanten, så lad os måske slags opveje det. Lad os sige, med 20. Værsgo. 

Dette er en data visualisering. Det er en meget grundlæggende en, men dette giver os et indblik i vores data. Det fortæller os, at vi f.eks har en lille klynge af elementer. Og vi har en stor outlier her. Det giver os nogle oplysninger om fordelingen. 

Hvis vi for eksempel at ændre dataene til 150 her og refresh, vores visualisering ændres. Dette dokument er data drevet. 

Så selvfølgelig, alle disse elementer, alle disse egenskaber her, vi kan bruge en funktion, der ikke bare de numre, ikke blot x- og y-positioner. Så vi kan bruge en funktion til farven. Så vi vil gøre det samme. Vi vil give det en funktion. 

Og lad os sige, vi kunne have betingede i vores funktion. Denne funktion kan hundrede af linjer lang. Det kan gøre meget, meget komplicerede ting. 

Så lad os sætte en if-sætning her. Lad os sige, hvis vores data er mindre end 50, det er nogle tærskel at vi er interesseret i en eller anden grund. Lad os gøre det grønne. Ellers lad os gøre det rødt. Hvordan er det? Nice. 

Så vores data visualisering er begyndt at formidle mere interessante oplysninger på mange kanaler. Så nu ved vi lidt om fordelingen. Og vi ved, at der er en slags afskåret på 50, som vi er interesseret i. Vi ved, at der er data to punkter under denne tærskel, og de fleste af dem ovenfor. 

Så som et sidste skridt, disse data her, det er meget sjældent at se dette som. Så lad os bare flytte det ud til en variabel fordi det er renere, som denne. Og så bruger vi denne variabel her. Det er præcis det samme. Det er bare en smule renere. 

Næste op, Act III, Scales-- Så en problem lige her er, hvis vi ændrer vores data i denne 200 value-- hvis vi ændrer det til 400 eller noget, og refresh, så denne værdi gik bare Offscreen. Så vores logik lige her om, hvordan vi gør det gange 3 og 20, til at sprede det ud og derefter offset det lidt er virkelig klodset. 

Hvad mener disse tal betyder? De er bare svært kodet der. Og de er meget bundet til dataene. Vi ønsker en data drevet dokument. Vi ønsker en meget fleksibel dokument, at givne data, tilpasser sig det og repræsenterer det. 

Det, vi dybest set har brug for er, at vi har denne nummerserie 10. 45, 105. Og vi ønsker at kortlægge det ud på bredde, den fulde bredde her. Så vi har området numre går fra 0 til 100. Og vi har denne campus I går 20-700, i dette tilfælde. 

Vi slags ønsker at kortlægge det på. Vi ønsker at skalere det op og så opvejet det en lille smule. Det viser sig, at D3 har disse. Det kaldes en skala. Så lad os bruge den. 

Den måde, at works-- jeg vil skriver dette op og derefter forklare det. Dette er en skala. Hvad det vil gøre, er, vil det kortlægge værdier fra 1 til 200 om til 20 til 600. Vi kan kontrollere det. Vi kan se, at her. 

Så hvis jeg fodre den 1-- et øjeblik. Giv mig et sekund. Jeg må have skrevet forkert det. Der du går. Jeg er ked af det. 

Så hvad en skala vil gøre er, vil det tage en værdi og derefter konvertere denne, udvide det ud, så det fylder hele spektret du beder om. Så i dette tilfælde, hvis vi giver det en, det kommer til at kortlægge det ud på 20. Og hvis vi giver det 200, er det kommer til kort, der på 600. Og et eller andet sted midt imellem, hvis vi får 100, er det vil være et sted mellem 20 og 600. 

Og selvfølgelig, nu er hvad vi nødt til at fjerne de hårde enten kodet ting, vi har lige der. Så det, vi ønsker, er at tage de data, vi er givet, at de enkelte data element, og videregive det til at skalere først. Så skala vil skalere det op. 

Well-- Åh, vi har en lille fejl her. Vi mangler data. Der du går. Og der udvider det. 

Det giver os den samme resultat, vi havde før, men i stedet for at have dem hårdt kodet begrænsninger. Og hvis størrelsen af ​​vores lærred ændringer, for eksempel, hvis vi ønsker at have dette over 400 pixels, og det squishes ud, vi kan få det over-- vi kan udvide den, eller vi kan reducere denne venstre margen til noget mere eller mindre end 20. Disse tal, disse hårde kodet tal nu giver mening for os. 

Og vi kunne gøre meget mere interessante ting. Så i stedet for at have en lineær skala, kan vi ønsker at logge en skala. Og det vil give os en log skala. 

Så nu vores målestok, i stedet for bare udvide, at området, det gør mere avancerede ting. I stedet for at have dette interval hårdt kodet, og i stedet for at at 600, Vi vil måske bare bruge bredden, så fra 20 til bredden minus 40, 2 gange den margen på den anden side. Og det gør en meget mere mening at nogen, der kunne se på koden. 

Interessant, får skællene meget, meget sofistikerede samt. De gør en masse interessante ting. Så skalaer har ikke nødvendigvis at fungere lige med tal. Lad os lave en farveskala. 

Så vores sortiment kunne være-- vores domæne er 1 til 200. Det er input ting. Men vi måske ønsker at kortlægge fra grøn til rød, for eksempel. Og nu, hvis vi passerer det 1, vi kommer til at få grønt. Hvis vi giver det 200, får vi rød. Og hvis vi passere det noget midt imellem, det vil være nogle blanding af det, sted på gradient mellem grøn og rød. 

Og i stedet for at have denne form for klodset logik vi har her med betinget lige der, vi kunne have something-- en lineær skala mellem dem. Så vi ville bruge skalaen vi bare oprettet, som vi kaldte farve. Og vi ville give det D, som er vores dataelement. Og der vi gå. Vi har en farveskala. 

Så det er kortlægning. Så langt tilbage, er helt grøn. Den længst til højre er helt rød. Og alt i mellem er en funktion af d. Vi har en interessant visualiseringer her. Men vores data var slags kedelige. Lad os se, hvad vi kunne gøre, hvis vi havde mere interessante data. 

Act IV, der arbejder med Data-- den første ting vi ønsker at gøre for at gøre vores visualisering mere interessant er at flytte data et andet sted. Det er meget klodset at have data hårdt kodet her. Og generelt, vil vi være at spørge en anden for data. Vi vil måske spørge regeringen, Census Bureau, hvad er dine data og derefter plotte det eller spørge nogle tredjeparts enhed for nogle data og derefter opbygge en visualisering på det. 

Så det første, vi ønsker at gøre er flytte det til et andet sted. Så jeg har tænkt mig at oprette en fil her kaldet data.json. JSON er dataformatet. Du behøver ikke at vide meget om det. Og vi kommer til at kopiere lidt data, vi har der, indsætte det i der ordret, gå tilbage til vores visualisering kode her, og bruge denne funktion lige her. Du behøver ikke at kende detaljerne. Men hvad det vil gøre, er, det vil finde filen, hente den og returnere den til os. Så hvad det gør, er, det går og få data.json fil. Og så al den kode, der er indrykket inside-- væsentlige, al den kode, vi har there-- vil kører kun, når vi får data tilbage. Og så det kommer til at køre den kode med de data, vi har. Store, har vi en visualisering, der forespørgsler for nogle kode sted andet, der normalt er hvor det forespørger nogle data fra et andet sted, som normalt er hvordan visualiseringer virker. 

Men jeg ønsker at gå tilbage til dataene. Så data fundamentalt i D3-- D3 forbruger data, der er en liste over ting. D3 forventer dataene bare være en liste af ting, en vifte af ting. Det er ligegyldigt, hvad disse ting er, så længe det er et array af dem. 

Så her, for eksempel, kunne vi af Selvfølgelig har med flydende komma værdier. Vi kunne have negativer. D3 er ligeglad, så længe da det er en liste over ting. 

Som interessante ting vi kunne have, vi kunne også har en liste af strenge som. Så dette er Crimson overskrifter Jeg tog et par dage siden. Og måske du kan finde nogle interessante ting om disse a overskrifter. 

Så igen, det er en liste over ting. D3 er ligeglad. Disse tilfældigvis en streng. Vi har ændret vores data. 

Lad os vende tilbage til vores visualisering. Nu er vores visualisering forventer input til at være tal. Så vi bliver nødt til at foretage et par ændringer. Så for eksempel, først og fremmest, måske Vi ønsker at sætte disse kredse sammen af længden af ​​overskriften, den antal tegn i overskriften. 

Så hvad vi vil gøre is-- hver gang vores funktion kaldes med en snor, Vi finder det er længde og derefter sende det til skalaen. Farven vil jeg vende tilbage at til stål blå. Og der vi gå. Vi har en visualisering af Crimson overskrifter. 

Vores målestok er en smule off. Lad os antage, at den længste overskrift er 100 tegn, så spænde det ud en smule. Og vi har en visualisering. Så det lader til at de fleste overskrifter er temmelig tæt sammen, i form af karakter linje. Men en der virkelig skiller sig ud. 

Vi kunne bygge nogle værktøjer at undersøge denne mere. Men da jeg arbejdede på dette, var jeg nysgerrig, om der i dette datasæt, overskrifter med et kolon i dem ville være længere. Jeg antager, de ville. 

Så lad os finde ud af. Lad os bruge farven kanal, som vi gjorde før, at indkode nogle om, hvorvidt der er et kolon eller nej. Så vi vil bruge en betinget igen. Du behøver ikke at vide detaljerne i denne, men det er sådan, vi kontrollere en streng for en bestemt karakter i JavaScript, igen, ikke relevant. 

Men hvis vi ikke finder en kolon, vil vi vende tilbage grønt. Og hvis vi gør det, vil vi vende tilbage rødt. Så igen, overskrifter, der har et kolon vil være rødt. Det er, hvad dette means-- nice. 

Så det lader til, at min hypotese stødte. Der er kun to. Vi har kun seks datapunkter og kun to havde koloner. Men det virker en smule mere på den nedre ende, i virkeligheden. Overskrifter med kolon synes generelt være kortere, i det mindste i vores data set-- interessant. 

Lad os tilbage, at for stål blå og derefter se hvad vi kan gøre med selv mere interessante data. Så igen, jeg nævnte, at data i D3 er en liste over ting. Vi har set antal mange typer. Vi har set strenge. Men de ting kan også være objekter. 

De kan være komplicerede ting der omfatter en masse ting. At sige at mere klart, i de fleste tilfælde, vi ønsker at opbygge hvert datapunkt som mere kompliceret end blot én værdi. Hvis du forestiller en database om studerende, der kan være en elev navn, en studiekort, og en masse ting forbundet med en bestemt post, ikke kun en streng eller et tal. Så lad os se på det. 

Dette er en af ​​disse datasæt. Dette er et datasæt om jordskælv. Så alt her på vores liste eller matrix ting indeholder selv mange ting. Så hver datapunkt har en størrelsesorden og et koordinatsystem. Og koordinerer selv indeholder to ting. 

Så hver dag er nu en masse mere kompliceret og meget mere interessant og indeholder meget mere interessante oplysninger. Lad os se, vi kunne bygge ud af det. Vender tilbage tilbage til her, igen, ved hjælp af vores histogram cirkel visualisering vi har bygget, lad os se om vi kan bygge en visualisering af størrelsesorden fordeling i vores datasæt. 

Så her, det er det samme koncept. Men nu, d indeholder flere ting. d indeholder mange dataelementer. Så vi får d tilbage. D3 giver os d. Og vi reagerer ved at finde størrelsen af d og derefter passerer det til skalaen. 

Og så er vi nødt til at ændre vores målestok, selvfølgelig. Så størrelser simpelthen ikke gå meget mere end 10. Faktisk har der aldrig været 10 jordskælv. Men det er lidt vores øverste ende vores øverste spektrum. 

Lad os genopfriske. Nice, har vi en visualisering. Det er interessant at note-- så der er data to punkter, er næsten nøjagtigt oven på hinanden anden, udtrykt i størrelse. Du ser dette ved opaciteten vi bruger. 

Vi har geografiske data nu. Vi har breddegrader og længdegrader. Måske kunne vi gøre noget meget mere interessant med det. Lad os finde nogle flere interessant måde at visualisere dette mere kompliceret data, vi har adgang til. 

Act V, Mapping-- fundamentalt, vi ønsker at sætte disse på et kort. Jeg mener, det er her det går. Vi ønsker at indkode information om Positionen af ​​disse jordskælv aflæsninger, samt deres størrelse, fordi vi har nu. Vi forstår at forbruge mere komplicerede data. 

Det første, vi vil gøre, er oprette et kort, en baggrund kort. Jeg har tænkt mig at gå igennem dette meget hurtigt. Dette er vanskelig kode. Det er endnu en af ​​dem, opskrifter du ikke rigtig nødt til at forstå fuldt ud for dig at bruge. Men dette er kode. Denne kode her skaber et kort. 

Vi kommer ikke til at gå i detaljer. Men overfladisk, er, hvad den gør, det forespørger denne us.json fil, som er en datafil som den, vi havde før. Det er mere kompleks, naturligvis. Men i dette tilfælde, alt, hvert datapunkt er denne tilstand og har en liste over breddegrader og længdegrader at definere polygon, den form, den tilstand. 

Så hvad D3 vil gøre ligner til hvad vi gjorde før. Det vil kræve, at og binde det til et element. Og der er en funktion, vil kortlægge dette element ud, på grundlag af de breddegrader og længdegrader. Du kan læse mere om det. Og jeg anbefale det. 

Der er links i slutningen af ​​denne kode bogført. Og koden er kommenteret. I der er links til yderligere på dette. Jeg vil anbefale dig at slå det op. Men det, vi holder af, er denne projektion funktion. Jeg ønsker at gå igennem det. 

Først og fremmest, lad mig vise Dem, ja, vi har et kort. Maps er cool. Så lad os se på dette produktionsfunktion. 

Projektion er meget som en skala, skalaer igen. Så hvad produktion denne fremskrivning funktion gør er, kunne vi give det længdegrad og latitudes-- i dette tilfælde, disse værdier her er de lat-længes af bygningen vi sidder i højre nu-- til projektion. Og projektion vil konvertere at i x og y pixelværdier. 

Så hvad projektion gør er meget lig vores skala. Det tager vores breddegrader og længde, der repræsenterer hele kloden og krympning og dimensionering at ned til pladsen, som vi ønsker, at vi har givet det. I dette tilfælde er vi passerer disse værdier. Og det er at give os, godt, at på skærmen betyder 640 pixels. Hele denne skærm er 700 pixels bred, så det gør os om her, og 154 pixels ned, som jeg vil skøn er temmelig meget her. 

Så tager de lat-længes, som repræsentere noget på hele kloden og squishing og bevæger sig, at omkring at give os x og y pixelværdier, dette er den første ting, der er gjort i denne kortlægning kode. Og derefter resten af kode forbruger data og derefter kortlægger de lat-længes fat i noget på skærmen. 

Men vi kommer til at bruge denne fremskrivning funktioner, fordi det viser sig vi har lat-længes længes så godt. Ser tilbage på vores data, vi har breddegrader og længdegrader for hver observation. Så lad os bruge projektion. 

Så se på vores redegørelse, Vi ønsker, at vores exposition-- vi har en bredde og en længde. Men vi ønsker pixelværdier. Og det viser sig, har vi netop hvad vi want-- projektion. Meget ligesom vi var hjælp skala lige her, vi nu vil bruge projektion og videregive det koordinerer. Så det første vi doing-- så vi er få d, som er en individuel data element af en individuel jordskælv læsning. Det første, vi gør er få koordinaterne. Okay, vi har koordinaterne. 

Det andet, vi gør, er videregive denne til projektion. Projection konverterer disse koordinater i pixelværdier, x og y. Og så det sidste, vi ønsker at gøre, er bare få x, som denne sag er den første. Det er den første af de to ting der returneres ved projektion. 

Vi vil gøre det samme for y. Men i stedet vender vi tilbage det andet element, y. Gør dig klar til at opdatere. Ooh, ekstra karakter her-- nice, vi har en database drevet dokument, der er skjule denne JSON fil af objekter, gør et kort, og ændre attribut i forhold til data at projicere det på et kort. Det er virkelig interessant. Det er cool. 

Lad os tage det op et hak. Jeg mener, vi har to stykker oplysninger med hver datapunkt. Jeg mener, tre. Vi har koordinaterne, som er en x og y. Og vi har størrelsen. 

Vi har brug for at indkode størrelsesorden eller anden måde. Vi har en masse kanaler. Vi kan bruge farver. Vi kan bruge radius. Vi kunne bruge opacitet. Vi kunne bruge mange ting i kode. Enhver af disse egenskaber og mange mere, som ikke er opført der, fordi de er valgfri, vi kunne bruge til at indkode disse data, slagtilfælde og alle disse ting, jeg har nævnt. 

Lad os gøre radius. Jeg tror radius er den mest intuitive. Så igen, vil vi erstatte det hard-kodet 40 og lave nogle beregninger. Vi bruger vores foretrukne skala igen. Og vi er forbi d. Men ikke d, fordi vi ønsker størrelsen af d. d er bare datapunkt. Vi vil videregive størrelsen til at skalere. 

Lad os prøve det igen. Ooh, virker det ikke. Hvorfor virker det ikke? 

Så husk hvad skala gør. Lad os se på skalaen igen. Målestokskort fra 1 til 10 på til 22-600, mere eller mindre. 600 er enorm. Det er derfor, vi får det. 

Så vi ønsker at ændre vores målestok til noget mere fornuftigt. Lad os sige, vi ønsker fra 0 til 60. 60 er stor, men 10 jordskælv er utroligt sjældne. Faktisk har de aldrig sket. 

Så hvad det vil gøre, er, vil det tage vores størrelse, der går fra 1 til 10 og kortlægge det på at udvide det. Og kort den på fra 0 til 60. Lad os genopfriske. 

Nice, har vi en visualisering. Det er fantastisk. Dette er faktiske data. Du vil opdage, i min lille legetøj eksempel den største jordskælv er lige på toppen af ​​os. Men det er det. Vi har en dato drevet visualisering der bruger data og giver os virkelig interessante oplysninger. Ja, lad os tilføje nogle interaktivitet til det. Jeg nævnte det var den stærke kraft D3. 

Så her, for hvert element, vi er beskriver en flok attributter. Men vi kan også beskrive, hvad vi ønsker ske med interaktivitet elementer. For eksempel kunne vi beskrive hvad der sker når vi musen over. Og meget lig det, der vil tage en funktion, meget lig den attributter, vi havde før, hvor vi gør noget til element, når vi svæver over det. 

Så første ting, vi har brug for at gøre er at vælge det element, at finde det dybest set, i browseren. og derefter kunne vi sat en attribut til den. Så hvad jeg laver her er, når vi hover over noget, vil vi få dette element og derefter indstille sin uigennemsigtighed tilbage 1, til fuldstændig uigennemsigtig. Lad os se hvad der ligner. 

Det ser vi har en ekstra semikolon her. Så hvis vi svæve over her, det får fuld. Men nu, selvfølgelig, det forbliver fuldt ud, fordi vi nødt til at beskrive, hvad der sker når fjerne vores markør. Så lad os gøre netop det på mouseout, i modsætning til mouseover. 

Og vi vil nulstille den til hvad vi havde before-- 0.5. Og nu, hver gang vi hover, får vi en fuld cirkel. Det hjælper os med at se, hvad vi vi vælge det væsentlige. 

Og lad os nu gøre dette virkelig stor. Lad os slutte dette til reelle data. Så lad os bede kunne USGS om deres data. Så US Geological Survey har data om jordskælv. De har en offentlig API, der er i stand til forbrug i JSON format. Så lad os gøre det. 

Så dette er lidt af kode, forbindelse til USGS API. Og der er lidt af behandling på det. Dette er ikke relevant, men forenkler det til en simpel data format som den vi havde før. Så jeg slippe af med vores opfordring til vores falske data.json på filen. Og i stedet, jeg ringer USGS væsentlige. 

Lad os genopfriske, nice. Dette er reelle, virkelige data fra denne uge for jordskælv. Det er virkelig interessant. Dette er ikke overraskende for os, men der er en masse af jordskælv på West Coast i Californien. Men jeg troede, det var meget interessant at der var så mange jordskælv i Alaska, og tilsyneladende her i Midtvesten. Jeg mener, interessant, og vi er gode. Det er konklusionen. 

Men fundamentalt, dette er det, D3 hjælper os gøre. Det hjælper os tage data, binder det til elementer i DOM, og få disse elementer ændrer som en funktion af de data, har disse attributter, alle de mange attributter af elementerne, alle være nyttige til kanaler at formidle information. 

D3 er en utrolig kraftfuld bibliotek og forbavsende godt køre. Det er nogle kraftige ting. Datavisualisering er en utroligt stærkt værktøj til transport til folk dybe indsigt, der får til deres kerne og hjælper dem til at forstå, i denne dybe og intuitiv måde, hvordan data fungerer, og hvordan data ændrer vores liv.