[Hudba hrát] 

DAVID Chouinard: Jsem David Chouinard, a to je D3. Vítejte u nás. Budeme se učit o D3 dnes. D3 je rámec JavaScript pro stavbu vysokou kvalitu interaktivní vizualizace pro web. Věci jako to, co jsme vidět za mnou, budeme se učit, aby se těm věci, druh základy toho. Ale to bude v pohodě. Začněme dělat pěkné obrázky. Máme víc dema vyhlídky k dispozici. Pojďme na to. 

Act I, DOM manipulation-- jdeme začít hned dělat skvělé věci. Za prvé, na levé straně, máme kód. Na pravé straně, máme Výsledkem našeho kódu. Pojďme projít. 

Pojďme udělat kruh. Jak to zní? svg.append circle-- jsme prostě udělali kruh. Ty mi věřit, že jo? Není to tam. 

Takže to, co jsme dělali tady je, SVG je Scalable Vector Graphics. To je způsob, jak říct, že prohlížeč jak vektorové grafiky v prohlížeči. To, co jsme právě udělal hned teď se přidá kruh procházet. 

Slib, že kružnice vyžaduje trochu základních atributů předtím, než můžeme skutečně vidět. Musíme říct, že svou polohu x, její y postavení, její poloměr. Nechtěli jsme to nic z toho říct, takže nejsme to vidět hned teď. Ale pojďme říct, že věci. 

Takže v první řadě, máte dát naší kruhu jméno. Tak říkejme tomu kruh. Náš kruh má jméno teď. A dejme tomu několik atributů. Jak se o cx se soustředí x, tak střed x pozice. Řekněme, 200 na 200 pixelů. 

Pojďme dát mu y 200 pixelů stejně. A R, poloměr, asi 40 pixelů. Nyní se podívejme. Nemůžu kouzlo. 

Tady to je. Máme kruh v poloze 200 pixelů, 200 pixelů, poloměr 40 pixelů. Docela fajn, ne? Máme kruh. Jo. 

Takže není třeba následovat. Všechny tyto příklady, všechny z kód dělám dnes budou poskytovány on-line na konci ve formě interaktivních příkladů s kontrolními body na Každý čin, a tak dále. 

Pojďme dělat více věcí. Tento černý kruh je opravdu ošklivý. Omlouvám se za tuto chybu Zprávy tady. Tam jsme jít. 

Pojďme dát barvu. Jak to? Rád ocelově modrá. No, náš kruh změnil barvu. To je skvělé. Udělejme to semi-transparentní too-- semi-transparentní. 

Tak to jsou atributy jsme definovat na kruhu. První věc, kterou jsme udělali, je dáme kruh na stránce. A pak jsme definování banda atributů. Některé z nich jsou zapotřebí, jako CX, CY, a Radius. A ostatní jsou volitelné. 

Existuje mnohem více atributů. Je tu spousta z nich. Například bychom mohli mít mrtvice stejně, zdvih červené. Ale pojďme odstranit to. Jsme zpátky do kruhu, modrým kruhem. 

Takže pojďme udělat více kruhů. Jak to? Pojďme udělat další kruh. Je to vzrušující, že jo? 

Tak, že jsem jen Copy-vloženého to, co jsme měli už. Říkejme tomu circle2. A pojďme udělat přesný totéž a dát to atributy, vzhledem k x pozice 300. Hurá, máme dva kruhy teď. 

A samozřejmě, mohli bychom aktualizaci těchto hodnot. Jsem to mohl dát na 400, a nyní se pohybuje. A protože je to nepříjemné, pojďme odstranit, takže circle2.remove. Je to pryč. 

Takže to, co děláme, a je jen velmi, very-- to je velmi podobný tomu, co může dělat v jQuery, například. Jsme jen manipulace DOM, je to tzv. Možná jste slyšel to slovo. My vytváříme věci, nastavení atributy na věci, odstranění věci. 

A teď, tady je místo, kde to začíná být zajímavé. Takže později v kódu, mohli bychom ještě odkazují na původní kruhu zde. Takže pojďme obnovit svůj atribut CX. Řekněme, že jeho poloha x 400. A já jdu k přechodu že, takže je to jasné. Tam jsme jít. 

