[Hudba hrať] 

DAVID Chouinard: Som David Chouinard, a to je D3. Vitajte u nás. Budeme sa učiť o D3 dnes. D3 je rámec JavaScript pre stavbu vysokú kvalitu interaktívne vizualizácie pre web. Veci ako to, čo sme vidieť za mnou, budeme sa učiť, aby sa tým veci, druh základy toho. Ale to bude v pohode. Začnime robiť pekné obrázky. Máme viac dema vyhliadky k dispozícii. Poďme na to. 

Act I, DOM manipulation-- ideme začať hneď robiť skvelé veci. Po prvé, na ľavej strane, máme kód. Na pravej strane, máme Výsledkom nášho kódu. Poďme prejsť. 

Poďme urobiť kruh. Ako to znie? svg.append circle-- sme proste urobili kruh. Ty mi veriť, že jo? Nie je to tam. 

Takže to, čo sme robili tu je, SVG je Scalable Vector Graphics. To je spôsob, ako povedať, že prehliadač ako vektorovej grafiky v prehliadači. To, čo sme práve urobil hneď teraz sa pridá kruh prechádzať. 

Sľub, že kružnica vyžaduje trochu základných atribútov predtým, než môžeme skutočne vidieť. Musíme povedať, že svoju polohu x, jej y postavenie, jej polomer. Nechceli sme to nič z toho povedať, takže nie sme to vidieť hneď teraz. Ale poďme povedať, že veci. 

Takže v prvom rade, máte dať našej kruhu meno. Tak hovorme tomu kruh. Náš kruh má meno teraz. A dajme tomu niekoľko atribútov. Ako sa o cx sa sústredí x, tak stred x pozície. Povedzme, 200 na 200 pixelov. 

Poďme dať mu y 200 pixelov rovnako. A R, polomer, asi 40 pixelov. Teraz sa pozrime. Nemôžem kúzlo. 

Tu to je. Máme kruh v polohe 200 pixelov, 200 pixelov, polomer 40 pixelov. Celkom fajn, nie? Máme kruh. Jo. 

Takže nie je potrebné nasledovať. Všetky tieto príklady, všetky z kód robím dnes budú poskytované on-line na konci vo forme interaktívnych príkladov s kontrolnými bodmi na Každý čin, a tak ďalej. 

Poďme robiť viac vecí. Tento čierny kruh je naozaj škaredý. Ospravedlňujem sa za túto chybu Správy tu. Tam sme ísť. 

Poďme dať farbu. Ako to? Rád oceľovo modrá. No, náš kruh zmenil farbu. To je skvelé. Urobme to semi-transparentné too-- semi-transparentné. 

Tak to sú atribúty sme definovať na kruhu. Prvá vec, ktorú sme urobili, je dáme kruh na stránke. A potom sme definovanie banda atribútov. Niektoré z nich sú potrebné, ako CX, CY, a Radius. A ostatné sú voliteľné. 

Existuje oveľa viac atribútov. Je tu veľa z nich. Napríklad by sme mohli mať mŕtvica rovnako, zdvih červené. Ale poďme odstrániť to. Sme späť do kruhu, modrým kruhom. 

Takže poďme urobiť viac kruhov. Ako to? Poďme urobiť ďalšie kruh. Je to vzrušujúce, že jo? 

Tak, že som len Copy-vloženého to, čo sme mali už. Hovorme tomu circle2. A poďme urobiť presný to isté a dať to atribúty, vzhľadom k x pozícia 300. Hurá, máme dva kruhy teraz. 

A samozrejme, mohli by sme aktualizáciu týchto hodnôt. Som to mohol dať na 400, a teraz sa pohybuje. A pretože je to nepríjemné, poďme odstrániť, takže circle2.remove. Je to preč. 

Takže to, čo robíme, a je len veľmi, very-- to je veľmi podobný tomu, čo môže robiť v jQuery, napríklad. Sme len manipulácia DOM, je to tzv. Možno ste počul to slovo. My vytvárame veci, nastavenie atribúty na veci, odstránenie veci. 

A teraz, tu je miesto, kde to začína byť zaujímavé. Takže neskôr v kóde, mohli by sme ešte odkazujú na pôvodnú kruhu tu. Takže poďme obnoviť svoj atribút CX. Povedzme, že jeho poloha x 400. A ja idem k prechodu že, takže je to jasné. Tam sme ísť. 

Tak sme pridali kruh. Nastavili sme niektoré atribúty. Pridali sme ďalšie kruh, odstránili. A potom sme sa mení pôvodnej kruh. 

