[Muziciranja] 

DAVID Chouinard: Ja sam David Chouinard, a to je D3. Dobro došli. Ćemo učiti o D3 danas. D3 je JavaScript okvir za izgradnju visoke kvalitete interaktivne vizualizacije za web. Stvari kao što smo gledajući u leđa od mene, ćemo učiti kako bi one stvari, vrsta osnove njega. No, to će biti super. Počnimo što lijepe slike. Imamo više demo perspektive na raspolaganju. Učinimo to. 

Zakon sam, DOM manipulation-- ćemo započeti odmah stvaranje kul stvari. Prije svega, na lijevoj strani, imamo kod. Na desnoj strani, imamo Rezultat našeg koda. Idemo kroz njega. 

Idemo napraviti krug. Kako to zvuči? svg.append circle-- samo smo napravili krug. Ne vjerujete mi, zar ne? To ne postoji. 

Dakle, ono što smo radili ovdje je, SVG je skalabilan vektorske grafike. To je način na koji možemo reći da preglednik bi vektorske grafike u pregledniku. Ono što smo mi napravili upravo sada dodaje krug za pregledavanje. 

Obećanje je da u krug zahtijeva malo osnovnih atributa Prije nego što zapravo može vidjeti. Moramo reći svoje x položaj, njegov y pozicija, njegov radijus. Nismo ga reći bilo što od toga, pa ne gledajući ga sada. Ali neka je reći da stvari. 

Dakle, prije svega, imaš dati našem krugu ime. Tako ćemo ga nazvati krug. Naš krug ima ime sada. I neka je dati nekoliko atributa. Kako o CX će se usredotočiti x, tako da središte x položaju. Recimo, 200 200 piksela. 

Dajmo mu y 200 piksela, kao dobro. I r, radijus, od oko 40 piksela. Sad ćemo vidjeti. Ne može čarolija. 

Postoji li ići. Imamo krug na poziciji 200 piksela, 200 piksela, radijusu od 40 piksela. Vrsta cool, zar ne? Imamo krug. Da. 

Dakle, nema potrebe slijediti zajedno. Svi ovi primjeri, svi kod radim i danas osigurat će se preko interneta na kraju u obliku primjera interaktivnih s kontrolnim točkama na svaki čin, i tako dalje. 

Učinimo više stvari. Ovaj crni krug stvarno ružno. Žao mi je zbog toga pogreške Poruke tamo. Tamo idemo. 

Dajmo joj boju. Kako je to? Volim čelika plave. Pa, naš krug promijenila boju. To je super. Učinimo to polu-transparentni too-- polu-transparentni. 

Dakle, to su atributi mi smo definiranja na krugu. Prva stvar koju smo napravili je stavimo krug na stranici. A onda smo definiranja hrpa atributa. Neki od njih su potrebne, kao CX, CY, i radijus. I ostali su izborni. 

Postoji puno više atributa. Postoji mnogo njih. Na primjer, mogli bismo imati moždanog udara te, moždani udar crvene. Ali neka je skine. Vratili smo se u krug, plavom krugu. 

Tako ćemo napraviti više krugova. Kako je to? Idemo napraviti još jedan krug. To je uzbudljivo, zar ne? 

Dakle, reći da sam samo copy-paste metodom ono što je već. Nazovimo ga circle2. I neka je to točno Ista stvar i dati ga atributa, s obzirom x pozicija 300. Yay, imamo dva kruga sada. 

I naravno, mogli bismo ažurirati te vrijednosti. Mogao sam ga stavio na 400, a sada se kreće. A budući da je neugodno, neka je izvadite ga, pa circle2.remove. To više nema. 

Dakle, ono što smo radili i samo jako, very-- to je vrlo slično onome što Možda ne u jQuery, npr. Mi samo manipulira DOM, to se zove. Možda ste čuli tu riječ prije. Mi smo stvaranje stvari, postavljanje atribute na stvari, uklanjanje stvari. 

Sada, ovdje gdje se dobiva zanimljiv. Tako je kasnije u kodu, uvijek smo mogli odnose se na izvornom krug ovdje. Tako ćemo ponovo postaviti svoj atribut CX. Recimo, njegov položaj x 400. I ja ću prijeći da, tako da je očito. Tamo idemo. 