Tak jsme přidali kruh. Nastavili jsme některé atributy. Přidali jsme další kruh, odstranili. A pak jsme se mění původní kruh. 

Ale tady je místo, kde se dostane mnohem zajímavější. Nejen, že můžeme nastavit atributy jak jen hodnoty, můžeme říci, hej, kruh, jděte na pozici 200. Můžeme také nastavit jako funkce. 

Takže místo toho, aby 400 zde, můžeme udělat nějaký výpočet za běhu, co jsme chcete, aby atribut být. Tak to je to, jak byste vyjádřit to. My říkáme, místo 400, dovolte mi, abych vám funkce místo. A tady, v této funkci, můžeme žádný šílený výpočet. 

Mohli bychom mít čas a podívejte se na nějaké jiné věci a dynamicky se rozhodnete pro kruh, jakou hodnotu chceme. Co my jen tak to náhodný x pozice? Tak to je to. 

Takže to, co říká, že je pro každé x, spusťte tuto funkci. A to, co děláme, je výpočet některé věci, náhodném krát šířka a vracet to. Takže pokaždé, když jsme se spustit, že dostaneme kruh, který jde do libovolného místa. Je to docela fajn. Mám pocit, že bych mohl vypadat na tohle málo. Začínáme se dostat do něco tady zajímavé. Udělejme tento údaj řízený teď. Neexistuje žádná data zde. Pojďme to změnit. 

Act II, data Poháněná Documents-- Takže pojďme se vrátit sem. A ať to jen zbavit circle2, proto, že jsme právě přidávání a odebírání za to. Tak jsme to opravdu potřebují. Musíme být mnohem chytřejší zde. Řekněme, že máme Některé údaje o nějakého druhu. Jeden moment-- řekněme, jsme měli data tohoto formuláře. Měli jsme pole, jen banda čísel. Máme sedm čísel tady, bez ohledu na to represent-- částka na bankovním účtu lidí, jak moc váží, bůh ví co. 

To jsou čísla, a my Chcete používat naše kruhy představovat tato čísla nějak. Chceme tie dotazy kruhy těchto čísel. Takže to, co děláme. Řekněme, že chceme kruh pro každé číslo. Mohli bychom udělat starý věc, kterou jsme byli doing-- kruh Připojit a circle2 a circle3. Ale to vymkne z ruky, a je tu spousta opakování logiku. 

Tak pojďme chytřejší s tím. Namísto použití var kruh svg.append, že jsme byli jen pomocí, budeme používat tento malý blok zde. Nechci jít do hloubky- do toho, co všechny tyto části dělat. A je to docela pokročilé tématu. A já si přál, abych mohl. 

Ale klíč věc recognize-- a uvidíte, je velmi často v D3 kódu. Tento blok textu basic vytváří tolik kruhů jako jsou datové prvky V tomto poli přímo zde. Takže to vytváří tolik kruhy jak tam jsou prvky. Bude to nám vytvořit sedm kruhy. A to dělá opravdu, ale opravdu klíčovou věc. Takže pojďme běžet to. Pojďme odstranit naše další kruh. Řekněme, komentovat to rozloučit se a spustit znovu. 

Tam jsme jít. Takže tady náš kruh je hodně tmavší, protože my mají sedm kruhy, jeden na horní straně druhé. Právě jsme vytvořili sedm kruhů, jeden každý pro každý z těchto datových prvků. Ale je tu klíčovou věc, která se stala s tímto úryvku přímo zde. 

Je to, že data byla vázána. Takže každý z tyto datové prvky, 10, 45, 105, byl vázán na konkrétní kruhu. Tak to ne jen vytvořil banda kruhů ale spojuje tyto dvě věci dohromady. 

A v budoucnu, protože jsme vytvořili ty kruhy s touto funkcí D3, Když ti dám kruh, můžete dej mi data s ním spojené. Takže se můžeme ptát D3. Hej, D3, mám tento kruh. Co je to data, která kruh má? A D3 by nám říci 10 nebo 45 nebo 105. 

Tyto věci jsou vázány. Je to velmi, velmi zásadní koncept. Podívejme se na to. 