Ale tu je miesto, kde sa dostane oveľa zaujímavejšie. Nielen, že môžeme nastaviť atribúty ako len hodnoty, môžeme povedať, hej, kruh, choďte na pozícii 200. Môžeme tiež nastaviť ako funkcia. 

Takže namiesto toho, aby 400 tu, môžeme urobiť nejaký výpočet za behu, čo sme chcete, aby atribút byť. Tak to je to, ako by ste vyjadriť to. My hovoríme, miesto 400, dovoľte mi, aby som vám funkcie miesto. A tu, v tejto funkcii, môžeme žiadny šialený výpočet. 

Mohli by sme mať čas a pozrite sa na nejaké iné veci a dynamicky sa rozhodnete pre kruh, akú hodnotu chceme. Čo my len tak to náhodný x pozície? Tak to je to. 

Takže to, čo hovorí, že je pre každé x, spustite túto funkciu. A to, čo robíme, je výpočet niektoré veci, náhodnom krát šírka a vracať to. Takže zakaždým, keď sme sa spustiť, že dostaneme kruh, ktorý ide do ľubovoľného miesta. Je to celkom fajn. Mám pocit, že by som mohol vyzerať na tohle málo. Začíname sa dostať do niečo tu zaujímavé. Urobme tento údaj riadený teraz. Neexistuje žiadne dáta tu. Poďme to zmeniť. 

Act II, dáta Poháňaná Documents-- Takže poďme sa vrátiť sem. A nech to len zbaviť circle2, preto, že sme práve pridávanie a odoberanie za to. Tak sme to naozaj potrebujú. Musíme byť oveľa múdrejší tu. Povedzme, že máme Niektoré údaje o nejakého druhu. Jeden moment-- povedzme, sme mali dáta tohto formulára. Mali sme poľa, len banda čísel. Máme sedem čísel tu, bez ohľadu na to represent-- suma na bankovom účte ľudí, ako moc váži, boh vie čo. 

To sú čísla, a my Chcete používať naše kruhy predstavovať tieto čísla nejako. Chceme rozhodujuca otázky kruhy týchto čísel. Takže to, čo robíme. Povedzme, že chceme kruh pre každé číslo. Mohli by sme urobiť starý vec, ktorú sme boli doing-- kruh Pripojiť a circle2 a circle3. Ale to vymkne z ruky, a je tu veľa opakovanie logiku. 

Tak poďme múdrejší s tým. Namiesto použitia var kruh svg.append, že sme boli len pomocou, budeme používať tento malý blok tu. Nechcem ísť do hloubky- do toho, čo všetky tieto časti robiť. A je to celkom pokročilé téme. A ja si prial, aby som mohol. 

Ale kľúč vec recognize-- a uvidíte, je veľmi často v D3 kóde. Tento blok textu basic vytvára toľko kruhov ako sú dátové prvky V tomto poli priamo tu. Takže to vytvára toľko kruhy ako tam sú prvky. Bude to nám vytvoriť sedem kruhy. A to robí naozaj, ale naozaj kľúčovú vec. Takže poďme bežať to. Poďme odstrániť naše ďalšie kruh. Povedzme, komentovať to rozlúčiť sa a spustiť znova. 

Tam sme ísť. Takže tu náš kruh je veľa tmavšie, pretože my majú sedem kruhy, jeden na hornej strane druhej. Práve sme vytvorili sedem kruhov, jeden každý pre každý z týchto dátových prvkov. Ale je tu kľúčovou vec, ktorá sa stala s týmto úryvku priamo tu. 

Je to, že dáta bola viazaná. Takže každý z tieto dátové prvky, 10, 45, 105, bol viazaný na konkrétny kruhu. Tak to nie len vytvoril banda kruhov ale spája tieto dve veci dohromady. 

A v budúcnosti, pretože sme vytvorili tie kruhy s touto funkciou D3, Keď ti dám kruh, môžete daj mi dáta s ním spojené. Takže sa môžeme pýtať D3. Hej, D3, mám tento kruh. Čo je to dáta, ktoré kruh má? A D3 by nám povedať 10 alebo 45 alebo 105. 

Tieto veci sú viazané. Je to veľmi, veľmi zásadný koncept. Pozrime sa na to. 

