[Tónlist spila] 

DAVID CHOUINARD: Ég er David Chouinard, og þetta er D3. Velkomin. Við erum að fara að læra um D3 dag. D3 er JavaScript ramma til að byggja upp hágæða gagnvirkt visualizations fyrir vefinn. Hluti eins hvað við erum að sjá í bak mér, við erum að fara að læra að gera þá hlutir, eins konar grunnatriði það. En það er að fara að vera kaldur. Við skulum byrja gera nokkuð myndir. Við höfum fengið fleiri demo horfur í boði. Við skulum gera það. 

Lög I, DOM manipulation-- við erum að fara að byrja strax að gera flott hluti. Fyrst af öllu, á vinstri, við höfum kóða. Á hægri, höfum við afleiðing af kóða. Förum í gegnum það. 

Við skulum gera hring. Hvernig virkar þessi hljóð? svg.append circle-- við gert bara hring. Þú trúir mér ekki, ekki satt? Það er ekki þar. 

Svo það sem við gerðum hérna er, SVG er stigstærð grafík vektor. Þetta er leiðin sem við segja að vafrinn gera vektor grafík í vafranum. Það sem við gerðum bara núna er bætt hring til að fletta. 

Loforðið er að hring þarf smá undirstöðu eiginleika áður en við getum í raun séð það. Við þurfum að segja það x stöðu sína, Y stöðu hennar, radíus hennar. Við vildum ekki segja það eitthvað af því, þannig að við erum ekki að sjá það núna. En við skulum segja það efni. 

Svo fyrst af öllu, hefur þú fengið að gefa hring okkar nafn. Svo við skulum kalla það hring. Hring okkar hefur nafn núna. Og við skulum gefa það nokkrar eiginleika. Hvernig væri CX myndi miðju x, svo miðju x stöðu. Segjum, 200 fyrir 200 dílar. 

Við skulum gefa það a y 200 dílar eins og heilbrigður. Og R, A radíus, af um 40 punktar. Nú skulum sjá. Ég get ekki stafsetningu. 

There þú fara. Við höfum hring á stöðu 200 dílar, 200 dílar, radíus 40 punkta. Góður af kaldur, ekki satt? Við höfum hring. Já. 

Þannig að ekki þarf að fylgja með. Öll þessi dæmi, allt frá kóðinn ég er að gera í dag verða veittar á netinu í lok í formi gagnvirkum dæmum með checkpoints á hvert athöfn, og svo framvegis. 

Við skulum gera meira efni. Þetta svarta hring er virkilega ljót. Ég er því miður fyrir þá villu skilaboð þarna. Það sem við förum. 

Við skulum gefa það a litinn. Hvernig er það? Mér finnst gott að stál blár. Jæja, hring okkar breytt lit. Það er frábært. Við skulum gera það hálf-transparent too-- hálf-transparent. 

Svo þetta eru eiginleikar við erum að skilgreina á hring. The fyrstur hlutur sem við gerðum er við að setja hring á síðunni. Og þá erum við að skilgreina fullt af eiginleikum. Sumir þeirra eru nauðsynleg, eins CX, Cy, og radíus. Og aðrir eru valfrjáls. 

There ert a einhver fjöldi fleiri eiginleika. There er a einhver fjöldi af þeim. Til dæmis gætum við hafa a heilablóðfall eins og heilbrigður, heilablóðfall af rauðu. En við skulum fjarlægja það. Við erum aftur í hring, bláum hring. 

Svo skulum gera fleiri hringi. Hvernig er það? Við skulum gera annað hring. Þetta er spennandi, ekki satt? 

Svo segi ég bara Afritaðu Límt hvað við höfðum þegar. Við skulum kalla það circle2. Og við skulum gera nákvæmlega sama og gefa það eiginleika, gefinn x stöðu 300. Yay, höfum við tvær hringi núna. 

Og auðvitað, við gátum uppfæra þessi gildi. Ég gæti sett það á 400, og nú flytur það. Og þar sem það er pirrandi, við skulum fjarlægja það, svo circle2.remove. Það er farið núna. 

Svo það sem við erum að gera og er bara mjög, very-- þetta er mjög svipað því sem þú gæti gert í jQuery, til dæmis. Við erum bara að notfæra DOM, það er kallað. Þú gætir hafa heyrt þessi orð áður. Við erum að búa til efni, setja eiginleika á efni, fjarlægja efni. 

Nú, hér er þar sem það fær áhugavert. Svo seinna í kóðanum, við gátum samt vísa til upprunalegu hring hér. Svo skulum endurstilla eigindi þess að CX. Segjum, x stöðu til þess að 400. Og ég ætla að umskipti að, svo það er augljóst. Það sem við förum. 

