[Musiikki soi] 

DAVID CHOUINARD: Olen David Chouinard, ja tämä on D3. Tervetuloa. Aiomme oppia D3 tänään. D3 on JavaScript puitteet rakentaa laadukkaita interaktiivinen visualisoinnit web. Asiat kuten mitä olemme näkemisen takana minua, aiomme oppia tekemään näitä asioita, eräänlainen perusteet sen. Mutta se tulee olemaan viileä. Mennään alkoi tehdä kauniita kuvia. Olemme muutakin demoja näkymiä käytettävissä. Tehdään se. 

Act I, DOM manipulation-- olemme menossa aloittaa heti tehdä hienoja asioita. Ensinnäkin, vasemmalla, meillä on koodi. Oikealla, meillä on seurausta meidän koodin. Mennään läpi. 

Tehdään ympyrä. Miltä kuulostaa? svg.append circle-- me juuri tehnyt ympyrän. Et usko minua, eikö? Se ei ole siellä. 

Joten mitä teimme täällä on, SVG on skaalautuva vektorigrafiikkaa. Tämä on tapamme kertoa selaimen tehdä vektorigrafiikkaa selaimessa. Mitä me vain teimme juuri nyt lisätään ympyrä selata. 

Lupaus on, että ympyrä vaatii hieman perusmääritteistä ennen kuin voimme todella nähdä sen. Meidän täytyy kertoa sille sen X-asema, sen y asema, sen säde. Emme kerro se mitään, että, joten emme näe sitä juuri nyt. Mutta katsotaanpa kertoa sen juttuja. 

Joten ensinnäkin, sinulla antaa meidän ympyrä nimi. Joten kutsukaamme sitä ympyrän. Meidän ympyrä on nimi nyt. Ja katsotaanpa antaa sille vähän määritteitä. Entä CX olisi keskustaan ​​x, niin keskustan x-asennossa. Sanotaan, 200 200 pikseliä. 

Annetaan sen y 200 pikseliä samoin. Ja r, säde, noin 40 pikseliä. Katsotaanpa nyt. En voi kirjoittaa. 

Siellä mennään. Meillä on ympyrä asemassa 200 pikseliä, 200 pikseliä, säde 40 pikseliä. Kind of cool, eikö? Meillä on ympyrä. Joo. 

Joten ei tarvitse seurata mukana. Kaikissa näissä esimerkeissä, kaikki koodi mulla tänään annetaan verkossa lopussa muodossa interaktiivinen esimerkkejä neen osoitteessa jokainen teko, ja niin edelleen. 

Tehdäänpä enemmän tavaraa. Tämä musta ympyrä on todella ruma. Olen pahoillani, että virhe viestit oikeassa. Siellä mennään. 

Annetaan sen väri. Kuinka niin? Tykkään teräksen sininen. No, meidän ympyrä väri muuttui. Se on hienoa. Tehdään se puoliksi läpinäkyvä too-- läpikuultavia. 

Joten nämä ovat ominaisuuksia olemme määritellään ympyrän. Ensimmäinen asia teimme on laitamme ympyrä sivulla. Ja sitten me määritellään nippu ominaisuuksia. Jotkut näistä ovat tarpeen, kuten CX, CY, ja Säde. Ja toiset ovat valinnaisia. 

On olemassa paljon enemmän ominaisuuksia. On paljon niitä. Esimerkiksi meillä voisi olla aivohalvaus sekä, aivohalvaus punaista. Mutta katsotaanpa poista sitä. Olemme takaisin ympyrä, sininen ympyrä. 

Joten tehdä enemmän piireissä. Kuinka niin? Tehdään toinen ympyrä. Tämä on jännittävä, eikö? 

Niin sanon vain Copy-Pasted mitä meillä oli jo. Kutsukaamme sitä YMPYRÄ 2. Ja tehkäämme tarkka sama asia ja antaa sille attribuutteja, koska X-asema 300. Jee, meillä on kaksi ympyrää nyt. 

Ja tietenkin, voisimme päivittää näitä arvoja. Voisin laittaa sen 400, ja nyt se liikkuu. Ja koska se on ärsyttävää, katsotaanpa poista se, niin circle2.remove. Se on mennyt nyt. 

Joten mitä me teemme ja on vain hyvin, very-- tämä on hyvin samanlainen kuin mitä voisi tehdä jQuery, esimerkiksi. Olemme juuri manipuloimalla DOM, sitä kutsutaan. Olet ehkä kuullut, että sana ennen. Luomme kamaa, jossa attribuutteja juttuja, poistamalla kamaa. 

Nyt täällä on, jos se saa mielenkiintoista. Joten myöhemmin koodin, voisimme silti viitata alkuperäiseen ympyrä täällä. Joten palauttaa sen määritteen cx. Sanotaan, sen x kannan 400. Ja aion siirtyminen että, niin se on selvää. Siellä mennään. 

