[Predvaja glasba] 

DAVID Chouinard: Jaz sem David Chouinard, in to je D3. Dobrodošli. Bomo danes spoznali D3. D3 je okvir JavaScript za gradnjo visoko kakovost interaktivne vizualizacije za splet. Stvari, kot tisto, kar smo vidim v zadnji mene, se bomo naučili, da bi tisti, stvari, vrsta osnovami njo. Ampak to se dogaja, da se ohladi. Začnimo kar lepe slike. Imamo več demos obetov na voljo. Dajmo. 

Zakon I, DOM manipulation-- gremo začeti takoj, kar kul stvari. Najprej, na levi strani, imamo kodo. Na desni strani imamo Rezultat našega kodeksa. Gremo skozi njo. 

Naredimo krog. Kako se to sliši? svg.append circle-- smo le na krog. Vi mi ne verjamete, kajne? To ne obstaja. 

Torej, kaj smo naredili prav tukaj je, SVG je razširljive vektorska grafika. To je način, kako povedati, da brskalnik da vektorsko grafiko v brskalniku. Kaj smo pravkar storil zdaj Doda se krog za brskanje. 

Obljuba je, da je krog zahteva nekaj osnovnih lastnosti preden lahko dejansko videli. Moramo mu povedati svojo x položaj, njen y položaj, njena polmer. Mi ga ni povedal, kaj od tega, tako da smo ne vidim prav zdaj. Ampak dajmo povedati stvari. 

Torej, najprej, imaš dati svoj krog ime. Torej, recimo ji krog. Naš krog ima ime zdaj. In dajmo mu še nekaj atributov. Kaj pa cx bi osredotočali x, tako središče x položaja. Recimo, 200 za 200 pik. 

Dajmo to y 200 pik, kot dobro. In r polmer, približno 40 točk. Zdaj pa poglejmo. Ne morem pojasniti. 

Tam greš. Imamo krog na položaju 200 pik, 200 pik, premer 40 slikovnih pik. Nekako kul, kajne? Imamo krog. Ja. 

Tako da ni potrebe, da sledite skupaj. Vsi ti primeri, vsi Koda sem danes počne bo na voljo na spletu na koncu v obliki interaktivnih primerov s kontrolnimi točkami na vsako dejanje, in tako naprej. 

Naredimo več stvari. Ta črni krog je res grdo. Žal mi je za to napako Sporočila tam. Tam gremo. 

Dajmo to barvo. Kako pa je to? Rad jekleno modra. No, naš krog spremenila barvo. To je super. Naj bo to semi-transparent too-- semi-transparent. 

Torej, to so atributi smo opredelitvi na krog. Prva stvar, ki smo se je smo se krog na strani. In potem smo opredeljevanju kup atributov. Nekateri so potrebna, kot CX, CY, in Radius. In drugi, so obvezna. 

Obstaja veliko več atributov. Veliko izmed njih. Na primer, lahko imamo kapi, pa tudi, kap rdeče. Ampak kaj je odstraniti to. Vrnili smo se v krogu, modri krog. 

Torej, kaj je narediti več krogov. Kako pa je to? Naredimo še en krog. To je zanimivo, kajne? 

Tako da sem samo kopiraj-Prilepljeno kar smo imeli že. Recimo circle2. In kaj je naredil natančen Ista stvar in ga dal atributi, zaradi x položaj 300. Bravo, imamo dva kroga sedaj. 

In seveda, smo lahko posodobi te vrednote. Jaz bi ga dal na 400, in zdaj se premika. In ker je nadležno, dajmo ga odstranite, tako circle2.remove. To je izginil. 

Torej, kaj delamo, in je samo zelo, very-- to je zelo podobno temu, kar lahko naredite v jQuery, npr. Mi samo manipulacijo DOM, je pozval. Morda ste slišali to besedo, preden. Smo ustvariti stvari, ki določa atribute na stvari, odstranjevanje stvari. 

Zdaj, tukaj je, če postane zanimiva. Torej, pozneje v kodo, smo lahko še vedno nanašajo na prvotni krog tukaj. Torej, kaj je ponastaviti svoje atribut cx. Recimo, da svoje stališče do 400 x. In grem v tranziciji da, tako da je očitno. Tam gremo. 

Tako smo dodali krog. Postavili smo nekaj atributov. Dodali smo Å¡e en krog, ki ga odstranili. In potem smo se spreminja prvotni krog. 