Spôsob, akým by sme sa pýtať D3-- tak To je relevantné pre to, ale len ver mi na to. To je, ako sme sa pýtať D3. Hej, D3, daj mi prvý kruh, ktoré môžete nájsť. Daj mi na prvý kruh môžete nájsť. A potom by sme mohli pýtať D3, čo je údaje o tom, ako je toto, 10. 

Tak sme sa len opýtať D3, si ma Prvý kruh môžete nájsť. Čo je jeho údaje? 10, ktorý je skutočne otázky Prvý dátový prvok. Mohli by sme to pýtať, hej, D3, Nájdite nás už tretí kruh. 105. Prečo je to naozaj dôležité? 

Tak tu, som sa už zmienil že by sme mohli použiť funkcie. A spomenul som sa, že to veľmi mocná vec. Takže nielen našu funkcie robiť veci ako robiť nejaké výpočty, napríklad, vráti náhodné číslo, môže tiež robiť veci, na základe údajov. To je to, čo údaje riadené dokumenty znamenajú. To je to, čo D3 znamená. 

Tak toto x postition-- miesto zo len hovorím, všetky kruhy, si polohu x 200, my To by mohlo dať funkciu. A tu môžeme urobiť nejaký výpočet. a d tu stojí na mieste pre dáta. Takže zakaždým, keď máme kruh, v podstate, D3 bude vytvorenie týchto siedmich kruhy. A potom za každých 

kruh, to pôjde, hej, circle1 aký je tvoj x pozíciu. Predtým sme boli Vždycky odpovede 200. Ale teraz, zakaždým D3 sa pýta nám to, čo je vaša pozícia x, to bude dávať us-- máme že kruh, takže máme dáta. Bude to, aby nám dáta a povedať, čo chcete, expozícia bude, na základe týchto údajov. 

Poďme sa len vrátiť aktuálne dáta. Takže ak narazíme tohle, tohle dáva Údaje nás riadený dokumenty. Tieto kruhy sú založené Vo vzťahu Position-- sú základy ako funkcie údajov. 

Takže pre prvý kruh, D3 kladie kruh. A potom D3 nás pýta, čo robiť Chcete expozície byť. A my len povedať, čo dáta. Vykonajte expozíciu 10. 

Potom sa spýta, čo chcete, expozície bude pre druhý kruh. A my odpovedáme, 45. A my, samozrejme, môže robiť nejaké výpočty tu. Zistil som, že tieto kruhy sú trochu naskladali hore. 

Tak vynásobte ju 3, násobiť dáta 3. Náš kruh zrovna rozšírila von. Naše hodnota strojnásobil. 

Kruh je skutočne na okraji, tak sa poďme možno trochu kompenzovať to. Povedzme, že by 20. Tu to máte. 

Jedná sa o vizualizáciu dát. Je to veľmi jednoduchý človek, ale to nám dáva nejaké nahliadnutie do našich dát. To nám hovorí, že sme napríklad majú malý zhluk prvkov. A my máme veľkú outlier tu. To nám dáva nejaké informácie o distribúcii. 

Ak by sme boli, napríklad, pre zmenu dát do 150 tu a Refresh, Naše vizualizácie sa zmení. Tento dokument je dát riadený. 

Tak samozrejme, všetky tieto prvky, Všetky tieto atribúty tu, môžeme použiť funkciu, nie len čísla, a to nielen x a y pozície. Takže môžeme použiť funkciu pre farbu. Takže budeme robiť to isté. Dáme to funkcia. 

A povedzme, mohli by sme mať podmieňovací spôsob v našej funkcie. Táto funkcia môže byť sto riadkov dlhý. To môže urobiť len veľmi, veľmi zložité veci. 

Takže poďme dať if tu. Povedzme, že ak naše údaje sú menej ako 50, to je nejaký prah že sa zaujímame v z nejakého dôvodu. Poďme robiť to zelené. V opačnom prípade, poďme robiť to červené. Ako to? Nice. 

Takže naše vizualizácie dát začína sprostredkovať zaujímavé informácie na mnohých kanáloch. Takže teraz trochu poznať o distribúcii. A my vieme, že tam je nejaký druh odrezať na 50, ktoré nás zaujímajú. Vieme, že existujú dva dátové body pod týmto prahom, a väčšina z nich vyššie. 

Tak ako posledný krok, tieto dáta tu, to je veľmi zriedkavé vidieť takhle. Tak poďme len presunúť ju do premennej pretože to je čistejšie, takhle. A potom sme sa použiť túto premennú tu. Je to presne to isté. Je to len trochu čistejšie. 