Þannig að við bætt hring. Við settum nokkrar eiginleika. Við bætt öðru hring, fjarri því. Og þá erum við að breyta upprunalega hring. 

En hér er þar sem það fær a einhver fjöldi fleiri áhugaverður. Ekki aðeins er hægt að stilla eiginleika sem bara gildi, getum við sagt, hey, hring, fara í stöðu 200. Við getum einnig sett þá eins virka. 

Svo í stað þess að gefa 400 hér, við getum gert nokkrar útreikninga á flugu fyrir það sem við vilja að eigindi til að vera. Svo er þetta hvernig þú vilt tjá það. Við segjum, í stað þess að 400, láttu mig gefa þér virka í staðinn. Og hér, í þessari aðgerð, við getum gert neinar brjálaður útreikninga. 

Við gætum tekið tíma og líta á sumir annar hlutur og virk ákveða hringurinn hvaða gildi við viljum. Hvernig væri að við gefum bara það handahófi x stöðu? Svo er það það. 

Svo hvað það segir er, fyrir fresti x, hlaupa þessa aðgerð. Og hvað við erum að gera er að reikna sumt af handahófi sinnum breidd og aftur það. Svo í hvert skipti sem við hlaupum að við fáum a hring sem fer til handahófi stað. Það er góður af kaldur. Mér finnst eins og ég gat að líta á þetta fyrir lítið. Við erum farin að fá að eitthvað áhugavert hér. Við skulum gera þessi gögn ekið núna. Það er engin gögn hér. Við skulum breyta því. 

Lög II, Data Vindskafinn skjölum Svo skulum fara aftur til hér. Og við skulum bara fá losa af circle2, vegna þess að við erum bara að bæta við og fjarlægja það. Svo við gerum ekki raunverulega þörf það. Við þurfum að vera a einhver fjöldi fleiri snjall hér. Við skulum segja, að við höfum sumir gögn af einhverju tagi. Einn moment-- skulum segja, við höfðum gögn af þessu formi. Við fengum array, bara fullt af tölum. Við höfum sjö tölur hér, hvað þessir represent-- upphæð á bankareikning fólks, hvernig mikið þeir vega, guð veit hvað. 

Þetta eru tölur, og við vilt nota hringina okkar að tákna þær tölur einhvern veginn. Við viljum að binda okkur hringi í þær tölur. Svo það sem við gerum. Við skulum segja, við viljum a hring fyrir hvert númer. Við gætum gert gamla sem við vorum doing-- hring Append og circle2 og circle3. En þetta fær úr hendi, og það er mikið að endurtaka rökfræði. 

Svo skulum við fá meira snjall með það. Í stað þess að nota VAR-hring svg.append að við vorum bara að nota, við erum að fara að nota þetta litla blokk hér. Ég vil ekki að fara í-dýpt í það Allir þessir hlutir gera. Og það er góður af háþróuðum efni. Og ég vildi að ég gæti. 

En lykillinn hlutur til recognize-- og þú munt sjá er mjög oft í D3 kóða. Þessi texti undirstöðu skapar eins marga hringi þar sem það eru gögn þættir í þessu fylki hérna. Svo skapar þetta eins og margir hringi og það eru þættir. Það er að fara að búa okkur sjö hringi. Og það er mjög, mjög lykill hlutur. Svo skulum hlaupa að. Við skulum fjarlægja önnur hring okkar. Við skulum tjá bara þetta skilja út og hlaupa þetta aftur. 

Það sem við förum. Svo er hring okkar hér a mikið dekkri, vegna þess að við hafa sjö hringi, einn ofan á öðrum. Við bjuggum bara sjö hringi, einn hvor fyrir hvert þessara gagna þætti. En það er lykillinn hlutur sem gerðist með þessari runu hérna. 

Það er að gögn var bundinn. Svo hvert einasta einn af Þau gögn þætti, 10, 45, 105, var bundin við ákveðna hring. Svo þetta er ekki aðeins búið fullt af hringjum en bindur þessir tveir hlutir saman. 

Og í framtíðinni, vegna þess að við bjuggum hringimir með þessa D3 virka, ef ég gef þér hring, þú getur gefa mér gögn sem tengjast við það. Þannig að við getum beðið D3. Hey, D3, ég hef þessa hring. Hvað er gögn sem hringurinn hefur? Og D3 myndi segja okkur 10 eða 45 eða 105. 

Þessir hlutir eru bundnir. Það er mjög, mjög grundvallaratriði hugtak. Við skulum líta á það. 

