[Muzikos grojimo] 

DAVID Chouinard: Aš Davidas Chouinard, ir tai yra D3. Sveiki. Mes ketiname sužinoti apie D3 šiandien. D3 JavaScript sistema pastato aukštą kokybę interaktyvios vizualizacijos už internete. Dalykų, pavyzdžiui, tai, ką mes matome nugaros mane, mes ketiname išmokti tiems, dalykų, natūra iš jo pagrindai. Bet tai bus kietas. Pradėkime priėmimo gana nuotraukas. Mes turime daugiau demo perspektyvų nėra. Darom. 

Aktas Aš, DOM manipulation-- mes ketiname pradėti iš karto padaryti cool dalykų. Pirmiausia, kairėje, turime kodą. Dešinėje, mes turime mūsų kodu, rezultatas. Vykime per ją. 

Kurkime apskritimą. Kaip tai garsas? svg.append circle-- mes tiesiog padarė ratą. Jūs manimi netikite, tiesa? Tai nėra. 

Taigi, ką mes padarėme, čia yra, SVG yra keičiamo dydžio vektorinė grafika. Tai būdas, kuriuo mes pasakyti, kad naršyklė padaryti vektorinę grafiką naršyklėje. Ką mes tiesiog padarė dabar papildomas ratas naršyti. 

Pažadas, kad apskritimo reikalauja pagrindinių atributų tiek kol mes iš tikrųjų galite pamatyti. Turime pasakyti, kad tai jos x poziciją, jos y pozicija, jo spindulys. Mes ne pasakyti, bet, kad, todėl mes nematome ją dabar. Bet leiskite pasakyti, kita. 

Taigi, visų pirma, jūs turite kad mūsų apskritimas vardą. Taigi tegul vadina jį ratą. Mūsų ratas turi pavadinimą dabar. Ir tegul mano, kad tai kelis atributus. Kaip apie CX būtų sutelkti x, todėl iš x padėtyje centras. Tarkime, 200 200 taškų. 

Leiskite suteikti jai 200 pikselių m, taip pat. Ir r spindulys, apie 40 taškų. Dabar pažiūrėkime. Aš negaliu ištarti. 

There you go. Mes turime padėtyje 200 ratą pikselių, 200 taškų, spindulys 40 taškų. Tipo kietas, tiesa? Mes turime ratą. Taip. 

Taigi nereikia sekti kartu. Visi šie pavyzdžiai, kurie visi kodas darau šiandien bus teikiama internete tuo tikslu interaktyvumu pavyzdžių forma su kontrolės punktuose prie kiekvienas aktas, ir pan. 

Darom daugiau daiktų. Tai Juodas apskritimas yra tikrai negraži. Aš atsiprašau už šią klaidą pranešimai teisę ten. Čia mes eiti. 

Leiskite jam suteikti spalvą. Kaip tai? Man patinka plieno mėlyna. Na, mūsų ratas keisti spalvą. Tai puiku. Padarykime tai pusiau permatomas too-- pusiau permatomas. 

Taigi tai yra atributai mes apibrėžti ant ratu. Pirmas dalykas, kurį mes padarėme tai mes įdėti ratą puslapyje. Ir tada mes apibrėžti atributų krūva. Kai kurie iš jų reikia, kaip CX, CY, ir spinduliu. Ir kiti yra neprivalomas. 

Yra daug daugiau atributai. Yra daug iš jų. Pavyzdžiui, mes galėtų turėti insultas, taip pat, raudonos insultas. Bet tegul pašalinti, kad. Mes grįžome prie rato, mėlynas apskritimas. 

Taigi padarykime daugiau ratų. Kaip tai? Kurkime kitą ratą. Tai įdomu, tiesa? 

Taigi pasakyti, kad aš tiesiog Kopijuoti Įklijuotas tai, ką mes jau. Pavadinkime ją circle2. Ir darykime Tiksli Tas pats ir suteikti jai atributus, atsižvelgiant x pozicija 300. Yay, turime du apskritimai dabar. 

Ir, žinoma, mes galime atnaujinti šias vertybes. Galėčiau jį 400, o dabar jis juda. Ir kadangi tai erzina, tegul jį pašalinti, todėl circle2.remove. Jis dingo dabar. 

Taigi, ką mes darome ir yra tik labai, very-- tai yra labai panašus į tai, ką gali daryti JQuery, pavyzdžiui. Mes tiesiog manipuliuoti DOM, tai vadinama. Galbūt girdėjote šį žodį prieš. Mes sukurti dalykų, nustatymo atributai stuff, pašalinti daiktų. 

Dabar, čia, kur ji gauna įdomu. Taigi vėliau kodu mes vis dar gali kreiptis į pradinį apskritimą čia. Taigi leiskite naujo savo atributas CX. Tarkime, jos x pozicija 400. Ir aš ruošiuosi pereiti kad taip akivaizdu. Čia mes eiti. 