Způsob, jakým bychom se ptát D3-- tak To je relevantní pro to, ale jen věř mi na to. To je, jak jsme se ptát D3. Hej, D3, dej mi první kruh, které můžete najít. Dej mi na první kruh můžete najít. A pak bychom mohli ptát D3, co je údaje o tom, jako je toto, 10. 

Tak jsme se jen zeptat D3, si mě První kruh můžete najít. Co je jeho údaje? 10, který je skutečně dotazy První datový prvek. Mohli bychom to ptát, hej, D3, Najděte nás již třetí kruh. 105. Proč je to opravdu důležité? 

Tak tady, jsem se již zmínil že bychom mohli použít funkce. A zmínil jsem se, že to velmi mocná věc. Takže nejen naši funkce dělat věci jako dělat nějaké výpočty, například, vrátí náhodné číslo, může také dělat věci, na základě údajů. To je to, co údaje řízené dokumenty znamenají. To je to, co D3 znamená. 

Tak tohle x postition-- místo ze jen říkám, všechny kruhy, si polohu x 200, my To by mohlo dát funkci. A tady můžeme udělat nějaký výpočet. a d zde stojí na místě pro data. Takže pokaždé, když máme kruh, v podstatě, D3 bude vytvoření těchto sedmi kruhy. A pak za každých 

kruh, to půjde, hej, circle1 jaký je tvůj x pozici. Dříve jsme byli Vždycky odpovědi 200. Ale teď, pokaždé D3 se ptá nám to, co je vaše pozice x, to bude dávat us-- máme že kruh, takže máme data. Bude to, aby nám data a říct, co chcete, expozice bude, na základě těchto dat. 

Pojďme se jen vrátit aktuální data. Takže pokud narazíme tohle, tohle dává Údaje nás řízený dokumenty. Tyto kruhy jsou založeny Ve vztahu Position-- jsou základy jako funkce údajů. 

Takže pro první kruh, D3 klade kruh. A pak D3 nás ptá, co dělat Chcete expozice být. A my jen říct, co data. Proveďte expozici 10. 

Pak se zeptá, co chcete, expozice bude pro druhý kruh. A my odpovídáme, 45. A my, samozřejmě, může dělat nějaké výpočty zde. Zjistil jsem, že tyto kruhy jsou trochu naskládal nahoru. 

Tak vynásobte ji 3, násobit data 3. Náš kruh zrovna rozšířila ven. Naše hodnota ztrojnásobil. 

Kruh je skutečně na okraji, tak se pojďme možná trochu kompenzovat to. Řekněme, že by 20. Tady to máte. 

Jedná se o vizualizaci dat. Je to velmi jednoduchý člověk, ale to nám dává nějaké nahlédnutí do našich dat. To nám říká, že jsme například mají malý shluk prvků. A my máme velkou outlier zde. To nám dává nějaké informace o distribuci. 

Pokud bychom byli, například, pro změnu dat do 150 zde a Refresh, Naše vizualizace se změní. Tento dokument je dat řízený. 

Tak samozřejmě, všechny tyto prvky, Všechny tyto atributy zde, můžeme použít funkci, ne jen čísla, a to nejen x a y pozice. Takže můžeme použít funkci pro barvu. Takže budeme dělat to samé. Dáme to funkce. 

A řekněme, mohli bychom mít podmiňovací způsob v naší funkce. Tato funkce může být sto řádků dlouhý. To může udělat jen velmi, velmi složité věci. 

Takže pojďme dát if zde. Řekněme, že pokud naše údaje jsou méně než 50, to je nějaký práh že se zajímáme v z nějakého důvodu. Pojďme dělat to zelené. V opačném případě, pojďme dělat to červené. Jak to? Nice. 

Takže naše vizualizace dat začíná zprostředkovat zajímavé informace na mnoha kanálech. Takže teď trochu znát o distribuci. A my víme, že tam je nějaký druh odříznout na 50, které nás zajímají. Víme, že existují dva datové body pod tímto prahem, a většina z nich výše. 

Tak jako poslední krok, tato data zde, to je velmi vzácné vidět takhle. Tak pojďme jen přesunout ji do proměnné protože to je čistší, takhle. A pak jsme se použít tuto proměnnou zde. Je to přesně to samé. Je to jen trochu čistší. 