Ampak tukaj je, kjer postane Veliko bolj zanimivo. Ne samo, da bomo lahko nastavite atribute kot samo vrednosti, lahko rečemo, hej, circle, pojdite na položaj 200. Mi jih lahko nastavite kot funkcije. 

Torej, namesto da tukaj 400, lahko naredimo nekaj za izračun na letenje, za kaj smo želijo, da atribut biti. Torej, to je, kako bi ga izraziti, da. Pravimo, namesto 400, pustite me vam funkcijo namesto tega. In tu, v notranjosti te funkcije, bomo lahko vsako noro izračun. 

Mi lahko vzamete čas in pogled na neko drugo stvar in dinamično odločijo za Krog kakšno vrednost želimo. Kaj pa mi daj je naključno x položaj? Torej, to je to. 

Torej, kaj pravi, da je za vsaka x, vodijo to funkcijo. In kaj počneva je izračun nekatere stvari, naključni krat širina in se vračajo, da. Torej, vsakič, ko tečemo, da smo dobili krog, da gre za naključno mesto. To je nekako kul. Počutim se, kot sem lahko ogledate na to, za malo. Začenjamo priti do nekaj zanimivega tukaj. Naj bo te podatke poganja zdaj. Ni podatkov tukaj. Oglejmo spremeniti. 

Zakon II, Data Driven Documents-- Torej vrnimo tukaj. In kaj je samo znebiti circle2, ker smo pravkar dodajanje in odstranjevanje ga. Tako smo v resnici ne potrebujejo. Moramo biti veliko bolj pameten tukaj. Recimo, da imamo nekateri podatki o neke vrste. Ena moment-- recimo, smo imeli podatke o tej obliki. Imeli smo niz, samo kup številk. Imamo sedem številk tukaj, ne glede na to represent-- znesek na bančni račun ljudi, kako veliko tehtajo, bog ve kaj. 

To so številke, in smo želite uporabiti naše kroge da predstavljajo te številke nekako. Želimo tie Nostra krogi do teh številk. Torej, kaj počnemo. Recimo, da želimo Krog za vsako številko. Mi lahko storite old stvar, ki smo doing-- Krog append in circle2 in circle3. Vendar ta uide iz rok, in tam je veliko ponavljanja logiko. 

Torej, kaj je dobil bolj pameten s tem. Namesto uporabe var krog svg.append da smo samo z uporabo, bomo uporabili ta mali blok tukaj. Ne želim iti na poglobljeno v tisto, kar so vsi ti deli storiti. In to je nekako napredno temo. In želim si, da bi lahko. 

Vendar je ključna stvar za recognize-- in boste videli, je zelo pogosto v D3 kodo. Ta blok besedilni osnovami ustvarja toliko krogov kot so podatkovni elementi V tem polju prav tukaj. Torej, to ustvarja toliko krogi kot obstajajo elementi. To se dogaja, da nam ustvarijo sedem krogov. In to je res, res ključno stvar. Torej, kaj je teči, da. Oglejmo odstraniti našo drugo krog. Naj samo Komentiraj Delu ven in znova zagnati to. 

Tam gremo. Torej, naš krog je tu veliko temnejši, ker smo imajo sedem krogov, eden na vrhu drugega. Pravkar smo ustvarili sedem krogov, enega vsak za vsako od teh podatkovnih elementov. Ampak tam je ključna stvar, ki se je zgodilo s tem odrezkom tukaj. 

To je, da so podatki, vezani. Torej vsak od ti podatkovni elementi, 10, 45, 105, je vezan za določen krog. Torej, to ni le ustvaril kup krogov ampak veže ti dve stvari skupaj. 

In v prihodnosti, saj smo ustvarili ti krogi s to funkcijo D3, če ti dam krog, lahko daj mi podatke, povezane z njim. Torej se vprašajmo D3. Hej, D3, imam ta krog. Kaj je podatkov, da ima krog? In nam bo povedal, D3 10 ali 45 ali 105. 

Te stvari so vezani. To je zelo, zelo temeljni koncept. Oglejmo si to. 

Torej način bi vprašati D3-- tako To je pomembno za to, ampak verjemite mi na njej. To je, kako bomo prosili D3. Hej, D3, daj mi prvo krog, ki ga lahko najdete. Daj mi prvi krog lahko najdete. In potem bi se lahko vprašali D3, kaj je Podatki o tem, kot je ta, 10. 