Taigi, mes pridėjo ratą. Mes nustatėme keletą atributų. Mes pridėjome dar vieną ratą, pašalinti jį. Ir tada mes pakeisti originalus ratas. 

Bet čia, kur ji gauna daug įdomesnis. Ne tik mes galime nustatyti atributus kaip tik vertina, mes galime pasakyti, ei, apskritimas, eikite į 200 poziciją. Mes taip pat galime nustatyti jas kaip funkcijų. 

Taigi, o ne duoti 400 čia mes galime padaryti tikrą skaičiavimą dėl ko skristi mes nori, kad atributas turi būti. Taigi, tai, kaip jūs norite išreikšti tai. Mes sakome, vietoj 400, leiskite man jums funkciją vietoj. Ir čia, viduje šią funkciją, mes galime padaryti bet beprotiškas skaičiavimą. 

Galėtume laiko ir pažvelgti kitu dalykas ir dinamiškai nuspręsti ratas, kas vertė norime. Kaip apie mes tiesiog suteikti jis atsitiktinai x pozicija? Taigi tai, kad. 

Taigi, ką tai sako yra, kas x, paleisti šią funkciją. Ir tai, ką mes darome, yra apskaičiuoti keletas dalykų, atsitiktinių kartus plotis ir grįžta, kad. Taigi kiekvieną kartą, kai mes paleisti, kad mes gauname apskritimas, kad eina į atsitiktine vietoje. Tai tipo kietas. Aš jaučiuosi kaip aš galėtų atrodyti ne tai už tiek. Mes pradedame gauti kažkas įdomaus čia. Kurkime šiuos duomenis važiuoti dabar. Nėra duomenų čia. Leiskite pakeisti. 

Aktas II duomenų Skatinami Documents-- Taigi leiskite grįžti čia. Ir tegul tiesiog atsikratyti circle2, nes mes tiesiog pridedant ir šalinant tai. Taigi, mes do not really reikia. Turime daug protingas čia. Tarkime, mes turime kai tam tikros rūšies duomenys. Vienas moment-- tarkim, mes turėjome duomenis šios formos. Mes turėjome masyvą, tiesiog skaičių krūva. Mes turime septynis numerius, kokia tai represent-- suma Liaudies banko sąskaitos, kaip kiek jie sveria, Dievas žino ką. 

Tai yra numeriai, ir mes norite naudoti mūsų ratą atstovauti tuos numerius kažkaip. Mes norime susieti DUK apskritimai į tuos numerius. Taigi, ką mes darome. Tarkime, mes norime ratas už kiekvieną numerį. Mes galime padaryti metai dalykas, mes buvo doing-- ratas pridėti ir circle2 ir circle3. Bet šis gauna iš vertus, ir ten kartoti logika daug. 

Taigi galime gauti daugiau protingas, kad. Vietoj to, naudojant var ratą svg.append, kad mes buvome tik naudojant, mes ketiname naudoti šis mažas blokas čia. Aš nenoriu eiti į gilinimas į tai, ką visi šie dalys daryti. Ir tai rūšies pažangios tema. Ir aš norėčiau, galėčiau. 

Tačiau pagrindinis dalykas, kad recognize-- ir pamatysite labai dažnai D3 kodą. Šis teksto Basic blokas sukuria daug ratą nes yra duomenų elementai šiame masyve čia. Taigi, tai sukuria daugiau sluoksniuose yra elementai. Ji ketina sukurti mums septynis apskritimus. Ir jis tikrai, tikrai svarbų dalyką. Taigi leiskite veikti, kad. Leiskite pašalinti kitas mūsų ratą. Tegul tik pakomentuoti tai išsiskirti iš ir paleisti tai dar kartą. 

Čia mes eiti. Taigi, mūsų ratas čia daug tamsesnis, nes mes turi septynis apskritimus, vienas ant kito viršaus. Mes ką tik sukūrėte septynis apskritimus, vieną kiekvienas, kiekvienai iš šių duomenų elementų. Tačiau yra esminis dalykas, kad nutiko su šiuo fragmentą čia. 

Tai, kad duomenys buvo įpareigota. Taigi kiekvienas iš Šie duomenys elementai, 10, 45, 105, buvo įpareigota į tam tikrą ratą. Taigi jie ne tik sukūrė apskritimų krūva bet susieja šiuos du dalykus kartu. 

Ir ateityje, nes mes sukūrėme tie apskritimai su šiuo D3 funkcija, jei aš tau apskritimą, galite man duomenis, susijusius su juo. Taigi, mes galime paklausti D3. Ei, D3, turiu šį ratą. Kas duomenys ratas turi? Ir D3 būtų pasakyti mums 10 ar 45 ar 105. 

Šie dalykai yra privalomi. Tai labai, labai svarbus sąvoka. Pažvelkime kad. 