Svo hvernig við myndum spyrja D3-- svo þetta er óviðeigandi fyrir þetta, en bara treysta mér í það. Þetta er hvernig við biðjum D3. Hey, D3, gefa mér fyrsta hring sem þú getur fundið. Gefðu mér fyrsta hring sem þú getur fundið. Og þá gátum spurt D3, hvað er gögnin um það, eins og þetta, 10. 

Þannig að við biðjum bara D3, finna mig fyrsta hring sem þú getur fundið. Hvað er gögn þess? 10, sem er örugglega Okkar Fyrsta þáttur upplýsinganna. Við gætum spurt hana, hey, D3, finna okkur þriðja hring okkar. 105. Hvers vegna er þetta mjög mikilvægt? 

Svo hérna, ég nefndi við gætum notað aðgerðir. Og ég nefndi að það var mjög öflugur hlutur. Svo ekki bara getur virka okkar gera hlutina eins og gera sumir útreikningur, til dæmis, skila slembitölu, það getur einnig gera hlutina byggt á gögnum. Þetta er það sem gögn ekið skjöl meina. Það er það sem D3 stendur fyrir. 

Þannig að þetta x postition-- stað af bara að segja, alla hringi, fá x stöðu 200, við gæti gefið það virka. Og hér getum við gert nokkrar útreikninga. og d stendur hér í stað fyrir gögn. Svo í hvert skipti sem við höfum hring, í grundvallaratriðum, D3 mun skapa þessar sjö hringi. Og þá fyrir hvert 

hring, það er að fara að fara, hey, circle1 hvað er x stöðu þína. Áður vorum við alltaf svara 200. En nú, í hvert skipti D3 spyr okkur hvað er x stöðu þína, það er að fara að gefa us-- við höfum sem hring, þannig að við höfum gögn. Það er að fara að gefa okkur gögn og segja, hvað þú vilt að greinargerð að vera, byggt á þeim gögnum. 

Við skulum fara aftur bara raunveruleg gögn. Þannig að ef við hlaupa þetta, þetta gefur US gögn ekið skjöl. Þessar hringi eru byggðar , í tengslum position-- þeir eru bækistöðvar sem fall af gögnum. 

Svo í fyrsta hring, D3 leggur hring. Og þá D3 spyr okkur, hvað gera þú vilt að greinargerð til að vera. Og við segjum bara, hvað sem gögn er. Gerðu greinargerð 10. 

Þá spyr það, hvað þú vilt að Greinargerð til að vera í annað hring. Og við að svara, 45. Og við, auðvitað, getur gera sumir útreikningur hér. Mér finnst að þeim hringjum eru eins konar varla snúið upp. 

Svo margfalda það með 3, margfalda gögn um 3. Hring okkar bara stækkað út. Gildi okkar var þrefaldast. 

Hringurinn er í raun á jaðri, þannig að við skulum kannski konar móti henni. Við skulum segja, um 20. Hér þú fara. 

Þetta er gögn visualization. Það er mjög einfalt einn, en þetta gefur okkur innsýn inn gögn okkar. Það segir okkur að, til dæmis, við hafa smá safn af þáttum. Og við höfum stóra outlier hér. Þetta gefur okkur einhverjar upplýsingar um dreifingu. 

Ef við vorum, til dæmis, til að breyta gögn til 150 hér og hressa, visualization okkar er breytt. Þetta skjal er gögn rekinn. 

Svo auðvitað öll þessi atriði, allar þessar eiginleika hér, við getum notað virka, ekki bara tölurnar, ekki bara x og y stöðu. Svo við getum notað aðgerð fyrir litinn. Þannig að við munum gera það sama. Við munum gefa það aðgerð. 

Og við skulum segja, að við gætum haft conditionals í virka okkar. Þessi aðgerð getur verið hundrað línur á lengd. Það getur gert mjög, mjög flókið hluti. 

Svo skulum binda ef yfirlýsingu hér. Við skulum segja, ef gögn okkar er minna en 50, það er sumir þröskuldur að við erum áhuga í fyrir sumir ástæða. Við skulum gera það grænt. Annars, við skulum gera það rautt. Hvernig er það? Nice. 

Svo gögn visualization okkar er að byrja að flytja fleiri áhugaverðar upplýsingar á mörgum rásum. Svo nú vitum við svolítið um dreifingu. Og við vitum að það er einhvers konar skera burt á 50 að við erum áhuga á. Við vitum að það eru tveir gagnapunktar undir því þröskuld og flestir hér að framan. 

Svo sem lokaskref, þessi gögn hér, það er mjög sjaldgæft að sjá þetta svona. Svo skulum fara bara það út breytu því það er hreinni, eins og þetta. Og þá erum við að nota þá breytu hér. Það er nákvæmlega það sama. Það er bara svolítið hreinni. 