Další na řadě, Act III, Scales-- Takže jeden problém hned tady je, pokud změníme naše Údaje v tomto 200 value-- pokud bychom ho změnit na 400 nebo tak něco a refresh, pak tato hodnota prostě šel mimo obrazovku. Takže naše logika tady o tom, jak děláme časy 3 a 20, aby rozložil ji a poté offset to trochu je opravdu neohrabaný. 

Co tato čísla znamenají? Oni jen těžko tam kódované. A oni velmi vázána na data. Chceme dokument dat řízený. Chceme velmi flexibilní dokument, že zadaných údajů, adaptovat se a zastupuje ji. 

To, co potřebujeme, je v podstatě, my mají tento rozsah čísel 10. 45, 105. A my chceme zmapovat, že ven na šířka, celou šířku sem. Takže máme rozsah Čísla jdou od 0 do 100. A máme to campus I pokračuje 20-700, v tomto případě. 

Jsme trochu chceme zmapovat si to. Chceme měřítku, že až a pak to kompenzovat trochu. Ukazuje se, že D3 má tyto. Říká se tomu stupnice. Tak pojďme používat. 

Způsob, jakým works-- budu zadejte toto nahoru a pak ji vysvětlit. To je měřítko. Co to bude dělat, je, bude to zmapovat hodnot 1-200 na na 20-600. Můžeme zjistit, že. Můžeme vidět, že tady. 

Takže když jsem krmit 1-- jeden okamžik. Dej mi jednu sekundu. Musel jsem překlep to. Tady to je. Je mi líto. 

Takže to, co bude dělat měřítko je, bude mít hodnotu a pak převést to, rozšířit, že ven, takže vyplní celou řadu žádáte. Takže v tomto případě, pokud bychom dát jeden, to bude zmapovat, že se na 20 ° C. A pokud bychom dát 200, to je jít na mapu, která na 600. A někde mezi tím, pokud dostaneme 100, to je Bude někam mezi 20 a 600. 

A samozřejmě, teď je to to, co musíme odstranit ty pevný kódované věcí, které jsme právě tam. Takže to, co chceme udělat, je mít data, že jsme vzhledem k tomu, že jednotlivé údaje element, a předat ji v měřítku jako první. Takže váha bude měřítko to. 

Well-- Oh, máme malou chybu zde. Jsme chybějící údaje. Tady to je. A že rozšiřuje ji. 

To nám dává stejný Výsledek jsme měli předtím, ale místo toho, aby ty pevný kódované omezení. A v případě, že velikost našeho Změny plátno, například, Chceme-li mít po všem 400 pixelů a to squishes ven, můžeme mít over-- můžeme rozšířit ji, nebo se může snížit tuto levého okraje na něco méně nebo více než 20. Tato čísla, tyto hard kódované Čísla nyní smysl pro nás. 

A my jsme mohli udělat mnohem víc zajímavé věci stejně. Takže místo toho, aby lineární měřítko, můžeme chtít přihlásit měřítko. A že nám dá logaritmické stupnice. 

Takže teď naše měřítko, místo Jen rozšiřuje na to, že rozsah, to dělá složitější věci. Místo toho, aby tento rozsah hard kódovaný, a místo toho, aby 600, bychom mohli chtít, aby stačí použít šířku, tak od 20 do šířky minus 40, 2 krát okrajů na druhé straně. A to je mnohem větší smysl někdo, kdo by mohl podívat na kód. 

Zajímavé je, že váhy získat velmi, velmi propracovaný stejně. Dělají spoustu zajímavých věcí. Takže váhy nemusí mít nutně pracovat jen s čísly. Pojďme udělat barevné škály. 

Takže náš sortiment by be-- Naší doménou je 1 až 200. To je vstup věc. Ale my chtít zmapovat od zelené na červenou, např. A teď, když jsme ho 1 projít, budeme dostat zelenou. Dáme-li mu 200, dostaneme červenou. A když jsme to projít něco mezi, to bude nějaký mix, který, někde na gradientu mezi zelenou a červenou. 