Joten lisäsimme ympyrä. Asetimme joitakin ominaisuuksia. Lisäsimme toisen ympyrän, poistetaan se. Ja sitten me muutetaan alkuperäinen ympyrä. 

Mutta tässä on, jos se saa paljon mielenkiintoisempaa. Ei vain voimme asettaa attribuutteja kuten juuri arvot, voimme sanoa, hei, ympyrä, mene asentoon 200. Voimme myös asettaa niitä toimintoja. 

Joten sen sijaan, että 400 täällä, Voimme tehdä joitakin laskennan lennossa, mitä me haluavat, että määrite olla. Joten tämä on, miten olisit ilmaista että. Sanomme, sijasta 400, haluaisin antaa sinulle toiminnon sijaan. Ja tässä, sisällä tätä toimintoa, voimme tehdä hulluja laskelma. 

Voisimme ottaa aikaa ja tarkastelemme joitakin muu asia ja dynaamisesti päättää ympyrä mitä arvoa haluamme. Entä me vain antaa se satunnainen x asema? Joten se siitä. 

Joten mitä se sanoo on, sillä joka X, suorita tämä toiminto. Ja mitä me teemme on laskettaessa joitakin asioita, satunnainen kertaa leveys ja palautettaessa. Joten joka kerta kun ajaa, että saamme ympyrä, joka menee satunnainen paikka. Se on tavallaan hienoja. Tunnen voisi näyttää Tämän hieman. Alamme päästä jotain mielenkiintoista täällä. Tehdään tästä tietojen ajaa nyt. Ei ole tietoa täällä. Katsotaanpa muuttaa. 

Act II, Data Driven Documents-- Joten palata tänne. Ja haluan vain päästä eroon YMPYRÄ 2, koska me vain lisäämällä ja poistamalla sitä. Joten emme todellakaan tarvitse sitä. Meidän on oltava paljon viisaampi tässä. Sanotaan, meillä on Joidenkin tietojen jonkinlaisia. Yksi moment-- sanotaanko, meillä oli tietoa tämän lomakkeen. Meillä oli joukko, vain nippu numeroita. Meillä on seitsemän numerot tähän, mitä nämä represent-- määrä ihmisten pankkitilille, miten paljon ne painavat, ties mitä. 

Nämä ovat lukuja, ja me haluavat käyttää meidän piireissä edustaa niitä numeroita jotenkin. Haluamme sitoa meidän piireissä nämä numerot. Joten mitä me teemme. Sanotaan, haluamme ympyrä jokaisen numeron. Voisimme tehdä vanhan asia olimme doing-- ympyrä Liitä ja YMPYRÄ 2 ja circle3. Mutta tämä riistäytyy käsistä, ja siellä on paljon toistuvia logiikkaa. 

Joten saada viisaampi siitä. Sen sijaan käyttää var ympyrä svg.append että olimme vain käyttämällä, aiomme käyttää tämä pieni lohko täällä. En halua mennä syvällistä siitä, mitä kaikki nämä osat tekevät. Ja se on tavallaan kehittynyt aihe. Ja Voisinpa. 

Mutta avain asia recognize-- ja näet on hyvin usein D3-koodin. Tämä lohko teksti perustiedot luo niin monta piireissä koska on olemassa tietoelementit Tässä array täällä. Joten tämä luo niin monta piireissä on elementtejä. Se tulee luomaan meille seitsemän piireissä. Ja se todella, todella keskeinen asia. Joten ajaa että. Katsotaanpa poistaa muita ympyrä. Toivotaan vain kommentoida tätä osa pois ja suorita tämä uudelleen. 

Siellä mennään. Joten meidän ympyrä tässä paljon tummempi, koska me on seitsemän piireissä, yksi päälle muita. Olemme juuri luonut seitsemän piireissä, yksi kukin kunkin näiden tietojen elementtejä. Mutta on keskeinen asia, joka tapahtui Tämän pätkä täällä. 

Se, että tiedot oli sidottu. Joten joka ikinen ne tietoelementit, 10, 45, 105, oli sidottu tiettyyn ympyrä. Joten nämä ei vain luonut nippu piireissä mutta sitoo nämä kaksi asiaa yhteen. 

Ja tulevaisuudessa, koska loimme näitä tahoja tämän D3 toiminto, jos annan sinulle ympyrä, voit anna minulle siihen liittyvät tiedot. Voimme siis kysyä D3. Hei, D3, minulla on tämän ympyrän. Mikä tietojen että ympyrä on? Ja D3 kertoisi meille 10 tai 45 tai 105. 

Nämä asiat ovat sitoutuneet. Se on hyvin, hyvin perustavanlaatuinen käsite. Katsotaanpa että. 