Taigi, kaip mes norime paklausti D3-- taip tai neturi reikšmės tai, bet tiesiog pasitikėk manimi apie tai. Tai kaip mes prašome D3. Ei, D3, man pirmas apskritimas, kad jūs galite rasti. Duok man pirmąjį ratą galite rasti. Ir tada mes galėtume paklausti D3, kas duomenys apie, kad, kaip tai, 10. 

Taigi mes tiesiog paprašykite D3, rasti mane Pirmasis ratas galite rasti. Kas jo duomenų? 10, kad iš tiesų yra mūsų Pirmasis duomenų elementas. Mes galime paprašyti jį, ei, D3, mus rasti mūsų trečiąjį ratą. 105. Kodėl tai tikrai svarbu? 

Taigi čia minėjau kad mes galime naudoti funkcijas. Ir aš paminėti, kad buvo labai galingas dalykas. Taigi ne tik gali mūsų funkcijos daryti dalykus kaip padaryti kai skaičiavimus, pavyzdžiui, grįžti atsitiktinių skaičių, ji gali Taip pat daryti dalykus, remiantis duomenimis. Tai yra tai, ką duomenų varomi dokumentai reiškia. Štai ką D3 stendai. 

Taigi vietoj tai x postition-- tiesiog sakydamas visus apskritimus, gauti x poziciją 200, mes gali suteikti funkciją. Ir čia mes galime padaryti tikrą skaičiavimą. ir d čia stovi vietoje duomenimis. Taigi kiekvieną kartą, kai mes turime ratas, iš esmės, D3 sukurs šiuos septynis apskritimus. Ir tada už kiekvieną 

apskritimas, jis ketina eiti, ei, circle1 koks tavo x pozicija. Anksčiau mes buvome visada atsakyti į 200. Bet dabar, kiekvieną kartą D3 prašo mums tai, ką jūsų x pozicija, jis ketina duoti us-- turime kad apskritimas, todėl mes turime duomenis. Jis ketina duoti mums duomenis ir pasakyti, ką norite ekspozicija turi būti, remiantis šiais duomenimis. 

Tegul tik grįžti faktinius duomenis. Taigi, jei mes paleisti tai, tai suteikia JAV duomenų varomas dokumentus. Šie apskritimai yra pagrįstos Kalbant position-- jie bazes kaip duomenų funkciją. 

Taigi pirmą ratą, D3 kelia ratą. Ir tada D3 prašo mus, ką norite ekspozicija būtų. Ir mes tiesiog pasakyti, kokia duomenų. Padaryti ekspoziciją 10. 

Tada jis klausia, ką norite Ekspozicijoje bus antrą ratą. Ir mes atsakome, 45. Ir mes, žinoma, gali padaryti šiek tiek skaičiavimus čia. Manau, kad šių apskritimų yra rūšies sutraiškyto iki. 

Taigi padauginkite jį iš 3, dauginti duomenis 3. Mūsų ratas just got išsiplėtė iš. Mūsų vertė buvo trigubai. 

Ratas yra tikrai ant krašto, tad gal rūšies kompensuoti ją. Tarkime, 20. Here you go. 

Tai yra duomenų vizualizavimo. Tai labai paprastas vienas, tačiau šis suteikia mums įžvalgų mūsų duomenų. Jis pasakoja, kad, pavyzdžiui, mes šiek tiek klasterio elementų. Ir mes turime didelį išskirčių čia. Tai suteikia mums tam tikrą informaciją apie jo platinimą. 

Jeigu mes buvo, pavyzdžiui, siekiant pakeisti duomenys 150 čia ir atnaujinti, mūsų vizualizacija pasikeitė. Šis dokumentas yra duomenų važiuoti. 

Taigi, žinoma, visi šie elementai, visi šie atributai čia, mes galime naudoti funkciją, o ne tik skaičiai, o ne tik X ir Y pozicijas. Taigi, mes galime naudoti funkciją spalvos. Taigi mes padarysime tą patį. Mes suteikti funkciją. 

Ir tarkim, galėtume turėti Conditionals mūsų funkcija. Ši funkcija gali būti šimtus eilučių ilgio. Tai gali padaryti labai, labai sudėtingas dalykų. 

Taigi leiskite įdėti, jei pareiškimą čia. Tarkime, jei mūsų duomenys yra mažesnė nei 50, tai kai riba kad mes suinteresuoti į kažkodėl. Padarykime tai žalia. Priešingu atveju, padarykime tai raudonai. Kaip tai? Nicos. 

Taigi mūsų duomenų vizualizacija prasideda perteikti daugiau įdomios informacijos daug kanalų. Taigi, dabar mes žinome, truputį apie jo platinimą. Ir mes žinome, kad yra kažkokia nukerpamas 50, kad mes suinteresuoti. Mes žinome, kad yra dvi duomenų taškai žemiau šios ribos, o dauguma jų aukščiau. 

Taigi, kaip galutinis žingsnis, ši duomenų čia, tai labai retai tai pamatyti, kaip kad. Taigi tegul tiesiog perkelti jį į kintamąjį nes tai siurblys, kaip šis. Ir tada mes naudojame, kad kintamasis čia. Tai lygiai toks pats dalykas. Tai tik šiek tiek švaresnis. 