A místo toho, aby tento druh neohrabaný logiky Máme zde podmíněné právě tam, bychom mohli mít something-- lineární stupnice mezi těmi. Proto bychom použít stupnici jsme právě vytvořený, který jsme nazvali barvu. A my bychom jej d, což je náš datový prvek. A tam jdeme. Máme barevné škály. 

Tak tohle je mapování. Tak daleko vlevo je zcela zeleně. Krajní pravice je zcela červené. A všechno mezi tím je funkcí d. Máme zajímavý vizualizace zde. Ale naše data byla trochu nuda. Pojďme se podívat, co jsme mohli udělat, pokud jsme měli více zajímavé údaje. 

Zákon IV, práce s Data-- první věc budeme chtít udělat, aby se naše vizualizace zajímavější je přesunout data někam jinam. Je to velmi neohrabaný mít Údaje, které zde pevný kódované. A obecně, budeme se ptát někdo jiný pro data. Budeme snad žádá vládu, Census Bureau, co je vaše data a pak vykreslování že nebo dotazem Některé třetí subjekt, u některých dat a pak vybudování vizualizace na to. 

Takže první věc, kterou chcete udělat, je krok, který někam jinam. Takže budu vytvářet soubor zde nazývá data.json. JSON je formát dat. Nemusíte vědět hodně o tom. A budeme kopírovat malé množství dat máme tam, vložte jej tam doslovně, jděte zpět k naší vizualizaci kódu tady, a použít tuto funkci přímo zde. Nemusíte znát podrobnosti. Ale co to bude dělat, je, to se zjistí, že soubor, přines to, a vrátit ho k nám. Takže to, co to dělá, je, že jde a získat soubor data.json. A pak kód, který je odsazené inside-- v podstatě, všechny kód máme there-- bude spustit pouze tehdy, když jsme se získat data zpět. A pak, že to bude běh, že kód s daty máme. Skvělé, máme vizualizace, že dotazy pro nějaký kód někde jinde, což je obvykle kde dotazy některé údaje z někde jinde, což je obvykle jak vizualizace práce. 

Ale chci se vrátit k datům. Takže data Fundamentally v D3-- D3 spotřebuje data, která je seznam věcí. D3 očekává, že tyto údaje být jen seznam věcí, řada věcí. Nezáleží na tom, jaké ty věci jsou, pokud je to pole z nich. 

Tak tady, například, mohli jsme Samozřejmě jsme s plovoucí desetinnou čárkou hodnoty. Mohli bychom mít negativní výsledky. D3 se nestará, tak dlouho jak je to seznam věcí. 

Vzhledem k zajímavé věci, které jsme by mohla mít, mohli bychom také mají seznam řetězců, jako je to. Tak to jsou titulky Crimson Zvedl jsem před pár dny. A možná najdete několik zajímavých věci, o těchto několika titulky. 

Takže ještě jednou, tohle je seznam věcí. D3 nestará. To se stalo, že řetězec. Změnili jsme naše data. 

Vraťme se k našemu vizualizaci. Nyní, naše vizualizace očekává vstupní být čísla. Takže budeme mít provést několik změn. Tak například, v první řadě, možná Chceme, aby tyto kruhy spolu délkou titulek, počet znaků v titulku. 

Takže to, co budeme dělat, je-- pokaždé naše Funkce je volána s řetězcem, zjistíme, že je to délka a pak projít kolem toho v měřítku. Barva, vrátím že k ocelově modrá. A tam jdeme. Máme vizualizace z Crimson titulky. 

Naše měřítko je trochu mimo. Předpokládejme, že nejdelší titulek je dlouhý 100 znaků, tak, aby rozpětí se trochu. A máme vizualizaci. Takže se zdá, že většina titulky jsou dost blízko u sebe, co se týče charakteru linky. Ale jeden tam opravdu vyniká. 

Mohli bychom postavit některé nástroje prozkoumat, že více. Ale když jsem pracoval na to, byl jsem zvědaví, zda v tomto souboru dat, titulky s dvojtečkou v nich by být delší. I předpokládá, že ano. 

Takže pojďme zjistit. Pojďme používat barvy kanál, jako jsme to udělali předtím, zakódovat některé o tom, zda tam je dvojtečka, nebo ne. Takže budeme opět používat podmíněné. Nemusíte vědět podrobnosti o to, ale to je to, jak jsme se ověřit řetězec pro konkrétní znak v JavaScriptu, opět, není relevantní. 