Joten miten olimme kysyä D3-- niin tämä ei ole merkitystä tässä, mutta vain luottaa minuun se. Näin pyydämme D3. Hei, D3, anna minulle ensimmäinen ympyrä, että voit löytää. Anna minulle ensimmäinen ympyrä löydät. Ja sitten voisimme kysyä D3, mitä tietoa, että näin, 10. 

Joten me vain kysyä D3, löytää minut Ensimmäinen ympyrä löydät. Mikä sen tiedot? 10, että on todellakin meidän Ensimmäinen tieto. Voisimme kysyä sitä, hei, D3, löydät meidät meidän kolmas ympyrä. 105. Miksi tämä todella tärkeää? 

Joten täällä, mainitsin että voisimme käyttää toimintoja. Ja mainitsin, että oli erittäin voimakas asia. Niin ei vain voi toimintojamme tehdä asioita kuten tehdä joitakin laskennan, esimerkiksi palata satunnaisluvun, se voi myös tehdä asioita koskevien tietojen perusteella. Tämä on mitä tietojen ajaa asiakirjoja tarkoittaa. Sitähän D3 edustaa. 

Joten tämä x postition-- sijaan vain sanoa, kaikki piireissä, saada X-asema 200, me voisi antaa sille funktio. Ja täällä, voimme tehdä joitakin laskennan. ja d täällä seisoo paikallaan tiedot. Joten joka kerta olemme ympyrä, pohjimmiltaan, D3 luo nämä seitsemän piireissä. Ja sitten jokaiselle 

ympyrä, se tulee menemään, hei, YMPYRÄ 1 mikä on sinun X-asema. Aiemmin olimme aina vastaamalla 200. Mutta nyt, joka kerta D3 kysyy meille mikä on sinun X-asema, se tulee antaa us-- meillä että ympyrä, joten meillä on tietoja. Se tulee antamaan meille tietoja ja sanoa, Mitä haluat näyttely olla, niiden pohjalta. 

Toivotaan vain palata todelliset tiedot. Joten jos me suorittaa tämän, tämä antaa meille tietojen ajaa asiakirjoja. Nämä ympyrät perustuvat suhteessa position-- ne ovat emäkset funktiona tietoja. 

Joten ensimmäinen ympyrä, D3 tuo ympyrä. Ja sitten D3 pyytää meitä, mitä tehdä Haluatko käsikirjassa olla. Ja me vain sanoa, mitä tietoja on. Tee näyttely 10. 

Sitten se kysyy, mitä haluat näyttely on toisen ympyrän. Ja me vastaamme, 45. Ja me tietysti voi tehdä joitakin laskennan tässä. Minusta tämä näitä tahoja ovat sellaisia ​​squished ylös. 

Joten kerro se 3, kerrotaan tietoja 3. Meidän ympyrä sai juuri laajentunut ulos. Meidän arvo kolminkertaistui. 

Ympyrä on todella reunalla, joten katsotaanpa ehkä sellainen offset sitä. Sanotaan, 20. Täällä mennään. 

Tämä on tietojen visualisointia. Se on hyvin yksinkertainen, vaan tämä antaa meille jonkinlaisen käsityksen tietomme. Se kertoo meille, että olemme esimerkiksi on pieni klusterin elementtejä. Ja meillä on iso harha täällä. Tämä antaa meille joitakin tietoja noin jakelu. 

Jos olisimme esimerkiksi muuttaa tiedot 150 täällä ja virkistää, meidän visualisointi on muuttunut. Tämä asiakirja on tietojen ajaa. 

Niin tietysti, kaikki nämä tekijät, kaikki nämä ominaisuudet täällä, voimme käyttää toimintoa, ei vain numeroita, ei vain x- ja y-paikat. Joten voimme käyttää toimintoa väri. Joten me tehdä samoin. Me annamme sen funktio. 

Ja sanotaanko, meillä voisi olla ehtolauseilla meidän toiminto. Tämä toiminto voi olla sata riviä pitkä. Se voi tehdä hyvin, hyvin monimutkaisia ​​asioita. 

Joten laittaa jos ilmoitus täällä. Sanotaan, jos tietomme on vähemmän kuin 50, joka on jonkin kynnyksen että olemme kiinnostuneita vuonna jostain syystä. Tehdään se vihreä. Muuten tehkäämme se punainen. Kuinka niin? Nice. 

Joten meidän tietojen visualisointia alkaa välittää enemmän mielenkiintoista tietoa monikanavaisesti. Joten nyt me tiedämme vähän noin jakelu. Ja me tiedämme, että on olemassa jonkinlainen katkaistu 50 että olemme kiinnostuneita. Tiedämme, että on olemassa kaksi merkintää Tämän rajan alla ja useimmat niistä edellä. 

Niin että viimeinen vaihe, nämä tiedot tässä, se on erittäin harvinaista nähdä tämän niin. Joten vain siirtää sen ulos muuttuja koska se on puhtaampaa, kuin tämä. Ja sitten käytämme että muuttuja täällä. Se täsmälleen sama asia. Se on vain hieman puhtaampaa. 