Kita Aukštyn, III aktas, Scales-- Taigi viena problema teisė čia yra, jei mes pakeisime mūsų duomenys šioje 200 value-- jei mes jį pakeisti 400 ar kažkas ir atnaujinimo, tada ši vertė tiesiog nuėjo offscreen. Taigi, mūsų logika čia kaip mes laikai 3 20, skleisti ją ir tada kompensuoti jį šiek tiek yra tikrai clunky. 

Ką šie skaičiai reiškia? Jie tiesiog sunku koduoti ten. Ir jie labai susieta su duomenimis. Mes norime, kad duomenų varomas dokumentą. Mes norime, kad labai lankstus dokumentą, kad pateiktų duomenų, prisitaiko prie jo ir jai atstovauja. 

Ką mes iš esmės reikia, mes turi šį skaičių 10 spektrą. 45, 105. Ir mes norime į žemėlapį, kad iš į plotis, pilnas plotis čia. Taigi, mes turėti spektrą numeriai vyksta nuo 0 iki 100. Ir mes turime tai miesteliu Aš eina 20-700, ir šiuo atveju. 

Mes rūšies nori map kad. Mes norime, kad masto, kad iki ir tada kompensuoti jai truputį. Pasirodo, kad D3 yra šie. Tai vadinama masto. Taigi leiskite naudoti jį. 

Taip, kad works-- aš ruošiuosi tipo tai ir tada paaiškinti. Tai yra skalė. Ką jis darys tai, tai bus suplanuoti vertės 1-200 ant prie 20-600. Mes galime patikrinti, ar. Mes matome, kad čia. 

Taigi, jei aš jį maitinti 1-- vieną akimirką. Duok man vieną sekundę. Turiu jau padarėte klaidą ją. There you go. Aš atsiprašau dėl to. 

Taigi, ką masto darys yra, ji bus imtis vertę ir tada konvertuoti, kad, išplėsti, kad iš, todėl užpildo visą spektrą jūs, prašydama. Taigi šiuo atveju, jei mes suteikiame ją vieną, ji vyksta į žemėlapį, kad iš ant 20. Ir jei mes suteikti jai 200, tai vyksta į žemėlapį, kad 600. Ir kažkur tarp jų, jei mes gauname 100, tai bus kažkur tarp 20 ir 600. 

Ir, žinoma, dabar tai yra tai, ką mes turime pašalinti tuos kietus koduotą dalykų, mes turime teisę ten. Taigi, ką mes norime padaryti, tai imtis duomenis, kad mes duota, kad individualus duomenys elementas, ir perduoti jį masto pirma. Taigi mastelis mastelį jį. 

Well-- O mes turime mažai klaidą čia. Mes trūkstamus duomenis. There you go. Ir tai plečia ją. 

Tai suteikia mums pats Rezultatas mes turėjome anksčiau, bet vietoj to, kad tie, sunku koduoti apribojimus. Ir jei dydis mūsų drobė pokyčiai, pavyzdžiui, jei mes norime turėti šį perėmimą 400 taškų ir tai squishes iš, mes galime jį over-- mes galime išplėsti, arba mes gali sumažinti šį kairę atsargą kažkas daugiau ar mažiau kaip 20. Šie skaičiai, tai sunku koduoti numeriai dabar prasmės mums. 

Ir mes galime padaryti daug daugiau įdomių dalykų taip pat. Taigi, vietoj to, kad linijinę masto, mes galbūt norėsite prisijungti skalę. Ir, kad duos mums žurnalo skalę. 

Taigi dabar mūsų masto, o ne tik plečiasi, kad spektrą, tai daro sudėtingesnius dalykus. Vietoj to, šį diapazoną sunku koduojamos, o vietoj to, kad, kad 600, mes norime tiesiog naudokite plotį, taip, nuo 20 iki plotis minus 40, 2 kartus, iš kitos pusės skirtumu. Ir tai daro daug daugiau prasmės kažkas, kas gali pažvelgti į kodą. 

Įdomu tai, kad svarstyklės gauti labai, labai sudėtinga, taip pat. Jie daug įdomių dalykų. Taigi svarstyklės nebūtinai turi veikti tik su skaičiais. Kurkime spalvotą mastą. 

Taigi, mūsų asortimentas gali be-- mūsų domenas yra 1-200. Štai įvesties dalykas. Bet mes norime į žemėlapį iš žalios į raudoną, pavyzdžiui. Ir dabar, jei mes perduoti jį 1, mes ketiname gauti žalia. Jei mes suteikti jai 200, mes susisieksime raudonai. Ir jei mes pereiname tai kažkas tarp jų, tai bus šiek tiek, kad mišinys, kažkur ant gradiento tarp žalios ir raudonos spalvos. 

