>> [MUSIC Playing]
>> DAVID Chouinard: Unë jam David Chouinard, dhe kjo është D3.
Mirë se vini.
Ne jemi duke shkuar për të mësuar në lidhje D3 sot.
D3 është një kornizë JavaScript për ndërtimin e një cilësi të lartë
visualizations interaktive për web.
Gjëra të tilla si ajo që ne jemi duke parë në pasme të mua,
ne jemi duke shkuar për të mësuar për të bërë ato gjëra, lloj nga bazat e saj.
Por ajo do të jetë i freskët.
Le të ketë filluar duke bërë fotografi të mira.
Ne kemi marrë shumë popull e perspektivave në dispozicion.
Le të bëjmë atë.
>> Akti I, DOM manipulation-- ne jemi duke shkuar të fillojë menjëherë duke e bërë gjërat e ftohtë.
Para së gjithash, në të majtë, ne kemi kod.
Në të djathtë, ne kemi rezultat i kodit tonë.
Le të shkojnë nëpërmjet saj.
>> Le të bëjë një rreth.
Si e bën atë të shëndoshë?
svg.append circle-- ne vetëm e bëri një rreth.
Ju nuk më besoni, apo jo?
Kjo nuk është atje.
>> Pra, ajo që ne e bëmë të drejtë këtu është, SVG është grafikë vektoriale e shkallëzuar.
Kjo është mënyra që ne tregoni shfletuesit të bëni grafikë vektoriale në shfletuesin.
Ajo që ne vetëm e bëri të drejtë tani është shtuar një rreth për të shfletoni.
>> Premtimi është se rrethit kërkon një grimë e atributeve themelore
para se ne fakt mund të shihni atë.
Ne kemi nevojë për të të treguar atë pozicionin e saj x, pozita e saj y, rreze e saj.
Ne nuk e them atë ndonjë nga se, kështu që ne nuk jemi duke parë atë të drejtë tani.
Por le të them atë stuff.
>> Pra, para së gjithash, ju keni marrë për të dhënë rrethin tonë të një emër.
Pra, le të thërrasë atë rreth.
Rrethi ynë ka një emër tani.
Dhe le të dhënë atë një atribute pak.
Si rreth CX do të përqendrohem x, kështu qendra e pozicionit x.
Le të themi, 200 për 200 pixels.
>> Le t'i jepte një y prej 200 pixels si.
Dhe një r, një rreze, prej rreth 40 pixels.
Tani le të shohim.
Unë nuk mund të spell.
>> Nuk ju shkoni.
Ne kemi një rreth në pozicionin 200 pixels, 200 pixels, radius prej 40 pixels.
Lloji i ftohtë, e drejtë?
Ne kemi një rreth.
Vërtet.
>> Pra, nuk ka nevojë të ndjekin së bashku.
Të gjitha këto shembuj, të gjitha të Kodi unë jam duke bërë sot
do të sigurohet në internet në fund në formën e shembujve interaktive
me pikat e kontrollit në çdo akt, dhe kështu me radhë.
>> Le të bëjë më shumë gjëra.
Ky rreth i zi është me të vërtetë e shëmtuar.
Më vjen keq për këtë gabim Mesazhet e drejtë atje.
Ka ne do të shkojmë.
>> Le t'i jepte një ngjyrë.
Si është ajo?
Më pëlqen të blu çeliku.
E pra, rrethi ynë ndryshuar ngjyrën.
Kjo është e madhe.
Le të bëjnë atë gjysmë-transparente too-- gjysmë-transparente.
>> Pra, këto janë atribute ne jemi duke përcaktuar në rreth.
Gjëja e parë që kemi bërë është ne kemi vënë një rreth në faqe.
Dhe atëherë ne jemi duke përcaktuar një bandë e atributeve.
Disa nga këto janë të nevojshme, si CX, CY, dhe Radius.
Dhe të tjerët janë fakultative.
>> Nuk janë një shumë më shumë atribute.
Ka shumë prej tyre.
Për shembull, ne mund të kemi një pash, si dhe, një goditje e kuqe.
Por le të hequr atë.
Ne jemi duke u kthyer në një rreth, një rreth blu.
>> Pra, le të bëjë më shumë qarqe.
Si është ajo?
Le të bëjë një rreth.
Kjo është emocionuese, e drejtë?
>> Kështu që them unë vetëm kopjo-ngjit çfarë kemi pasur tashmë.
Le të thërrasë atë Rrethi 2.
Dhe le të bëjë saktë e njëjta gjë dhe t'i jepte
atributet, duke pasur parasysh një pozicion x prej 300.
Yay, ne kemi dy qarqe tani.
>> Dhe sigurisht, ne mund të Përditëso këto vlera.
Unë mund të vënë atë në 400, dhe tani ajo lëviz.
Dhe që është i bezdisshëm, le të hequr atë, kështu circle2.remove.
Është e shkuar tani.
>> Pra, ajo që ne jemi duke bërë dhe është vetëm shumë, very-- kjo
është shumë e ngjashme me atë që ju mund të bëni në jQuery, për shembull.
Ne jemi vetëm duke manipuluar DOM, është quajtur.
Ju mund të keni dëgjuar këtë fjalë përpara.
Ne jemi duke krijuar sende, duke vendosur atributet mbi sende, duke hequr stuff.
>> Tani, këtu është ku ajo merr interesante.
Pra, më vonë në kodin, ne mund ende referohen rrethit origjinal këtu.
Pra, le të rivendosur atribut saj për të CX.
Le të thonë, pozita e saj x te 400.
Dhe unë jam duke shkuar për të tranzicionit se, kështu që është e qartë.
Ka ne do të shkojmë.
>> Pra, kemi shtuar një rreth.
Ne kemi ngritur disa atribute.
Ne i shtoi edhe një rreth, hequr atë.
Dhe atëherë ne jemi duke modifikuar rrethi origjinal.
>> Por këtu është vendi ku ajo merr shumë më tepër interesante.
Jo vetëm që mund të vënë atribute si vetëm vlerat, mund të themi,
hej, rrethi, të shkojnë në pozicionin 200.
Ne gjithashtu mund të vendosur ato si funksione.
>> Pra, në vend të duke i dhënë 400 këtu, ne mund të bëni disa llogaritje
të fluturojnë për çfarë ne dua që atribut të jetë.
Pra, kjo është se si ju do të shprehin atë.
Ne themi, në vend të 400, le të më ju jap një funksion në vend.
Dhe këtu, brenda këtij funksioni, ne mund të bënim ndonjë përllogaritje të çmendur.
>> Ne mund të marrë kohë dhe shikoni në një sendi tjetër
dhe dinamike të vendosë për rrethi çfarë vlera që ne duam.
Si për ne vetëm jap ajo një pozicion të rastit x?
Pra, kjo është se.
>> Pra, çfarë thotë se është, për çdo x, të drejtuar këtë funksion.
Dhe ajo që ne po bëjmë është llogaritur disa gjëra, një herë rastit gjerësi
dhe kthyer atë.
Pra, çdo herë kemi drejtuar se, ne të merrni një Rrethi që shkon në një vend të rastit.
Kjo është lloj i ftohtë.
Ndjehem si unë mund të shikoj në këtë për pak.
Ne jemi duke filluar për të marrë për diçka interesante këtu.
Le të bëjë këto të dhëna i drejtuar tani.
Nuk ka të dhëna këtu.
Le të ndryshojë këtë.
>> Documents-- Akti II, Data Driven Pra, le të kthehet në këtu.
Dhe le të vetëm të shpëtoj prej Rrethi 2, sepse ne jemi vetëm duke shtuar dhe duke hequr
ajo.
Pra, ne nuk duhet të vërtetë atë.
Ne duhet të jetë shumë më i mençur këtu.
Le të thonë, ne kemi disa të dhëna të disa lloj.
Një moment-- le të themi, kemi pasur të dhënat e këtij formulari.
Ne kishim një rrjet, vetëm një bandë e numrave.
Ne kemi shtatë numra këtu, çfarëdo këto shuma represent--
në llogarinë bankare të njerëzve, si shumë ata peshojnë, zot e di se çfarë.
>> Këto janë numrat, dhe ne doni të përdorni qarqet tona
për të përfaqësuar ato numra disi.
Ne duam të lidhin tonë qarqet deri në ato numra.
Pra, ajo që ne bëjmë.
Le të thonë, ne duam një rrethi për çdo numër.
Ne mund të bëjmë të vjetër gjë ne u doing--
append rrethi dhe Rrethi 2 dhe circle3.
Por kjo merr nga dora, dhe ka shumë të përsëritur logjikën.
>> Pra, le të merrni më shumë i zgjuar me këtë.
Në vend të përdorimit rrethin var svg.append se ne ishim vetëm duke përdorur,
ne jemi duke shkuar për të përdorur ky bllok pak këtu.
Unë nuk dua të shkoj në thellësi në atë që të gjitha këto pjesë të bëni.
Dhe kjo është lloj i një teme të avancuar.
Dhe unë uroj që unë mund të.
>> Por gjëja kryesore për të recognize-- dhe ju do të shihni është shumë shpesh në kodin D3.
Ky bllok i tekstit bazë krijon sa më shumë qarqe
si ka elementet e të dhënave në këtë grup të drejtë këtu.
Pra, kjo krijon më shumë Qarqet si ka elemente.
Kjo do të na krijojë shtatë qarqe.
Dhe kjo e bën një gjë të vërtetë, të vërtetë të rëndësishëm.
Pra, le të kandidojë atë.
Le të hiqni rrethin tonë të tjera.
Le të vetëm të komentojë këtë të pjesë jashtë dhe të drejtuar këtë përsëri.
>> Ka ne do të shkojmë.
Pra rrethi ynë këtu është një shumë të errët, sepse ne
kanë shtatë qarqe, një mbi krye të tjera.
Ne sapo krijuar shtatë qarqe, njëri secili për secilin prej këtyre elementëve dhënave.
Por ka një gjë kyç që ka ndodhur me këtë copë të drejtë këtu.
>> Është se të dhënave u detyruar.
Pra, çdo një të vetme prej ato elemente të dhënave,
10, 45, 105, ishte i lidhur për një rreth të veçantë.
Pra, këto nuk krijohen vetëm një bandë e qarqeve
por i lidh këto dy gjëra së bashku.
>> Dhe në të ardhmen, sepse ne krijuam ato qarqet me këtë funksion D3,
në qoftë se unë ju jap një rreth, ju mund të më jep të dhënat lidhur me të.
Pra, ne mund të kërkoni D3.
Hej, D3, unë kam këtë rreth.
Çfarë është dhënave që rrethi ka?
Dhe D3 do të na tregoni 10 ose 45 ose 105.
>> Këto gjëra janë të lidhur.
Kjo është një koncept shumë, shumë themelore.
Le të shikojmë se.
>> Pra mënyrë ne do të pyes D3-- kështu kjo është e parëndësishme për këtë,
por vetëm me besim në të.
Kjo është se si ne i kërkojmë D3.
Hej, D3, më jepni parë rrethi që ju mund të gjeni.
Më jepni rrethin e parë ju mund të gjeni.
Dhe atëherë ne mund të pyes D3, çfarë është Të dhënat mbi se, si kjo, 10.
>> Pra, ne thjesht pyesni D3, të më gjesh mua Rrethi i parë që ju mund të gjeni.
Çfarë ka të dhënat e saj?
10, që është me të vërtetë tonë së pari element të dhëna.
Ne mund të pyesni atë, hej, D3, Na gjeni rrethin tonë të tretë.
105.
Pse është kjo me të vërtetë e rëndësishme?
>> Pra të drejtë këtu, unë përmenda që ne mund të përdorni funksione.
Dhe unë përmendur se ishte një gjë shumë të fuqishme.
Pra, jo vetëm që mund të bëjmë gjëra funksionet tona si të bëni disa llogaritje, për shembull,
kthejë një numër të rastit, ai mund të gjithashtu të bëjë gjëra të bazuara në të dhënat.
Kjo është ajo që do të thotë të të dhënave të shtyrë dokumente.
Kjo është ajo që D3 qëndron për.
>> Pra, kjo x postition-- vend i vetëm duke thënë, të gjitha qarqet,
merrni x pozitën 200, ne do të mund t'i jepte një funksion.
Dhe këtu, ne mund të bëni disa llogaritje.
dhe d këtu qëndron në vend për të dhënat.
Pra, çdo herë kemi një rreth, në thelb,
D3 do të krijojë këto shtatë qarqe.
Dhe pastaj për çdo
>> rrethi, ajo do të shkoj, hej, Rrethi 1 çfarë është pozita juaj x.
Më parë, ne ishim gjithmonë përgjigjur 200.
Por tani, çdo herë D3 pyet na, çfarë është pozita juaj x,
ajo do të japë us-- ne kemi që rrethi, kështu që ne kemi të dhëna.
Kjo do të na japë të dhëna dhe të thonë, çfarë ju doni ekspozitë që të jetë,
bazuar në këto të dhëna.
>> Le të kthehemi të dhënat aktuale.
Pra, në qoftë se kemi drejtuar këtë, kjo i jep të dhëna na dokumente shtyrë.
Këto qarqe janë të bazuara në relacionin position--
ata janë bazat si një funksion i të dhënave.
>> Kështu që për rrethin e parë, D3 vë një rreth.
Dhe pastaj D3 na pyet, çfarë të bëni ju doni ekspozitë të jetë.
Dhe ne vetëm të themi, çfarëdo dhënave është.
Bëni ekspozitë 10.
>> Pastaj ai pyet, çfarë ju doni ekspozitë të jetë për rrethin e dytë.
Dhe ne përgjigjemi, 45.
Dhe ne, natyrisht, mund bërë disa llogaritje këtu.
Unë të gjeni se ato qarqe janë lloj i squished lart.
>> Pra shumohen atë nga 3, shumëfishohen dhënat nga 3.
Rrethi ynë i vetëm u zgjeruar jashtë.
U trefishuar Vlera jonë.
>> Rrethi është me të vërtetë në buzë, kështu që le të ndoshta lloj të kompensuar atë.
Le të themi, nga 20.
Këtu ju shkoni.
>> Kjo është një vizualizimi të dhënave.
Kjo është një shumë të thjeshtë, por kjo na jep një pasqyrë në të dhënat tona.
Ajo na tregon se, për shembull, ne kanë një grup të vogël të elementeve.
Dhe ne kemi një devijim të madh këtu.
Kjo na jep disa informacione për shpërndarjen.
>> Nëse do të ishin, për shembull, për të ndryshuar të dhënat për 150 këtu dhe refresh,
vizualizimi ynë është ndryshuar.
Ky dokument është i të dhënave të shtyrë.
>> Pra, natyrisht, të gjitha këto elemente, të gjitha këto atribute këtu,
ne mund të përdorim një funksion, nuk vetëm numrat, jo vetëm
x dhe y pozicionet.
Pra, ne mund të përdorim një funksion për ngjyra.
Pra, ne do të bëjmë të njëjtën gjë.
Ne do t'i jepte një funksion.
>> Dhe le të themi, ne mund të kemi conditionals në funksion tonë.
Ky funksion mund të jetë njëqind e linjave të gjata.
Ajo mund të bëjë gjëra shumë, shumë të komplikuara.
>> Pra, le të japë deklaratë nëse këtu.
Le të themi, nëse të dhënat ynë është më pak se 50, kjo është një pragu
se ne jemi të interesuar në për disa arsye.
Le të bërë atë të gjelbër.
Përndryshe, le të bëjnë të kuqe.
Si është ajo?
E bukur.
>> Pra dhënave vizualizimi ynë është duke filluar për të përcjellë informacion më interesante
më shumë kanale.
Pra, tani ne e dimë pak për shpërndarjen.
Dhe ne e dimë se ka disa lloj prerë në 50 se ne jemi të interesuar në.
Ne e dimë se ka dy pika të të dhënave nën këtë prag dhe shumica e tyre
më sipër.
>> Pra, si një hap përfundimtar, këto të dhëna këtu, kjo është shumë e rrallë për të parë këtë si kjo.
Pra, le të vetëm të lëvizin atë në një variabël sepse kjo është e pastër, si kjo.
Dhe pastaj ne e përdorim atë ndryshore këtu.
Është e saktë të njëjtën gjë.
Është vetëm një pastruese pak.
>> Next lart, Akti III, Scales-- Pra, një problem i drejtë
këtu është, në qoftë se ne të ndryshojmë tonë të dhënat në këtë value-- 200
nëse ne ndryshojmë atë për 400 ose diçka dhe refresh,
atëherë kjo vlerë vetëm shkoi nuk del në ekran.
Pra, logjika jonë e drejtë këtu e se si ne bëjmë kohët 3
dhe 20, për të përhapur atë dhe pastaj kompensuar atë pak është me të vërtetë clunky.
>> Çfarë bëni ato numra do të thotë?
Ata janë vetëm e vështirë koduar atje.
Dhe ata janë shumë të lidhur me të dhënat.
Ne duam një dokument të dhënave të shtyrë.
Ne duam një dokument shumë fleksibël, se të dhënat e marra, përshtatet për atë
dhe përfaqëson atë.
>> Ajo që ne në thelb duhet është, ne kanë këtë varg të numrave 10.
45, 105.
Dhe ne duam të hartë se nga mbi gjerësi, gjerësia e plotë këtu.
Pra, ne kemi gamën e numrat shkojnë nga 0 në 100.
Dhe ne kemi kjo Kampusi I shkon 20-700, në këtë rast.
>> Ne lloj i duam të hartë atë në.
Ne duam të shkallës se lart dhe pastaj kompensuar atë një pak.
Ajo rezulton se D3 ka këto.
Është quajtur një shkallë.
Pra, le të përdorin atë.
>> Mënyra se works-- unë jam duke shkuar për të lloji kjo lart dhe pastaj të shpjegojë atë.
Kjo është një shkallë.
Çfarë kjo do të bëjë është, ajo do të ndajë vlerat 1-200 mbi të 20-600.
Ne mund të kontrolloni se.
Ne mund të shohim se këtu.
>> Pra, nëse unë ushqyer atë 1-- një moment.
Më jepni një të dytë.
Unë duhet të ketë shtypur keq pyetjen atë.
Nuk ju shkoni.
Më vjen keq për këtë.
>> Pra, çfarë do të bëjë një shkallë po, ai do të marrë një vlerë
dhe pastaj kthyer atë, zgjeruar që jashtë, kështu që ajo
mbush gamën e plotë të jeni duke kërkuar për.
Pra në këtë rast, në qoftë se ne të dhënë atë një, ajo do të ndajë se nga mbi 20.
Dhe në qoftë se ne t'i jepte 200, është e do të hartë që në të 600.
Dhe diku në mes, në qoftë se ne të merrni 100, është e
do të jetë diku në mes të 20 dhe 600.
>> Dhe sigurisht, tani kjo është çfarë ne kemi nevojë për të hequr ato koduar vështirë
gjëra ne kemi të drejtë atje.
Pra, ajo që ne duam të bëjmë është të marrë të dhënat që ne jemi
dhënë, që të dhënat individuale element, dhe të kalojë atë në shkallë të parë.
Pra shkallë do të shkallës atë.
>> Well-- Oh, ne kemi një gabim të vogël këtu.
Ne jeni të humbur e të dhënave.
Nuk ju shkoni.
Dhe që zgjeron atë.
>> Kjo na jep të njëjtën gjë rezultat kemi pasur më parë,
por në vend të atyre të vështirë koduar me kufizime.
Dhe në qoftë se madhësia e tonë Ndryshimet kanavacë, për shembull,
në qoftë se ne duam të kemi këtë pa 400 pixels dhe ajo squishes jashtë,
ne mund të kemi atë over-- ne mund të zgjeruar atë, ose ne
mund të zvogëlojë këtë diferencë të majtë të diçka pak ose më shumë se 20.
Këta numra, këto vështirë koduar Numrat tani kuptim për ne.
>> Dhe ne mund të bëjmë shumë më tepër gjëra interesante si.
Pra, në vend të paturit e një lineare shkallë, ne mund të dëshironi për të hyrë brënda një shkallë.
Dhe që do të na japë një shkallë log.
>> Pra tani shkallë tonë, në vend të vetëm duke zgjeruar jashtë në këtë varg,
kjo është bërë gjëra më të sofistikuara.
Në vend të që këtë varg të vështirë koduar, dhe në vend të që atë 600,
ne mund të dëshironi të përdorni vetëm gjerësia, kështu nga 20 në gjeresise minus 40,
2 herë diferencë në anën tjetër.
Dhe kjo e bën shumë më shumë kuptim për dikush i cili mund të shikoni në kodin.
>> Interesante, peshore të merrni shumë, shumë të sofistikuar si.
Ata bëjnë shumë gjëra interesante.
Pra peshore nuk kanë për të vepruar vetëm me numra.
Le të ngremë një shkallë ngjyra.
>> Kështu gamën tonë mund be-- domeni ynë është 1 deri në 200.
Kjo është gjë e input.
Por ne mund të dëshironi të hartë nga e gjelbër për të kuqe, për shembull.
Dhe tani, në qoftë se ne të kalojë atë 1, ne jemi duke shkuar për të marrë e gjelbër.
Nëse do t'i jepte 200, ne do të merrni të kuqe.
Dhe në qoftë se ne të kalojë atë diçka në mes, ajo do të jetë një përzierje e që,
diku në gradient në mes të gjelbër dhe të kuqe.
>> Dhe në vend të paturit ky lloj i logjikës clunky
ne kemi këtu me kushtëzuar të drejtë atje,
ne mund të kemi një something-- shkallë lineare në mes të atyre.
Pra, ne do të përdorim shkallën ne vetëm krijuar, të cilat ne i quajtur ngjyra.
Dhe ne do të jap atë d, e cila është element ynë dhënave.
Dhe atje ne do të shkojmë.
Ne kemi një shkallë ngjyra.
>> Pra, kjo është hartës.
Pra majtë tani është krejtësisht e gjelbër.
Shumë e drejtë është plotësisht e kuqe.
Dhe çdo gjë në mes është një funksion i d.
Ne kemi një interesante visualizations këtu.
Por të dhënat tona ishte lloj i mërzitshëm.
Le të shohim se çfarë ne mund të bëjmë nëse ne kishim të dhëna më interesante.
>> Akti IV, Me Punës Data-- gjëja e parë
ne do të dëshironi të bëni për të bërë tonë vizualizimi më interesante
është që të lëvizë e të dhënave diku tjetër.
Është shumë clunky që të ketë të dhënat e vështirë koduar këtu.
Dhe në përgjithësi, ne do të jemi duke i kërkuar dikush tjetër për të dhënat.
Ne do të jetë ndoshta i kërkoni qeverisë, Zyra e Regjistrimit, çfarë është të dhënat tuaja
dhe pastaj komplot se ose duke i kërkuar disa njësi të palëve të treta për disa të dhënave
dhe pastaj ndërtimin e një vizualizimi në këtë.
>> Pra, gjëja e parë që ne duam të bëjmë është lëvizur që në ndonjë vend tjetër.
Kështu që unë jam duke shkuar për të krijuar një paraqesë quajtur këtu data.json.
JSON është format të dhënave.
Ju nuk duhet të dinë shumë për këtë.
Dhe ne jemi duke shkuar për të kopje pak të dhëna që kemi atje,
ngjitur atë në atje fjalë për fjalë, të shkojnë përsëri në kodin tonë vizualizimi
këtu, dhe të përdorur këtë funksion të drejtë këtu.
Ju nuk duhet të dinë detajet.
Por çfarë kjo do të bëjë është, ajo do të gjeni këtë dosje,
shkoj të marr atë, dhe ta kthejë në ne.
Pra, ajo që kjo nuk është, ajo shkon dhe për të marrë dosjen data.json.
Dhe pastaj të gjithë kodin që është prerë inside-- në thelb,
të gjithë kod ne kemi there-- do të drejtuar vetëm kur ne të merrni të dhënat mbrapa.
Dhe atëherë ajo do të kandidojë që Kodi me të dhënat që kemi.
I madh, ne kemi një vizualizimi se pyetje
për disa kodin diku tjeter, e cila eshte zakonisht
ku kjo pyetje disa të dhëna nga diku tjetër, e cila është zakonisht
se si të punojnë visualizations.
>> Por unë dua që të kthehen në të dhënat.
Kështu të dhënat rrënjësisht në D3-- D3 konsumon të dhënave që është një listë e gjërave.
D3 pret të dhënat e vetëm të jetë një listë i gjërave, një koleksion i gjërave.
Nuk ka rëndësi se çfarë ato gjëra janë, aq kohë sa është e një grup prej tyre.
>> Kështu që këtu, për shembull, ne mund të Sigurisht kanë lundrues vlerat pikë.
Ne mund të ketë negative.
D3 nuk ka kujdes, kështu që gjatë si kjo është një listë e gjërave.
>> Gjëra si interesante ne mund të ketë, ne mund edhe
kanë një listë të strings si kjo.
Pra, këto janë titujt Crimson I kap disa ditë më parë.
Dhe ndoshta ju mund të gjeni disa interesante gjëra në lidhje me këto a titujt.
>> Pra, përsëri, kjo është një listë e gjërave.
D3 nuk ka kujdes.
Këto të ndodhë të jetë një varg.
Ne e kemi ndryshuar të dhënat tona.
>> Le të kthehen në vizualizimi tonë.
Tani, vizualizimi tonë të pret të dhëna për të qenë numra.
Pra, ne do të kemi për të bërë disa ndryshime.
Kështu për shembull, para së gjithash, ndoshta ne duam të vënë së bashku këto qarqe
nga gjatësia e titull, Numri i karaktereve në titull.
>> Pra, ajo që ne do të bëjmë is-- çdo kohë tonë Funksioni është quajtur me një varg,
ne do të gjeni se është gjatësia Dhe pastaj të kalojë që në shkallë.
Ngjyrë, unë do të kthehem që në blu çeliku.
Dhe atje ne do të shkojmë.
Ne kemi një vizualizimi Titujt e Crimson.
>> Shkallë ynë është një off pak.
Le të supozojmë se më të gjatë titull është 100 karaktere i gjatë,
kështu që përfshijnë që nga pak.
Dhe ne kemi një vizualizimi.
Pra, duket se më së shumti tituj janë mjaft të ngushtë së bashku,
në aspektin e linjës karakter.
Por një ka të vërtetë qëndron jashtë.
>> Ne mund të ndërtojmë disa mjete për të shqyrtuar se më shumë.
Por, kur unë isha duke punuar në këtë, unë kam qenë kurioz nëse, në këtë grup të të dhënave,
Titujt me një zorrë e trashë në to do të jetë më e gjatë.
I merr ato do.
>> Pra, le të gjetur jashtë.
Le të përdorim ngjyrën kanal si ne e bëmë më parë,
për të kodifikuar disa lidhje me nëse ka një zorrë e trashë apo jo.
Pra, ne do të përdorim një kusht përsëri.
Ju nuk duhet të dini detajet e kësaj,
por kjo është se si ne të shikoni një string për një karakter të veçantë
në JavaScript, përsëri, jo relevante.
>> Por nëse ne nuk gjejmë një zorrës së trashë, ne do të kthehemi e gjelbër.
Dhe në qoftë se ne bëjmë, ne do të kthehemi të kuqe.
Pra, përsëri, titujt që kanë një zorrë e trashë do të jetë e kuqe.
Kjo është ajo që kjo means-- bukur.
>> Pra, duket se im Hipoteza është bumped.
Ka vetëm dy.
Ne vetëm kemi gjashtë pikë të dhënave dhe vetëm dy kishin colons.
Por kjo duket pak më shumë në fund të ulët, në faktin.
Titujt me colons duket në përgjithësi të jetë më i shkurtër,
të paktën në të dhënat tona set-- interesante.
>> Le të kthehemi që në çelik blu dhe pastaj të shohim
ajo që ne mund të bëjë me edhe Të dhënat më interesante.
Pra, përsëri, unë përmendur se të dhëna në D3 është një listë e gjërave.
Ne kemi parë numrat e shumë lloje.
Ne e kemi parë strings.
Por gjërat mund të jetë gjithashtu objekte.
>> Ata mund të jenë gjëra të komplikuara që përfshijnë një shumë të gjëra.
Për të thonë se më qartë, në shumicën e rasteve, ne
doni të ndërtuar çdo pikë të dhënave si më e komplikuar se vetëm një vlerë.
Nëse ju do të imagjinohet një bazës së të dhënave për studentët,
nuk mund të jetë një student përmendur, një ID student,
dhe shumë gjëra të lidhura me një rekord të veçantë,
jo vetëm një varg ose një numër.
Pra, le të shohim në se.
>> Kjo është një nga të dhënat e tilla të përcaktuara.
Kjo është një të dhëna të vendosur në lidhje me tërmetet.
Pra, çdo gjë këtu në listën tonë, ose grup i gjërave përmban shumë vetë gjëra.
Pra, çdo pikë e të dhënave ka një madhësia dhe një të koordinuar.
Dhe koordinon veten përmbajnë dy gjëra.
>> Pra, çdo ditë tani është shumë më tepër komplikuar dhe shumë më tepër interesante
dhe përmban shumë më tepër informacion interesant.
Le të shohim se ne mund të ndërtojmë nga se.
Kthimi prapa në këtu, përsëri, duke përdorur tonë vizualizimi rrethi Histogram
ne kemi ndërtuar, le të shohim nëse ne mund të ndërtojmë një vizualizimi i shpërndarjes magnitudë
në grup të të dhënave tona.
>> Pra këtu, kjo është e njëjta koncept.
Por tani, d përmban më shumë gjëra.
d përmban shumë elemente të dhënave.
Pra, ne të merrni të d prapa.
D3 na jep d.
Dhe ne të përgjigjet duke gjetur madhësinë e d dhe pastaj duke kaluar që në shkallë.
>> Dhe pastaj ne kemi nevojë për të ndryshuar shkallë tonë, natyrisht.
Pra Madhësitë thjesht nuk bëni shkojnë shumë më tepër se 10.
Në fakt, kurrë nuk ka qenë një tërmet 10 magnitudë.
Por kjo është lloj i sipërm tonë fund, spektri ynë sipërme.
>> Le të rifreskoni.
I mirë, ne kemi një vizualizimi.
Është interesante të note-- kështu ka dy pika të të dhënave që
janë pothuajse saktësisht në krye të njëri- tjetër, në aspektin e madhësisë.
Ju shikoni këtë duke perde ne jemi duke përdorur.
>> Ne kemi të dhëna gjeografike tani.
Ne kemi latitudes dhe gjatësi.
Ndoshta ne mund të bëjmë diçka shumë më interesante me këtë.
Le të gjetur disa më shumë mënyrë interesante për të kujtoj
kjo më e komplikuar dhënave ne kemi qasje në.
>> Akti V, Mapping-- rrënjësisht, ne duam të vënë këto në një hartë.
Unë do të thotë, ky është vendi ku kjo po ndodh.
Ne duam të shifroj informacion në lidhje Pozicioni i këtyre leximeve tërmetit,
si dhe madhësia e tyre, sepse ne kemi që tani.
Ne e kuptojmë se si për të konsumuar Të dhënat më të komplikuara.
>> Gjëja e parë që ne do të bëjmë është të krijojë një hartë, një hartë sfond.
Unë jam duke shkuar për të shkuar nëpërmjet kjo shumë shpejt.
Kjo është kodi i ndërlikuar.
Kjo është një tjetër një nga ato receta ju nuk bëni me të vërtetë
duhet ta kuptojnë plotësisht për ju për të përdorur.
Por kjo është kod.
Ky kod drejtë këtu krijon një hartë.
>> Ne nuk jemi duke shkuar për të shkuar në detaje.
Por sipërfaqësisht, atë që nuk është, kjo pyetje këtë fotografi us.json, i cili
është një file të dhënave si një që kishim përpara.
Kjo është më komplekse, sigurisht.
Por në këtë rast, çdo gjë, çdo pikë të dhënave është ky shtet
dhe ka një listë të latitudes dhe gjatësi
që përcaktojnë poligonin, se formë, që shteti.
>> Pra, çfarë do të bëjë D3 është e ngjashme me atë që ne e bëmë para.
Ajo do të kërkojë që dhe lidhen që të një elementi.
Dhe ka një funksion që do të hartë atë element jashtë,
bazuar në latitudes dhe gjatësi.
Ju mund të lexoni më shumë në atë.
Dhe unë rekomandoj atë.
>> Nuk janë lidhjet në Fundi i këtij kodi postuar.
Dhe kod është komentuar.
Në ka lidhje për më tej në këtë.
Unë rekomandoj që ju shikoni atë.
Por ajo që ne e intereson është ky funksion projektimi.
Unë dua të shkoj nëpër atë.
>> Para së gjithash, më lejoni të tregoj ju se, po, ne kemi një hartë.
Hartat janë të ftohtë.
Pra, le të shohim në këtë funksioni i prodhimit.
>> Projektim është shumë shumë si një shkallë, peshore përsëri.
Pra, çfarë e prodhimit për ky funksion projektimi
nuk është, ne do të mund të kalojë atë gjatësi dhe latitudes-- në këtë rast,
këto vlera këtu janë lat-longs e ndërtesës
ne jemi ulur në të djathtë now-- të projeksionit.
Dhe projektimi do të konvertohet që në vlerat piksel x dhe y.
>> Pra, çfarë është duke bërë projektimi është shumë e ngjashme me shkallë tonë.
Ajo është duke marrë latitudes tonë dhe gjatësi që përfaqëson një botë të tërë
dhe ngushtim dhe sizing se poshtë në sheshin që ne duam,
që ne i kemi dhënë atë.
Në këtë rast, ne jemi duke kaluar këto vlera.
Dhe kjo na është dhënë, të mirë, që në ekranin tuaj do të thotë 640 pixels.
E tërë Ky ekran është 700 pixels i gjerë, kështu që na bën për këtu,
dhe 154 pixels poshtë, të cilat unë do të vlerësim është shumë e shumë këtu.
>> Pra, duke marrë ato lat-gja, të cilat përfaqësojnë diçka në të gjithë globin
dhe squishing dhe lëvizin atë rreth për të na x dhe vlerat y pixel jap,
kjo është gjëja e parë që është bërë në këtë kod të hartës.
Dhe pastaj pjesa tjetër e Kodi konsumon e të dhënave
dhe pastaj harta ato lat-gja mbi diçka në ekranin tuaj.
>> Por ne jemi duke shkuar për të përdorur këtë projeksion funksionet, sepse ajo rezulton
ne kemi lat-longs gja si.
Duke mbrapa në të dhënat tona, ne kemi latitudes dhe koordinon gjatësi
për çdo vëzhgim.
Pra, le të përdorim projeksion.
>> Pra, shikuar në ekspozitë tonë, ne duam exposition-- tonë
ne kemi një gjerësi dhe një gjatësi.
Por ne duam vlerat pixel.
Dhe kjo rezulton, ne kemi pikërisht ajo që ne want-- projeksion.
Shumë e shumë si ne ishim duke përdorur shkallën e drejtë këtu,
ne jemi tani duke shkuar për të përdorur projeksionin dhe të kalojë ajo koordinon.
Pra, gjëja e parë ne jemi duke doing-- kështu që ne jemi
marrjen d, e cila është një dhënat individual element i një tërmeti individual
lexim.
Gjëja e parë që ne bëjmë është marrë koordinatat.
Në rregull, ne kemi koordinatat.
>> Gjëja e dytë që ne bëjmë është kalojë që më në projektim.
Projektim konverton ato koordinatat në vlerat pixel, x dhe y.
Dhe pastaj gjëja e fundit ne doni të bëni është që vetëm të merrni x,
që ky rast është i pari.
Kjo është e para e dy gjërave që janë kthyer nga projektim.
>> Ne do të bëjmë të njëjtën gjë për y.
Por në vend të kësaj, ne do të kthehemi Elementi i dytë, y.
Get gati për të rifreskuar.
Ooh, karakter shtesë here-- bukur, ne kemi
një të shtyrë dokument të dhëna se është e fshehjen këtë fotografi JSON e objekteve,
duke e bërë një hartë, dhe në ndryshim atribuohet në raport me të dhënat
për të projektuar atë në një hartë.
Kjo është me të vërtetë interesante.
Kjo është e ftohtë.
>> Le të bëjmë atë një nivel.
Unë do të thotë, ne kemi dy copa të informacion me çdo pikë të të dhënave.
Unë do të thotë, tre.
Ne kemi koordinatat, cila është një x dhe y.
Dhe ne kemi përmasat.
>> Ne kemi nevojë për të shifroj madhësinë disi.
Ne kemi një shumë të kanaleve.
Ne mund të përdorni ngjyra.
Ne mund të përdorim rreze.
Ne mund të përdorni perde.
Ne mund të përdorim shumë gjëra në kod.
Çdo të këtyre atributeve dhe shumë më shumë që nuk janë të listuara atje,
sepse ata janë fakultative, ne mund të përdorin për të shifroj këto të dhëna, pash
dhe të gjitha këto gjëra unë kam përmendur.
>> Le të bëjmë rreze.
Unë mendoj rreze është më intuitiv.
Pra, përsëri, ne do të zëvendësojë se hard-coded 40 dhe bëni disa llogaritje.
Ne do të përdorim shkallën tonë të preferuar përsëri.
Dhe ne jemi e kaluara d.
Por nuk d sepse ne duam të madhësisë e d. d është vetëm pika e të dhënave.
Ne do të kalojë madhësia në shkallë.
>> Le të përpiqemi që përsëri.
Ooh, ajo nuk punon.
Pse ajo nuk punon?
>> Pra mbani mend çfarë shkallë bën.
Le të shikojmë në shkallë përsëri.
Harta në shkallë prej 1 deri 10 radhë në 22-600, më pak ose më shumë.
600 është i madh.
Kjo është arsyeja pse ne jemi duke marrë këtë.
>> Pra, ne duam të ndryshojmë shkallë tonë për diçka më të arsyeshme.
Le të thonë, ne duam 0-60.
60 është i madh, por 10 tërmete janë tepër të rralla.
Në fakt, ata kurrë nuk kam ndodhur.
>> Pra, çfarë kjo do të bëjë është, ajo do të marrë Madhësia jonë që shkon nga 1 tek 10.
dhe hartë atë në për të zgjeruar atë.
Dhe hartë atë në të 0-60.
Le të rifreskoni.
>> I mirë, ne kemi një vizualizimi.
Kjo është e madhe.
Kjo është dhënat aktuale.
Ju do të vini re, në lodër tim të vogël shembull, tërmet i madh
është e drejtë në krye të ne.
Por kjo është ajo.
Ne kemi një datë të shtyrë vizualizimi që konsumon e të dhënave
dhe na jep të vërtetë informacion interesant.
Yeah, le të shtoni disa interaktive për të.
Kam përmendur se ishte forca e fortë e D3.
>> Kështu që këtu, për çdo element, ne jemi përshkruar një bandë e atributeve.
Por ne gjithashtu mund të përshkruajnë atë që duam të ndodhë me elemente interaktive.
Për shembull, ne mund të përshkruajnë çfarë ndodh kur ne e miut mbi.
Dhe shumë të ngjashme që, që do të marrë një funksion,
shumë e ngjashme me atributet e kemi pasur më parë,
ku ne bëjmë diçka për të element kur ne rri pezull mbi të.
>> Pra, gjëja e parë që ne duhet të bëni është të zgjidhni atë element,
për të gjetur atë në thelb, në shfletuesin.
dhe pastaj ne mund të krijojë një atribut për të.
Pra, ajo që unë jam duke bërë këtu është, kur ne të rri pezull mbi diçka, ne do të merrni atë element
dhe pastaj të vënë perde e saj prapa me 1, tek krejtësisht opake.
Le të shohim se çka do të duket si.
>> Duket ne kemi një pikëpresje shtesë këtu.
Pra, në qoftë se ne të rri pezull mbi këtu, ajo merr të plotë.
Por tani, sigurisht, atë qëndron i plotë, sepse ne
kanë për të përshkruar se çfarë ndodh kur hiqni kursorin tonë.
Pra, le të bëjë pikërisht këtë në mouseout, në krahasim me Kalo miun kompjuterik mbi.
>> Dhe ne do të rivendosur atë për të çfarë kemi pasur before-- 0,5.
Dhe tani, çdo herë ne rri pezull, të kemi një rreth të plotë.
Ajo na ndihmon të shohim se çfarë ne ne jemi duke zgjedhur në thelb.
>> Dhe tani le të bëjë kjo me të vërtetë i madh.
Le të lidheni kjo për të dhënat reale.
Pra, le të pyes mund USGS rreth të dhënave të tyre.
Pra Gjeologjik të SHBA ka të dhëna në lidhje me tërmetet.
Ata kanë një API publike që është e drejtë të konsumohen në format JSON.
Pra, le ta bëjmë këtë.
>> Pra, kjo është pak e kodit që lidhet me API USGS.
Dhe nuk është pak e përpunimit në të.
Kjo nuk është e rëndësishme, por e thjeshton atë në një format të thjeshtë të të dhënave si ajo
kemi pasur më parë.
Kështu që unë të shpëtoj të thirrjes sonë për të data.json tonë të rreme në dosje.
Dhe në vend të kësaj, unë jam duke e quajtur USGS në thelb.
>> Le të rifreskoni, e bukur.
Kjo është e vërteta, të dhënat e të vërtetë të jetës nga kjo jave për tërmetet.
Kjo është me të vërtetë interesante.
Kjo nuk është për t'u habitur për ne, por ka
një shumë e tërmeteve në West Coast në Kaliforni.
Por unë mendoj se ishte shumë interesante se ka qenë aq shumë tërmete
në Alaskë, dhe me sa duket, këtu në Midwest.
Unë do të thotë, interesante, dhe ne jemi të mirë.
Kjo është konkluzioni.
>> Por në thelb, ky është ajo D3 na ndihmon të bëjmë.
Ajo na ndihmon të marrë të dhëna, ngurtësohem ajo të elementeve në DOM,
dhe kanë ato elemente të ndryshojë si një funksion i të dhënave,
kanë këto atribute, të gjithë e shumë atributet e elementeve,
të gjithë të jenë të dobishme për kanalet për të përcjellë informacion.
>> D3 është një tepër i fuqishëm Biblioteka dhe amazingly mirë të kandidojë.
Kjo është disa sende të fuqishme.
Vizualizimi të dhënave është një mjet tepër i fuqishëm
për të përcjellë tek njerëzit e thella njohuri që merr në thelbin e tyre
dhe ndihmon ata të kuptojnë, në kjo mënyrë të thellë dhe intuitiv,
se si të dhënat vepra dhe se si të dhënat e ndryshon jetën tonë.