Ale pokud se nám nepodaří najít tlustého střeva, vrátíme zeleně. A pokud ano, vrátíme červené. Takže znovu, titulky, že mají dvojtečka bude červeně. To je to, co to means-- pěkné. 

Takže se zdá, že můj hypotéza je narazil. Je tu jen dvě. Máme jen šest datových bodů a pouze dva měli dvojtečky. Ale zdá se, trochu víc na spodním konci, ve skutečnosti. Titulky s dvojtečkou se zdá obecně být kratší, alespoň v našich dat set-- zajímavé. 

Vraťme se, že pro ocelově modrá a pak uvidíte co můžeme udělat s ještě další zajímavé údaje. Takže znovu, jsem se zmínil, že Data v D3 je seznam věcí. Viděli jsme počty mnoha typů. Už jsme viděli řetězce. Ale věci mohou být i objekty. 

Mohou to být složité věci které obsahují spoustu věcí. Chcete říct, že jasněji, ve většině případů jsme Chcete stavět každý datový bod as mnohem složitější, než jen jednu hodnotu. Pokud byste si představit, databáze o studentech, tam by mohlo být studentem jméno, student ID, a spousta věcí spojené s konkrétní záznam, ne jen řetězec nebo číslo. Tak se pojďme podívat na to. 

To je jeden takový soubor údajů. To je datový soubor o zemětřesení. Takže vše je zde na našem seznamu nebo pole věcí, obsahuje mnoho věcí sám. Takže každý datový bod má velikost a koordinovat. A koordinuje se obsahují dvě věci. 

Takže každý den, je nyní mnohem více komplikované a mnohem zajímavější a obsahuje mnohem víc zajímavé informace. Pojďme se podívat, jsme mohli postavit z toho. Vracet se zpátky sem, opět s použitím Naše histogram kruh vizualizace jsme vybudovali, pojďme se podívat, jestli můžeme stavět vizualizace distribuce velikosti v našem souboru dat. 

Tak tady je to stejný koncept. Ale teď, d obsahuje více věcí. d obsahuje mnoho datových prvků. Tak jsme si d zpět. D3 nám dává d. A my odpovídáme tím, že najde velikosti o d a pak předá že v měřítku. 

A pak musíme změnit Naše měřítko, samozřejmě. Takže veličiny prostě ne jít mnohem víc než 10. Ve skutečnosti, tam nikdy nebyl 10 velikost zemětřesení. Ale to je trochu naše horní end, náš horní spektrum. 

Pojďme obnovit. Nice, máme vizualizaci. Je zajímavé note-- tak existují dva datové body, které jsou téměř přesně na sebe další, z hlediska velikosti. Vidíte to tím, neprůhlednosti jsme používáte. 

Máme geografických dat teď. Máme zeměpisné šířky a délky. Možná bychom mohli udělat něco mnohem zajímavější s tím. Pojďme si trochu více zajímavý způsob, jak představit to složitější Údaje, které mají přístup k. 

Zákon V, Mapping-- zásadně, Chceme, aby tyto na mapě. Myslím, že to je místo, kde se to děje. Chceme zakódovat informace o Postavení těchto zemětřesení čtení, jakož i jejich velikost, protože máme teď. Chápeme, jak spotřebovat složitější dat. 

První věc, kterou uděláme, je vytvořit mapu, mapu pozadí. Chystám se projít to velmi rychle. To je složité kód. Je to další z těch, recepty nemáte opravdu muset plně pochopit, pro vás k použití. Ale to je kód. Tento kód tady vytvoří mapu. 

Nebudeme chodit v detailu. Ale povrchně, co to dělá, je, dotáže tento soubor us.json, který je datový soubor, jako je ta, kterou jsme měli předtím. Je to složitější, samozřejmě. Ale v tomto případě vše, každý datový bod je tento stav a má seznam zeměpisné šířky a délky které definují polygon, že forma, že stát. 

Takže to, co D3 bude dělat, je obdobný k tomu, co jsme dělali předtím. To bude vyžadovat, aby i vážou, že na prvek. A je tu funkce, která bude mapovat tento prvek ven, na základě zeměpisných šířkách a délky. Můžete si přečíst více o tom. A já doporučuji. 