Ir vietoj to, šis clunky logika natūra mes turime čia sąlyginė teisė ten, galėtume turėti something-- tiesinė skalė tarp tų. Taigi mes norime naudoti skalę mes tiesiog sukurta, kuriuos mes vadinami spalvą. Ir mes norime, kad tai D, kuris yra mūsų duomenų elementas. Ir mes einame. Turime spalvų skalę. 

Taigi tai yra žemėlapių. Taigi kas liko visiškai žalia. Dešinėje yra visiškai raudonas. Ir viskas tarp yra D funkcija. Mes turime įdomus vizualizacijos čia. Bet mūsų duomenys buvo natūra nuobodu. Pažiūrėkime, ką mes galime padaryti, jei mes turėjome daugiau įdomių duomenų. 

Įstatymas, IV, dirbančių su Data-- pirmas dalykas mes norime padaryti, kad mūsų vizualizacija įdomiau yra perkelti duomenis kažkur kitur. Tai labai clunky turėti duomenys sunku koduoti čia. Ir apskritai, mes būsime klausia kažkas už duomenis. Mes bus gal klausia vyriausybę, Gyventojų surašymo biuro, kas jūsų duomenys ir tada pasuko, kad arba paprašyti kai trečiosios šalies subjektas kai duomenų ir tada statyti vizualizacija, kad. 

Taigi pirmas dalykas, mes norime padaryti yra perkelti, kad kažkur kitur. Taigi, aš ruošiuosi kurti pateikti čia vadinamas data.json. JSON yra duomenų formatas. Jūs neturite žinoti daug apie tai. Ir mes ketiname kopijuoti mažai duomenų turime ten, įklijuokite jį ten pažodžiui, eiti atgal į mūsų vizualizacijos kodas čia, ir naudoti šią funkciją čia. Jūs neturite žinoti detales. Bet kas tai bus padaryti, tai, ji ras failą, paimti jį ir grąžinti ją mums. Taigi, kas tai daro, yra, jis eina ir gauti data.json failą. Ir tada viskas kodas, kuris yra atitraukiama inside-- esmės, visi kodas turime there-- bus paleisti tik tada, kai mes gauti duomenis atgal. Ir tada jis ketina paleisti, kad kodas su duomenimis turime. Puiku, mes turime vizualizacija, kad užklausos tam tikrą kodą kažkur kitur, kuris paprastai yra kur jis abejoja kai iš duomenų kur nors kitur, kuris paprastai yra kaip vizualizacijos dirbti. 

Bet aš noriu grįžti į duomenis. Taigi duomenys iš esmės į D3-- D3 sunaudoja duomenis, kad yra dalykų sąrašas. D3 tikisi duomenys tiesiog sąrašas dalykų, dalykų masyvo. Tai nėra svarbu, kas tuos dalykus yra tol, kol tai jų masyvas. 

Taigi čia, pavyzdžiui, galėtume iš Žinoma yra slankiojo kablelio vertybes. Mes gali turėti neigiamų. D3 nerūpi tol, kol kaip tai sąrašas dalykų. 

Kaip įdomių dalykų mes gali turėti, taip pat galėtų turėti stygos, pavyzdžiui, kad sąrašą. Taigi tai yra Crimson antraštės Pasiėmiau prieš kelias dienas. O gal Jūs rasite įdomių viskas apie šias po antraštėmis. 

Taigi dar kartą, tai yra dalykų sąrašas. D3 nerūpi. Tai atsitiktų būti eilutė. Mes pakeitėme mūsų duomenų. 

Grįžkime prie mūsų vizualizacija. Dabar mūsų vizualizacija tikisi įvesties būti skaičiai. Taigi mes ketiname turėti padaryti keletą pakeitimų. Taigi, pavyzdžiui, visų pirma, gal norime įgyvendinti šiuos apskritimus kartu pagal antraštę ilgio, simbolių skaičius antraštę. 

Taigi, ką mes padarysime is-- kaskart mūsų funkcija vadinama su virvele, mes surasime tai ilgis ir tada praeiti, kad būtų mastu. Spalva, aš sugrįšiu kad norint plieno mėlyna. Ir mes einame. Mes turime vizualizaciją iš Crimson antraštės. 

Mūsų skalė yra tiek off. Tarkime, kad ilgiausiai antraštė 100 simbolių ilgio, taip span kad iš truputį. Ir mes turime vizualizaciją. Taigi atrodo, kad dauguma antraštes yra gana arti vienas kito, kalbant apie simbolių eilutę. Tačiau vienas ten tikrai išsiskiria. 

Mes galime sukurti keletą įrankiai ištirti, kad daugiau. Bet kai aš dirbau tai, aš buvau įdomu, ar šios duomenų rinkinys, antraštės su dvitaškiu juose būtų ilgesnis. Aš prisiima jie būtų. 

Taigi leiskite išsiaiškinti. Leiskite naudoti spalvą kanalas, kaip mes padarėme anksčiau, koduoti kai apie tai, ar ten dvitaškis arba ne. Taigi, mes naudosime sąlyga dar kartą. Jūs neturite žinoti kad šios detalės, bet tai, kaip mes tikriname eilutė dėl konkrečios savybės JavaScript, vėlgi, nėra svarbi. 