Next upp lög III, Scales-- Svo eitt vandamál rétt hér er, ef við breyta okkar gögn í þessu 200 value-- ef við breyta því að 400 eða eitthvað og hressa, þá er þetta gildi bara fór offscreen. Svo rökfræði okkar hérna um hvernig við tímum 3 og 20, til að breiða það út og þá móti það svolítið er mjög clunky. 

Hvað gera þær tölur þýða? Þeir eru bara erfitt dulmáli þar. Og þeir eru mjög mikið bundinn við gögn. Við viljum gögn ekið skjal. Við viljum mjög sveigjanlegur skjal, að gefin gögn, lagar sig að henni og táknar það. 

Það sem við þurfum í rauninni er, við hafa þetta úrval af tölum 10. 45, 105. Og við viljum að kortleggja það út á breidd, fullt breidd hér. Þannig að við höfum úrval af tölur fara frá 0 til 100. Og við höfum þetta háskólasvæðinu I fer 20-700, í þessu tilfelli. 

Við viljum konar að kortleggja það á. Við viljum að skala það upp og þá á móti henni svolítið. Það kemur í ljós að D3 hefur þessi. Það er kallað mælikvarða. Svo skulum við nota það. 

Leiðin sem works-- ég ætla að skrifar þetta upp og þá útskýra það. Þetta er mælikvarði. Hvað það mun gera er, það mun kortleggja gildi frá 1 til 200 um til 20 í 600. Við getum athugað það. Við sjáum að hér. 

Svo ef ég fæða það 1-- eitt augnablik. Gefðu mér eina sekúndu. Ég hlýt að hafa slegið hana. There þú fara. Ég er hryggur óður í þessi. 

Svo hvað mælikvarða mun gera er, það mun taka gildi og þá umbreyta það, auka það út, svo það fyllir alhliða þú ert að biðja um. Þannig að í þessu tilfelli, ef við gefum það einn, það er að fara að kortleggja það út á 20. Og ef við gefum það 200, það er fara að kortleggja það á 600. Og einhvers staðar á milli, ef við fáum 100, það er að fara að vera einhvers staðar í á milli 20 og 600. 

Og auðvitað, nú er þetta hvað við þurfum að fjarlægja þá harður á dulmáli hlutir sem við höfum hérna. Svo það sem við viljum gera er taka gögn sem við erum gefið, að einstaklingur gögn þáttur, og gefa það til skala fyrst. Svo mælikvarða mun hækka það upp. 

Well-- Oh, höfum við smá villa hér. Við erum vantar gögn. There þú fara. Og það stækkar það út. 

Það gefur okkur sömu Niðurstaðan sem við höfðum áður, en í stað þess að hafa þá harður dulmáli þvingun. Og ef stærð af okkar striga breytingar, til dæmis, ef við viljum hafa þetta aftur 400 pixlar og það squishes út, við getum haft það over-- við getum aukið það, eða við getur dregið þessa vinstri framlegð eitthvað minna eða meira en 20. Þessar tölur, þessar erfitt dulmáli tölur gera nú vit fyrir okkur. 

Og við gætum gert miklu meira áhugavert eins og heilbrigður. Svo í stað þess að hafa línulegan mælikvarða, gætum við viljum að skrá þig mælikvarða. Og það mun gefa okkur log skala. 

Svo nú mælikvarða okkar, í stað þess að bara vaxandi út fyrir þau mörk, það er að gera flóknari hluti. Í stað þess að hafa þetta svið erfitt dulmáli, og í stað þess að þurfa að 600, við gætum vilt bara nota breidd, svo frá 20 til breidd mínus 40, 2 sinnum framlegð á hinni hliðinni. Og þetta gerir miklu meira vit í að einhver sem gæti líta á kóðann. 

Athyglisvert fá vog mjög, mjög háþróuð eins og heilbrigður. Þeir gera a einhver fjöldi af áhugaverðum hlutum. Svo vog ekki endilega að ganga bara með tölum. Við skulum gera lit mælikvarða. 

Svo allt okkar gæti be-- ríki okkar er 1 til 200. Það er inntak hlutur. En við might vilja til að kortleggja frá grænt rautt, til dæmis. Og nú, ef við gefa það 1, við erum að fara að fá grænt. Ef við gefum henni 200, munum við fá rautt. Og ef við framhjá það eitthvað á milli, það er að fara að vera einhvers blanda af því, einhvers staðar á halla milli grænu og rauðu. 