Seuraavaksi, Act III, Scales-- Joten yksi ongelma oikeus tässä, jos muutamme tiedot tässä 200 value-- jos muutamme sen 400 tai jotain ja virkistää, silloin tämä arvo vain meni offscreen. Joten meidän logiikka täällä miten teemme kertaa 3 ja 20, levittää sitä ja sitten offset se vähän on todella kömpelöitä. 

Mitä nämä numerot tarkoittavat? He vain koodattu siellä. Ja he hyvin sidottu tietoihin. Haluamme tietojen ajaa asiakirja. Haluamme erittäin joustava asiakirja, että annetaan tietoja, mukautuu sen ja edustaa sitä. 

Mitä me pohjimmiltaan tarvitsemme, me on tässä eri numerot 10. 45, 105. Ja haluamme kartoittaa että ulos päin leveys, koko leveydeltään täällä. Joten meillä on valikoima numerot menee 0-100. Ja meillä on tämä kampuksella I menee 20-700, tässä tapauksessa. 

Me tavallaan haluavat kartoittaa että. Haluamme mittakaavassa, että ylös ja offset sitä vähän. On käynyt ilmi, että D3 on nämä. Sitä kutsutaan mittakaavassa. Joten käytä sitä. 

Siten, että works-- aion kirjoita tämä ylös ja sitten selittää sitä. Tämä on asteikko. Mitä se tekee on, se kartoittavat arvot 1-200 päälle 20-600. Voimme tarkistaa, että. Voimme nähdä, että täällä. 

Joten jos olen ruokkia sitä 1-- hetkeäkään. Anna minulle yksi sekunti. Minun on kirjoitettu väärin se. Siellä mennään. Olen pahoillani siitä. 

Joten mitä asteikko tekee on, se vie arvoa ja sitten muuntaa että laajentaa, että ulos, niin se täyttää täyden valikoiman kysyt. Joten tässä tapauksessa, jos annamme sen yhden, se tulee kartta, että ulos päin 20. Ja jos annamme sen 200, se on menossa kartta että 600. Ja jossain välissä, jos saamme 100, se on olemaan jonnekin välillä 20 ja 600. 

Ja tietenkin, nyt tämä on mitä Meidän täytyy poistaa ne koodattu asiat meillä on oikeassa. Joten mitä haluamme tehdä, on ottaa tietoja, että olemme annettu, että yksittäiset tiedot elementti, ja siirtää sen mittakaavassa ensin. Joten mittakaavassa skaalaa sen. 

Well-- Voi, meillä on pieni virhe täällä. Olemme puuttuvia tietoja. Siellä mennään. Ja joka laajenee sitä. 

Tämä antaa meille saman Tuloksena meillä oli ennen, mutta sen sijaan, että nämä koodattu rajoitteet. Ja jos koko meidän kangas muutoksia, esimerkiksi jos haluamme saada tämän yli 400 pikseliä ja se squishes ulos, meillä voi olla se over-- voimme laajentaa sitä tai emme voi vähentää tätä vasemmaksi marginaaliksi jotain vähemmän tai enemmän kuin 20. Nämä luvut, nämä koodattu numerot nyt järkeä meille. 

Ja voisimme tehdä paljon enemmän mielenkiintoisia asioita samoin. Joten sen sijaan, että lineaarinen mittakaavassa, saatamme haluta kirjautua mittakaavassa. Ja joka antaa meille log mittakaavassa. 

Joten nyt meidän mittakaavassa, sen sijaan, vain laajeneva, että alue, se tekee kehittyneempiä asioita. Sen sijaan, että tämä alue kovaa koodattu, ja sen sijaan, että 600, saatamme haluta vain käyttää leveys, joten 20 leveys miinus 40, 2 kertaa marginaali toisella puolella. Ja tämä tekee paljon enemmän järkeä joku voisi katsoa koodia. 

Mielenkiintoista, asteikot saada erittäin hienostunut samoin. He tekevät paljon mielenkiintoisia asioita. Joten vaaka ei välttämättä ole toimimaan vain numeroita. Tehdään väriskaala. 

Joten valikoimaamme voisi be-- domain on 1-200. Se tulo asia. Mutta me haluta karttaa vihreästä punaiseksi, esimerkiksi. Ja nyt, jos me sitä tule 1, aiomme saada vihreitä. Jos annamme sen 200, saamme punainen. Ja jos me sitä tule jotain siltä väliltä, se tulee olemaan joitakin sekoitus, että jonnekin kaltevuus vihreän ja punaisen välillä. 