Bet jei mes negalime rasti Dvitaškis, mes grįžti žalia. Ir jei mes darome, mes grįžti raudonai. Taigi dar kartą, antraštes, kad buvo dvitaškis bus raudona. Tai yra tai, ką ši means-- gražus. 

Taigi atrodo, kad mano hipotezė susidūrėme. Yra tik du. Mes tik turime šešis duomenų taškų ir tik du turėjo dvitaškius. Tačiau atrodo, šiek tiek daugiau ant apatinio galo, iš tikrųjų. Antraštės su dvitaškius atrodo apskritai būti trumpesnis, bent jau mūsų duomenų set-- įdomu. 

Grįžkime, kad į plieno mėlyna ir tada pamatyti tai, ką mes galime padaryti su dar daugiau įdomių duomenų. Taigi dar kartą, jau minėjau, kad duomenys D3 yra dalykų sąrašas. Mes matėme skaičių daugelio tipų. Mes matėme eilutes. Bet tai, ką taip pat gali būti daiktai. 

Jie gali būti sudėtingas dalykai kad yra daug dalykų. Pasakyti, kad būtų aiškiau, daugeliu atvejų, mes norite sukurti kiekvienam duomenų tašką sudėtingesnis nei tik vieną vertę. Jei norite įsivaizduoti duomenų bazė apie studentus, ten gali būti studentas pavadinimas, studento ID ir daug dalykų, susijusi su konkrečiu įrašo, ne tik seka arba skaičius. Taigi pažvelkime į tai. 

Tai yra vienas iš tokių duomenų rinkiniui. Tai duomenų rinkinys apie žemės drebėjimus. Taigi viskas čia mūsų sąraše, arba masyvo dalykų yra daug dalykų pati. Taigi kiekvienas duomenų taškas yra dydis ir koordinuoti. Ir koordinuoja save yra du dalykus. 

Taigi kiekvieną dieną yra dabar daug daugiau sudėtingas ir daug įdomiau ir yra daug daugiau įdomi informacija. Pažiūrėkime, mes galime sukurti iš to. Grįžtant atgal į čia dar kartą, naudojant mūsų histograma ratas vizualizacija mes sukūrėme, galime pamatyti, jei mes galime sukurti vizualizacija dydžio pasiskirstymo mūsų duomenų rinkiniu. 

Taigi čia, tai pati koncepcija. Bet dabar, d yra daugiau dalykų. d yra daug duomenų elementus. Taigi mes gauname dienas atgal. D3 suteikia mums r. Ir mes atsakome ieškant dydį D ir tada artimųjų, kad į skalę. 

Ir tada mes turime pakeisti mūsų skalė, žinoma. Taigi dydžiams tiesiog nėra eiti daugiau nei 10. Tiesą sakant, niekada nebuvo 10 dydis žemės drebėjimas. Bet tai kokios mūsų viršutinė pabaigos, mūsų viršutinė spektras. 

Leiskite atnaujinti. Nica, turime vizualizaciją. Įdomu note-- taip yra dvi duomenų taškai, kurie yra beveik tiksliai viena ant kita vertus, kalbant apie dydį. Jūs matote tai pagal neskaidrumo mes naudojate. 

Mes turime geografinius duomenis dabar. Mes turime platumos ir ilgumos. Gal mes galime padaryti kažką Daug įdomiau, kad. Leiskite sužinoti šiek tiek daugiau įdomus būdas vizualizuoti tai sudėtingesnis duomenys mes turime prieigą prie. 

Aktas V Mapping-- esmės, mes norime įdėti juos žemėlapyje. Aš turiu galvoje, tai yra, kai tai vyksta. Mes norime koduoti informaciją apie pozicija šių žemės drebėjimo rodmenis, taip pat jų dydį, nes mes turime dabar. Mes suprantame, kaip vartoti daugiau sudėtingų duomenų. 

Pirmas dalykas, kurį mes padarysime tai sukurti žemėlapį, fono žemėlapį. Aš ruošiuosi eiti per tai labai greitai. Tai keblus kodą. Tai dar vienas iš tų, receptai jums nereikia tikrai turime suprasti, visiškai jums naudoti. Bet tai kodas. Šis kodas čia sukuria žemėlapį. 

Mes neketiname eiti į smulkmenas. Bet aplamai, ką ji daro, yra, jis abejoja šį us.json failą, kuris yra duomenų failas, kaip vienas mes turėjome anksčiau. Tai sudėtingesnis, žinoma. Tačiau šiuo atveju, viskas, kiekvienas duomenų taškas yra ši būsena ir turi sąrašą platumos ir ilgumos kad apibrėžti poligoną, kad forma, kad valstybė. 