Tako smo samo vprašati D3, najti me Prvi krog lahko najdete. Kaj je njegove podatke? 10, ki je pravzaprav naša Prvi element podatkov. Lahko bi ga vprašati, hej, D3, nam najti naš tretji krog. 105. Zakaj je to res pomembno? 

Torej, tukaj sem omenil da lahko uporabljamo funkcije. In sem omenil, da je bil zelo močna stvar. Torej ne samo, da lahko naši funkcije stvari kot še nekaj računanja, na primer, vrne naključno število, je mogoče tudi stvari, ki temeljijo na podatkih. To je tisto, na osnovi podatkov dokumenti pomenijo. To je tisto, kar stoji za D3. 

Torej, to x postition-- namesto za samo rekel, vse kroge, dobili x položaj 200 smo bi ji dal funkcijo. In tukaj, lahko naredimo nekaj izračun. in d tu stoji na mestu za podatke. Torej, vsakič, ko imamo krog, v bistvu, D3 bo ustvarjanje teh sedem krogov. In nato za vsak 

krog, da se dogaja, da gredo, hej, circle1 kaj je tvoj x položaj. Prej smo bili Vedno odgovorite 200. Toda zdaj, vsakič D3 vpraša nam, kaj je tvoj x položaj, to se dogaja, da us-- imamo da krog, tako da imamo podatke. To se dogaja, da nam podatke in pravijo, Kaj želite razstava biti, na podlagi teh podatkov. 

Poglejmo samo vrnitev dejanske podatke. Torej, če tečemo to, to daje Podatki nas poganja dokumentov. Ti krogi temeljijo V zvezi position-- oni podlage v odvisnosti od podatkov. 

Tako v prvem krogu, D3 postavlja krog. In potem D3 nas vpraša, kaj storiti želite ekspozicija biti. In mi samo reči, ne glede podatkov. Naredite razstavo 10. 

Nato pa se sprašuje, kaj hočeš Priročnik da je za drugi krog. In mi odgovorite, 45. In mi, seveda, lahko narediti nekaj računanja tukaj. Se mi zdi, da je teh krogov so nekako squished up. 

Torej jo pomnožimo s 3, pomnoži podatke s 3. Naš krog je pravkar razširila ven. Naša vrednost je potrojila. 

Krog je res na robu, tako da je morda nekako ga nadomestiti. Recimo, za 20. Tukaj imaš. 

To je vizualizacija podatkov. To je zelo osnovna, pač pa je to nam daje vpogled v naše podatke. To nam pove, da je, na primer, imajo malo skupek elementov. In imamo veliko osamelcev tukaj. To nam daje nekaj informacij o porazdelitvi. 

Če smo, na primer, spremeniti Podatki do 150 tukaj in osvežitev, Naša vizualizacija je spremenilo. Ta dokument je na osnovi podatkov. 

Torej seveda, vsi ti elementi, vsi ti atributi tukaj, lahko uporabite funkcijo, ne le Å¡tevilke, ne le x in y pozicije. Tako da bomo lahko uporabite funkcijo za barvo. Torej bomo naredili enako. Bomo ji dati funkcijo. 

In recimo, da bi lahko imeli Pogojniki v naši funkcije. Ta funkcija se lahko sto vrstic. To lahko storite zelo, zelo zapletene stvari. 

Torej, kaj je dal tudi izjavo, če tukaj. Recimo, če je naš podatki manj od 50 let, ki je določen prag da smo zainteresirani v nekega razloga. Naj bo zelena. V nasprotnem primeru pa bi bilo rdeče. Kako pa je to? Lepo. 

Torej naš vizualizacija podatkov se začenja da gre bolj zanimive podatke na številnih kanalih. Torej, zdaj vemo malo o porazdelitvi. In vemo, da obstaja neke vrste odrezani na 50, ki smo ga zanimajo. Vemo, da so podatki za dve točki pod tem pragom in večina zgoraj. 

Tako kot zadnji korak, ti ​​podatki tu to je zelo redko, da se to tako. Torej, kaj je to samo izseliti na spremenljivko ker to je čistejše, kot je ta. In potem bomo uporabili to spremenljivko tukaj. To je točno isto stvar. To je le nekoliko čistejši. 