Og í stað þess að þurfa af þessu tagi clunky rökfræði við höfum hér með skilyrt rétt þar, við gætum haft something-- a línuleg mælikvarða milli þeirra. Þannig að við myndum nota mælikvarða við bara búin, sem við kölluð litur. Og við myndum gefa það d, sem gögn þáttur okkar. Og þar sem við förum. Við höfum lit mælikvarða. 

Þannig að þetta er kortlagning. Svo lengst til vinstri er alveg grænn. Lengst til hægri er alveg rauður. Og allt þar á milli er fall af d. Við höfum áhugaverð visualizations hér. En gögn okkar var voða leiðinlegt. Við skulum sjá hvað við gætum gert ef við höfðum meira áhugavert gögn. 

Lög IV, vinna með Data-- fyrsta hlutur við munum vilja til gera til að gera okkar visualization meira áhugavert er að færa gögn annars staðar. Það er mjög clunky að hafa gögnin harður á dulmáli hér. Og almennt, munum við vera að spyrja einhver annar fyrir gögn. Við munum vera kannski að spyrja stjórnvöld, Census Bureau, hvað er gögn og þá ætlar það eða spyrja sumir þriðja aðila aðili fyrir sumum gögnum og síðan að byggja a visualization á það. 

Svo það fyrsta sem við viljum gera er að færa það til annars staðar. Þannig að ég ætla að búa til a skrá hér kallast data.json. JSON er gögn snið. Þú þarft ekki að vita mikið um það. Og við erum að fara að afrita litla gögn sem við höfum þarna, líma það þar orðrétt, fara aftur til visualization númerið okkar hér, og nota þessa aðgerð hérna. Þú þarft ekki að vita upplýsingar. En hvað þetta mun gera er, það verður að finna þessa skrá, sækja það, og aftur það til okkar. Svo hvað þetta gerir er, það fer og fá data.json skrá. Og þá er allt kóðinn inndregin inside-- meginatriðum, allt kóðinn við höfum there-- mun hlaupa aðeins þegar við fáum gögnin aftur. Og þá er það að fara að keyra að númer með þau gögn sem við höfum. Great, höfum við visualization sem fyrirspurnir um nokkurt kóða einhversstaðar annars, sem er venjulega þar sem það spyrst einhverjum gögnum frá annars staðar, sem er venjulega hvernig visualizations vinna. 

En ég vil fara aftur að gögnum. Svo gögnin grundvallaratriðum í D3-- D3 eyðir gögn sem er listi af hlutum. D3 ráð gögn bara að vera listi af hlutum, fylki af hlutum. Það skiptir ekki máli hvað þessir hlutir eru, svo lengi sem það er fylki af þeim. 

Svo hér, til dæmis gætum við af Auðvitað hafa fleytitölum. Við gætum hafa neikvæður. D3 er ekki sama, svo lengi eins og það er a listi af hlutur. 

Eins áhugavert sem við gæti hafa, gætum við einnig hafa a listi af strengi eins og þessi. Svo þetta eru Crimson fyrirsagnir Ég tók upp fyrir nokkrum dögum. Og kannski þú getur fundið nokkrar áhugaverðar atriði um þessi a fyrirsagnir. 

Svo aftur, þetta er listi af hlutum. D3 er ekki sama. Þetta verður að vera a band. Við höfum breytt gögn okkar. 

Við skulum fara aftur til visualization okkar. Nú, visualization okkar gerir ráð fyrir inntak að vera tölur. Þannig að við erum að fara að hafa að gera nokkrar breytingar. Svo til dæmis, fyrst af öllu, kannski við viljum setja þessa hringi eftir af lengd fyrirsögn, sem Fjöldi stafa í fyrirsögn. 

Svo það sem við munum gera is-- hvert skipti okkar virka er kallað með a band, við munum finna það lengd og þá fara að skalinn. Liturinn, ég aftur að til þess að stál blár. Og þar sem við förum. Við höfum grafíska af Crimson fyrirsagnir. 

Mælikvarða okkar er svolítið burt. Við skulum gera ráð fyrir að lengsta Fyrirsögn er 100 stafir að lengd, svo haf að út a hluti. Og við höfum visualization. Svo virðist sem flestir fyrirsagnir eru nokkuð þétt saman, hvað varðar eðli línu. En eitt það raunverulega stendur upp úr. 

Við gætum byggja verkfæri að kanna það meira. En þegar ég var að vinna á þessu, ég var forvitinn hvort í þessum gögnum, fyrirsagnir með tvípunkti í þeim væri lengur. Ég er gert ráð fyrir að þeir myndu. 