Tako smo dodali krug. Postavili smo neke atribute. Dodali smo još jedan krug, to ukloniti. A onda smo modificiranje izvorni krug. 

Ali ovdje gdje se dobiva puno zanimljivije. Ne samo da možemo postaviti atribute kao samo vrijednosti, možemo reći, Hej, krug, idite na poziciju 200. Također možete ih postaviti kao funkcija. 

Dakle, umjesto da 400 ovdje, možemo napraviti neki izračun na letu za ono što smo Želite da atribut biti. Dakle, to je kako bih izraziti da. Kažemo, umjesto 400, neka me dati funkciju umjesto. I ovdje, u ovoj funkciji, možemo napraviti bilo ludo izračun. 

Mogli bismo uzeti vremena i pogled na neke druge stvari i dinamički odlučiti za Krug ono vrijednost želimo. Kako bi bilo da jednostavno dati je slučajna x stav? Dakle, to je to. 

Pa što da kaže, za svakih x, pokrenuti ovu funkciju. I ono što mi radimo je izračun neke stvari, slučajni puta širine i vraća to. Dakle, svaki put smo pokrenuti da smo dobili krug koji ide na slučajnom mjestu. To je vrsta cool. Osjećam se kao da sam mogao gledati ovo za malo. Mi smo počeli doći do nešto zanimljivo. Učinimo ove podatke pokreće danas. Nema tu nema podataka. Idemo promijeniti. 

Zakon II, Data Driven Documents-- Dakle, vratimo se ovdje. I neka je samo riješiti circle2, jer smo jednostavno dodavanje i uklanjanje to. Dakle, mi stvarno ne treba. Moramo biti puno pametniji ovdje. Recimo, imamo Neki podaci o nekakvim. Jedan moment-- recimo, smo imali podatke o ovom obliku. Imali smo niz, samo hrpa brojeva. Imamo sedam brojeva ovdje, bez obzira na to represent-- iznos U ljudi bankovni račun, kako koliko su teške, bog zna što. 

To su brojevi, a mi Želite koristiti svoje krugove zastupati one brojeve nekako. Želimo povezati našu stranicu Krugovi u tim brojevima. Dakle, ono što nam je činiti. Recimo, želimo Krug za svaki broj. Mogli bismo napraviti stari što smo bili doing-- Krug Dodavanje i circle2 i circle3. No, to dobiva iz ruke, a postoji mnogo ponavljanja logiku. 

Tako ćemo dobiti više pametan s tim. Umjesto da koristite var krug svg.append da smo bili samo pomoću, ćemo iskoristiti ovaj mali blok ovdje. Ne želim ići u dubinu u ono što su svi ti dijelovi ne. I to je vrsta napredne teme. I ja bih da mogu. 

No, ključna stvar za recognize-- i vidjet ćete vrlo često u D3 koda. Ovaj blok teksta Basic stvara onoliko krugova jer postoje elementi podataka U ovom nizu upravo ovdje. Dakle, to stvara onoliko Krugovi što postoje elementi. To će nam stvoriti sedam krugova. I to ne stvarno, stvarno ključnu stvar. Tako ćemo pokrenuti to. Idemo uklanjanje naš drugi krug. Ajmo komentirati ovaj rastati se i pokrenuti ovo opet. 

Tamo idemo. Dakle, naš krug ovdje puno tamniji, jer mi ima sedam krugova, jedan na vrhu drugog. Upravo smo stvorili sedam krugova, jedan svaki za svaki od tih podataka elemenata. No, tu je ključna stvar koja se dogodila s ovim isječak ovdje. 

To je da se podaci vezani. Dakle, svaki od one elemente, 10, 45, 105, bio je vezan određenoj krug. Dakle, to nije samo stvorio hrpa krugovima ali povezuje te dvije stvari zajedno. 

A u budućnosti, jer smo stvorili Ti krugovi s tom funkcijom, D3 Ako sam ti krug, što možete daj mi podatke povezane s njom. Dakle, možemo pitati D3. Hej, D3, imam krug. Što je podatke da je krug ima? I D3 će nam reći 10 ili 45 ili 105. 

Te stvari su vezani. To je vrlo, vrlo osnovni koncept. Pogledajmo kako. 