Next up, Zakon III, Scales-- Torej en problem prav Tu je, če bomo spremenili naše Podatki v tem 200 value-- če jo spremenimo na 400 ali kaj podobnega in osvežitev, potem je ta vrednost le šla offscreen. Torej naša logika tukaj kako delamo časi 3 in 20, da se širijo in nato , pobotajo bit res clunky. 

Kaj te številke pomenijo? Oni so le težko obstaja kodirana. In oni so zelo vezani na podatke. Želimo dokument podatkovni pogon. Želimo, zelo prožen dokument, da določenih podatkov, prilagaja njej in ga predstavlja. 

Kaj smo v bistvu potrebujemo je, da smo imajo to vrsto številke 10. 45, 105. In želimo, da karto ven na širina, polna širina tukaj. Torej imamo obseg številke gredo od 0 do 100. In imamo to campus I gre 20-700, v tem primeru. 

Mi nekako želimo preslikati da na. Želimo, da obsega gor in potem to izravna malo. Izkaže se, da ima D3 ti. To se imenuje lestvica. Torej, dajmo ga uporabljate. 

Tako da works-- bom ta tip gor in nato razložiti. To je lestvica. Kaj pa bo naredil, bo še začrtati vrednosti od 1 do 200 na do 20 za 600. Mi lahko preverite to. Vidimo lahko, da je tu. 

Torej, če hranim jo 1-- en trenutek. Daj mi eno sekundo. Sem ga zatipkali. Tam greš. Žal mi je za to. 

Torej, kaj bo naredil lestvico se bo to trajalo vrednost in potem pretvarjanja, da razširiti, da ven, tako da zapolnjuje celoten spekter ste prosi za. Torej, v tem primeru, če jo en dal, to se dogaja, da karto ven na 20. In če damo 200, to je dogaja, da map, ki na 600. In nekje vmes, Če bomo dobili 100, to je bo nekje med 20 in 600. 

In seveda, zdaj je to kaj moramo odstraniti tiste trde kodirane Stvari, ki jih imajo tam. Torej, kaj želimo storiti, je da so podatki, ki smo si dati, da se posameznik podatki element in ga prenese na prvi lestvici. Tako da bo lestvica jo povečati. 

Well-- Oh, imamo malo napako tukaj. Smo manjkajoče podatke. Tam greš. In da jo širi ven. 

To nam daje enaka Rezultat smo imeli prej, ampak od tistih, ki imajo težko kodirane omejitve. In če je velikost našega Spremembe platno, na primer, če želimo, da je to preveliko 400 pik in je squishes ven, jo lahko imajo over-- ga lahko razširite, ali smo lahko zmanjša te tekme maržo nekaj manj ali več kot 20. Te številke, ti težko kodirane številke zdaj smisla za nas. 

In lahko naredimo veliko več zanimivih stvari, kot dobro. Torej, namesto da ravno lestvice, bomo morda želeli, da se prijavite lestvico. In da nam bo dala log lestvice. 

Torej, zdaj je naša lestvica, namesto samo širi, da je območje, to počne bolj zapletene stvari. Namesto, da bi to območje težko kodirani, in namesto da to 600, bomo morda želeli, da preprosto uporabite širino, tako od 20 do širine minus 40, 2-krat marža na drugi strani. In to naredi veliko bolj smiselno, da nekdo, ki je morda videti na kodo. 

Zanimivo je, da so tehtnice dobili Zelo, zelo prefinjeno kot dobro. Oni veliko zanimivih stvari. Torej lestvice nimajo nujno delovati samo s Å¡tevilkami. Naredimo barvno lestvico. 

Tako da bi naša paleta be-- naša domena je 1 do 200. To je vhod stvar. Ampak morda želimo preslikati iz zelene do rdeče, npr. In zdaj, če bomo na 1 mimo, bomo dobili zeleno. Če damo 200, bomo dobili rdeče. In če bomo to mimo nekaj vmes, to se dogaja, da neko mešanico, da nekje na gradient med zeleno in rdečo. 

In namesto ob ta vrsta okorne logike imamo tu z pogojena prav tam, lahko imamo something-- linearna lestvica med tistimi. Torej sva uporabili lestvico smo pravkar ustvarjena, ki smo jo poimenovali barve. In bi mi dal to D, ki je naš podatek. In tam gremo. Imamo barvno lestvico. 