Svo skulum finna út. Við skulum nota lit rás eins og við gerðum áður, að umrita sumir um hvort það er ristill eða ekki. Þannig að við munum nota skilyrt aftur. Þú þarft ekki að vita upplýsingar um þetta, en þetta er hvernig við athuga a band fyrir tiltekna persónu JavaScript, aftur, ekki við. 

En ef við finn ekki ristli, munum við aftur grænn. Og ef við gerum, munum við aftur rautt. Svo aftur, fyrirsagnir sem hafa a ristill verður rautt. Þetta er það sem þetta means-- gott. 

Svo virðist sem minn tilgáta er höggdeyfir. Það er aðeins tvær. Við höfum aðeins sex gagnapunkta og aðeins tveir voru ristill. En það virðist svolítið meira á neðri enda, í raun. Fyrirsagnir með tvípunkti virðast að almennt vera styttri, að minnsta kosti í gögnum okkar set-- áhugavert. 

Við skulum fara aftur að til stál blár og þá sjá hvað við getum gert með jafnvel meira áhugaverðar upplýsingar. Svo aftur, ég nefndi að gögn í D3 er listi af hlutum. Við höfum séð fjölda mörgum gerðum. Við höfum séð strengi. En það getur líka verið hluti. 

Þeir geta verið flóknar hlutir sem fela í sér mikið af hlutum. Að segja að betur, í flestum tilfellum, við vilja til að byggja hvert gögn benda eins flóknari en bara eitt gildi. Ef þú vilt ímynda sér gagnagrunnur um nemendur, það gæti verið nemandi nafn, nemandi ID, og a einhver fjöldi af hlutur sem tengist með sérstakri skrá, ekki bara band eða tala. Svo skulum líta á það. 

Þetta er eitt slíkt gögnum. Þetta er gögnum um jarðskjálfta. Svo allt hér á listanum okkar eða array af hlutum inniheldur margt sig. Svo hefur hvert gagnapunktur a Umfang og samræma. Og hnit sig innihalda tvennt. 

Svo er nú mikið meira á hverjum degi flókið og margt fleira áhugavert og inniheldur margt fleira áhugaverðar upplýsingar. Við skulum sjá að við gætum byggja út úr því. Reglulegur aftur hingað, aftur, með því að nota súlurit hring okkar visualization við höfum byggt, við skulum sjá hvort við getum byggt a visualization af stærðargráðu dreifingu í gögnum okkar. 

Svo hér er það sama hugtak. En nú, d inniheldur fleiri hlutum. d inniheldur mörg gögn þætti. Þannig að við fá d aftur. D3 gefur okkur d. Og við bregðast með því að finna stærð af d og þá liggur það í mælikvarða. 

Og þá þurfum við að breyta mælikvarða okkar, auðvitað. Svo magnitudes gera einfaldlega ekki fara miklu meira en 10. Raunverulega, there er aldrei verið 10 stærð jarðskjálfta. En það er góður af efri okkar enda, efri litróf okkar. 

Við skulum hressa. Nice, höfum við visualization. Það er áhugavert að note-- svo það eru tveir gagnapunktar sem eru næstum nákvæmlega ofan á hvern Annað, hvað varðar stærðargráðu. Þú sérð þetta með ógagnsæi við erum að nota. 

Við höfum landfræðileg gögn núna. Við höfum breiddargráðum og lengdargráðu. Kannski við gætum gert eitthvað mikið meira áhugavert með það. Við skulum finna meira áhugaverð leið til að sjón þetta flóknara gögn sem við höfum aðgang að. 

Lög V, Mapping-- grundvallaratriðum, við viljum að setja þetta á korti. Ég meina, þetta er þar sem þetta er að fara. Við viljum að umrita upplýsingar um staða þessara jarðskjálfta lestur, auk stærð þeirra, vegna þess að við höfum það núna. Við skiljum hvernig neyta flóknari gögn. 

The fyrstur hlutur sem við munum gera er búa til kort, bakgrunnur kort. Ég ætla að fara í gegnum þetta mjög fljótt. Þetta er erfiður númer. Það er annar einn af þeim uppskriftir sem þú í raun ekki verða að skilja að fullu fyrir þig að nota. En þetta er númer. Þessi kóði skapar hérna kort. 

Við erum ekki að fara að fara í smáatriðum. En á yfirborðinu, hvað það gerir er, það spyrst þetta us.json skrá sem er a gögn skrá eins sá sem við höfðum áður. Það er flóknara, auðvitað. En í þessu tilfelli, allt, hvert gögn benda er þetta ástand og hefur a listi af breiddargráðum og lengdargráðu að skilgreina marghyrning að formi, sem ríkið. 