Dakle, način na koji ćemo postaviti tako D3-- to je nebitno za ovo, ali samo mi vjerujte na njemu. To je, kako smo pitati D3. Hej, D3, daj mi prvo Krug koji možete naći. Daj mi prvi krug možete pronaći. A onda bismo mogli upitati D3, što je Podaci o tome, kao što je to, 10. 

Dakle, mi samo pitajte D3, naći me Prvi krug možete pronaći. Što je njegove podatke? 10, koji je zaista Prvi element podataka. Mogli bismo ga pitati, hej, D3, Pronađite nas naš treći krug. 105. Zašto je to jako važno? 

Dakle ovdje sam spomenuo da bismo mogli koristiti funkcije. I sam spomenuo da je bio vrlo moćna stvar. Dakle, ne samo da mogu naši funkcionira raditi stvari kao i napraviti neki izračun, na primjer, povratak slučajni broj, to može Također ne stvari na temelju podataka. To je ono što podaci vođene dokumenti znače. To je ono što D3 znači. 

Dakle, ovo x postition-- umjesto samo govoreći, sve krugove, dobiti x 200 poziciju, što mogao dati mu funkciju. I ovdje, možemo napraviti neke obračun. i d Ovdje stoji na mjestu za podacima. Dakle, svaki put smo krug, u osnovi, D3 će stvoriti tih sedam krugova. I onda za svaki 

krug, to će ići, hej, circle1 što je vaš x položaj. Prije toga, bili smo Uvijek odgovorite 200. Ali sada, svaki put D3 pita nam što je tvoj stav x, to će dati us-- smo da je krug, tako da imamo podatke. To će nam dati podatke i reći, Što želite izložba biti, na temelju tih podataka. 

Ajmo se vratiti stvarne podatke. Dakle, ako smo pokrenuti ovo, to daje Američki podaci odvezao dokumente. Ti krugovi temelje U odnosu position-- oni baze kao funkcija podataka. 

Tako je za prvi krug, D3 stavlja krug. A onda D3 nas pita, što učiniti Želite izložba biti. A mi samo reći, bez obzira podataka. Provjerite izlaganje 10. 

Zatim se pita, što želiš Izložba se za drugi krug. A mi odgovoriti, 45. A mi, naravno, može napraviti neki izračun ovdje. Ja smatram da tim krugovima su vrsta squished up. 

Dakle, to pomnožite 3, pomnožite podatke za 3. Naš krug upravo dobio proširila van. Naša vrijednost je utrostručio. 

Krug je stvarno na rubu, pa ćemo možda vrsta to nadoknaditi. Recimo, od 20. Ovdje možete ići. 

To je vizualizacija podataka. To je vrlo osnovni jedno, ali ovo daje nam uvid u naše podatke. To nam govori da je, primjerice, da ima malo nakupina elemenata. I mi imamo veliku odskoke ovdje. To nam daje neke informacije o distribuciji. 

Ako smo, na primjer, za promjenu podataka do 150 ovdje i osvježiti, naša vizualizacija se promijenila. Ovaj dokument podataka upravljan. 

Pa naravno, svi ti elementi, Svi ovi atributi, možemo koristiti funkciju, ne samo brojevi, a ne samo x i y položajima. Dakle, možemo koristiti funkciju za boju. Dakle, mi ćemo učiniti isto. Mi ćemo dati funkciju. 

I recimo, mogli bismo imati uvjetima u našoj funkciji. Ova funkcija može biti stotina redova. To može učiniti vrlo, vrlo komplicirane stvari. 

Tako ćemo staviti ako izjavu ovdje. Recimo, ako naši podaci manje od 50 godina, to je neki prag da smo zainteresirani za u nekog razloga. Učinimo to zeleno. Inače, neka bude crveno. Kako je to? Nice. 

Dakle, naša vizualizacija podataka počinje prenijeti više zanimljivih informacija na mnogim kanalima. Dakle, sada znamo malo o distribuciji. A mi znamo da postoji neka vrsta odsječeni na 50 da smo zainteresirani. Mi znamo da postoje dvije točke podataka ispod tog praga, a većina od njih gore. 

Dakle, kao konačni korak, ovi podaci ovdje to je vrlo rijetko vidjeti ovako. Pa neka je samo ga premjestiti na varijablu zato što je čišći, kao što je ovaj. I onda mi koristimo tu varijablu ovdje. To je točno istu stvar. To je samo malo čišći. 