Ďalší na rade, Act III, Scales-- Takže jeden problém hneď tu je, ak zmeníme naše Údaje v tomto 200 value-- ak by sme ho zmeniť na 400 alebo tak niečo a refresh, potom táto hodnota jednoducho išiel mimo obrazovku. Takže naša logika tu o tom, ako robíme časy 3 a 20, aby rozložil ju a potom offset to trochu je naozaj neohrabaný. 

Čo tieto čísla znamenajú? Oni len ťažko tam kódované. A oni veľmi viazaná na dáta. Chceme dokument dát riadený. Chceme veľmi flexibilné dokument, že zadaných údajov, adaptovať sa a zastupuje ju. 

To, čo potrebujeme, je v podstate, my majú tento rozsah čísel 10. 45, 105. A my chceme zmapovať, že von na šírka, celú šírku sem. Takže máme rozsah Čísla idú od 0 do 100. A máme to campus I pokračuje 20-700, v tomto prípade. 

Sme trochu chceme zmapovať si to. Chceme meradle, že až a potom to kompenzovať trochu. Ukazuje sa, že D3 má tieto. Hovorí sa tomu stupnice. Tak poďme používať. 

Spôsob, akým works-- budem zadajte toto hore a potom ju vysvetliť. To je meradlo. Čo to bude robiť, je, bude to zmapovať hodnôt 1-200 na na 20-600. Môžeme zistiť, že. Môžeme vidieť, že tu. 

Takže keď som kŕmiť 1-- jeden okamih. Daj mi jednu sekundu. Musel som preklep to. Tu to je. Je mi ľúto. 

Takže to, čo bude robiť mierka je, bude mať hodnotu a potom previesť to, rozšíriť, že von, takže vyplní celú radu žiadate. Takže v tomto prípade, ak by sme dať jeden, to bude zmapovať, že sa na 20 ° C. A ak by sme dať 200, to je ísť na mapu, ktorá na 600. A niekde medzi tým, ak dostaneme 100, to je Bude niekam medzi 20 a 600. 

A samozrejme, teraz je to to, čo musíme odstrániť tie pevný kódované vecí, ktoré sme práve tam. Takže to, čo chceme urobiť, je mať dáta, že sme vzhľadom na to, že jednotlivé údaje element, a odovzdať ju v mierke ako prvý. Takže váha bude mierka to. 

Well-- Oh, máme malú chybu tu. Sme chýbajúce údaje. Tu to je. A že rozširuje ju. 

To nám dáva rovnaký Výsledok sme mali predtým, ale namiesto toho, aby tie pevný kódované obmedzenia. A v prípade, že veľkosť nášho Zmeny plátno, napríklad, Ak chceme mať po všetkom 400 pixelov a to squishes von, môžeme mať over-- môžeme rozšíriť ju, alebo sa môže znížiť túto ľavého okraja na niečo menej alebo viac ako 20. Tieto čísla, tieto hard kódované Čísla teraz zmysel pre nás. 

A my sme mohli urobiť oveľa viac zaujímavé veci rovnako. Takže namiesto toho, aby lineárne mierka, môžeme chcieť prihlásiť meradlo. A že nám dá logaritmickej stupnice. 

Takže teraz naše meradlo, miesto Len rozširuje na to, že rozsah, to robí zložitejšie veci. Namiesto toho, aby tento rozsah hard kódovaný, a namiesto toho, aby 600, by sme mohli chcieť, aby stačí použiť šírku, tak od 20 do šírky mínus 40, 2 krát okrajov na druhej strane. A to je oveľa väčší zmysel niekto, kto by mohol pozrieť na kód. 

Zaujímavé je, že váhy získať veľmi, veľmi prepracovaný rovnako. Robia veľa zaujímavých vecí. Takže váhy nemusia mať nutne pracovať len s číslami. Poďme urobiť farebnej škály. 

Takže náš sortiment by be-- Našou doménou je 1 až 200. To je vstup vec. Ale my chcieť zmapovať od zelenej na červenú, napr. A teraz, keď sme ho 1 prejsť, budeme dostať zelenú. Dáme ak mu 200, dostaneme červenú. A keď sme to prejsť niečo medzi, to bude nejaký mix, ktorý, niekde na gradientu medzi zelenou a červenou. 

A namiesto toho, aby tento druh neohrabaný logiky Máme tu podmienené práve tam, by sme mohli mať something-- lineárna stupnica medzi tými. Preto by sme použiť stupnicu sme práve vytvorený, ktorý sme nazvali farbu. A my by sme ho d, čo je náš dátový prvok. A tam ideme. Máme farebnej škály. 