Ja sen sijaan, tällainen kömpelöitä logiikka meillä täällä ehdollinen oikeassa, meillä voisi olla something-- lineaarisen asteikon näiden. Joten olimme käyttää mittakaavassa me vain luotu, jota kutsutaan väri. Ja me Antaisin sen d, joka on meidän tieto. Ja siellä mennään. Meillä on väriskaala. 

Joten tämä on kartoitus. Tähän äärivasemmisto on täysin vihreä. Äärimmäisenä oikealla on täysin punainen. Ja kaikkea siltä väliltä on funktio d. Meillä on mielenkiintoinen visualisointeja täällä. Mutta meidän data oli sellainen tylsä. Katsotaanpa, mitä voisimme tehdä, jos meillä oli muita kiinnostavia tietoja. 

Laki IV, kanssa Data-- ensimmäinen asia me haluamme tehdä, jotta meidän visualisointi mielenkiintoisempaa on siirtää tietoja jossain muualla. On hyvin kömpelöitä saada data koodattu täällä. Ja yleensä, me olla kysyä joku muu datalle. Tulemme ehkä kysyy hallitus, Census Bureau, mitä tietosi ja sitten piirtämistä että tai kysymällä jotkin kolmannen osapuolen yksikkö joitakin tietoja ja sitten rakentaa visualisointi siitä. 

Joten ensimmäinen asia haluamme tehdä on siirtyä että muualla. Joten aion luoda tiedosto täällä kutsutaan data.json. JSON on tiedostoformaatti. Sinun ei tarvitse tietää paljon siitä. Ja me kopioida vähän tietoa meillä on siellä, liitä se siellä sanatarkasti, mene takaisin meidän visualisointi koodi täällä, ja käyttää tätä toimintoa täällä. Sinun ei tarvitse tietää yksityiskohtia. Mutta mitä tämä tekee on, se löytää tiedoston, noutamaan sen ja palauttaa sen meille. Joten mitä tämä tekee on, se menee ja saada data.json tiedosto. Ja sitten kaikki koodi, joka on sisennetty inside-- olennaisesti, kaikki koodi olemme there-- tulee ajaa vain uusista tiedot takaisin. Ja sitten se tulee suorittaa, että koodia tiedot meillä on. Hienoa, meillä on visualisointi, että kyselyt joillekin koodin jonnekin muu, joka on yleensä jossa se pohtii joitakin tietoja muualla, joka on yleensä kuinka visualisoinnit toimivat. 

Mutta en halua mennä takaisin tiedot. Joten tiedot perusteellisesti D3-- D3 kuluttaa tietoja, jotka on lista asioista. D3 odottaa tietoja vain olla lista asioita, joukko asioita. Sillä ei ole väliä, mitä nämä asiat ovat, niin kauan kuin se on joukko niitä. 

Joten tässä, esimerkiksi Voisimme Tietenkin ovat liukuluvuiksi. Meillä voisi olla negatiivisia. D3 ei välitä, niin kauan koska se on lista asioista. 

Kuten mielenkiintoisia asioita meidän voisi olla, voisimme myös on merkkijonolista niin. Nämä ovat siis Crimson otsikoissa Otin pari päivää sitten. Ja ehkä voit löytää mielenkiintoisia asioita nämä otsikot. 

Joten jälleen, tämä on lista asioista. D3 ei välitä. Nämä sattuvat olemaan merkkijono. Olemme muuttaneet tietoja. 

Palataan meidän visualisointi. Nyt meidän visualisointi odottaa tulo olla numeroita. Joten aiomme olla tehdä muutamia muutoksia. Joten esimerkiksi, ensinnäkin, ehkä haluamme laittaa näissä piireissä pitkin pituudella otsikko, merkkien määrä otsikossa. 

Joten mitä me teemme is-- aina meidän toimintoa kutsutaan narulla, me löydämme sen pituus ja Sitten tapahtui, että mittakaavassa. Väri, palaan että teräksen sininen. Ja siellä mennään. Meillä visualisointi Crimson otsikoihin. 

Meidän mittakaavassa on vähän pois. Oletetaan, että pisin Otsikko on 100 merkkiä pitkä, niin span että ulos vähän. Ja meillä on visualisointi. Näyttää siis siltä, ​​että useimmat otsikoihin ovat melko lähellä toisiaan, kannalta valoreunalla. Mutta yksi on todella erottuu. 

Voisimme rakentaa joitakin työkaluja tutkia, että enemmän. Mutta kun olin työskennellyt tämän, olin utelias onko tässä tietokokonaisuus, otsikoissa kaksoispisteellä niihin olisi pidempi. Olen olettaa he tahtoivat. 

Joten selville. Katsotaanpa käyttää värin kanava kuten teimme ennen, koodaamaan joitakin siitä siellä kaksoispiste tai ei. Joten käytämme ehdollista uudelleen. Sinun ei tarvitse tietää yksityiskohdat, mutta tämä on miten voimme tarkistaa merkkijono erityistä luonnetta JavaScript, jälleen, ei ole merkitystä. 