Zatim se, Zakonom III, Scales-- Dakle, jedan problem u pravu Ovdje je, ako ćemo promijeniti naš Podaci u ovoj 200 value-- Ako smo to promijeniti 400 ili nešto i refresh, onda ta vrijednost samo otišao van platna. Tako je naša logika ovdje kako mi vremena 3 i 20, to raširena, a zatim nadoknaditi to malo stvarno nezgrapnih. 

Što ti brojevi znače? Oni samo teško kodirani tamo. I oni su jako povezani s podacima. Želimo podataka upravljan dokument. Želimo vrlo fleksibilan dokument, da je dao podatke, prilagođava na njega i predstavlja ga. 

Ono što mi zapravo trebamo je, mi ima tu niz brojeva 10. 45, 105. I mi želimo da se na karti širina, puna širina ovdje. Dakle, imamo niz Brojevi idu od 0 do 100. I mi smo to kampus sam ide 20-700, u ovom slučaju. 

Mi vrsta žele kartu da na. Želimo razmjera da i a zatim ga nadoknaditi malo. Ispada da je D3 ima njih. To se zove ljestvica. Tako ćemo ga koristiti. 

Način na koji works-- ću tipa ovo gore, a zatim ga objasniti. To je mjerilo. Ono što će učiniti je, da će map out Vrijednosti 1-200 na to 20-600. Možemo provjeriti. Možemo vidjeti da je ovdje. 

Dakle, ako sam ga hraniti 1-- jedan trenutak. Daj mi jednu sekundu. Mora da sam ga pogrešno. Postoji li ići. Žao mi je zbog toga. 

Dakle, ono što će učiniti razmjera je, to će potrajati vrijednost a zatim pretvoriti da, proširiti da se, kako je to ispunjava cijeli niz tražiš. Dakle, u ovom slučaju, ako mi dati jedan, to će karta koja se na 20. A ako damo 200, što je ide na karti da na 600. A negdje između, Ako smo dobili 100, što je će biti negdje između 20 i 600. 

I naravno, sad to je ono što moramo ukloniti one kodirali Ono što mi imamo pravo postoji. Dakle, ono što želimo učiniti je uzeti podatke koje smo s obzirom da pojedinac podataka Element, i to prođe na ljestvici na prvom mjestu. Dakle, vaga će ga razmjeru. 

Well-- Oh, imamo malu pogrešku ovdje. Mi smo podatke koji nedostaju. Postoji li ići. I to je to širi se. 

To nam daje ista Rezultat smo imali prije, ali umjesto da one Teško kodirani ograničenja. A ako je veličina našeg platno promjene, na primjer, Ako želimo imati to više 400 piksela i to squishes out, to možemo imati over-- možemo ga proširiti, ili ćemo može smanjiti ovaj lijeve margine za nešto manje ili više od 20. Ti brojevi, to je teško kodirano Brojevi sada smisla za nas. 

A što smo mogli učiniti puno više Zanimljivi stvari. Dakle, umjesto da je linearni razmjera, možda žele prijaviti na ljestvicu. I da će nam dati ljestvice dnevnika. 

Tako sada naša razmjera, umjesto Samo širi izvan tog raspona, to radi sofisticiranije stvari. Umjesto da taj raspon teško kodirani, i umjesto da taj 600, smo možda želite koristiti samo širinu, pa od 20 do širine minus 40, 2 puta margina na drugoj strani. I to čini puno više smisla netko tko bi mogao pogledati koda. 

Zanimljivo, vaga dobiti Vrlo, vrlo sofisticiran kao dobro. Oni učiniti mnogo zanimljivih stvari. Dakle, vaga ne mora nužno imati da rade samo s brojevima. Učinimo različitim bojama. 

Dakle, naš asortiman mogao be-- naša domena 1 do 200. To je ulaz stvar. Ali mi možda želite preslikati iz zelene do crvene, npr. A sada, ako mi to prođe 1, ćemo dobiti zeleno. Ako smo da je to 200, mi ćemo dobiti crveni. A ako ga prođe nešto između, to će biti neki miks koji, negdje na gradijentu između zelene i crvene boje. 