Svo hvað D3 mun gera er svipað að það sem við gerðum áður. Það mun óska ​​eftir því og binda það í frumefni. Og það er fall sem mun kortleggja þessi þáttur út, byggt á breiddargráðum og lengdargráðu. Þú getur lesið meira um það. Og ég mæli með því. 

Það eru tenglar á að lok þessa kóða staða. Og kóðinn er athugasemd. Þar eru tenglar fyrir frekari á þetta. Ég mæli með að þú lítur hann upp. En það sem við þykir vænt um er þessi spá virka. Ég vil fara í gegnum það. 

Fyrst af öllu, láta mig sýna þú að, ​​já, við höfum kort. Kortin eru flott. Svo skulum líta á þetta framleiðslu virka. 

Vörpun er mjög mikið eins mælikvarða, vog aftur. Svo hvaða framleiðsla fyrir þessi spá virka gerir er, gætum við framhjá henni lengdargráðu og latitudes-- í þessu tilfelli, þessi gildi hér eru Lat-þráir hússins við erum að sitja í hægri now-- til framreiknings. Og vörpun mun umbreyta að í x og y dílum. 

Svo hvað vörpun er að gera er mjög svipuð mælikvarða okkar. Það tekur breiddargráðum okkar og lengdargráðu sem táknar allan heiminn og minnkandi og límvatn sem niður á torginu sem við viljum, að við höfum gefið henni. Í þessu tilfelli erum við liggur þessi gildi. Og það er að gefa okkur og vel, það á skjánum þýðir 640 dílar. Þetta allt skjár er 700 punktar breiður, svo sem gerir okkur um hér, og 154 punktar niður, sem ég vildi áætlun er ansi mikið hérna. 

Svo taka þau Lat-Longs, sem tákna eitthvað á allan heiminn og squishing og færa það í kring að gefa okkur x og y dílum, þetta er það fyrsta sem er gert í þessu kortlagning kóða. Og þá restin af númer eyðir gögn og þá kort þá Lat-Longs á eitthvað á skjánum. 

En við erum að fara að nota þessa vörpun virka, vegna þess að það kemur í ljós við höfum Lat-Longs þráir eins og heilbrigður. Útlit bak á gögn okkar höfum við breiddargráðum og lengdargráðu hnit fyrir hvert athugun. Svo skulum við nota vörpun. 

Svo horfa á greinargerð okkar, við viljum exposition-- okkar við höfum breiddar og lengdargráðu. En við viljum dílum. Og það kemur í ljós, við höfum nákvæmlega hvað við want-- vörpun. Mjög mikið eins og við værum með kvarða hérna, við erum nú að fara að nota vörpun og gefa það hnit. Svo það fyrsta sem við erum doing-- þannig að við erum fá d, sem er einstaklingur gögn þáttur í einstaka jarðskjálfta lestur. The fyrstur hlutur sem við gerum er að finna hnit. Allt í lagi, við höfum hnit. 

The second hlutur sem við gerum er fara að á til framreiknings. Projection breytir þeim hnit í dílum, x og y. Og þá síðasta sem við langar að gera er bara að fá x, sem þetta mál er sá fyrsti. Það er fyrsta af tveimur hlutum sem skilað er af vörpun. 

Við munum gera það sama fyrir y. En í staðinn munum við aftur annar þáttur, y. Fá tilbúinn til að hressa. Ooh, auka karakter here-- gott, höfum við gögn ekið skjal sem er leyna þessa JSON skrá af hlutum, gera kort, og breytast í eiginleiki í tengslum við gögnum að verkefni það á korti. Þetta er mjög áhugavert. Þetta er flott. 

Við skulum taka það upp hak. Ég meina, við höfum tvo stykki af upplýsingar með hverjum gögn benda. Ég meina, þrír. Við höfum hnit, sem er x og y. Og við höfum stærðargráðu. 

Við þurfum að umrita stærðargráðu einhvern veginn. Við höfum mikið af rásum. Við getum notað litinn. Við getum notað radíus. Við gætum notað ógagnsæi. Við gætum notað margt í kóða. Allir þessir eiginleikar og margir meira sem ekki eru skráð þar, því þeir eru valfrjáls, við gátum nota til að umrita þessi gögn, slaglengd og allt þetta sem ég hef nefnt. 

Við skulum gera radíus. Ég held radíus er mest leiðandi. Svo aftur, munum við skipta að harður-dulmáli 40 og gera sumir útreikninga. Við munum nota uppáhalds mælikvarða okkar aftur. Og við erum framhjá d. En ekki d vegna þess að við viljum að stærð af d. d er bara gagnapunktur. Við munum fara umfang skala. 