Torej, to je preslikava. Torej skrajni levi je popolnoma zeleno. Skrajni desni je popolnoma rdeča. In vse vmes je funkcija d. Imamo zanimivo vizualizacije tukaj. Toda naši podatki, je nekako dolgočasno. Poglejmo, kaj lahko storimo, če smo imeli več zanimivih podatkov. 

Zakon IV, ki delajo z Data-- prvo stvar bomo želeli storiti, da bi naše vizualizacija bolj zanimivo je, da se premaknete podatke nekje drugje. To je zelo clunky imeti Podatki težko kodirane tukaj. In na splošno, bomo prosi nekdo drug za podatke. Mi se bomo morda sprašuje vlado, Census Bureau, kaj je tvoj podatki in nato ubral da ali prosi nekatere tretje osebe subjekt za nekatere podatke in nato gradnjo Vizualizacija na to. 

Torej prva stvar, želimo narediti je premakniti, da nekje drugje. Tako da bom za ustvarjanje datoteke tukaj imenovano data.json. JSON format podatkov. Nimate, da vedo veliko o tem. In bomo kopirati malo podatkov imamo tam, ga prilepite tam dobesedno, pojdite nazaj na našo vizualizacijo kodo tukaj, in uporabite to funkcijo tukaj. Nimate vedeti podrobnosti. Toda kaj bo to storiti, je, bo našel datoteko, jo prinesi, in ga vrne k nam. Torej, kaj to ne pomeni, da gre in dobili datoteko data.json. In potem vse kode, ki je zamaknjen inside-- bistvu, Vse kode imamo there-- bo teči šele, ko bomo dobili podatke nazaj. In potem se dogaja, da teče, da koda s podatki, ki jih imamo. Super, imamo vizualizacija, ki se sprašuje, nekaj kode nekje drugega, ki je običajno kjer se sprašuje nekaj podatkov iz nekje drugje, ki je ponavadi kako deluje vizualizacije. 

Ampak hočem iti nazaj do podatkov. Tako da so podatki v načelu D3-- D3 porabi podatkov, ki je seznam stvari. D3 pričakuje, da bodo podatki, samo se seznam stvari, vrsta stvari. Ni važno, kaj te stvari so, tako dolgo, kot je matrika njih. 

Torej, tukaj, na primer, bi lahko dne Seveda so s plavajočo vejico. Mi bi lahko imeli negativne. D3 ne skrbi, tako dolgo saj je seznam stvari. 

Kot smo zanimive stvari bi imeli, bi tudi mi imajo seznam nizov, kot je ta. Torej, to so naslovi Crimson Pobral sem pred nekaj dnevi. In morda boste našli nekaj zanimivih stvari o teh a naslovnicah. 

Torej še enkrat, to je seznam stvari. D3 ne skrbi. To se zgodi, da se niz. Spremenili smo naše podatke. 

Vrnimo se na naše vizualizacije. Zdaj je naša vizualizacija pričakuje vhod biti številke. Torej bomo imeli narediti nekaj sprememb. Tako, na primer, najprej, morda želimo, da se ti krogi skupaj z dolžino naslovom, število znakov v naslovu. 

Torej, kaj bomo storili is-- vsakič naše Funkcija se imenuje z vrvico, bomo ugotovili, da je dolžina in nato pa mimo, da lestvice. Barva, bom vrnil da jekleno modra. In tam gremo. Imamo vizualizacijo od Crimson naslovnice. 

Naša lestvica je malo off. Denimo, da je najdaljša naslov je dolg 100 znakov, tako da steče ven malo. In imamo vizualizacijo. Tako se zdi, da je večina naslovnice so zelo blizu skupaj, v smislu značaja linije. Ampak ena res izstopa. 

Bomo lahko začeli graditi nekaj orodja raziskati, da več. Toda, ko sem delal na tem, sem bil radoveden, ali je v tem nizu podatkov, naslovi z dvopičjem v njih ne bi bilo več. Jaz bi jih prevzema. 

Torej, kaj je izvedeti. Oglejmo uporabite barvo kanal, kot smo to naredili prej, kodirati nekaj o tem, ali tam je debelo črevo ali ne. Torej bomo ponovno uporabiti pogojno. Nimate vedeti podrobnosti o tem, ampak to je, kako preveriti Niz za določenega značaja v JavaScriptu, še enkrat, ni pomembno. 