Tak toto je mapovanie. Tak ďaleko vľavo je úplne zelene. Krajnej pravice je úplne červené. A všetko medzi tým je funkciou d. Máme zaujímavý vizualizácia tu. Ale naše dáta bola trochu nuda. Poďme sa pozrieť, čo sme mohli urobiť, ak sme mali viac zaujímavé údaje. 

Zákon IV, práca s Data-- prvá vec budeme chcieť urobiť, aby sa naša vizualizácia zaujímavejšie je presunúť dáta niekam inam. Je to veľmi neohrabaný mať Údaje, ktoré tu pevný kódované. A všeobecne, budeme sa pýtať niekto iný pre dáta. Budeme snáď žiada vládu, Census Bureau, čo je vaše dáta a potom vykresľovanie že alebo dotazom Niektoré tretie subjekt, u niektorých dát a potom vybudovanie vizualizácia na to. 

Takže prvá vec, ktorú chcete urobiť, je krok, ktorý niekam inam. Takže budem vytvárať súbor tu nazýva data.json. JSON je formát dát. Nemusíte vedieť veľa o tom. A budeme kopírovať malé množstvo dát máme tam, vložte ho tam doslovne, choďte späť k našej vizualizáciu kódu tu, a použiť túto funkciu priamo tu. Nemusíte poznať podrobnosti. Ale čo to bude robiť, je, to sa zistí, že súbor, prines to, a vrátiť ho k nám. Takže to, čo to robí, je, že ide a získať súbor data.json. A potom kód, ktorý je odsadené inside-- v podstate, všetky kód máme there-- bude spustiť len vtedy, keď sme sa získať dáta späť. A potom, že to bude beh, že kód s dátami máme. Skvelé, máme vizualizácia, že otázky pre nejaký kód niekde inde, čo je zvyčajne kde dotazy niektoré údaje z niekde inde, čo je zvyčajne ako vizualizácia práce. 

Ale chcem sa vrátiť k dátam. Takže dáta Fundamentally v D3-- D3 spotrebuje dáta, ktorá je zoznam vecí. D3 očakáva, že tieto údaje byť len zoznam vecí, rad vecí. Nezáleží na tom, aké tie veci sú, ak je to pole z nich. 

Tak tu, napríklad, mohli sme Samozrejme sme s plávajúcou desatinnou čiarkou hodnoty. Mohli by sme mať negatívne výsledky. D3 sa nestará, tak dlho ako je to zoznam vecí. 

Vzhľadom k zaujímavej veci, ktoré sme by mohla mať, mohli by sme tiež majú zoznam reťazcov, ako je to. Tak to sú titulky Crimson Zdvihol som pred pár dňami. A možno nájdete niekoľko zaujímavých veci, o týchto niekoľkých titulky. 

Takže ešte raz, toto je zoznam vecí. D3 nestará. To sa stalo, že reťazec. Zmenili sme naše dáta. 

Vráťme sa k nášmu vizualizáciu. Teraz, naše vizualizácie očakáva vstupné byť čísla. Takže budeme mať vykonať niekoľko zmien. Tak napríklad, v prvom rade, možno Chceme, aby tieto kruhy spolu dĺžkou titulok, počet znakov v titulku. 

Takže to, čo budeme robiť, je-- zakaždým naše Funkcia je volaná s reťazcom, zistíme, že je to dĺžka a potom prejsť okolo toho v mierke. Farba, vrátim že k oceľovo modrá. A tam ideme. Máme vizualizácia z Crimson titulky. 

Naša mierka je trochu mimo. Predpokladajme, že najdlhšia titulok je dlhý 100 znakov, tak, aby rozpätie sa trochu. A máme vizualizáciu. Takže sa zdá, že väčšina titulky sú dosť blízko pri sebe, čo sa týka charakteru linky. Ale jeden tam naozaj vyniká. 

Mohli by sme postaviť niektoré nástroje preskúmať, že viac. Ale keď som pracoval na to, bol som zvedaví, či v tomto súbore dát, titulky s dvojbodkou v nich by byť dlhšia. Aj predpokladá, že áno. 

Takže poďme zistiť. Poďme používať farby kanál, ako sme to urobili predtým, zakódovať niektoré o tom, či tam je dvojbodka, alebo nie. Takže budeme opäť používať podmienené. Nemusíte vedieť podrobnosti o to, ale to je to, ako sme sa overiť reťazec pre konkrétny znak v JavaScripte, opäť, nie je relevantná. 