Við skulum reyna aftur. Ooh, það virkar ekki. Hvers vegna er það ekki? 

Svo muna hvað mælikvarði gerir. Við skulum líta á mælikvarða aftur. Scale kort frá 1 til 10 á til 22-600, meira eða minna. 600 er mikil. Þetta er ástæða þess að við erum að fá þetta. 

Þannig að við viljum breyta mælikvarða okkar að eitthvað meira sanngjarnt. Við skulum segja, við viljum 0-60. 60 er stórt en 10 jarðskjálftar eru ótrúlega sjaldgæf. Í raun, þeir aldrei gerst. 

Svo hvað þetta mun gera er, verður það að taka Umfang okkar sem fer frá 1 til 10 og kortleggja það á að auka það út. Og kortleggja það á 0 til 60. Við skulum hressa. 

Nice, höfum við visualization. Þetta er frábært. Þetta er raun gögn. Þú munt taka eftir, í smá leikfangið mitt dæmi, stærsta jarðskjálfta er rétt ofan á okkur. En það er það. Við höfum dagsetningu ekið visualization sem eyðir gögnum og gefur okkur í raun áhugaverðar upplýsingar. Já, við skulum bæta nokkrum gagnvirkni við það. Ég nefndi það var sterka gildi D3. 

Svo hér, fyrir hvert frumefni, erum við lýsa fullt af eiginleikum. En við getum líka lýsa það sem við viljum að gerast með gagnvirkni þætti. Til dæmis má lýsa hvað gerist þegar við mús yfir. Og mjög svipuð að sem mun taka virka, mjög svipað eiginleika sem við höfðum áður, þar sem við gerum eitthvað við þáttur þegar við sveima yfir það. 

Svo fyrsta sem við þurfum að gera er að velja að sá hluti, að finna það í grundvallaratriðum, í vafranum. og þá gátum við sett eiginleiki til þess. Svo það sem ég er að gera hér er, þegar við sveima yfir eitthvað, munum við fá að sá hluti og þá setja ógagnsæi sína aftur til 1, til fullkomlega ógagnsæ. Við skulum sjá hvað það lítur út. 

Það virðist sem við höfum að auka semíkommu hér. Svo ef við sveima hérna, fær það fullt. En nú, auðvitað, það dvöl fullt, vegna þess að við að lýsa því sem gerist þegar fjarlægja bendilinn okkar. Svo skulum gera einmitt það á mouseout, öfugt við myndastækkun. 

Og við munum endurstilla það til það sem við þurftum before-- 0.5. Og nú, í hvert skipti sem við sveima, fáum við heilan hring. Það hjálpar okkur að sjá hvað við við erum að velja í raun. 

Og nú skulum gera þetta mjög mikill. Við skulum tengja þetta alvöru gögnum. Svo skulum spyrja gat USGS um gögn þeirra. Svo US Geological Survey hefur gögn um jarðskjálfta. Þeir hafa opinber API sem er fær að vera neytt í JSON sniði. Svo skulum gera það. 

Þannig að þetta er hluti af kóða sem tengist USGS API. Og það er hluti af vinnslu á það. Þetta er ekki viðeigandi, en einfaldar það að einfalda gögn snið eins og einn við höfðum áður. Svo ég losna af símtali okkar að falsa data.json okkar á skrá. Og í staðinn, ég kalla sem USGS meginatriðum. 

Við skulum hressa, ágætur. Þetta er raun, alvöru gögn í þessari viku fyrir jarðskjálfta. Þetta er mjög áhugavert. Þetta er ekki á óvart fyrir okkur, en það eru a einhver fjöldi af jarðskjálftum á West Coast í Kaliforníu. En ég hélt að það væri mjög áhugavert að það voru svo margir jarðskjálftar í Alaska, og virðist, hér í Midwest. Ég meina, áhugavert, og við erum góðar. Það er niðurstaða. 

En í grundvallaratriðum, þetta er það D3 hjálpar okkur að gera. Það hjálpar okkur að taka gögn, binda það þætti í DOM, og hafa þessir þættir breytast sem fall af gögnum, hafa þessir eiginleika, allar margir eiginleika þætti, allt að vera gagnlegt fyrir sund til að flytja upplýsingar. 

D3 er ótrúlega öflugur bókasafn og ótrúlega vel að keyra. Þetta er einhver öflugur efni. Gögn visualization er ótrúlega öflugur tól til að flytja fólki djúpt innsýn sem fær að kjarna þeirra og hjálpar þeim að skilja, í þetta mikil og leiðandi leið, hvernig gögn virkar og hvernig gögn breytingar líf okkar.