>> [Zenelejátszási]
>> DAVID Chouinard: én vagyok David Chouinard, és ez D3.
Üdvözöljük.
Megyünk, hogy megtudjuk, D3 ma.
D3 egy JavaScript keretrendszer az épület egy magas színvonalú
Interaktív megjelenítési az interneten.
Dolgok, mint mi vagyunk, látta a hátán velem,
fogunk tanulni, hogy azok, dolgokat, egyfajta alapjait is.
De ez lesz jó.
Kezdjük hogy szép képeket.
Van több demók A kilátásokkal elérhető.
Csináljuk.
>> Évi I. törvény, DOM manipulation-- megyünk kezdeni rögtön, hogy jó dolog.
Először is, a bal oldalon, van-kódot.
A jobb oldalon van az eredmény a mi kódot.
Menjünk át rajta.
>> Csináljunk egy kört.
Hogy hangzik?
svg.append circle-- mi csak tett egy kört.
Nem hiszel nekem, ugye?
Ez nem létezik.
>> Szóval mit csináltunk itt van, SVG méretezhető vektorgrafikus.
Ez az az út, amit mondani a böngésző hogy vektorgrafikus a böngészőben.
Amit csináltam most adunk egy kört böngészhet.
>> Az ígéret szerint a kör igényel egy kis alaptulajdonsága
mielőtt ténylegesen látni.
El kell mondanunk, hogy a x helyzetét, a y pozícióját, sugara.
Nem mondtunk, hogy bármely, hogy így nem látunk most.
De mondjuk meg, hogy a cucc.
>> Tehát először is, megvan hogy körünkben a nevét.
Így nevezzük kört.
Körünkben van neve most.
És Adjunk néhány attribútuma.
Mit szólnál CX volna középre x, így A központ a x helyzetbe.
Mondjuk, 200 200 pixel.
>> Adjunk egy y 200 pixel is.
És egy r, egy sugara, mintegy 40 pixel.
Most lássuk.
Nem tudom pontosan.
>> Tessék.
Van egy kört helyzetben 200 pixel, 200 pixel, sugara 40 pixel.
Klassz, ugye?
Van egy kört.
Igen.
>> Tehát nem kell, hogy kövesse végig.
Mindezek a példák, mind a A kód, amit ma teszek
lesz online, az end formájában interaktív példák
A ellenőrző pontok minden cselekedetét, és így tovább.
>> Csináljuk több dolgot.
Ez a fekete kör valóban csúnya.
Sajnálom, hogy a hiba üzenetek ott.
Oda megyünk.
>> Adjunk egy színt.
Hogy-hogy?
Szeretek acélkék.
Nos, mi kört színt váltott.
Ez nagyszerű.
Legyünk félig átlátszó too-- félig átlátszó.
>> Tehát ezek azok a tulajdonságok mi meghatározó a kör.
Az első dolog, amit nem is teszünk egy kört az oldalon.
És akkor mi meghatározása egy csomó tulajdonságait.
Néhány ilyen van szükség, mint a CX, CY, és Sugár.
És a többi opcionális.
>> Van egy csomó több attribútum.
Van egy csomó közülük.
Például, lehet egy szélütés is, a stroke piros.
De nézzük távolítsa el ezt.
Újra itt vagyunk egy kört, egy kék kör.
>> Szóval, hogy több kört.
Hogy-hogy?
Csináljunk egy másik kört.
Ez izgalmas, ugye?
>> Tehát mondjuk én csak Copy-beillesztett amit már.
Nevezzük ezt circle2.
És lássuk a pontos ugyanezt, és adja meg
attribútumok, kaptak x pozíciója 300.
Hurrá, van két kör most.
>> És persze, tudtuk frissíti ezeket az értékeket.
Tudtam tedd 400, és most mozog.
És mivel ez a bosszantó, hadd távolítsa el, így circle2.remove.
Már elment.
>> Szóval, mit csinálunk, és csak nagyon, very-- erre
nagyon hasonló ahhoz, amit Tehet jQuery, például.
Mi csak manipulálni A DOM, úgy hívják.
Lehet, hogy hallotta, hogy szót.
Hozunk létre cucc, beállítás attribútumok cucc, eltávolítja a cucc.
>> Nos, itt kezd a dolog érdekes.
Így később a kódot, akkor még mindig lásd az eredeti kör itt.
Akkor most visszaállítja a tulajdonsága, hogy CX.
Mondjuk, hogy x helyzetben, hogy 400.
És fogok átmenet hogy így ez nyilvánvaló.
Oda megyünk.
>> De azt egyetlen kört.
Mi meg néhány attribútum.
Adtunk egy másik kör, kivette.
És akkor mi módosításával az eredeti kör.
>> De itt van, ahol ez lesz sokkal érdekesebb.
Nem csak tudjuk állítani attribútumok mint most értékek, azt mondhatjuk,
Hé, kör, menj helyzetbe 200.
Azt is be őket funkciókat.
>> Tehát ahelyett, hogy 400 itt, tudjuk, hogy néhány számítást
on the fly, amit mi szeretnénk, hogy a jellemző, hogy legyen.
Szóval így azt fejezni.
Azt mondjuk, ahelyett, 400, hadd kapsz egy funkcióját.
És itt, ezen belül a funkciót, tudjuk, hogy minden őrült számítást.
>> Tudtuk, hogy az idő és a nézd meg néhány más dolog
és dinamikusan döntsék A kör milyen értéket akarunk.
Mi lenne, hogy ez egy random x helyzetben?
Szóval ennyi.
>> Tehát mi, hogy azt mondja, a Minden x futtassa ezt a funkciót.
És mit csinálunk éppen tervezi Néhány dolog, egy véletlenszerű időpontokban szélessége
és visszaadja azt.
Így minden alkalommal futunk, hogy kapunk egy kört, hogy megy egy random helyre.
Ez klassz.
Úgy érzem, tudtam nézni Ebben az egy kicsit.
Kezdünk eljutni valami érdekeset itt.
Nézzük, hogy ez adatvezérelt most.
Nincs itt az adatait.
Nézzük változtatni.
>> Törvény II, adatvezérelt Documents-- Tehát térjünk vissza ide.
És nézzük csak megszabadulni circle2, mert mi csak hozzáadása és eltávolítása
azt.
Tehát nem igazán szükség van rá.
Mi kell egy csomó okosabb itt.
Mondjuk, van Egyes adatok valamilyen.
Egy moment-- mondjuk, mi volt adatai ebben a formában.
Volt egy tömb, csak egy csomó számot.
Van hét számból van, legyen az bármi represent-- összege
az emberek bankszámlájára, hogyan sokkal súlyúak, isten tudja, mit.
>> Ezek a számok, és mi szeretnénk használni a körök
hogy képviselje azokat a számokat valahogy.
Azt akarja lekötni a körök azokat a számokat.
Szóval mit csinálunk.
Mondjuk, azt akarjuk, körben minden számot.
Tudnánk tenni a régi dolog voltunk doing--
kör append és circle2 és circle3.
De ez kiderül a kezét, és van egy csomó ismétlődő logika.
>> Szóval térjünk okosabb ezzel.
Ahelyett, hogy a var kör svg.append, hogy mi csak a,
fogunk használni ez a kis blokk van.
Nem akarok menni mélyreható abba, hogy mi ezeket a részeket nem.
És ez a fajta egy bonyolultabb téma.
És bárcsak tudnám.
>> De a legfontosabb dolog, hogy recognize-- és látni fogod, nagyon gyakran D3 kódot.
Ez a szövegrész az alapvető teremt annyi körök
vannak olyan adatelemek tömbbe itt.
Tehát ez létrehoz annyi körökben vannak olyan elemei.
Ez létre fog hozni számunkra hét kört.
És ez nem egy nagyon, nagyon legfontosabb dolog.
Tehát fussunk, hogy.
Nézzük eltávolítani a többi kört.
Nézzük csak hozzászóló elválnak, és futtassa újra.
>> Oda megyünk.
Tehát körünkben itt van egy sokkal sötétebb, mert
Hét körökben, egy a tetején a többi.
Most létrehozott hét kört, egy minden minden egyes ilyen adatelemek.
De van egy kulcs dolog, ami történt ezzel a részlet itt.
>> Ez az adat volt kötve.
Tehát minden egyes ember adatelemek,
10, 45, 105, köteles volt egy bizonyos kör.
Tehát ezek nem csak létre egy csomó körök
de egybecseng a két dolgot együtt.
>> És a jövőben, mert létrehoztunk azokban a körökben ezzel a D3 funkciót,
ha adok egy kört, akkor add nekem a hozzátartozó adatot is.
Így lehet kérni D3.
Hé, D3, én ezt a kört.
Mi az adatokat, hogy a körnek?
És D3 megmutatná 10 vagy 45 vagy 105.
>> Ezek a dolgok kötik.
Ez egy nagyon-nagyon alapvető koncepciója.
Nézzük meg, hogy.
>> Szóval, ahogy mi megkérdeznéd D3-- így ez irreleváns az,
de csak bízz bennem rajta.
Így kérünk D3.
Hé, D3, hogy nekem az első kör, amely megtalálható.
Add nekem az első körben megtalálható.
És akkor megkérdezhetnénk D3, mi az adatokat, hogy, mint ez, a 10.
>> Szóval csak kérdezni D3, rám talál Az első körben megtalálható.
Mi az adatokat?
10, hogy valóban a mi első adatok elem.
Megkérdezhetnénk, hogy, hé, D3, talál meg minket a harmadik kört.
105.
Miért van ez igazán fontos?
>> Tehát itt már említettem, hogy mi lehetett használni funkciókat.
És azt említette, hogy volt egy nagyon erős dolog.
Így nem csak a funkciók a dolgokat mint hogy némi számítást, például,
vissza egy véletlen számot, akkor is csinálni a dolgokat adatok alapján.
Ez az, amit adatvezérelt dokumentumok jelenti.
Ez az, amit D3 képvisel.
>> Tehát ez x postition-- helyett Az csak azt mondom, a köröket,
hogy x helyzetben 200 mi lehet, hogy ez egy funkciót.
És itt, tudjuk, hogy néhány számítást.
és d Itt áll a helyén az adatokat.
Így minden alkalommal van egy kör, alapvetően,
D3 teremt a hét körökben.
És akkor minden
>> kört, hogy fog menni, hé, CIRCLE1 mi a x helyzetét.
Korábban voltunk Mindig megválaszolása 200.
De most, minden alkalommal D3 kéri us mi a x helyzetben,
ez meg fog adni us-- van ez a kör, így már az adatokat.
Meg fog adni nekünk az adatokat, és azt mondják, Mit akarsz a kiállítás is,
alapul, hogy az adatok.
>> Nézzük csak vissza a tényleges adatokat.
Tehát, ha fut ez az, ez ad us adatvezérelt dokumentumokat.
Ezek a körök alapján kapcsolatban position--
ők bázisok függvényében az adatokat.
>> Tehát az első kört, D3-hoz egy kört.
És akkor D3 kéri tőlünk, hogy mit csinál szeretné a kiállítás is.
És mi csak azt mondják, amit az adatok.
Hogy a kiállítás 10.
>> Aztán megkérdezi, mit akar a kiállítás, hogy a második kör.
És mi válaszolunk, 45.
És, persze, lehet hogy néhány számítást itt.
Rájöttem, hogy azokban a körökben a fajta összenyomva fel.
>> Szóval szorozd meg 3, szaporodnak adatok 3.
A kör csak most bővült ki.
Mi érték háromszorosára emelkedett.
>> A kör valóban szélén, úgyhogy talán egyfajta kompenzálni.
Mondjuk, 20.
Tessék.
>> Ez egy adat vizualizáció.
Ez egy nagyon alapvető egyet, de ez ad némi betekintést adatokat.
Azt mondja, hogy, például, mi Van egy kis csoportja elemeket.
És van egy nagy kiugró itt.
Ez ad némi információt eloszlásáról.
>> Ha volt, például, változtatni Az adatok 150 itt és frissítési,
a vizualizáció változik.
Ez a dokumentum adatok vezérelt.
>> Így természetesen ezek az elemek, ezek a tulajdonságok itt,
tudjuk használni a funkciót, nem csak a számokat, nem csak
az x és az y pozíciókat.
Így tudjuk használni a funkciót a szín.
Tehát azt fogjuk csinálni ugyanazt.
Majd adja meg a funkciót.
>> És mondjuk, mi lehetett volna conditionals a mi funkciót.
Ez a funkció lehet száz sor hosszú.
Meg lehet csinálni, nagyon, nagyon bonyolult dolog.
>> Tehát mondjuk az if itt.
Mondjuk, ha adataink kevésbé mint 50, ez aztán a küszöböt
hogy érdekel minket a valamilyen okból.
Tegyünk a zöld.
Ellenkező esetben, tegyük piros.
Hogy-hogy?
Nice.
>> Tehát mi adatvizualizáció kezd közvetíteni érdekesebb információk
számos csatornán.
Tehát most már tudjuk egy kicsit eloszlásáról.
És tudjuk, hogy van valamiféle vágva, 50, hogy mi érdekli.
Tudjuk, hogy van két adatpont az alatt, és legtöbbjük
feletti.
>> Tehát, mint egy végső lépésként, az adatokat itt, ez nagyon ritka, hogy ennek ilyen.
Úgyhogy csak kimozdíthatnák, hogy a változó mert ez tisztább, mint ez.
És akkor használjuk, hogy a változó itt.
Ez pontosan ugyanaz a dolog.
Ez csak egy kicsit tisztább.
>> Következik, Act III, Scales-- Tehát az egyik probléma jobb
Itt van, ha megváltoztatjuk a adatokat ebben a 200 value--
ha a változás, hogy 400 vagy valami, és frissíteni,
akkor ez az érték csak ment offscreen.
Szóval mi a logika itt Az, hogy hogyan csináljuk a szer 3-
és 20, hogy terítse szét, majd ellensúlyozza, hogy egy kicsit valóban nehézkes.
>> Mit jelentenek ezek az jelentenek a számok?
Ők csak bedrótozott van.
És ők nagyon kötődik az adatokat.
Szeretnénk adatvezérelt dokumentumot.
Szeretnénk egy nagyon rugalmas dokumentumot, hogy az adott adatok, alkalmazkodik hozzá
és képviseli.
>> Amit alapvetően szüksége van, akkor Van ebben a tartományban a számok 10.
45, 105.
És szeretnénk feltérképezni, hogy ki rá szélessége, teljes szélességében itt.
Tehát van a tartományban számokat majd 0-tól 100.
És itt van ez a campus I megy 20-700, ebben az esetben.
>> Azt a fajta szeretnénk feltérképezni, hogy a.
Szeretnénk bővíteni, hogy fel- majd ellensúlyozni, hogy egy kicsit.
Kiderül, hogy a D3 rendelkezik ezekkel.
Úgy hívják skálán.
Úgyhogy használni.
>> Az hogy works-- fogok írja ezt fel, majd megmagyarázni.
Ez egy skála.
Mit fog tenni az, akkor feltérképezni Értéke 1 és 200 a 20-600.
Megnézhetjük, hogy.
Láthatjuk, hogy itt.
>> Tehát ha én táplálja 1-- egy pillanatra.
Adj egy másodpercet.
Azt kell helyesen írta azt.
Tessék.
Nagyon sajnálom, hogy.
>> Tehát mi skálán fog tenni a, el fog tartani egy értéket
majd átalakítani, hogy bővíteni, hogy ki, így
kitölti a teljes körű kérsz.
Tehát ebben az esetben, ha mi adunk neki egyet, ez lesz feltérképezni, hogy ki rá 20.
És ha mi adunk neki 200, ez majd feltérképezni, hogy a 600.
És valahol a kettő között, Ha megkapjuk a 100, ez
lesz valahol A 20 és 600 között.
>> És persze, most ezt el kell távolítani azokat a bedrótozott
dolgot kell ott.
Tehát amit mi szeretnénk tenni, hogy az adatok, hogy mi vagyunk
adott, hogy az egyes adatok elemet, és adja át a skála első.
Tehát skála méretezni.
>> Well-- Oh, van egy kis hiba itt.
Mi a hiányzó adatokat.
Tessék.
És, hogy bővíti ki.
>> Ez ad nekünk ugyanazt eredményeképpen a miénk volt,
de ahelyett, hogy azok bedrótozott korlátok.
És ha a méret a mi vászon változások, például,
Ha azt akarjuk, hogy ez a több mint 400 pixel és squishes ki,
mi lehet ez over-- tudjuk bővíteni kellett, vagy
csökkentheti ezt a bal margó valamivel kevesebb vagy több mint 20.
Ezek a számok, ezek a bedrótozott szám már értelme számunkra.
>> És mi lehetne csinálni sokkal több Érdekes dolgok is.
Tehát ahelyett, hogy egy lineáris skála, amit érdemes jelentkezni skálán.
És ez ad nekünk egy logaritmikus skálán.
>> Tehát most mi skála helyett Csak bővül ki, hogy a tartomány,
csinál kifinomultabb dolgokat.
Ahelyett, hogy ebben a tartományban a kemény kódolt, és ahelyett, hogy a 600,
azt érdemes csak használja a szélesség, így a 20 és a szélesség mínusz 40,
2-szer a margin a másik oldalon.
És ez teszi sokkal több értelme valakit, aki lehet, nézd meg a kódot.
>> Érdekes, hogy a mérleg kap Nagyon, nagyon kifinomult is.
Ők egy csomó érdekes dolgot.
Tehát mérleg nem feltétlenül rendelkeznek működtetni, csak a számok.
Csináljunk egy színskála.
>> Így a választékba be-- a tartomány 1-200.
Ez az input dolog.
De érdemes feltérképezni a zöld a piros, például.
És most, ha mi adja át 1, fogunk kapni zöld.
Ha mi adunk neki 200, mi lesz piros.
És ha mi adja át valami a kettő között, ez lesz valamiféle elegye, hogy
valahol a gradiens zöld és piros.
>> És ahelyett, ez a fajta belekapaszkodott logika
mi van itt a feltételes ott,
mi volna something-- a lineáris skála között.
Szóval mi lenne a mérlegelés mi csak létre, amit az úgynevezett színes.
És mi lenne, hogy ez a D, amely mi adatok elem.
És ott is vagyunk.
Van egy színskála.
>> Tehát ez feltérképezése.
Tehát a bal szélen teljesen zöld.
A szélsőjobb teljesen piros.
És minden között függvénye d.
Van egy érdekes látványterveket itt.
De mi adatok kedves volt unalmas.
Lássuk, mit tehetünk, ha mi volt érdekesebb adatokat.
>> Törvény IV, dolgozik Data-- az első dolog,
mi szeretnénk csinálni, hogy a mi vizualizáció érdekesebb
van, hogy az adatok valahol máshol.
Ez nagyon nehézkes, hogy Az adatok bedrótozott itt.
És általában leszünk kérve valaki más az adatokat.
Mi lesz talán kérve a kormányt, A Census Bureau, mi az adatait
majd ábrázolja, hogy kérdezzünk Egyes harmadik féllel valamilyen adatot
majd az épület egy vizualizáció, hogy.
>> Tehát az első dolog, amit szeretnénk csinálni a lépés, hogy valahol máshol.
Így fogok létrehozni File Here nevű data.json.
JSON adatformátum.
Nem kell, hogy sokat róla.
És fogunk másolni a Kevés adat, ami ott van,
illessze be oda szó, menj vissza a megjelenítő kódot
Itt, és használja ezt a funkciót itt.
Nem kell tudni a részleteket.
De ez mit fog csinálni az, azt fogja találni, hogy a fájl,
hozd el azt, és küldje vissza nekünk.
Szóval mit is csinál ez az, ez megy és kap a data.json fájlt.
És akkor az összes kódot, ami beljebb inside-- lényegében
az összes kódot már there-- lesz csak akkor működnek amikor megkapjuk az adatokat vissza.
És akkor ez fog futni, hogy kódot a rendelkezésünkre álló adatokkal.
Nagy, van egy vizualizáció, amely lekérdezi
Néhány kódot valahol más, ami általában
ahol lekérdezi néhány adat valahol máshol, ami általában
hogyan látványterveket dolgozni.
>> De azt akarom, hogy menjen vissza az adatokat.
Így az adatok alapvetően D3-- D3 fogyaszt adatokat egy listát azokról a dolgokról.
D3 számít az adatok csak egy listát a dolgok, egy sor dolgot.
Nem számít, hogy mik azok a dolgok vannak, amíg ez egy sor őket.
>> Tehát itt, például, tudtuk cselekedhetem Természetesen már lebegőpontos értékeket.
Mi volna negatívokat.
D3 nem érdekli, így a hosszú mivel ez egy listát azokról a dolgokról.
>> Érdekes dolgokat Lehetett volna, mi is
Van egy lista a húrok ilyesmi.
Tehát ezek a Crimson címlapra Felvettem egy pár nappal ezelőtt.
És talán itt talál néhány érdekes dolog ezekről a címlapra.
>> Tehát még egyszer: ez egy listát azokról a dolgokról.
D3 nem érdekli.
Ezek történetesen egy húr.
Már megváltozott az adatainkat.
>> Térjünk vissza a megjelenítés.
Most, a vizualizáció számít A bemenet lehet szám.
Szóval megy, hogy hogy néhány változtatást.
Így például, először is, talán akarjuk, hogy ezeket a köröket mentén
A hossza a főcím, a karakterek száma a főcím.
>> Szóval, mit fogunk csinálni ez-- minden alkalommal meg függvény hívására a húr,
mi megtaláljuk hosszára és majd át, hogy a skála.
A színes, fogok visszatérni hogy az acélkék.
És ott is vagyunk.
Van egy vizualizációs A Crimson címoldalára.
>> A skála egy kicsit off.
Tegyük fel, hogy a leghosszabb headline 100 karakter hosszú,
így span, hogy egy kicsit.
És van egy vizualizációs.
Úgy tűnik tehát, hogy a legtöbb főcímek elég közel vannak egymáshoz,
jellemben sor.
De egy valóban kiemelkedik.
>> Tudnánk építeni néhány eszközt felfedezni, hogy több.
De amikor én dolgozom ezen, én voltam Kíváncsi, hogy ebben az adathalmaz,
szalagcímek a kettőspont bennük hosszabb lenne.
Azt feltételezi, hogy igen.
>> Tehát nézzük meg.
Éljünk a színes csatorna, mint korábban,
kódolni valamilyen arról, hogy van egy vastagbél- vagy sem.
Tehát azt fogjuk használni a feltételes újra.
Nem kell tudni a részleteket a,
de mi ezt ellenőrizni a karakterlánc egy adott karakterhez
A JavaScript újra, nem releváns.
>> De ha nem találunk egy vastagbélrák, ismét zöld.
És ha így teszünk, akkor vissza a piros.
Tehát újra, szalagcímek már a vastagbél piros lesz.
Ez az, amit ez a means-- szép.
>> Úgy tűnik tehát, hogy az én hipotézist ütközött.
Már csak kettő.
Már csak hat adatpont és csak kettő kettőspont.
De úgy tűnik, egy kicsit az alsó végén, valójában.
Címlapra kettőspont tűnik hogy általában rövidebb,
legalábbis a mi adatok set-- érdekes.
>> Térjünk vissza, hogy a acélkék és aztán majd meglátjuk
mi tudjuk, hogy még További érdekes adat.
Tehát még egyszer megemlítettem, hogy adatok D3 egy listát azokról a dolgokról.
Láttuk számok sok fajta.
Láttuk szálakat.
De a dolog is lehet objektumokat.
>> Lehetnek bonyolult dolgokat amelyek magukban foglalják egy csomó dolgot.
Ha azt mondjuk, hogy világosabban, a legtöbb esetben, mi
szeretnék építeni minden adatot pontot bonyolultabb, mint csak egy értéket.
Ha azt képzelni, hogy egy adatbázis mintegy diákok,
ott lehet egy diák megnevezni, a diákigazolvány,
és egy csomó dolog jár egy adott rekord,
Nem csak egy string vagy több.
Tehát nézzük meg, hogy.
>> Ez az egyik ilyen adatállomány.
Ez egy olyan adatállomány, mintegy földrengések.
Tehát itt minden a listán, vagy tömb A dolgok tartalmaz sok mindent magának.
Szóval minden adatpont van nagyságát és a koordináta.
És koordinálja magukat tartalmaznak két dolgot.
>> Tehát minden nap most sokkal több bonyolult és sokkal érdekesebb
és sokkal többet tartalmaz érdekes információkat.
Lássuk, tudtuk építeni belőle.
Visszatérve itt megint segítségével a hisztogram kört vizualizációs
hoztuk létre, lássuk, ha tudjuk építeni a vizualizáció nagyságrenddel elosztó
A adatbázisunk.
>> Tehát itt, hogy ez ugyanaz a fogalom.
De most, d tartalmaz több dolgot.
d tartalmaz sok adatot elemeket.
Így kapunk D vissza.
D3 ad nekünk d.
És azzal válaszolunk, hogy megtalálják a nagysága A d majd halad, hogy a skála.
>> És akkor meg kell változtatnunk a skála, természetesen.
Így nagyságrendekkel egyszerűen nem ennél jóval több, mint 10.
Igazából még soha nem volt 10 magnitúdójú földrengés.
De ez a fajta a felső Végül a felső spektrum.
>> Nézzük frissíteni.
Szép, van egy vizualizációs.
Érdekes note-- így van két adat pont, amely
szinte pontosan tetején minden Más, nagyságát.
Látod ezt a homály mi használ.
>> Van földrajzi adatok teremteni.
Van szélességi és hosszúsági fok.
Talán tudnánk tenni valamit a sokkal érdekesebb az, hogy.
Nézzük meg egy kicsit Érdekes módon, hogy szemléltesse
ez a bonyolultabb adatokat mi való.
>> Évi V. törvény, Mapping-- alapvetően, akarjuk, hogy ezeket a térképen.
Úgy értem, ez hova vezet ez.
Azt akarjuk, hogy kódolni információkat elhelyezkedése a földrengés olvasmányok,
valamint azok nagyságát, mert van, hogy most.
Megértjük, hogy kell fogyasztani bonyolultabb adat.
>> Az első dolog, amit megteszek van hozzon létre egy térképet, a háttérben térképet.
Én megyek keresztül, ezt a nagyon gyorsan.
Ez trükkös kódot.
Ez is egy olyan receptek nem igazán
meg kell érteniük, teljesen használhat.
De ez kódot.
Ez a kód itt létrehoz egy térképet.
>> Nem fogunk menni részletesen.
De felületesen, mit csinál, lekérdezi ezt a us.json fájlt, amely
egy adatfájlt, mint Az egyik a miénk volt.
Ez bonyolultabb, természetesen.
De ebben az esetben, minden, Minden adat pont ez az állapot
és van egy listája szélességi és hosszúsági
hogy meghatározzák a sokszög, a formában, hogy az állami.
>> Tehát mi D3 fog tenni hasonló hogy mit csináltunk előtt.
Kérni fogja, hogy és kötődik, amely egy elemhez.
És van olyan funkció, amely feltérképezi az adott elem ki,
alapuló szélességi és hosszúsági.
Elolvashatja bővebben.
És ajánlom.
>> Vannak linkek a végén ezt a kódot írt.
És a kód kommentálta.
Ebben vannak linkek a további erről.
Azt javaslom, keresse ki.
De mi törődünk van ez az előrejelzés funkció.
Azt akarom, hogy menjen át, hogy.
>> Először is, hadd mutassam Önnek, hogy igen, van egy térképet.
Térképek hűvös.
Tehát nézzük meg ezt a termelési függvény.
>> Vetítés nagyon is mint egy skála, mérlegek újra.
Tehát mi termelés ez az előrejelzés funkció
nem is tudtunk átadni hosszúsági és latitudes-- ebben az esetben,
Az értékek itt vannak a lat-vágyik az épület
ülünk a jobb now-- a vetítés.
, És a vetítés konvertálni Ezt figyelembe x és y pixel értékeket.
>> Tehát mi vetítés csinál nagyon hasonlít a mi skála.
Az felidézi mi szélességi és hosszúság, amely képviseli az egész világon
és a szűkülő és a mérettel, hogy le a térre, hogy azt akarjuk,
hogy már adtunk neki.
Ebben az esetben mi vagyunk múló ezeket az értékeket.
És ez ad nekünk, nos, a képernyőn azt jelenti, 640 képpont.
Ez a teljes képernyő 700 pixel széles, így teszi velünk itt,
és 154 pixel le, amit én becslés nagyjából itt.
>> Tehát, hogy ezeket a lat-vágyik, amely ez olyasvalami, az egész világon
és squishing és mozgó szerint körülbelül hogy nekünk x és y pixel értékeket,
ez az első dolog, ami elvégezni a leképezést kódot.
És akkor a többi része a kód fogyasztja az adatok
majd azokat rendeli lat-vágyik rá valamit a képernyőn.
>> De fogunk használni ezt a vetítés funkciók, mert kiderül,
mi lat-vágyik vágyik is.
Visszatekintve az adatainkat, van szélességi és hosszúsági koordináták
minden megfigyelés.
Tehát vegyünk vetítés.
>> Így nézett a kiállítás, azt akarjuk, hogy exposition--
van egy szélességi és hosszúsági egy.
De mi szeretnénk pixel értékeket.
És kiderül, mi is pontosan amit want-- vetítés.
Nagyon hasonlít voltunk a skála itt,
mi most fog használni vetítés és adja át a koordinátákat.
Tehát az első dolog mi doing-- így vagyunk
szerzés d, ami egy egyedi adat eleme, amely egyedi földrengés
olvasás.
Az első dolog, amit van, hogy a koordinátákat.
Rendben, mi van a koordinátákat.
>> A második dolog, amit tehetünk, továbbítom a vetítés.
Projection átalakítja azokat koordinátákat a pixel értékeket, x és y.
És akkor az utolsó dolog, amit akarok, csak kap az x,
amely ebben az esetben az első.
Ez az első a két dolog által visszaadott vetítés.
>> Mi ugyanezt tesszük az y.
De ahelyett, ismét A második elem, a y.
Készüljön frissíteni.
Ooh, extra karakter here-- szép, van
adatvezérelt dokumentumot, ami eltitkolták ezt a JSON fájlban tárgyak,
hogy egy térképet, és a változó attribútum vonatkozásában az adatok
vetíteni azt a térképen.
Ez nagyon érdekes.
Ez jó.
>> Nézzük meg most egy kicsit.
Úgy értem, van két darab információk minden adatpont.
Úgy értem, három.
Megvan a koordinátákat, amely egy x és y.
És mi van a nagyságát.
>> Meg kell kódolni nagyságát valahogy.
Van egy csomó csatorna.
Tudjuk használni színű.
Tudjuk használni sugara.
Jól jönne fedőképesség.
Jól jönne sok mindent kódot.
Bármely e jellemzők és sok Több, amelyek nem szerepelnek ott,
mert ők nem kötelező, amit lehetett használja kódolni az adatokat, a stroke-
és ezek mind már említettem.
>> Csináljuk sugara.
Azt hiszem sugara a leginkább intuitív.
Tehát újra, akkor cserélje hogy kódolva 40, és egyes számítások.
Használni fogjuk a kedvenc skálán újra.
És mi már d.
D-t nem, mert azt akarjuk nagysága A d. d csak az adatok pontot.
Majd át a nagysága arányos.
>> Próbáljuk meg újra.
Ooh, ez nem működik.
Miért fontos ez nem működik?
>> Úgy emlékszem, milyen mértékben teszi.
Nézzük meg skálán újra.
Méretarányú térképek 1-10 on a 22-600, többé-kevésbé.
600 hatalmas.
Ez az, amiért mi vagyunk egyre ennek.
>> Ezért szeretnénk változtatni a skála valamilyen kényelmesebb.
Mondjuk, azt akarjuk, 0-60.
60 nagy, de 10 földrengések rendkívül ritkák.
Tény, hogy soha nem történt.
>> Szóval mi ez fog tenni, hogy elviszem mi nagyságrendű, hogy megy 1-10
és térkép azt, hogy bővítse ki.
És térkép azt, hogy 0-60.
Nézzük frissíteni.
>> Szép, van egy vizualizációs.
Ez nagyszerű.
Ez a tényleges adatok.
Észre fogod venni, az én kis játék Például, a legnagyobb földrengés
igaza van a nyakunkon.
De ennyi.
Van egy időpontra hajtott vizualizációs hogy fogyasztja az adatok
és ad nekünk igazán érdekes információkat.
Igen, jól jöhet egy interaktivitás hozzá.
Már említettem, hogy volt Az erős ereje D3.
>> Tehát itt, minden egyes elemére vagyunk leírja egy csomó tulajdonságait.
De azt is leírják, hogy mit akarunk történni interaktivitás elemeket.
Például, tudtuk leírni mi történik, ha az egeret.
És nagyon hasonlít, hogy viszem a funkciót,
nagyon hasonló a tulajdonítja a miénk volt,
ahol nem teszünk valamit a eleme, amikor lebeg felette.
>> Tehát első dolog, amit meg kell tennie, hogy válassza ki azt az elemet,
megtalálni alapvetően a böngészőben.
és akkor tudnánk állítani Egy tulajdonság azt.
Szóval mit csinálok itt, amikor lebeg több mint valamit, mi lesz az adott elem
majd állítsa opacitása vissza 1, a teljesen átlátszatlan.
Lássuk, mit, hogy néz ki.
>> Úgy tűnik, van egy extra pontosvessző itt.
Tehát, ha lebeg ide, megtelik.
De most, persze, marad a teljes, mert
van, hogy mi történik ha felszámoljuk kurzort.
Akkor most pontosan erre a mouseout, szemben a mouseover.
>> És mi visszaállíthatja az amit kellett before-- 0.5.
És most, minden alkalommal, amikor hover, kapunk egy teljes kört.
Ez segít nekünk, hogy mi vagyunk mi kiválasztása alapvetően.
>> És most nézzük, hogy ez nagyon jó.
Nézzük csatlakoztassa a valós adatokat.
Úgyhogy kérni lehetne USGS arról, hogy az adatok.
Így a US Geological Survey rendelkezik adatokkal arról földrengések.
Nekik van egy nyilvános API, ami képes fogyasztottak JSON formátumban.
Tehát lássuk, hogy.
>> Szóval ez egy kicsit olyan kód, csatlakozik az USGS API.
És van egy kis feldolgozó rajta.
Ez nem releváns, de egyszerűsíti azt egy egyszerű adat formátumban, mint például az
a miénk volt.
Szóval én megszabadulni a hívás a hamis data.json a fájlt.
És ahelyett, hívom Az USGS alapvetően.
>> Nézzük frissíteni, szép.
Ez a tényleges, valós adatok E heti földrengés esetében.
Ez nagyon érdekes.
Ez nem meglepő számunkra, de vannak
Sok földrengés a West Coast Kaliforniában.
De azt hittem, nagyon érdekes hogy olyan sokan voltak a földrengések
Alaszkában, és nyilván, itt a Midwest.
Úgy értem, érdekes, és jók vagyunk.
Erre a következtetésre.
>> De alapvetően ez amit D3 segít csinálni.
Ez segít bennünket, hogy az adatok, bind hogy tartalmaz DOM,
és ezek az elemek megváltoztatására függvényében az adatok,
hogy ezeket a tulajdonságokat, az összes sok attribútum az elemek,
Az összes hasznos lehet csatornák információ közvetítésére.
>> D3 egy hihetetlenül erős Könyvtár és meglepően jól fut.
Ez valami nagy dolog.
Adatmegjelenítési egy Hihetetlenül hatékony eszköz
továbbítására, hogy az emberek mély felismerésekre jut, hogy fő
és segít nekik megérteni, a ezt a mély és intuitív módon,
az adatok hogyan működik, és hogyan adatváltozások életünk.