Ale ak sa nám nepodarí nájsť hrubého čreva, vrátime zelene. A ak áno, vrátime červené. Takže znovu, titulky, že majú dvojbodka bude červeno. To je to, čo to means-- pekné. 

Takže sa zdá, že môj hypotéza je narazil. Je tu len dve. Máme len šesť dátových bodov a iba dvaja mali dvojbodky. Ale zdá sa, trochu viac na spodnom konci, v skutočnosti. Titulky s dvojbodkou sa zdá všeobecne byť kratšia, aspoň v našich dát set-- zaujímavé. 

Vráťme sa, že pre oceľovo modrá a potom uvidíte čo môžeme urobiť s ešte ďalšie zaujímavé informácie. Takže znovu, som sa zmienil, že Dáta v D3 je zoznam vecí. Videli sme počty mnohých typov. Už sme videli reťazca. Ale veci môžu byť aj objekty. 

Môžu to byť zložité veci ktoré obsahujú veľa vecí. Chcete povedať, že jasnejšie, vo väčšine prípadov sme Chcete stavať každý dátový bod as oveľa zložitejšie, než len jednu hodnotu. Ak by ste si predstaviť, databázy o študentoch, tam by mohlo byť študentom meno, študent ID, a veľa vecí spojené s konkrétny záznam, nie len reťazec alebo číslo. Tak sa poďme pozrieť na to. 

To je jeden taký súbor údajov. To je dátový súbor o zemetrasení. Takže všetko je tu na našom zozname alebo pole vecí, obsahuje veľa vecí sám. Takže každý dátový bod má veľkosť a koordinovať. A koordinuje sa obsahujú dve veci. 

Takže každý deň, je teraz oveľa viac komplikované a oveľa zaujímavejšie a obsahuje oveľa viac zaujímavé informácie. Poďme sa pozrieť, sme mohli postaviť z toho. Vracať sa späť sem, opäť s použitím Naše histogram kruh vizualizácie sme vybudovali, poďme sa pozrieť, či môžeme stavať vizualizácia distribúcia veľkosti v našom súbore dát. 

Tak tu je to rovnaký koncept. Ale teraz, d obsahuje viac vecí. d obsahuje mnoho dátových prvkov. Tak sme si d späť. D3 nám dáva d. A my odpovedáme tým, že nájde veľkosti o d a potom odovzdá že v mierke. 

A potom musíme zmeniť Naše meradlo, samozrejme. Takže veličiny proste nie ísť oveľa viac než 10. V skutočnosti, tam nikdy nebol 10 veľkosť zemetrasenia. Ale to je trochu naša hornej end, náš horné spektrum. 

Poďme obnoviť. Nice, máme vizualizáciu. Je zaujímavé note-- tak existujú dva dátové body, ktoré sú takmer presne na seba ďalší, z hľadiska veľkosti. Vidíte to tým, netransparentnosti sme používate. 

Máme geografických dát teraz. Máme zemepisnej šírky a dĺžky. Možno by sme mohli urobiť niečo oveľa zaujímavejšie s tým. Poďme si trochu viac zaujímavý spôsob, ako predstaviť to zložitejšie Údaje, ktoré majú prístup k. 

Zákon V, Mapping-- zásadne, Chceme, aby tieto na mape. Myslím, že to je miesto, kde sa to deje. Chceme zakódovať informácie o Postavenie týchto zemetrasenie čítanie, ako aj ich veľkosť, pretože máme teraz. Chápeme, ako spotrebovať zložitejšie dát. 

Prvá vec, ktorú urobíme, je vytvoriť mapu, mapu pozadia. Chystám sa prejsť to veľmi rýchlo. To je zložité kód. Je to ďalší z tých, recepty nemáte naozaj musieť plne pochopiť, pre vás na použitie. Ale to je kód. Tento kód tu vytvorí mapu. 

Nebudeme chodiť v detaile. Ale povrchne, čo to robí, je, opýta tento súbor us.json, ktorý je dátový súbor, ako je tá, ktorú sme mali predtým. Je to zložitejšie, samozrejme. Ale v tomto prípade všetko, každý dátový bod je tento stav a má zoznam zemepisnej šírky a dĺžky ktoré definujú polygón, že forma, že štát. 

Takže to, čo D3 bude robiť, je obdobný k tomu, čo sme robili predtým. To bude vyžadovať, aby aj viažu, že na prvok. A je tu funkcia, ktorá bude mapovať tento prvok von, na základe zemepisných šírkach a dĺžky. Môžete si prečítať viac o tom. A ja odporúčam. 