I umjesto da Ova vrsta nezgrapnih logike imamo ovdje uvjetovana upravo tamo, bismo mogli imati something-- Linearno mjerilo između njih. Tako ćemo koristiti ljestvicu smo upravo stvorio, koji smo pozvani boju. I mi bismo dali D, koji je Naša elementa podataka. I tamo idemo. Imamo različitim bojama. 

Dakle, to je mapiranje. Dakle, krajnje lijevo je potpuno zelena. Sasvim desno je potpuno crveno. A sve što je između funkcija d. Imamo zanimljiva vizualizacije ovdje. No, naši podaci je vrsta dosadno. Idemo vidjeti što možemo učiniti ako imali smo više zanimljivih podataka. 

Zakon IV, rad s Data-- prva stvar ćemo želite učiniti da bi naš vizualizacija zanimljivije je premjestiti podatke negdje drugdje. To je vrlo nespretan imati podaci na tvrdom ovdje kodirani. I općenito, mi ćemo biti molba netko drugi za podatke. Mi ćemo se možda pitaju vladu, Biro za popis stanovništva, što je vaše podatke a zatim planiraju da ili pita Neki treće strane entiteta za neke podatke a zatim izgradnju vizualizacija na to. 

Dakle, prva stvar koju želite učiniti je potez koji bi negdje drugdje. Tako ću stvoriti podnijeti ovdje zove data.json. JSON je format podataka. Ne morate znati puno o tome. A mi ćemo se kopirati Malo podataka imamo tamo, zalijepite ga tamo doslovno, otići natrag na našu vizualizaciju koda ovdje, i koristiti ovu funkciju upravo ovdje. Ne morate znati pojedinosti. No, ono što će učiniti je, ona će tu datoteku, dohvatiti ga, i vratiti se na nas. Pa što to čini se, to ide i dobiti data.json datoteku. A onda je sve kod koji je razvedena inside-- suštini, sve kod nas ima there-- će pokrenuti samo kada smo dobili podatke natrag. A onda će se pokrenuti da kod s podacima koje imamo. Veliki, imamo vizualizacija da upita neko kôd negdje drugo, što je obično gdje upite neke podatke iz negdje drugdje, što je obično Kako vizualizacije raditi. 

Ali ja želim ići natrag u podacima. Tako su podaci iz temelja D3-- D3 troši podatke da je popis stvari. D3 očekuje podaci biti samo popis stvari, niz stvari. Nije bitno ono što one stvari su, tako dugo dok je niz njih. 

Pa evo, na primjer, mogli bismo od Naravno su pomičnim zarezom vrijednosti. Mogli bismo imati negative. D3 nije briga, tako dugo kao što je popis stvari. 

Kao zanimljivosti mi mogao imati, također smo mogli imate popis žice kao što je to. Dakle, to su Crimson naslovi Pokupio sam prije nekoliko dana. A možda možete pronaći neke zanimljive stvari o tim od naslova. 

Pa opet, to je popis stvari. D3 ne brine. To se dogoditi da bude string. Mi smo promijenili naše podatke. 

Vratimo se na našu vizualizaciju. Sada, naša vizualizacija očekuje ulaz za brojeve. Tako ćemo imati napraviti nekoliko promjena. Tako, na primjer, u prvom redu, možda želimo staviti ove krugove zajedno duljinom naslova, Broj znakova u naslovu. 

Pa što ćemo učiniti is-- svaki put naš Funkcija se zove s nizom, pronaći ćemo da je duljina i zatim proći da bi razmjera. Boja, ja ću se vratiti da bi čelika plave. I tamo idemo. Imamo vizualizaciju od Crimson naslove. 

Naša ljestvica je malo off. Pretpostavimo da je najduža Naslov je duga 100 znakova, tako da obuhvati se malo. A imamo vizualizaciju. Dakle, čini se da je većina naslove su prilično blizu jedna drugoj, U pogledu znakova linije. Ali on ima stvarno ističe. 

Mogli bismo izgraditi neke alate istražiti kako više. No, kada sam radio na tome, sam je znatiželjni hoće li, u ovom setu podataka, Naslovi s dvotočkom U njima će biti više. I pretpostavlja da bi. 