Tam jsou odkazy na Konec tohoto kódu nenapsal. A kód je komentoval. V tam jsou odkazy na další na to. Doporučuji vám to najít. Ale to, co nás zajímá, je tato projekce funkce. Chci jít přes to. 

Za prvé, dovolte mi ukázat vy, že ano, máme mapu. Mapy jsou v pohodě. Tak se pojďme podívat na to produkční funkce. 

Projekce je velmi jako měřítku, váhy znovu. Takže to, co výroba pro Tato funkce projekce to je, mohli bychom to projít délku a latitudes-- v tomto případě, tyto hodnoty jsou zde lat-touží budovy sedíme v právu now-- na projekci. A projekce převede že do hodnoty pixelů x a y. 

Takže to, co je projekce dělá je velmi podobná naší měřítku. Je to při našich zeměpisných šířkách a délka, která představuje celou zeměkouli a smršťování a velikosti, které dolů na náměstí, které chceme, že jsme ho dal. V tomto případě, my jsme předávání těchto hodnot. A to nám dává, dobře, že Na obrazovce znamená 640 pixelů. Celá tato obrazovka je 700 pixelů široký, takže z nás dělá asi tady, a 154 pixelů dolů, které bych odhad je skoro tady. 

Takže při těch lat-touží, což představují něco na celém světě a squishing a pohybující se, že kolem se nám hodnoty X a Y pixelů, To je první věc, která je provádí v této mapovací kód. A pak zbytek Kód spotřebovává data a pak mapuje ty lat-touží na něco, co na obrazovce. 

Ale budeme používat tuto projekci funkce, protože se ukáže, že máme lat-touží touží stejně. Při zpětném pohledu na našich dat, máme zeměpisné šířky a délky souřadnice pro každé pozorování. Takže pojďme použít projekci. 

Takže při pohledu na naší expozici, chceme naši exposition-- máme zeměpisné šířky a délky. Ale my chceme hodnoty obrazových bodů. A ukázalo se, máme přesně to, co jsme want-- projekci. Velmi podobně jako jsme byli pomocí stupnice tady, Nyní bude používat projekci a předat koordinuje. Takže první věc jsme doing-- tak jsme dostat d, což je individuální údaje prvek individuální zemětřesení čtení. První věc, kterou děláme je získat souřadnice. Dobře, máme souřadnice. 

Druhá věc, co děláme, je Onoho na projekci. Projekce převádí tyto souřadnice do hodnoty pixelů, x a y. A pak poslední věc, kterou bychom chci udělat, je dostat x, což v tomto případě je první z nich. Jedná se o první z těchto dvou věcí které jsou vráceny projekcí. 

Uděláme totéž pro y. Ale místo toho, vrátíme Druhý prvek, y. Připravte se na obnovit. Ooh, extra charakter here-- pěkné, máme Údaje řízený dokument, který je skrývání tento JSON soubor objektů, dělat mapy, a měnící se atribut ve vztahu k údajům promítat ji na mapě. To je opravdu zajímavé. To je v pohodě. 

Pojďme si to do zářezu. Myslím, že máme dva kusy informace s každým datového bodu. Myslím, tři. Máme souřadnice, což je x a y. A máme velikost. 

Musíme zakódovat velikosti nějak. Máme spoustu kanálů. Můžeme použít barvu. Můžeme použít poloměr. Mohli bychom použít krytí. Mohli bychom použít mnoho věcí v kódu. Některé z těchto atributů a mnoho více, že tam nejsou uvedeny, proto, že jsou povinné, mohli bychom používají pro zakódování tato data, mrtvice a všechny tyto věci, které jsem zmínil. 

Pojďme dělat poloměr. Myslím si, že poloměr je nejvíce intuitivní. Takže znovu, budeme nahrazovat, že pevně 40 a provést některé výpočty. Budeme znovu použít náš oblíbený měřítko. A my jsme v minulosti d. Ale ne d, protože chceme velikost D. d je jen datový bod. Budeme projít velikost měřítku. 

Zkusme to znovu. Ooh, to nefunguje. Proč to nefunguje? 