Mutta jos emme löydä paksusuoli, palaamme vihreä. Ja jos teemme, me palaamme punainen. Joten jälleen, otsikoita, jotka ovat kaksoispiste on punainen. Tämä on mitä tämä means-- mukavaa. 

Näyttää siis siltä, ​​että minun hypoteesi tönäistään. On vain kaksi. Meillä on vain kuusi mittauspisteiden ja vain kaksi oli kaksoispistettä. Mutta se tuntuu vähän enemmän alapäähän, itse asiassa. Otsikot kaksoispisteellä näyttää yleisesti lyhyempi, ainakin meidän tietojen set-- mielenkiintoinen. 

Palataan että teräksen sininen ja katso sitten mitä voimme tehdä vieläkin muita kiinnostavia tietoja. Joten jälleen, mainitsin että datan D3 on lista asioista. Olemme nähneet numerot monenlaisia. Olemme nähneet jouset. Mutta asiat voivat olla myös esineitä. 

Ne voivat olla monimutkaisia ​​asioita jotka sisältävät paljon asioita. Sanoa, että selvemmin, useimmissa tapauksissa, me haluavat rakentaa jokainen tietojen pisteen monimutkaisempi kuin vain yksi arvo. Jos kuvitella tietokanta opiskelijoita, saattaa olla opiskelija nimi, opiskelijanumero, ja paljon asioita jotka liittyvät tiettyyn ennätys, ei vain merkkijono tai numero. Joten katsokaamme että. 

Tämä on yksi näiden tietojen asetettu. Tämä on tietokokonaisuus maanjäristyksistä. Joten kaikki täällä listallamme tai joukko asioita sisältää monia asioita itse. Joten jokainen datapiste on suuruus ja koordinoida. Ja koordinoi itse sisältävät kaksi asiaa. 

Joten joka päivä on nyt paljon enemmän monimutkainen ja paljon mielenkiintoisempi ja sisältää paljon enemmän mielenkiintoista tietoa. Katsotaanpa voisimme rakentaa pois siitä. Palataan takaisin tänne, uudelleen, käyttäen meidän histogrammi ympyrä visualisointi olemme rakentaneet, katsotaanpa jos voimme rakentaa visualisointi suuruus jakelu meidän tietokokonaisuus. 

Joten tässä, se on sama käsite. Mutta nyt, d sisältää enemmän asioita. d sisältää monia tietoelementit. Joten saamme vrk takaisin. D3 antaa meille d. Ja me vastaamme etsimällä suuruus d ja sitten ohimennen, että mittakaavassa. 

Ja sitten meidän täytyy muuttaa meidän mittakaavassa tietenkin. Joten suuruudet eivät yksinkertaisesti mennä paljon enemmän kuin 10. Oikeastaan ​​koskaan ollut 10 richterin maanjäristys. Mutta se on tavallaan meidän ylemmän Lopulta meidän ylempi spektrissä. 

Katsotaanpa virkistää. Nizza, meillä visualisointi. On mielenkiintoista note-- niin kaksi datapisteiden ovat lähes täsmälleen päällekkäin muut, mitä suuruusluokkaa. Näet tämän peittävyyttä käytämme. 

Meillä on maantieteellisiä tietoja nyt. Meillä on leveysasteilla ja pituutta. Ehkä voisimme tehdä jotain paljon mielenkiintoisempaa kanssa. Etsitään lisää mielenkiintoinen tapa visualisoida Tämän monimutkaisempi tiedot meillä on pääsy. 

Laki V Mapping-- pohjimmiltaan haluamme laittaa nämä kartalla. Tarkoitan, tämä on, jos tämä on menossa. Haluamme koodata tietoa asema näistä maanjäristys lukemat, sekä niiden suuruus, koska meillä on nyt. Ymmärrämme, miten kuluttaa monimutkaisempi tietoja. 

Ensimmäinen asia teemme on luoda kartta, tausta kartta. Aion käydä läpi tämän hyvin nopeasti. Tämä on hankala koodi. Se on toinen niistä reseptejä et todellakaan täytyy ymmärtää täysin voit käyttää. Mutta tämä on koodi. Tämä koodi täällä luo kartan. 

Emme aio mennä yksityiskohtiin. Mutta pintapuolisesti, mitä se tekee on, se pohtii tätä us.json tiedosto, joka on tiedosto, kuten yksi meillä oli ennen. Se on monimutkaisempi, tietenkin. Mutta tässä tapauksessa, kaikki, jokainen mittauspiste on tässä tilassa ja on luettelo leveysasteilla ja pituusaste jotka määrittelevät monikulmio, lomaketta, että valtio. 