Tako ćemo saznati. Neka je koristiti boju Kanal kao što smo učinili prije, kodirati neki o tome je li Tu je debelo ili ne. Tako ćemo koristiti uvjetna opet. Ne morate znati Detalji ovog, ali to je, kako smo provjerili string za određeni karakter U JavaScript, opet, nije bitno. 

Ali ako ne nađemo debelog crijeva, mi ćemo se vratiti zeleni. A ako nam je činiti, mi ćemo se vratiti crveno. Pa opet, naslova koji su debelo će biti crvene boje. To je ono što ovaj means-- lijepo. 

Tako se čini da je moj Hipoteza je udario. Postoji samo dva. Imamo samo šest bodova podataka a samo dva su dvotočke. No, čini se malo više Na donjem kraju, u stvari. Naslovi s dvotočke činiti to uglavnom biti kraći, barem u našim podacima set-- zanimljiva. 

Ajmo se vratiti da bi čelika plava i onda vidjeti ono što možemo učiniti s još više zanimljivih podataka. Pa opet, sam spomenuo da je Podaci u D3 je popis stvari. Vidjeli smo brojeve mnogih vrsta. Vidjeli smo konce. No, stvari mogu biti objekti. 

Oni mogu biti komplicirani stvari da su puno stvari. Da biste jasnije reći da, U većini slučajeva, Želite izgraditi svaku točku podataka kao više komplicirano nego samo jednu vrijednost. Ako bih zamisliti baze podataka o studentima, Tu bi moglo biti student ime, student ID, i puno stvari povezane s posebnim rekord, Ne samo niz ili broj. Pa pogledajmo kako. 

Ovo je jedan takav skup podataka. To je skup podataka o potresima. Dakle, sve što ovdje na našoj listi ili niz stvari sadrži sebe mnogo stvari. Tako je svaki podatak ima Veličina i koordinirati. I sami koordinate sadrži dvije stvari. 

Dakle, svaki dan je sada puno više komplicirano i puno zanimljiviji i sadrži mnogo više zanimljive informacije. Da vidimo možemo graditi izvan toga. Vraćanje natrag u ovdje, opet, pomoću naša histogram krug vizualizacija smo izgradili, neka je vidjeti ako mi može graditi vizualizacija distribucije veličine u našem skupu podataka. 

Pa evo, to je isti koncept. Ali sada, d sadrži više stvari. d sadrži mnogo podataka elemente. Tako smo dobili d natrag. D3 nam daje d. A mi odgovoriti pronalaženje veličinu d je zatim prolazi koji mjerilu. 

I onda moramo mijenjati naš razmjera, naravno. Tako veličine jednostavno ne ići puno više od 10. Zapravo, nikada nije bilo 10 magnituda potresa. No, to je vrsta naša gornja kraj, naš gornji spektar. 

Idemo osvježiti. Lijepo, imamo vizualizaciju. Zanimljivo je kako note-- postoje dvije točke podataka koje gotovo točno na vrhu svake drugo, u smislu veličine. To vidim po neprozirnost smo pomoću. 

Imamo geografske podatke. Imamo širine i dužine. Možda bismo mogli učiniti nešto Puno zanimljivije s tim. Idemo naći neki više zanimljiv način da vizualizirate to više komplicirano Podaci imamo pristup. 

Zakon V, Mapping-- temelja, želimo ih staviti na karti. Mislim, ovo je mjesto gdje se to događa. Želimo da se kodirati podatke o Položaj tih potresa čitanja, kao i njihova veličina, jer imamo je sada. Mi razumijemo kako konzumirati složeniji podataka. 

Prvo što ćemo učiniti je izraditi kartu, kartu pozadine. Ja ću proći to vrlo brzo. To je lukav broj. To je još jedan od onih Recepti ne stvarno moraju shvatiti u potpunosti za korištenje. No, to je broj. Ovaj kod ovdje stvara kartu. 

Nećemo ići u detalje. No, površno, što se je, ona upita ovaj us.json datoteku koja je podatkovna datoteka kao što su jedan smo imali prije. To je složeniji, naravno. No, u ovom slučaju, sve, svaki podatak je ovo stanje i ima popis širine i zemljopisne dužine koji definiraju poligon, koji oblik, to stanje. 

Pa što će D3 učiniti je slična za ono što smo učinili prije. To će zahtijevati da se i vezati da se element. A tu je funkcija koja će kartu koja elementa van, temelji se na geografskim širinama i duljine. Možete pročitati više o tome. I ja ga preporučujem. 