Toda, če ne bomo našli debelo črevo, se bomo vrnili zeleno. In če bomo to storili, bomo vrnili rdeče. Torej še enkrat, da naslovnice se bo debelega črevesa rdeče. To je tisto, kar ta means-- lepo. 

Tako se zdi, da je moj hipoteza je vrč. Obstaja samo dva. Imamo le šest točk podatkov in samo dva imela debelo črevo. Vendar se zdi nekoliko bolj na spodnjem koncu, v bistvu. Naslovi z dvopičjem zdi na splošno krajša, vsaj v naših podatkih set-- zanimivo. 

Vrnimo se, da jekleno modra in potem videli kaj lahko naredimo s še več zanimivih podatkov. Torej še enkrat, sem omenil, da Podatki v D3 je seznam stvari. Videli smo število mnogih vrst. Smo videli strune. Toda stvari so lahko tudi objekti. 

Lahko so zapletene stvari ki vključuje veliko stvari. Bolj jasno povedati, da je V večini primerov, želijo zgraditi vsako podatkovno točko, kot je bolj zapleteno kot samo eno vrednost. Če bi si lahko predstavljate Baza podatkov o študente, tam lahko študent ime, študent ID, in veliko stvari, povezanih s posebno evidenco, Ne le niz ali več. Torej, si oglejmo to. 

To je eden od ti podatki določeni. To je nabor podatkov o potresih. Torej vse, kar je tukaj na našem seznamu ali niz stvari, ki vsebuje sam veliko stvari. Torej vsaka podatkovna točka ima Obseg in usklajevati. In se usklajuje vsebuje dve stvari. 

Torej, vsak dan je zdaj veliko več zapletena in veliko bolj zanimivo in vsebuje veliko več zanimive informacije. Poglejmo, bomo lahko začeli graditi od tega. Vrača nazaj tukaj, ponovno uporabo naša histogram krog vizualizacija smo zgradili, da vidimo, če lahko gradimo vizualizacije porazdelitve magnitude v naši zbirki podatkov. 

Torej, tukaj, to je isti koncept. Toda zdaj, d vsebuje več stvari. d vsebuje veliko elementov podatkov. Tako smo dobili dni nazaj. D3 nam daje d. In mi odgovoriti z iskanjem obseg D in nato mimo, da obsega. 

In potem moramo spremeniti naš obseg, seveda. Torej magnitude preprosto ne iti več kot 10. Pravzaprav, še nikoli ni bilo 10 magnituda potresa. Ampak to je nekako naša zgornja konec, naš zgornji spekter. 

Oglejmo osvežitev. Lepo, da imamo vizualizacijo. Zanimivo je, da note-- obstajata dve podatkovne točke, so skoraj popolnoma drug vrh drugi, v smislu velikosti. Vidiš to Nepreglednost bomo uporabljali. 

Imamo geografske podatke zdaj. Imamo zemljepisne širine in dolžine. Mogoče bi lahko storili nekaj, kar Veliko bolj zanimivo s tem. Poiščimo nekaj več zanimiv način vizualizirati to bolj zapleteno Podatki imamo dostop do. 

Zakon V, Mapping-- bistveno, želimo postaviti ti na zemljevidu. Mislim, to je, če se to dogaja. Želimo, da za kodiranje podatkov o Položaj teh potresnih branjih kot tudi njihova velikost, ker imamo zdaj. Zavedamo se, kako se porabijo bolj zapletene podatke. 

Prva stvar, ki jo bom naredil je, ustvariti zemljevid, ozadje zemljevida. Bom Å¡el skozi to zelo hitro. To je zapleteno kodo. To je Å¡e ena od tistih recepti ne boste res ima polno razumevanje za vas, da uporabite. Toda to je koda. Ta koda tukaj ustvari zemljevid. 

Ne bomo iti v podrobnosti. Ampak površno, kaj počne, je, se sprašuje to us.json datoteko, ki je datoteka podatkov kot enega smo imeli prej. To je bolj zapleteno, seveda. Toda v tem primeru je vse, vsaka podatkovna točka je to stanje in ima seznam zemljepisne širine in dolžine da določite poligon, da je oblika, ki stanje. 