Takže pamatujte jakém rozsahu dělá. Pojďme se podívat na měřítku znovu. Měřítko mapy 1-10 na na 22 až 600, více nebo méně. 600 je obrovský. To je důvod, proč jsme stále to. 

Takže chceme změnit naše měřítko na něco rozumnější. Řekněme, že chceme 0-60. 60 je velký, ale 10 zemětřesení jsou neuvěřitelně vzácné. Ve skutečnosti, že jsem se nikdy nestalo. 

Takže to, co to bude dělat, je, bude to trvat Naše velikost, která jde od 1 do 10 a mapovat na rozbalte ho. A namapovat na 0-60. Pojďme obnovit. 

Nice, máme vizualizaci. To je skvělé. To je aktuální data. Určitě jste si všimli, v mém malém hračky příklad, největší zemětřesení je přímo nad námi. Ale to je všechno. Máme datum řízený vizualizace že spotřebovává data a nám dává opravdu zajímavé informace. Jo, pojďme přidat nějaký interaktivita na to. Zmínil jsem se, že to silná síla D3. 

Tak tady, pro každý prvek, jsme popisující spoustu atributů. Ale můžeme také popsat to, co chceme se stane s interaktivity prvky. Například bychom mohli popsat co se stane, když myši. A velmi podobné, že, která bude mít funkci, velmi podobný atributy jsme měli předtím, kde jsme se udělat něco pro prvek, když jsme se vznášet se nad ním. 

Takže první věc, kterou musíme udělat, je vybrat tento prvek, jej najít v podstatě, v prohlížeči. a pak bychom mohli nastavit atribut na to. Takže to, co tady dělám, je, když jsme se vznášet nad něčím, dostaneme tento prvek a pak nastavit jeho průhlednost zpět 1, zcela neprůhledný. Pojďme se podívat, jak to vypadá. 

Zdá se, že máme navíc středník zde. Takže pokud bychom tady vznášet, dostane plný. Ale teď, samozřejmě, to pobyty plné, protože my musí popsat, co se děje Při odebrání naši kurzor. Tak pojďme udělat přesně to, na mouseOut, na rozdíl od mouseover. 

A budeme resetovat do to, co jsme měli before-- 0,5. A teď, pokaždé, když jsme vznášet se, dostaneme kruh. Pomáhá nám vidět, co máme jsme výběr v podstatě. 

A teď pojďme, aby to opravdu skvělé. Pojďme se připojit to na reálná data. Takže pojďme zeptat mohl USGS o jejich data. Takže US Geological Survey má k dispozici údaje o zemětřesení. Mají veřejné API, který je schopen být konzumován ve formátu JSON. Tak pojďme to udělat. 

Tak tohle je trochu kódu, který se připojí k USGS API. A je tu trochu zpracování na to. To není podstatné, ale zjednodušuje ji na jednoduchý formát dat, jako je ta jsme měli předtím. Tak jsem se zbavit naši výzvu k náš falešný data.json na soubor. A místo toho, volám USGS v podstatě. 

Pojďme obnovit, pěkné. To je skutečné, real-life dat od tohoto týdne k zemětřesení. To je opravdu zajímavé. To není překvapující pro nás, ale tam jsou hodně zemětřesení na West Coast v Kalifornii. Ale myslel jsem, že je to velmi zajímavé že tam bylo tolik zemětřesení na Aljašce, a zdá se, tady na Středozápadě. Myslím, zajímavý, a jsme dobří. To je závěr. 

Ale v podstatě to je to, co D3 nám pomáhá dělat. Pomáhá nám trvat dat, bind to prvků v DOM, a mají tyto prvky změnit jako funkce těchto údajů, mít ty atributy, jsou všechny mnoho atributů prvků, všechny užitečné pro kanály zprostředkovat informace. 

D3 je neuvěřitelně silný knihovna a překvapivě dobře spustit. To je nějaká silná věc. Vizualizace dat je neuvěřitelně mocný nástroj pro dopravu osob na hluboké postřehy, že dojde k jejich jádru a pomáhá jim porozumět, v Tento hluboký a intuitivní způsob, jak funguje dat a jak Údaje změní náš život.