Tu su linkovi na kraj ovog koda objavljena. I kod je komentirao. U tu su linkovi za dalje to. Preporučujem ti ga potražiti. No, ono što mi je stalo je ova projekcija funkcija. Želim ići kroz to. 

Prije svega, dopustite mi pokazati ti da, da, imamo kartu. Karte su super. Pa pogledajmo ovo Funkcija proizvodnje. 

Projekcija je jako puno kao ljestvici, opet vage. Dakle, ono što proizvodnja za ova projekcija funkcija nema je, mogli bismo to prođe dužine i latitudes-- u ovom slučaju, ove vrijednosti su ovdje Lat-žudi za zgrade sjedimo u pravu now-- na projekciji. A projekcija će se pretvoriti da se u X i Y vrijednosti piksela. 

Dakle, ono što radi projekcija je vrlo slična našem skali. To je uzimanje našim geografskim širinama i duljina koja predstavlja cijeli svijet a smanjuje i dimenzioniranje da dolje na trgu kako želimo, da smo ga dali. U ovom slučaju, mi smo donošenje tih vrijednosti. I to daje nam, dobro, da na zaslonu znači 640 piksela. Cijeli ovaj ekran je 700 piksela široka, tako da nas čini oko ovdje, i 154 piksela dolje, što bih Procjena je prilično ovdje. 

Tako da one Par-čezne, što predstavlja nešto na cijelom svijetu i squishing i kreće se da oko da nam X i Y vrijednosti piksela dati, to je prva stvar koja je učinjeno u ovom mapiranje koda. I onda ostatak kod troši podatke a zatim mapirati ta Par-čezne na nešto na zaslonu. 

No, mi ćemo koristiti ovu projekciju funkcije, jer ispada imamo lat-žudi, teži što je dobro. Gledajući unatrag na naše podatke, imamo širine i zemljopisne dužine za svakog promatranja. Tako ćemo koristiti projekciju. 

Tako gledajući svoje izlaganje, želimo našu exposition-- imamo zemljopisne širine i dužine. Ali mi želimo vrijednosti piksela. I to ispada, imamo točno ono što want-- projekciju. Vrlo slično kao što su pomoću skale upravo ovdje, sada ćemo koristiti projekcije i proći koordinira. Dakle, prva stvar mi smo doing-- tako da smo uzimajući d, što je pojedinac podataka element pojedinog potresa čitanje. Prva stvar koju smo učinili je dobiti koordinate. U redu, imamo koordinate. 

Druga je stvar što mi radimo je proći da na projekciju. Projekcija pretvara one koordinate u vrijednosti piksela, X i Y. A onda je zadnje što smo želite učiniti je jednostavno dobiti x, što je ovaj slučaj prvi. To je prva od dvije stvari koji su se vratili po projekciji. 

Mi ćemo učiniti isto za y. No, umjesto toga, mi ćemo se vratiti Drugi element y. Nabavite spremni za osvježavanje. Ooh, extra lik here-- lijepo, imamo Podaci pogon dokument koji je prikrivanje ovu JSON datoteku objekata, što kartu, a mijenja atribut u odnosu na podatke to projicirati na karti. To je stvarno zanimljivo. To je super. 

Idemo uzeti gore zarezati. Mislim, imamo dva komada Podaci sa svake točke podataka. Mislim, tri. Imamo koordinate, što je x i y. I mi imamo veličinu. 

Moramo kodiranje veličine nekako. Imamo puno kanala. Možemo koristiti boju. Možemo koristiti radijus. Možemo koristiti neprozirnost. Mogli bismo iskoristiti mnoge stvari u kodu. Svaka od tih atributa i mnogi više da se ne nalazi na ovom popisu, jer su izborni, mogli bismo koristiti za kodiranje ove podatke, moždani udar i sve ove stvari koje sam spomenuo. 

Učinimo radijus. Mislim radijus je većina intuitivno. Pa opet, mi ćemo zamijeniti taj hard-kodirane 40 i napraviti neke izračune. Mi ćemo opet koristiti naš omiljeni ljestvice. I mi smo prošli d. No, ne bih, jer želimo veličinu D. d je samo točka podataka. Mi ćemo proći veličina na ljestvici. 