Joten mitä D3 tekee on samanlainen mitä teimme ennen. Se pyytää ja sitoutuvat että elementti. Ja siellä on toiminto, joka kartoittaa että elementti pois, perustuvat leveysasteilla ja pituutta. Voit lukea siitä lisää. Ja minä suosittelen sitä. 

On linkkejä loppuun tämän koodin lähetetty. Ja koodi on kommentoitu. Siellä on linkkejä edelleen tästä. Suosittelen teille etsiä se. Mutta mitä me välitämme on Tämä projektio toimintoa. Haluan mennä läpi. 

Ensinnäkin, haluan näyttää teille, että kyllä, meillä on kartta. Kartat ovat viileitä. Joten katso tätä tuotantofunktio. 

Projektio on hyvin paljon kuten mittakaavassa, skaalaa uudelleen. Joten mitä tuotanto tämä ennuste toiminto ei on, voisimme siirtää sen pituusaste ja latitudes-- tässä tapauksessa, nämä arvot täällä ovat lat-pitkät rakennuksen olemme istuu oikealla now-- on projektio. Ja projektio muuntaa että otetaan x ja y pikselin arvot. 

Joten mitä projektio tekee on hyvin samanlainen kuin meidän mittakaavassa. Se kun meidän leveysasteilla ja pituusaste, joka edustaa koko maailmaa ja kutistuu ja mitoitus että alas aukiolle, että haluamme, että olemme antaneet sen. Tässä tapauksessa olemme kulkee näitä arvoja. Ja se antaa meille hyvin, että näytön tarkoittaa 640 pikseliä. Tämä koko näyttö on 700 pikseliä leveä, niin että tekee meille täällä, ja 154 pikseliä alas, mitä en Arvio on melko paljon täällä. 

Joten kun ne Lat-pitkät, mikä edustavat jotain koko maailmaa ja squishing ja liikkuvat, että noin antaa meille x ja y pikselin arvot, tämä on ensimmäinen asia, joka on tehdään tällä kartoituskoodi. Ja sitten loput koodi kuluttaa tiedot ja sitten kartat ne lat-pitkät päälle jotain näytölle. 

Mutta emme aio käyttää projektio toimintoja, koska se kääntyy pois meillä lat-pitkät pitkät samoin. Katse takaisin meidän tiedot, meillä on leveysasteilla ja pituuskoordinaattien jokaista havainto. Joten käytä projektio. 

Joten etsit meidän näyttely, haluamme exposition-- meillä on leveyttä ja pituutta. Mutta haluamme pikselin arvoja. Ja se kääntyy pois, meillä on täsmälleen mitä me want-- projektio. Erittäin paljon kuin olisimme käyttäen mittakaavassa täällä, olemme nyt aio käyttää projektio ja siirtää se koordinoi. Joten ensimmäinen asia olemme doing-- joten olemme saada d, joka on yksittäisiä tietoja osa yksilön maanjäristys käsittelyssä. Ensimmäinen asia mitä teemme on saada koordinaatit. Okei, meillä on koordinaatit. 

Toinen asia mitä teemme on välitettävä edelleen projektio. Projection muuntaa ne koordinaatit otetaan pikseliarvot, x ja y. Ja sitten viimeinen asia, haluavat tehdä, on vain saada x, joka tässä tapauksessa on ensimmäinen. Se on ensimmäinen kahdesta asiaa palautustuotteita projektio. 

Teemme sama y. Mutta sen sijaan, palaamme toinen elementti, y. Hanki valmis virkistää. Ooh, extra merkki here-- kiva, meillä on tietojen ajaa asiakirja, joka on salaaminen tämä JSON-tiedoston esineitä, tehdä kartta, ja muuttuvat Yhdistän suhteessa tietoihin hankkeen se kartalla. Tämä on todella mielenkiintoinen. Tämä on viileä. 

Otetaanpa sitä lovi. Tarkoitan, meillä on kaksi kappaletta tiedot jokaisen datapisteen. Tarkoitan, kolme. Meillä on koordinaatit, joka on x ja y. Ja meillä on suuruusluokkaa. 

Meidän koodata suuruus jotenkin. Meillä on paljon kanavia. Voimme käyttää värejä. Voimme käyttää säteellä. Voisimme käyttää peittävyyttä. Voisimme käyttää monia asioita koodia. Mikä tahansa näistä ominaisuuksista ja monet muuta, joita ei ole mainittu siellä, koska he valinnainen, voisimme käyttää koodaamaan tätä tietoa, aivohalvaus ja kaikki nämä asiat olen maininnut. 

Tehdäänpä säteellä. Mielestäni säde on kaikkein intuitiivinen. Joten jälleen, me korvata kovakoodatuilla 40 ja tehdä joitakin laskelmia. Käytämme meidän suosikki mittakaavassa uudelleen. Ja me olemme viimeisen d. Mutta ei vrk, koska haluamme suuruus d. d on vain tietojen piste. Me siirtää suuruus mittakaavassa. 