Taigi, kas D3 darys panašus tai, ką mes anksčiau. Jis prašys, kad ir surišti, kad elementui. Ir ten funkcija, bus žemėlapį, kad elementas iš, remiantis platumoms ir ilgumos. Galite paskaityti daugiau apie tai. Ir aš rekomenduoju. 

Yra ryšiai pabaigoje šio kodekso parašė. Ir yra komentavo kodą. Ten yra nuorodos ir toliau apie tai. Aš rekomenduoju jums atrodo it up. Bet kas mums rūpi tai ši projekcija funkcija. Noriu eiti per tai. 

Visų pirma, leiskite man parodyti Jums, kad taip, mes turime žemėlapį. Žemėlapiai yra kietas. Taigi pažvelkime į tai gamybos funkcija. 

Projekcijos yra labai daug kaip masto, vėl svarstyklės. Taigi, ką gamyba ši projekcija funkcija nėra yra, mes galime perduoti jį ilgumos ir latitudes-- šiuo atveju, šios vertybės čia yra lat-ilgisi pastato mes sėdi dešinėje now-- į projekciją. Ir projekcija bus konvertuoti kad į x ir y pikselių reikšmių. 

Taigi, kas projekcija daro yra labai panašus į mūsų skalę. Jis imasi mūsų platumose ir ilgumos, kuris atstovauja visą pasaulį ir mažėja ir dydžio, kad žemyn į aikštę, kad mes norime, kad mes jį pateikia. Šiuo atveju, mes perduoti šias vertybes. Ir tai mums duoda, gerai, kad ekrane reiškia 640 taškų. Visas šis ekranas yra 700 taškų pločio, taip, kad padaro mus apie čia, ir 154 pikselių žemyn, kurią norėčiau įvertis yra gana daug čia. 

Taigi atsižvelgiant tas Lat long, kurie atstovauti kažką visai pasaulyje ir squishing ir juda, kad aplink mums X ir Y pikselių vertybes, tai pirmas dalykas, kad padaryti šią kartografavimo kodą. Ir tada iš likusios kodas sunaudoja duomenis ir tada žemėlapiai tas Lat long ant ko nors ekrano. 

Tačiau mes ketiname naudoti šią projekciją funkcijos, nes Pasirodo, turime lat-long long, taip pat. Žvelgiant atgal į mūsų duomenimis, turime platumos ir ilgumos koordinatės už kiekvieną pastabą. Taigi leiskite naudoti projekcija. 

Taigi žiūri mūsų ekspozicijoje, mes norime, kad mūsų exposition-- turime platumą ir ilgumą. Bet mes norime pikselių reikšmes. Ir it turns out, turime tiksliai ką mes want-- projekcija. Labai panašiai kaip mes buvome naudojant skalę čia, mes dabar ketinate naudoti projekcija ir perduoti ją koordinuoja. Taigi pirmas dalykas, mes doing-- todėl mes gaunant d, kuris yra individualiai duomenys elementas individualaus drebėjimo skaitymas. Pirmas dalykas, kurį mes darome yra gauti koordinates. Gerai, mes turime koordinates. 

Antras dalykas, mes darome, yra praeiti, kad į projekciją. Projekcijos konvertuoja tuos koordinates į pikselių reikšmių, x ir y. Ir tada paskutinis dalykas, kurį mes noriu padaryti, tai tiesiog gauti x, kuris šiuo atveju yra pirmasis. Tai pirmasis iš dviejų dalykų kurie grįžo projekcijos. 

Mes padarysime tą patį y. Bet vietoj to, mes grįžti Antrasis elementas, m. Pasiruoškite atnaujinti. Ooh, papildomas pobūdis here-- gražus, mes turime duomenys varomas dokumentas tai nuslėpti šį JSON failą objektų, priėmimo žemėlapį ir keičiant priskirti atsižvelgiant į duomenų projektuoti jį ant žemėlapyje. Tai tikrai įdomu. Tai kietas. 

Paimkime jį vienu žingsniu. Aš turiu galvoje, mes turime du gabalus informacija su kiekvienu duomenų taško. Aš turiu galvoje, trys. Mes turime koordinates, kuris yra x ir y. Ir mes turime dydį. 

Mums reikia koduoti dydį kažkaip. Mes turime daug kanalų. Mes galime naudoti spalvą. Mes galime naudoti spindulį. Mes galime naudoti neskaidrumo. Mes galime naudoti daug dalykų kodą. Bet kuris iš šių požymių ir daug daugiau, kurių nėra sąraše, nes jie neprivalomi, galėtume naudoti koduoti šiuos duomenis, insultas ir visi šie dalykai minėjau. 

Darom spindulys. Manau spindulys yra labiausiai intuityviojo. Taigi dar kartą, mes pakeisti, kad sunkiai koduojami 40 ir pateikti tam tikrus skaičiavimus. Mes vėl naudoti mūsų mėgstamiausia mastą. Ir mes praeityje d. Bet ne dienas, nes mes norime dydį D. d yra tik duomenys rodo. Przekażemy dydis pagal mastelį. 