Ajmo opet pokušati. Ooh, to ne radi. Zašto to ne rade? 

Dakle, ne zaboravite ono što radi razmjera. Pogledajmo ljestvici ponovo. Mjerilo karte 1-10 na na 22-600, više ili manje. 600 je ogroman. To je razlog zašto smo sve to. 

Zato želimo promijeniti naše ljestvice nešto više razuman. Recimo, želimo 0-60. 60 je velika, ali 10 potresa su nevjerojatno rijetki. U stvari, oni nikada dogodilo. 

Pa što će to učiniti, to će potrajati naša veličina koja ide od 1 do 10 i mapirati ga na to proširiti van. A mapirati ga na 0-60. Idemo osvježiti. 

Lijepo, imamo vizualizaciju. To je super. To je stvarni podaci. Primijetit ćete, u mom malom igračkom Primjer, najveći potres je pravo na vrhu nas. No, to je to. Imamo datum pogon vizualizaciju koji troši podatke i daje nam stvarno zanimljive informacije. Da, neka je dodati neke interaktivnost na njega. Spomenuo sam da je jaka snaga D3. 

Pa evo, za svaki element, mi smo opisujući hrpu atributa. Ali, mi također može opisati ono što želimo dogoditi interaktivnosti elementima. Na primjer, mogli bismo opisati što se događa kada se miš iznad. I vrlo sličan da, koja će uzeti funkciju, Vrlo slično pripisuje smo imali prije, gdje smo napraviti nešto elementa kada prelazite preko njega. 

Dakle, prva stvar koju trebate to je odabir tog elementa, ga naći u osnovi, u pregledniku. a onda bismo mogli postaviti atribut na njega. Dakle, ono što ja radim ovdje, kad smo lebdjeti preko nečega, mi ćemo dobiti tu elementa a zatim postavite svoju neprozirnost natrag 1, s potpuno neprozirno. Idemo vidjeti kako to izgleda. 

Čini mi se extra zarezom ovdje. Dakle, ako smo lebdjeti ovamo, ona dobiva puna. Ali sada, naravno, to ostaje puna, jer mi moraju opisati što se događa kada je izvadite naš pokazivač. Tako ćemo učiniti upravo to na mouseout, za razliku od Prelazak mišem. 

A mi ćemo ga resetirati na ono što smo imali before-- 0.5. A sada, svaki put smo hover, dobili smo puni krug. Pomaže nam vidjeti što smo mi smo odabirom osnovi. 

A sada ćemo napraviti ovo stvarno super. Idemo spojiti ovo stvarnim podacima. Tako ćemo pitati mogla USGS o svojim podacima. Dakle, US Geological Survey ima podatke o potresima. Oni imaju javne API koji je u mogućnosti da se konzumira u JSON formatu. Tako ćemo učiniti. 

Dakle, to je malo koda koji spaja na USGS API. A tu je malo obrade na njemu. To nije relevantan, ali to pojednostavljuje na jednostavan format podataka poput onog smo imali prije. Tako sam se riješiti naš poziv da se naš lažni data.json na datoteku. I umjesto da, ja zovem USGS bitno. 

Idemo osvježiti, lijepo. To je stvarni, stvarnim podacima od ovog tjedna za potrese. To je stvarno zanimljivo. To ne iznenađuje za nas, ali postoje Puno potresa na West Coast u Kaliforniji. Ali mislio sam da je to jako zanimljivo da je bilo toliko potresa na Aljasci, i očito, Ovdje u Srednji zapad. Mislim, zanimljivo, a mi smo dobri. To je zaključak. 

No, u osnovi, to je ono D3 pomaže nam učiniti. Ona nam pomaže preuzeti podatke, vežu to elementi u DOM, i imaju ti elementi promijeniti kao funkcija podataka, ima one atribute, sve mnogi atributi elemenata, sve biti korisno za kanale prenijeti podatke. 

D3 je nevjerojatno snažan Knjižnica i nevjerojatno dobro izvoditi. To je neka moćna stvar. Vizualizacija podataka je Nevjerojatno moćan alat za prijenos na ljude duboko uvidi da dođe do njihove srži i pomaže im razumjeti, u ova duboka i intuitivan način, Kako podataka radi i kako Podaci mijenja naš život.