Tam sú odkazy na Koniec tohto kódu nenapísal. A kód je komentoval. V tam sú odkazy na ďalšie na to. Odporúčam vám to nájsť. Ale to, čo nás zaujíma, je táto projekcia funkcia. Chcem ísť cez to. 

Po prvé, dovoľte mi ukázať vy, že áno, máme mapu. Mapy sú v pohode. Tak sa poďme pozrieť na to produkčnej funkcie. 

Projekcia je veľmi ako meradle, váhy znova. Takže to, čo výroba pre Táto funkcia projekcia to je, mohli by sme to prejsť dĺžku a latitudes-- v tomto prípade, tieto hodnoty sú tu lat-túži budovy sedíme v práve now-- na projekciu. A projekcie prevedie že do hodnoty pixelov x a y. 

Takže to, čo je projekcia robí je veľmi podobná našej meradle. Je to pri našich zemepisných šírkach a dĺžka, ktorá predstavuje celú zemeguľu a zmršťovanie a veľkosti, ktoré dole na námestí, ktoré chceme, že sme ho dal. V tomto prípade, my sme odovzdávanie týchto hodnôt. A to nám dáva, dobre, že Na obrazovke znamená 640 pixelov. Celá táto obrazovka je 700 pixelov široký, takže z nás robí asi tu, a 154 pixelov dole, ktoré by som odhad je skoro tu. 

Takže pri tých lat-túži, čo predstavujú niečo na celom svete a squishing a pohybujúce sa, že okolo sa nám hodnoty X a Y pixelov, To je prvá vec, ktorá je vykonáva v tejto mapovacej kód. A potom zvyšok Kód spotrebováva dáta a potom mapuje tie lat-túžia na niečo, čo na obrazovke. 

Ale budeme používať túto projekciu funkcie, pretože sa ukáže, že máme lat-túži túži rovnako. Pri spätnom pohľade na našich dát, máme zemepisnej šírky a dĺžky súradnice pre každé pozorovanie. Takže poďme použiť projekciu. 

Takže pri pohľade na našej expozícii, chceme našu exposition-- máme zemepisnej šírky a dĺžky. Ale my chceme hodnoty obrazových bodov. A ukázalo sa, máme presne to, čo sme want-- projekciu. Veľmi podobne ako sme boli pomocou stupnice tu, Teraz bude používať projekciu a odovzdať koordinuje. Takže prvá vec sme doing-- tak sme dostať d, čo je individuálne údaje prvok individuálne zemetrasenie čítanie. Prvá vec, ktorú robíme je získať súradnice. Dobre, máme súradnice. 

Druhá vec, čo robíme, je Onoho na projekciu. Projekcia prevádza tieto súradnice do hodnoty pixelov, x a y. A potom posledná vec, ktorú by sme chcem urobiť, je dostať x, čo v tomto prípade je prvý z nich. Jedná sa o prvú z týchto dvoch vecí ktoré sú vrátené projekciou. 

Urobíme to isté pre y. Ale namiesto toho, vrátime Druhý prvok, y. Pripravte sa na obnoviť. Ooh, extra charakter here-- pekné, máme Údaje riadený dokument, ktorý je skrývanie tento JSON súbor objektov, robiť mapy, a meniace sa atribút vo vzťahu k údajom premietať ju na mape. To je naozaj zaujímavé. To je v pohode. 

Poďme si to do zárezu. Myslím, že máme dva kusy informácie s každým dátového bodu. Myslím, tri. Máme súradnice, čo je x a y. A máme veľkosť. 

Musíme zakódovať veľkosti nejako. Máme veľa kanálov. Môžeme použiť farbu. Môžeme použiť polomer. Mohli by sme použiť krytie. Mohli by sme použiť mnoho vecí v kóde. Niektoré z týchto atribútov a mnoho viac, že ​​tam nie sú uvedené, preto, že sú povinné, mohli by sme používajú pre zakódovanie tieto dáta, mŕtvica a všetky tieto veci, ktoré som spomenul. 

Poďme robiť polomer. Myslím si, že polomer je najviac intuitívne. Takže znovu, budeme nahrádzať, že pevne 40 a vykonať niektoré výpočty. Budeme znova použiť náš obľúbený meradlo. A my sme v minulosti d. Ale nie d, pretože chceme veľkosť D. d je len dátový bod. Budeme prejsť veľkosť meradle. 