Pabandykime, kad dar kartą. Ooh, ji neveikia. Kodėl neveikia? 

Taigi prisiminti, ką masto daro. Pažvelkime masto dar kartą. Mastelio žemėlapius nuo 1 iki 10 d į 22-600, daugiau ar mažiau. 600 yra didžiulis. Tai kodėl mes vis tai. 

Taigi, mes norime pakeisti savo skalę į kažką labiau pagrįsta. Tarkime, mes norime 0 iki 60. 60 yra didelis, bet 10 žemės drebėjimų yra neįtikėtinai reti. Tiesą sakant, jie jau niekada neįvyko. 

Taigi, kas tai darys tai, tai paimsiu Mūsų dydis, kad eina nuo 1 iki 10 ir map jį išplėsti jį. Ir map jį į 0 iki 60. Leiskite atnaujinti. 

Nica, turime vizualizaciją. Tai puiku. Tai faktiniai duomenys. Jūs pastebėsite, kad mano mažai žaislas Pavyzdžiui, didžiausias žemės drebėjimas yra dešinėje viršuje iš mūsų. Bet tai viskas. Turime data varomas vizualizacija kad naudoja duomenis ir suteikia mums tikrai įdomi informacija. Taip, tegul pridėti šiek tiek interaktyvumas į jį. Minėjau, kad buvo stipri jėga ir D3. 

Taigi čia kiekvieno elemento, mes aprašant atributų krūva. Bet mes taip pat galime apibūdinti tai, ką norime atsitikti su interaktyvumo elementais. Pavyzdžiui, galėtume apibūdinti kas atsitinka, kai mes pele per. Ir labai panašios, kad, kad priimsime funkciją, labai panašios į atributus mes turėjome anksčiau, kur mes kažką daryti elementą, kai mes užveskite pelės žymeklį ant jo. 

Taigi pirmas dalykas, mes turime padaryti, tai pasirinkti tą elementą, jį rasti iš esmės, naršyklėje. ir tada mes galime nustatyti atributo į jį. Taigi, ką aš darau čia, kai mes užveskite per kažką, mes gauti, kad elementas ir tada nustatyti jo opacity atgal iki 1, kad visiškai nepermatomas. Pažiūrėkime, ką tai atrodo. 

Atrodo, mes turime Papildomas kabliataškis čia. Taigi, jei mes užveskite pelės žymeklį ant čia jis gauna visiškai. Bet dabar, žinoma, ją lieka visiškai, nes mes turi apibūdinti tai, kas vyksta kai pašalinti mūsų žymeklį. Taigi darykime tiksliai, kad mouseout, o ne mouseover. 

Ir mes iš naujo ją ką mes turėjome before-- 0.5. Ir dabar, kiekvieną kartą, kai mes hover, kurią mes gauname visą ratą. Tai padeda mums pamatyti, ką mes mes pasirinkdami iš esmės. 

O dabar padarykime tai tikrai didelis. Leiskite prisijungti, kad tai realiais duomenimis. Taigi leiskite paklausti galėtų USGS apie jų duomenų. Taigi JAV geologijos turi duomenų apie žemės drebėjimus. Jie turi viešą API sugebantį turi būti suvartojama JSON formatu. Taigi leiskite tai padaryti. 

Taigi tai yra kodo tiek, kad prisijungia prie USGS API. Ir ten tvarkymo tiek apie jį. Tai nėra tiesiogiai bet jį supaprastina į paprastą duomenų formatą, kaip vieno mes turėjome anksčiau. Taigi man atsikratyti mūsų kvietimą mūsų netikras data.json byloje. Ir vietoj to, aš telefonu USGS esmės. 

Leiskite atnaujinti, gražus. Tai tikrieji, realaus gyvenimo duomenys iš šią savaitę žemės drebėjimas. Tai tikrai įdomu. Tai nestebina, už mus, bet yra žemės drebėjimų apie daug Vakarų pakrantė Kalifornijoje. Bet aš maniau jis buvo labai įdomu kad ten buvo tiek daug žemės drebėjimų Aliaskoje, ir, matyt, čia Midwest. Aš turiu galvoje, įdomi, ir mes gerai. Štai išvada. 

Bet iš esmės, šis kas D3 padeda mums daryti. Tai padeda mums imtis duomenis, įpareigoti ji elementų DOM, ir turi šiuos elementus keisti kaip duomenų funkciją, turi tas savybes, visų daug atributai elementų, visi bus naudinga kanalų perteikti informaciją. 

D3 neįtikėtinai galinga biblioteka ir stebėtinai gerai valdoma. Tai kai galingas dalykų. Duomenų vizualizacija yra neįtikėtinai galingas įrankis perteikti žmonėms giliai įžvalgos, kad gauna į savo branduolio ir padeda jiems suprasti, kad tai gilus ir intuityvus būdas, kaip duomenys darbai ir kaip duomenys keičia mūsų gyvenimą.