Torej, kaj bo naredil D3 je podoben s tem, kar smo naredili doslej. To bo zahteva, da in vežejo, da element. In tam je funkcija, ki bo map ta element ven, na podlagi zemljepisne širine in dolžine. Si lahko preberete več o tem. In sem jo priporočam. 

Obstajajo povezave na Konec te kode objavil. In koda je komentiral. V obstajajo povezave za dodatno o tem. Priporočam vam, da si jo gor. Toda kaj nam je mar, je ta funkcija projekcija. Rad bi šel skozi to. 

Najprej mi dovolite, da pokažejo ste, da, ja, imamo zemljevid. Zemljevidi so kul. Torej, si oglejmo to produkcijska funkcija. 

Projekcija je zelo veliko kot lestvice, spet lestvic. Torej, kaj se proizvodnja ta funkcija projekcija pa je, bi lahko to mimo dolžino in latitudes-- v tem primeru, Te vrednote so tukaj LAT-hrepeni stavbe sedimo v desno now-- za projekcijo. In projekcija bo pretvoril da v x in y vrednosti točk. 

Torej, kaj projekcija počne je zelo podobna naši lestvici. To je ob naših zemljepisnih širinah in dolžine, ki predstavlja celotno zemeljsko oblo ter krčenje in velikosti, ki do trga, da želimo, ki smo ga dal. V tem primeru smo prenos teh vrednot. In to nam daje dobro, da na zaslonu pomeni 640 slikovnih pik. Ta celoten zaslon je 700 slikovnih pik široka, tako da nam naredi približno tu, in 154 pik dol, kar želim ocena je precej tukaj. 

Torej, ob teh lat-hrepeni, ki predstavljajo nekaj na celotnem svetu in squishing in se gibljejo, da približno da nam vrednosti X in Y pikslov, To je prva stvar, ki je storiti v tem kartiranje kodo. In potem ostali Koda porablja podatkov nato preslika tiste lat-hrepeni na nekaj na zaslonu. 

Vendar bomo uporabljati to projekcijo funkcije, saj se izkaže, imamo lat-hrepeni hrepeni kot dobro. Če se ozremo na naše podatke, ki smo jih zemljepisne širine in dolžine koordinate za vsako opazovanje. Torej, kaj je uporabiti projekcijo. 

Tako je videti na našem priročniku, želimo našo exposition-- imamo širino in dolžino. Ampak želimo vrednote pixel. In se je izkazalo, imamo natanko kaj smo want-- projekcijo. Zelo všeč mi je bilo uporabo lestvice tukaj, smo zdaj tekoč rabiti projekcijo in mimo usklajuje. Torej prva stvar, smo doing-- tako da smo pridobivanje d, ki je posameznik podatki element posameznega potresa branje. Prva stvar, ki delamo je dobil koordinate. Vse je v redu, imamo koordinate. 

Druga stvar, ki mi je mimo, da je na projekciji. Projekcija pretvori tiste koordinate v vrednosti točk, x in y. In potem je zadnja stvar, smo želim storiti, je le dobil x, ki v tem primeru je prva. To je prvi od dveh stvari da se vrnejo s projekcijo. 

Bomo naredili enako za y. Toda namesto, bomo vrnili drugi element, y. Pripravite se na osvežitev. Ooh, extra lik here-- lepo, imamo usmerjenih dokument podatke, ki je prikrivanje tega JSON datoteke predmetov, izdelavo zemljevida, in spreminjanje atribut v zvezi s podatki da se projekt na zemljevidu. To je res zanimivo. To je kul. 

Dajmo ga vzemite up zarezo. Mislim, da imamo dva kosov Podatki z vsako podatkovno točko. Mislim, tri. Imamo koordinate, ki je x in y. In imamo obseg. 

Moramo kodirati velikosti nekako. Imamo veliko kanalov. Mi lahko uporabite barvo. Mi lahko uporabite radij. Mi lahko uporabite motnosti. Lahko uporabite veliko stvari v kodo. Katerokoli od teh lastnosti in veliko več, da se tam ni naveden, ker oni so obvezna, smo lahko uporabljajo za kodiranje te podatke, kap in vse te stvari, ki sem jih omenil. 

Naredimo radij. Mislim, da polmer je najbolj intuitivna. Torej še enkrat, boste morali zamenjati, da težko kodirane- 40 in narediti nekaj izračunov. Bomo spet uporabite našo najljubšo lestvice. In smo mimo d. Ne pa dni, ker želimo, da se obseg D. d je le podatkovna točka. Bomo mimo velikost v merilu. 