Skúsme to znova. Ooh, to nefunguje. Prečo to nefunguje? 

Takže pamätajte akom rozsahu robí. Poďme sa pozrieť na meradle znova. Mierka mapy 1-10 na na 22 až 600, viac alebo menej. 600 je obrovský. To je dôvod, prečo sme stále to. 

Takže chceme zmeniť naše mierku na niečo rozumnejšie. Povedzme, že chceme 0-60. 60 je veľký, ale 10 zemetrasenie sú neuveriteľne zriedkavé. V skutočnosti, že som sa nikdy nestalo. 

Takže to, čo to bude robiť, je, bude to trvať Naše veľkosť, ktorá ide od 1 do 10 a mapovať na rozbaľte ho. A namapovať na 0-60. Poďme obnoviť. 

Nice, máme vizualizáciu. To je skvelé. To je aktuálne dáta. Určite ste si všimli, v mojom malom hračky príklad, najväčšie zemetrasenie je priamo nad nami. Ale to je všetko. Máme dátum riadený vizualizácie že spotrebováva dáta a nám dáva naozaj zaujímavé informácie. Jo, poďme pridať nejaký interaktivita na to. Zmienil som sa, že to silná sila D3. 

Tak tu, pre každý prvok, sme popisujúci veľa atribútov. Ale môžeme tiež popísať to, čo chceme sa stane s interaktivity prvkami. Napríklad by sme mohli popísať čo sa stane, keď myši. A veľmi podobné, že, ktorá bude mať funkciu, veľmi podobný atribúty sme mali predtým, kde sme sa urobiť niečo pre prvok, keď sme sa vznášať sa nad ním. 

Takže prvá vec, ktorú musíme urobiť, je vybrať tento prvok, ho nájsť v podstate, v prehliadači. a potom by sme mohli nastaviť atribút na to. Takže to, čo tu robím, je, keď sme sa vznášať nad niečím, dostaneme tento prvok a potom nastaviť jeho priehľadnosť späť 1, úplne nepriehľadný. Poďme sa pozrieť, ako to vyzerá. 

Zdá sa, že máme navyše bodkočiarka tu. Takže ak by sme tu vznášať, dostane plný. Ale teraz, samozrejme, to pobyty plné, pretože my musí popísať, čo sa deje Pri odobratí našu kurzor. Tak poďme urobiť presne to, na mouseOut, na rozdiel od mouseover. 

A budeme resetovať do to, čo sme mali before-- 0,5. A teraz, zakaždým, keď sme vznášať sa, dostaneme kruh. Pomáha nám vidieť, čo máme sme výber v podstate. 

A teraz poďme, aby to naozaj skvelé. Poďme sa pripojiť to na reálne dáta. Takže poďme opýtať mohol USGS o ich dáta. Takže US Geological Survey má k dispozícii údaje o zemetrasení. Majú verejné API, ktorý je schopný byť konzumovaný vo formáte JSON. Tak poďme to urobiť. 

Tak toto je trochu kódu, ktorý sa pripojí k USGS API. A je tu trochu spracovanie na to. To nie je podstatné, ale zjednodušuje ju na jednoduchý formát dát, ako je tá sme mali predtým. Tak som sa zbaviť našu výzvu na náš falošný data.json na súbor. A namiesto toho, volám USGS v podstate. 

Poďme obnoviť, pekné. To je skutočné, real-life dát od tohto týždňa k zemetraseniu. To je naozaj zaujímavé. To nie je prekvapujúce pre nás, ale tam sú veľa zemetrasení na West Coast v Kalifornii. Ale myslel som, že je to veľmi zaujímavé že tam bolo toľko zemetrasení na Aljaške, a zdá sa, tu na Stredozápade. Myslím, zaujímavý, a sme dobrí. To je záver. 

Ale v podstate to je to, čo D3 nám pomáha robiť. Pomáha nám trvať dát, bind to prvkov v DOM, a majú tieto prvky zmeniť ako funkcia týchto údajov, mať tie atribúty, sú všetky veľa atribútov prvkov, všetky užitočné pre kanály sprostredkovať informácie. 

D3 je neuveriteľne silný knižnica a prekvapivo dobre spustiť. To je nejaká silná vec. Vizualizácia dát je neuveriteľne mocný nástroj pre dopravu osôb na hlboké postrehy, že dôjde k ich jadru a pomáha im porozumieť, v Tento hlboký a intuitívny spôsob, ako funguje dát a ako Údaje zmení náš život.