Kokeillaan, että uudelleen. Ooh, se ei toimi. Miksi se ei toimi? 

Joten muista mitä mittakaavassa tekee. Katsotaanpa mittakaavassa uudelleen. Scale karttoja 1-10 koskevat on 22-600, enemmän tai vähemmän. 600 on valtava. Siksi emme saa tätä. 

Joten haluamme muuttaa asteikon jotain järkevämpää. Sanotaan, haluamme 0-60. 60 on iso, mutta 10 maanjäristykset ovat uskomattoman harvinaisia. Itse asiassa he eivät ole koskaan tapahtunut. 

Joten mitä tämä tekee on, otan meidän suuruus että menee 1-10 ja kartta se laajentaa sitä. Ja kartta sen edelleen 0-60. Katsotaanpa virkistää. 

Nizza, meillä visualisointi. Tämä on suuri. Tämä on todellinen tieto. Huomaat, minun pikku lelu Esimerkiksi suurin maanjäristys on oikeus päälle meitä. Mutta se siitä. Meillä päivämäärä ajettu visualisointi joka kuluttaa tiedot ja antaa meille todella mielenkiintoista tietoa. Joo, nyt lisätä joitakin interaktiivisuutta sitä. Mainitsin, että oli vahva voima D3. 

Joten tässä, jokainen elementti, olemme kuvataan joukko ominaisuuksia. Mutta voimme myös kuvata, mitä haluamme tapahtumaan vuorovaikutteisuutta elementtejä. Esimerkiksi voisimme kuvata mitä tapahtuu, kun hiiri. Ja hyvin samankaltaisia, että että otan toiminto, hyvin samankaltainen attribuutteja meillä oli ennen, jos teemme jotain elementti kun viet sen yli. 

Joten ensimmäinen asia, meidän vain valita, että elementti, löytää se periaatteessa, selaimen. ja sitten voisimme asettaa määrite sille. Joten mitä teen täällä on, kun me leijua yli jotain, saamme, että elementti ja sitten asettaa sen peittävyyden takaisin 1, täysin läpinäkymätön. Katsotaan, mitä se näyttää. 

Se näyttää meillä extra puolipiste täällä. Joten jos me hääriä täällä, se saa kokonaisuudessaan. Mutta nyt, tietenkin, se pysyy täynnä, koska meillä on kuvata, mitä tapahtuu kun poistaa meidän kursori. Tehdäänpä juuri että mouseout, toisin kuin mouseover. 

Ja me palauta se mitä meillä oli before-- 0,5. Ja nyt, joka kerta hover, saamme täyden ympyrän. Se auttaa meitä näkemään, mitä me me valitsemalla olennaisesti. 

Ja nyt tehkäämme tästä todella suuri. Katsotaanpa liitä tämä todellisia tietoja. Joten kysy voisi USGS noin tietonsa. Joten US Geological Survey on tietoa maanjäristyksistä. Heillä on julkinen API, joka on voinut kulutettavaksi JSON-muodossa. Tehdäänpä että. 

Joten tämä on vähän koodia, joka yhteyden USGS API. Ja siellä on vähän käsittelyä sitä. Tämä ei ole merkitystä, mutta yksinkertaistetaan sitä yksinkertainen data-muodossa, kuten yksi meillä oli ennen. Joten pääsen eroon kehotuksemme Meidän fake data.json tiedosto. Ja sen sijaan, soitan USGS olennaisesti. 

Katsotaanpa virkistää, kiva. Tämä on todellinen tosielämän tiedot alkaen tällä viikolla maanjäristykset. Tämä on todella mielenkiintoinen. Tämä ei ole yllättävää meille, mutta on olemassa paljon maanjäristykset West Coast Kaliforniassa. Mutta ajattelin, että se oli erittäin mielenkiintoinen että siellä oli niin paljon maanjäristyksiä Alaskassa, ja ilmeisesti, täällä keskilännessä. Tarkoitan, mielenkiintoinen, ja olemme hyviä. Se johtopäätös. 

Mutta pohjimmiltaan, tämä on mitä D3 auttaa meitä. Se auttaa meitä ottamaan tietoja, sitoutuvat sen elementtejä DOM, ja nuo seikat muuttavat funktiona tietojen, on nämä määritteet, kaikki monia ominaisuuksia elementtejä, kaikki olla hyödyllinen kanavien välittää tietoa. 

D3 on uskomattoman voimakas kirjasto ja hämmästyttävän hyvin hoidettu. Tämä on joitakin tehokkaita juttuja. Tiedot visualisointi on uskomattoman tehokas työkalu kuljettamiseksi ihmisille syvä oivalluksia, saa niiden ydin ja auttaa heitä ymmärtämään, vuonna tämä syvällinen ja intuitiivinen tapa, miten tiedot toimii ja miten data muuttuu elämämme.