Poskusimo, da Å¡e enkrat. Ooh, to ne deluje. Zakaj ne deluje? 

Torej, ne pozabite, kaj lestvica počne. Oglejmo si na lestvici znova. Merilu karte od 1 do 10 na do 22 in 600 bolj ali manj. 600 je ogromno. To je razlog, zakaj smo dobili to. 

Torej želimo spremeniti našo lestvico v nekaj bolj razumno. Recimo, da želimo med 0 in 60. 60 je velik, vendar 10 potresov so neverjetno redke. V resnici, oni se ni nikoli zgodilo. 

Torej, kaj bo to storiti, je, da bomo sprejeti naš obseg, ki gre od 1 do 10 in map na, da jo razširite ven. In map na med 0 in 60. Oglejmo osvežitev. 

Lepo, da imamo vizualizacijo. To je super. To je dejanski podatki. Opazili boste, po mojem igračko Na primer, največji potres je prav na vrhu nas. Ampak to je to. Imamo datum poganja vizualizacijo ki porabi podatke in nam daje resnično zanimive informacije. Ja, dajmo dodati nekaj interaktivnost z njo. Omenil sem, da je bil močna sila D3. 

Torej, tukaj, za vsak element, smo opisuje kup atributov. Lahko pa tudi opisati, kaj hočemo zgodilo z interaktivnostjo elementov. Na primer, lahko opišemo kaj se zgodi, ko smo z miško nad. In zelo podobna, da da bom funkcijo, Zelo podobna atributov smo imeli prej, kjer smo narediti nekaj, da element, ko hover nad njim. 

Torej prva stvar, moramo storiti je, da izberete ta element, da ga v bistvu našli v brskalniku. in potem smo lahko nastavite atribut z njo. Torej, kaj delam tu, ko smo hover čez nekaj, kar smo dobili, da je element in nato določiti njegovo nepreglednost nazaj do 1, popolnoma motno. Poglejmo, kaj to izgleda. 

Zdi se, imamo extra podpičje tukaj. Torej, če smo hover tukaj, postane v celoti. Toda zdaj, seveda, da ostane v celoti, ker smo opisati, kaj se zgodi kdaj odstraniti našo kazalec. Torej, kaj je točno to, da je na mouseout, za razliko od prehodov miške. 

In jo bomo ponastavijo kar smo imeli before-- 0,5. In zdaj, vsakič, ko smo hover, smo dobili cel krog. Pomaga nam videti, kaj smo smo v bistvu izbiro. 

In zdaj pa bi to res super. Oglejmo povezati to realnih podatkov. Torej, kaj je vprašati, lahko USGS o njihovih podatkov. Torej, US Geological Survey ima podatke o potresih. Imajo javni API, ki je sposoben ki se porabijo v formatu JSON. Torej, kaj je naredil. 

Tako da je to malo kode, ki poveže z USGS API. In tam je malo predelave na njem. To ni pomembno, vendar ga poenostavlja za navadno obliko podatkov kot enega smo imeli prej. Torej znebim naš poziv, da naš ponaredek data.json na datoteko. In namesto, sem kliče USGS bistvu. 

Oglejmo osvežiti, lepo. To je dejanska, v realnem življenju podatki od tega tedna za potrese. To je res zanimivo. To ni presenetljivo za nas, vendar obstajajo veliko potresov na West Coast v Kaliforniji. Mislil sem, da je zelo zanimivo da je bilo tako veliko potresov na Aljaski, in očitno, tukaj v Midwest. Mislim, zanimivo, in smo dobri. To je zaključek. 

Ampak v bistvu je to je tisto, kar D3 nam pomaga narediti. Pomaga nam, da podatki, bind je na elemente v DOM, in imajo ti elementi spremeniti v odvisnosti od podatkov, imajo tiste atribute, vsa veliko lastnosti elementov, vse koristne za kanale posredovati informacije. 

D3 je neverjetno močna knjižnica in presenetljivo dobro teči. To je nekaj močna stvar. Vizualizacija podatkov je neverjetno močno orodje za prenos na ljudi globoke spoznanj, ki dobi na njihovo jedro ter jim pomaga razumeti, v ta globoka in intuitiven način, kako deluje in kako podatki Podatki spremeni naše življenje.