[Mūzikas atskaņošanai] 

DAVID Chouinard: es esmu David Chouinard, un tas ir D3. Welcome. Mēs ejam, lai uzzinātu par D3 šodien. D3 ir JavaScript sistēma lai izveidotu augstas kvalitātes interaktīvas vizualizācijas internetā. Lietas, piemēram, tas, ko mēs esam redzēt aizmugurē mani, mēs spēsim iemācīties tos lietas, sava veida pamati tā. Bet tas būs forši. Sāksim padarot diezgan bildes. Mēs esam ieguvuši vairāk demos perspektīvu pieejamiem. Pieņemsim to darīt. 

Act I, DOM manipulation-- mēs ejam lai sāktu uzreiz padarot labas lietas. Pirmkārt, pa kreisi, mums ir kods. Pa labi, mēs esam rezultāts mūsu kodu. Iesim caur to. 

Veidosim apli. Kā tas skaņu? svg.append circle-- mēs tikko veikts apli. Jums nav ticiet man, labi? Tas nav tur. 

Tātad, ko mēs darījām tieši šeit ir, SVG ir pielāgojamiem vektorgrafikas. Tas ir veids, kā mēs pateikt pārlūku veikt vektoru grafikas pārlūku. Ko mēs tikko izdarījām tagad labi pievieno apli, lai pārlūkotu. 

Apsolījums ir, ka apļa prasa mazliet pamata atribūti pirms mēs faktiski var redzēt. Mums ir nepieciešams, lai pastāstītu to savu x pozīciju, tā y amats, tā rādiuss. Mums nav pateikt to kādu, kas, tāpēc mēs neredzam to tieši tagad. Bet pieņemsim pateikt to sīkumi. 

Tātad vispirms, tev dot mūsu Circle nosaukumu. So sauksim to par apli. Mūsu aplis ir nosaukums tagad. Un pieņemsim arī tā dažus atribūtus. Kā par cx tiks novirzīti x, tāpēc centrs x stāvoklī. Teiksim, 200 200 pikseļi. 

Pieņemsim arī tā y 200 pikseļi, kā arī. Un r, rādiuss, no apmēram 40 pikseļi. Tagad pieņemsim redzēt. Es nevaru izskaidrot. 

Tur jums iet. Mums ir loka stāvokli 200 pikseļi, 200 pikseļi, rādiuss 40 pikseļi. Kind of cool, vai ne? Mums ir aplis. Yeah. 

Tāpēc nav nepieciešams sekot līdzi. Visi šie piemēri, visi kods es esmu dara šodien Tiks sniegta tiešsaistē beigās formā, interaktīvās piemēru ar kontrolpunktiem pie katru akts, un tā tālāk. 

Darīsim vairāk stuff. Šī melnā aplis ir tiešām neglīts. Es atvainojos par šīs kļūdas ziņas tiesības tur. Tur mēs ejam. 

Pieņemsim arī tā krāsu. Kā tā? Man patīk tērauda zilā krāsā. Nu, mūsu aplis mainījusies krāsa. Tas ir lieliski. Lai tas daļēji caurspīdīgu too-- daļēji caurspīdīgu. 

Tātad šie ir atribūti mēs nosakot uz apli. Pirmā lieta, ko mēs darījām, ir mēs liekam apli lapā. Un tad mēs esam definējot ķekars atribūtiem. Dažas no tām ir nepieciešamas, tāpat CX, CY, un rādiuss. Un citi ir obligāta. 

Ir daudz vairāk atribūti. Tur ir daudz no tiem. Piemēram, mēs varētu būt insults, kā arī, insults sarkana. Bet pieņemsim, noņemt to. Mēs esam atpakaļ uz apli, zilu apli. 

Tātad, pieņemsim veikt vairāk apļus. Kā tā? Veidosim citu apli. Tas ir aizraujoši, vai ne? 

Tā teikt, es tikai Copy-Ielīmēts kas mums jau bija. Sauksim to circle2. Un darīsim precīzu Tas pats un arī tā atribūti, ņemot x pozīciju 300. Yay, mums ir divi apļi tagad. 

Un, protams, mēs varētu atjaunināt šīs vērtības. Es varētu nodot to 400, un tagad tas kustas. Un tā kā tas ir kaitinošas, pieņemsim noņemt to, lai circle2.remove. Tas ir aizgājuši tagad. 

Tātad, ko mēs darām, un ir vienkārši ļoti, very-- šis ir ļoti līdzīgs tam, ko jūs varētu darīt jQuery, piemēram. Mēs esam tikai manipulējot DOM, tā sauc. Jūs pirms varētu būt dzirdējis šo vārdu. Mēs esam radot sīkumi, nosakot atribūtus sīkumi, noņemot sīkumi. 

Tagad, lūk, kur tas kļūst interesanti. Tātad vēlāk kodu, mēs joprojām varētu atsaucas uz sākotnējo apļa šeit. Tātad, pieņemsim reset savu atribūtu CX. Teiksim, tā x nostāju 400. Un es esmu gatavojas, lai pārietu ka, tāpēc tas ir skaidrs. Tur mēs ejam. 

Tātad mēs pievienojām apli. Mēs, kas dažus atribūtus. Tika pievienots vēl viens aplis, noņem to. Un tad mēs esam pārveidojot oriģināls aplis. 

Bet šeit, kur tas izpaužas daudz interesantāka. Ne tikai mēs varam noteikt atribūtus kā tikko vērtības, mēs varam teikt, hey, aplis, dodieties stāvoklī 200. Mēs varam arī noteikt tos kā funkcijas. 

Tā vietā, sniedzot 400 šeit, mēs varam veikt dažas aprēķinu lidot uz to, ko mēs gribu, ka atribūts būt. Tātad, tas ir, kā jūs izteikt to. Mēs sakām, nevis 400, ļaujiet man jums funkciju vietā. Un šeit, iekšā šo funkciju, mēs varam veikt jebkuru traks aprēķinu. 

Mēs varētu ņemt laiku un apskatīt kādā cita lieta un dinamiski lemt par aplis kāda vērtība mēs gribam. Kā par mums tikai dot tas izlases x amats? Tātad tas, ka. 

Tātad, ko tas saka, ir, lai ik x, palaist šo funkciju. Un tas, ko mēs darām, ir aprēķināšanai dažas lietas, izlases reizes platums un atgriežas to. Tātad, katru reizi, kad mēs palaist, ka mēs aplis, kas iet uz izlases vietu. Tas ir sava veida atdzist. Es jūtu, ka es varētu izskatīties at šis maz. Mēs sākam nokļūt kaut kas interesants šeit. Padarīsim šo informāciju virza tagad. Nav datu šeit. Pieņemsim mainīt. 

II akts, Data Driven Documents-- Tātad, pieņemsim atgriezties šeit. Un pieņemsim tikai atbrīvoties no circle2, jo mēs esam tikai pievienojot un noņemot tā. Tātad mums nav tiešām ir nepieciešams to. Mums ir nepieciešams, lai būtu daudz vairāk gudrs šeit. Teiksim, mums ir daži no kāda veida dati. Viens moment-- teiksim, mums bija datus šīs veidlapas. Mums bija masīvs, tikko ķekars numuriem. Mums ir septiņi numuri šeit, neatkarīgi no šiem represent-- summa jo cilvēku bankas kontā, kā daudz viņi nosver, Dievs zina, ko. 

Tie ir skaitļi, un mēs vēlas izmantot mūsu aprindās pārstāvēt šos numurus kaut kā. Mēs vēlamies, lai tie OUR lokus ar šiem skaitļiem. Tātad, ko mēs darām. Teiksim, mēs vēlamies aplis par katru numuru. Mēs varētu darīt vecais lieta, kas mums bija doing-- aplis pievienot un circle2 un circle3. Bet tas saņem no rokām, un tur ir daudz atkārtojot loģiku. 

Tātad, pieņemsim iegūt vairāk gudrs ar to. Tā vietā, izmantojot VAR apli svg.append ka mēs bijām tikai izmantojot, mēs ejam, lai izmantotu tas maz bloks šeit. Es negribu iet padziļinātu par ko visi šīs daļas darīt. Un tas ir sava veida uzlabotas tēmu. Un es vēlos es varētu. 

Bet galvenais lieta recognize-- un jūs redzēsiet, ir ļoti bieži D3 kodu. Šī teksta Basic bloks rada tik daudz apļus jo ir datu elementi šajā masīvā tepat. Tātad tas rada tik daudz apļi, kā ir elementi. Tas notiek, lai radītu mums septiņi apļi. Un tas ir ļoti, ļoti svarīga lieta. Tāpēc pieņemsim palaist, ka. Pieņemsim noņemt mūsu citu apli. Pieņemsim tikai komentēt šo šķirties, un palaist to no jauna. 

Tur mēs ejam. Tātad mūsu aplis šeit ir daudz tumšāks, jo mēs ir septiņi apļi, viens virs otra. Mēs tikko izveidotas septiņas apļus, viena katrs par katru no šiem datu elementu. Bet tur ir galvenais lieta, kas notika ar šo fragmentu tepat. 

Tas, ka dati ir saistoši. Tātad katrs no šie datu elementi, 10, 45, 105, ir saistīts ar konkrētu apli. Tātad šie ne tikai radīja ķekars aprindās bet saista šīs divas lietas kopā. 

Un nākotnē, jo mēs izveidojām šie apļi ar šo D3 funkciju, ja es jums apli, jūs varat iedodiet man datus, kas saistīti ar to. Tātad, mēs varam jautāt D3. Hei, D3, man ir šī apli. Kas ir dati, ka aplis ir? Un D3 varētu pastāstīt mums 10 vai 45, vai 105. 

Šīs lietas ir saistītas. Tas ir ļoti, ļoti būtisks jēdziens. Apskatīsim, kas. 

Tātad, kā mēs gribētu lūgt D3-- tik tas nav nozīmes tam, bet tikai ticiet man par to. Tas ir, kā mēs lūdzam D3. Hei, D3, dod man pirmais Aplis, ka jūs varat atrast. Dodiet man pirmo apli jūs varat atrast. Un tad mēs varētu jautāt D3, kas ir dati par to, kā šis, 10. 

Tātad mēs tikai lūgt D3, atrast mani Pirmais aplis jūs varat atrast. Kas ir tās dati? 10, kas patiešām ir mūsu Pirmais datu elements. Mēs varētu jautāt to, hey, D3, mūs atrast mūsu trešo apli. 105. Kāpēc tas ir patiešām svarīgi? 

Tātad tieši šeit, es teicu ka mēs varētu izmantot funkcijas. Un es teicu, ka biju ļoti spēcīgs lieta. Tātad ne tikai var mūsu funkcijas darīt lietas tāpat kā tie daži aprēķinu, piemēram, atgriezties izlases numuru, tas var arī darīt lietas, pamatojoties uz datiem. Tas ir tas, ko virza informācija dokumenti nozīmē. Tas ir tas, ko D3 kājiņām. 

Tātad šis x postition-- vietā tikai pasakot, visiem aprindās, nokļūt x pozīciju 200, mēs varētu arī tā funkcija. Un šeit mēs varam veikt dažas aprēķinu. un d šeit stāv vietā datiem. Tātad, katru reizi, kad mēs būtu aplis, būtībā, D3 radīs šos septiņus aprindās. Un tad par katru 

aplis, tas notiek, lai iet, hey, circle1 kādi ir jūsu x pozīciju. Iepriekš mēs bijām Vienmēr atbildot 200. Bet tagad, katru reizi D3 jautā mums to, kas ir jūsu x pozīciju, tas notiek, lai dotu us-- mums ka aplis, tāpēc mums ir dati. Tas notiek, lai dotu mums datus, un saka, ko jūs vēlaties ekspozīcija būt, pamatojoties uz šiem datiem. 

Pieņemsim tikai atgriezties faktiskos datus. Tātad, ja mēs palaist šo, tas dod ASV dati virza dokumentus. Šie aprindās ir balstīti Saistībā position-- viņi bāzes kā funkciju no datiem. 

Tā, lai pirmā apļa, D3 liek apli. Un tad D3 jautā mums, ko darīt vēlaties ekspozīcija būt. Un mēs tikai teikt, neatkarīgi dati. Padarīt ekspozīciju 10. 

Tad tas jautā, ko jūs vēlaties ekspozīcija, lai būtu par otro apli. Un mēs atbildam, 45. Un mēs, protams, var veikt dažas aprēķinu šeit. Es uzskatu, ka šajās aprindās ir sava veida squished augšu. 

Tātad reizināt to ar 3, pavairot datus par 3. Mūsu aplis tikko got paplašināta out. Mūsu vērtība bija trīskāršojies. 

Aplis ir tiešām no malas, tāpēc pieņemsim varbūt veida kompensēt to. Teiksim, par 20. Šeit jums iet. 

Tas ir datu vizualizācijas. Tas ir ļoti vienkāršas vienu, bet tas dod zināmu ieskatu mūsu datiem. Tā stāsta, ka, piemēram, mēs ir maz kopu elementiem. Un mums ir liels ārpusē esošā šeit. Tas dod mums kādu informāciju par tā izplatīšanu. 

Ja mēs, piemēram, lai mainītu datus uz 150 šeit un atsvaidzināt, Mūsu vizualizācija ir mainīts. Šis dokuments ir datu virza. 

Tātad, protams, visi šie elementi, visi šie atribūti šeit, mēs varam izmantot funkciju, kas nav tikai skaitļi, nevis tikai x un y pozīcijas. Tātad, mēs varam izmantot funkciju krāsu. Tātad mēs darīsim tāpat. Mēs arī tā funkcija. 

Un teiksim, mēs varētu būt conditionals mūsu funkcija. Šī funkcija var būt simti līnijām garš. To var izdarīt ļoti, ļoti sarežģītas lietas. 

Tātad, pieņemsim likt, ja paziņojumu šeit. Teiksim, ja mūsu dati ir mazāk nekā 50, tas ir daži slieksnis ka mēs esam ieinteresēti kas kāda iemesla dēļ. Lai tas zaļš. Pretējā gadījumā, pieņemsim padarīt to sarkanā krāsā. Kā tā? Nice. 

Tātad mūsu datu vizualizācijas sāk nodot vairāk interesantu informāciju daudzos kanālos. Tātad tagad mēs zinām mazliet par tā izplatīšanu. Un mēs zinām, ka tur ir daži veida nogrieztu 50, ka mēs esam ieinteresēti. Mēs zinām, ka ir divi datu punkti zem šī sliekšņa, un lielākā daļa no tiem iepriekš. 

Tā kā pēdējais solis, šie dati šeit, tas ir ļoti reti, lai redzētu šo, piemēram, ka. Tāpēc pieņemsim tikai pārvietot to, lai mainīgo jo tas ir tīrāks, kā šis. Un tad mēs izmantojam šo mainīgo šeit. Tas ir tieši tas pats. Tas ir tikai nedaudz tīrāku. 

Nākamā, Act III, Scales-- Tik viena problēma tiesības šeit ir, ja mēs mainām mūsu dati šajā 200 value-- ja mēs to mainīt 400 vai kaut ko un atsvaidzināt, tad šī vērtība tikai gāja offscreen. Tātad mūsu loģika tieši šeit par to, kā mēs laiki 3 un 20, lai izplatītu to, un pēc tam kompensēt to mazliet ir patiešām clunky. 

Ko šie skaitļi nozīmē? Viņi tikai grūti kodētu tur. Un viņi ļoti saistīts ar datiem. Mēs vēlamies datu orientētu dokumentu. Mēs gribam ļoti elastīgu dokumentu, ka, ņemot vērā datus, pielāgojas tam un pārstāv to. 

Ko mēs būtībā ir vajadzīgs, mēs ir šī numuru sērija, 10. 45, 105. Un mēs gribam, lai izplānotu, ka ārā uz platums, pilnā platums šeit. Tāpēc mums ir klāstu numuri dodas no 0 līdz 100. Un mums ir šis campus man iet 20-700, šajā gadījumā. 

Mēs veida vēlamies karti, kas tālāk. Mēs vēlamies, lai mērogu, kas izveidota un tad ar ofseta tā mazliet. Izrādās, ka D3 ir tiem. To sauc skala. Tātad, pieņemsim to izmantot. 

Veids, ka works-- es esmu gatavojas ierakstiet šo augšu un tad izskaidrot to. Tas ir skala. Ko tas būs jādara, ir, tas būs izplānot vērtībām 1-200 par-20 600. Mēs varam pārbaudīt, ka. Mēs varam redzēt, ka šeit. 

Tātad, ja es barības to 1-- vienu mirkli. Dodiet man vienu sekundi. Man ir mistyped to. Tur jums iet. Man žēl par to. 

Tātad, kas mēroga darīs ir, tas prasīs vērtību un tad konvertēt ka paplašināt to ārā, tāpēc tas piepilda pilnu jūs lūdzot. Tātad šajā gadījumā, ja mēs dodam to vienu, tas notiek uz karti, kas iziet uz 20. Un, ja mēs dodam to 200, tas ir gatavojas karti, kas uz 600. Un kaut kur pa vidu, ja mēs 100, tas ir būs kaut kur starp 20 un 600. 

Un, protams, tagad tas ir tas, ko mums ir nepieciešams, lai novērstu šos grūti kodētu lietas, kas mums ir labi tur. Tātad, ko mēs vēlamies darīt, ir ņemt datus, kas mēs esam ņemot vērā to, ka individuālie dati elements, un nodot to mēroga pirmās. Tātad skala tiks mērogu augšu. 

Well-- Ak, mums ir maza kļūda šeit. Mēs trūkstošos datus. Tur jums iet. Un, kas paplašina to ārā. 

Tas dod mums pats Rezultātā mums bija agrāk, bet tā vietā, tiem grūti kodēta ierobežojumus. Un, ja izmērs mūsu audekla izmaiņas, piemēram, ja mēs vēlamies, lai būtu šo pāri 400 pikseļi, un tas squishes out, mēs varam būt tā over-- mēs varam paplašināt to, vai mēs var samazināt šo kreisi rezervi kaut kas mazāk vai vairāk nekā 20. Šie skaitļi, šos grūti kodē numuri tagad jēga mums. 

Un mēs varētu darīt daudz vairāk interesantas lietas, kā arī. Tātad tā vietā, lineāro skala, mēs varētu vēlēties, lai pieteiktos skalu. Un tas dos mums log skalu. 

Tāpēc tagad mūsu mērogu, nevis tikai paplašinot out šajā diapazonā, tas dara sarežģītākus lietas. Tā vietā, šo diapazonu grūti kodēts, un tā vietā, ka 600, mēs varētu vēlēties, lai tikai izmantot platumu, lai no 20. līdz platumu mīnus 40, 2 reizes starpības, no otras puses. Un tas padara daudz nozīmē, lai kāds, kurš varētu apskatīt kodu. 

Interesanti, ka svari nokļūt ļoti, ļoti sarežģīta, kā labi. Tie ir daudz interesantu lietu. Tātad svari nav obligāti darboties tikai ar skaitļiem. Veidosim krāsu skalu. 

Tātad mūsu diapazons varētu be-- Mūsu domēns ir no 1 līdz 200 gadā. Tas ir ieguldījums lieta. Bet mēs varētu vēlēties, lai karti no zaļas līdz sarkanai, piemēram. Un tagad, ja mēs dot 1, mēs ejam, lai saņemtu zaļa. Ja mēs arī tā 200, mēs iegūtu sarkanā krāsā. Un, ja mums iet to kaut kur starp, tas būs kādu kombināciju, kas, kaut kur uz gradientu starp zaļā un sarkanā. 

Un tā vietā, šāda veida clunky loģikas mēs esam šeit ar nosacīta labi tur, mēs varētu būt something-- lineāra skala starp tiem. Tāpēc mēs gribētu izmantot mērogu mēs tikko izveidots, ko mēs sauc krāsu. Un mēs gribētu dot to d, kas ir mūsu datu elements. Un tur mēs ejam. Mums ir krāsu skalu. 

Tātad tas ir kartēšana. Tik tālu pa kreisi ir pilnīgi zaļš. Cik labi ir pilnīgi sarkans. Un viss pa vidu ir funkcija no d. Mums ir interesanti vizualizācijas šeit. Bet mūsu dati bija veida garlaicīgi. Let 's redzēt, ko mēs varētu darīt, ja mums bija daudz interesantu informāciju. 

Act IV, strādājot ar Data-- pirmā lieta mēs vēlamies darīt, lai padarītu mūsu vizualizācija interesantāku ir pārvietot datus kaut kur citur. Tas ir ļoti clunky, lai būtu dati grūti kodēti šeit. Un vispār, mēs būsim jautā kāds cits par datiem. Mēs būsim varbūt lūdzot valdību, Census Bureau, kādi ir jūsu dati un tad uzzīmējot ka vai lūgt kādu trešo personu, persona dažiem datiem un tad ēka vizualizācijas par to. 

Tātad pirmā lieta, ko mēs vēlamies darīt ir pārvietot, ka kaut kur citur. Tāpēc es esmu gatavojas, lai radītu failu šeit sauc data.json. JSON ir datu formāts. Jums nav jāzina daudz par to. Un mēs ejam, lai kopētu maz datus mēs esam tur, ielīmējiet to tur burtiski, dodieties atpakaļ uz mūsu vizualizācijas kodu šeit, un izmantot šo funkciju tieši šeit. Jums nav jāzina detaļas. Bet ko tas būs jādara, ir, tas atradīs šo failu atnest to, un atdod to mums. Tātad, ko tas dara, ir, tā iet un saņemt data.json failu. Un tad viss kods, kas ir izrobota inside-- būtībā, viss kods mums there-- būs darbojas tikai tad, ja mēs iegūtu datus atpakaļ. Un tad tas notiek, lai palaistu, ka kods ar datiem, mums ir. Lieliski, mēs esam vizualizācija ka vaicājumi kādu kodu kaut kur cits, kas parasti ir kur tā apšauba dažus datus no kaut kur citur, kas parasti ir kā vizualizācijas strādā. 

Bet es gribu, lai dotos atpakaļ uz datiem. Tātad dati atšķirības būtībā D3-- D3 patērē datus, kas ir saraksts ar lietām. D3 sagaida dati vienkārši saraksts lietas, masīvs lietas. Tas nav svarīgi, ko tās lietas ir, tik ilgi, kamēr tas ir masīvs no tiem. 

Tātad, šeit, piemēram, mēs varētu no Protams, ir peldošā punkta vērtības. Mēs varētu būt negatīvi. D3 nav vienalga, tik ilgi jo tas ir saraksts ar lietām. 

Kā interesantas lietas mēs varētu būt, mēs varētu arī ir saraksts ar virknes, piemēram, ka. Tātad tie ir Crimson virsraksti Es pacēlu pirms dažām dienām. Un varbūt jūs varat atrast dažas interesantas lietas par šiem a virsrakstiem. 

Tātad vēlreiz, tas ir saraksts ar lietām. D3 nav aprūpi. Tie gadās būt virkne. Esam mainījuši mūsu datiem. 

Atgriezīsimies pie mūsu vizualizācijas. Tagad, mūsu vizualizācija sagaida ievade būt skaitļi. Tātad mēs esam nāksies veikt dažas izmaiņas. Tā, piemēram, pirmkārt, varbūt mēs vēlamies, lai šos lokus gar ar garumu virsraksta, rakstzīmju skaitu virsraksta. 

Tātad, ko mēs darīsim is-- katru reizi mūsu funkcija sauc ar auklu, mēs atradīsim tā garums un Tad iet, ka ar skalu. Krāsa, es ņemšu atgriezties ka uz tērauda zilā krāsā. Un tur mēs ejam. Mums ir vizualizācijas no Crimson virsraksti. 

Mūsu skala ir mazliet off. Pieņemsim, ka garākais virsraksts ir 100 rakstzīmēm, tā aptver, ka no mazliet. Un mums ir vizualizācija. Tāpēc šķiet, ka lielākā daļa virsrakstus ir diezgan cieši kopā, ziņā rakstura līnijas. Bet viens tur tiešām izceļas. 

Mēs varētu izveidot dažus instrumentus izpētīt, kas vairāk. Bet, kad es strādāju par to, es biju ziņkārīgs, vai šajā datu kopumu, virsraksti ar kolu tiem būtu ilgāks. Es uzņemas viņi būtu. 

Tātad, pieņemsim uzzināt. Pieņemsim izmantot krāsu kanālu, piemēram, mēs darījām agrāk, kodēt dažas par to, vai tur kolu vai nē. Tāpēc mēs izmantosim nosacījuma atkal. Jums nav zināt ziņas par to, bet tas ir tas, kā mēs pārbaudām string par īpašu raksturu JavaScript, atkal, nav nozīmes. 

Bet, ja mēs neatrodam resnās zarnas, mēs atgrieztos zaļš. Un, ja mēs to darām, mēs atgrieztos sarkana. Tātad vēlreiz, virsraksti, ka ir resnās būs sarkanā krāsā. Tas ir tas, ko šis means-- jauki. 

Tāpēc šķiet, ka mans hipotēze ir bumped. Tur ir tikai divi. Mums ir tikai seši datu punkti un tikai divi bija kolonnas. Bet šķiet, mazliet vairāk uz apakšējā galā, faktiski. Virsraksti ar kolonnas likties to parasti ir īsāks, vismaz mūsu datiem set-- interesants. 

Atgriezīsimies, ka pie tērauda zilā un tad redzēt ko mēs varam darīt ar vēl vairāk interesantu dati. Tātad vēlreiz, es minēju, ka dati D3 ir saraksts ar lietām. Mēs esam redzējuši skaitu dažāda veida. Mēs esam redzējuši stīgas. Bet lietas var būt arī objekti. 

Tie var būt sarežģītas lietas kas ietver daudzas lietas. Teikt, ka skaidrāk, vairumā gadījumu, mēs vēlaties, lai izveidotu katru dati norāda, kā vairāk sarežģī nekā tikai vienu vērtību. Ja jūs gribētu iedomāties datu bāze par studentiem, tur varētu būt students nosaukt, students ID, un daudzas lietas, kas saistītas ar īpašu ierakstu, ne tikai virkni vai numuru. Tātad, pieņemsim apskatīt to. 

Tas ir viens no šādiem datu kopa. Tas ir datu kopumu par zemestrīcēm. Tātad viss šeit par mūsu sarakstā vai masīvs lietas, ir daudzas lietas pati. Tā katrs datu punkts ir lielums un koordinēt. Un koordinē sevi ir divas lietas. 

Tātad, katru dienu ir tagad daudz vairāk sarežģīta un daudz interesantāka un satur daudz vairāk interesantu informāciju. Paskatīsimies, mēs varētu veidot no tā. Atgriežoties atpakaļ šeit, atkal, izmantojot Mūsu histogramma aplis vizualizācija mēs esam izveidojuši, pieņemsim redzēt, ja mēs varam veidot vizualizācija balles izplatīšanas mūsu datu kopumu. 

Tātad šeit, tas pats jēdziens. Bet tagad, d ir daudz lietas. d ir daudz datu elementus. Tātad mēs iegūt D atpakaļ. D3 dod mums d. Un mēs atbildam, atrodot lielumu no d un tad iet, kas ar skalu. 

Un tad mums ir jāmaina Mūsu mērogs, protams. Tātad lielumi vienkārši nav iet daudz vairāk nekā 10. Patiesībā, tur nekad nav bijis 10 lielums zemestrīce. Bet tas ir sava veida mūsu augšējā beigas, mūsu augšējā spektrs. 

Pieņemsim atsvaidzināt. Jauki, mums ir vizualizācija. Tas ir interesanti note-- tik ir divi datu punkti, kas ir gandrīz tieši virs katras otras puses, attiecībā uz lielumu. Jūs redzēt to, ko necaurredzamība ko izmantojam. 

Mums ir ģeogrāfisko datu tagad. Mums ir platuma un garuma. Varbūt mēs varētu darīt kaut ko vairāk interesanti ar to daudz. Noskaidrosim daži vairāk interesants veids, kā vizualizēt šis sarežģītāka dati mums ir pieejami. 

Akts V, Mapping-- skatījumā mēs vēlamies, lai šos kartē. Es domāju, tas ir, ja tas notiek. Mēs vēlamies, lai kodētu informāciju par pozīcija Šo zemestrīču rādījumiem, kā arī to apjoms, jo mums ir, ka tagad. Mēs saprotam, cik patērē sarežģītāka dati. 

Pirmā lieta, ko mēs darīt, ir izveidot karti, fona karti. Es iešu cauri ļoti ātri. Tas ir grūts kods. Tas ir vēl viens no tiem, receptes jums nav īsti ir saprast pilnībā, lai jūs varētu izmantot. Bet tas ir kods. Šis kods tepat rada karti. 

Mēs nebrauksim, lai iet detalizēti. Bet virspusēji, ko tā dara, ir, tā apšauba šo us.json failu, kas ir datu fails, piemēram, viens mums bija pirms tam. Tas ir sarežģītāka, protams. Bet šajā gadījumā, viss, katrs datu punkts ir šī valsts un ir sarakstu platuma un garuma kas nosaka daudzstūri, ka forma, ka valsts. 

Tātad, ko D3 būs jādara, ir līdzīgs to, ko mēs darījām agrāk. Tas pieprasīt un saistās ka uz elementu. Un tur ir funkcija, kas vēros šo elementu, kas, balstoties uz platuma un garuma. Jūs varat izlasīt vairāk par to. Un es ieteiktu to. 

Ir saiknes beigās šo kodu ievietojis. Un kods ir komentēja. Tur ir saites tālāk par šo. Es ieteiktu jums meklēt to. Bet ko mēs rūpējamies par to ir šo projekciju funkcija. Es gribu, lai iet caur to. 

Pirmkārt, ļaujiet man parādīt Jums, ka, jā, mums ir karte. Kartes ir cool. Tātad, pieņemsim apskatīt šo ražošanas funkcija. 

Projekcijas ir ļoti daudz piemēram, ar atzīmi, svari vēlreiz. Tātad, ko ražošana šo projekciju funkcija tas ir, mēs varētu iet to garuma un latitudes-- šajā gadījumā, šīs vērtības šeit ir LAT-ilgojas ēkas mēs sēžat tiesības now-- uz projekciju. Un projekcijas būs konvertēt ka uz x un y pikseļu vērtībām. 

Tātad, kas projekcija dara ir ļoti līdzīga mūsu mērogā. Tas ir ņemot mūsu platuma grādos un garuma, kas pārstāv visu zemeslodi un sarūk un lieluma, kas uz leju, lai kvadrātu, ka mēs vēlamies, ka esam radījuši to. Šajā gadījumā, mēs esam iet šīs vērtības. Un tas mums dod, labi, ka ekrānā nozīmē 640 pikseļi. Tas viss ekrāns ir 700 pikseļi plašs, tā, kas padara mūs par šeit, un 154 pikseļi uz leju, ko es aprēķins ir diezgan daudz šeit. 

Tātad, ņemot šos Lat-longs, kas pārstāvēt kaut ko par visu pasaulē un squishing un pārvietojas, ka aptuveni lai dotu mums x un y pikseļu vērtību, šī ir pirmā lieta, kas ir darīts šajā kartēšanas kodu. Un tad pārējais kods patērē datus un tad piesaista šos Lat-longs uz kaut ko ekrānā. 

Bet mēs ejam, lai izmantotu šo projekciju funkcijas, jo izrādās mums ir LAT-Longs longs, kā arī. Atskatoties uz mūsu datiem, mums ir platuma un garuma koordinātas par katru novērošanai. Tātad, pieņemsim izmantot projekciju. 

Tātad apskatot mūsu ekspozīcijā, mēs vēlamies, lai mūsu exposition-- mums ir platuma un garuma. Bet mēs gribam pikseļu vērtības. Un izrādās, mums ir tieši tā ko mēs want-- projekciju. Ļoti daudz, piemēram, mēs bijām izmantojot skalu tieši šeit, Mēs tagad gatavojas izmantot projekciju un nodot to koordinē. Tātad pirmā lieta mēs esam doing-- tāpēc mēs esam kļūst d, kas ir atsevišķs dati Individuālā zemestrīces elements lasījums. Pirmā lieta, ko mēs darām ir iegūt koordinātas. Labi, mums ir koordinātas. 

Otrā lieta, ko mēs darām, ir iet, ka uz projekcijas. Projekcijas pārvērš šos koordinātes uz pikseļu vērtībām, x un y. Un tad pēdējā lieta, ko mēs gribu darīt, ir tikai iegūt x, kas šī lieta ir pirmā. Tas ir pirmais no diviem lietām kas tiek atgriezti ar projicēšanu. 

Mēs darīsim pats y. Bet tā vietā, mēs atgrieztos Otrais elements, y. Get gatavs, lai atsvaidzinātu. Ooh, extra raksturs here-- jauki, mums ir dati virza dokuments, kas ir noslēpjot šo JSON failu objektu, padarot karti, un mainot atribūts attiecībā uz datiem projicēt to kartē. Tas ir patiešām interesanti. Tas ir forši. 

Paņemsim to uz augšu iecirtums. Es domāju, mums ir divi gabali informācija ar katru datu punktu. Es domāju, trīs. Mums ir koordinātas, kas ir x un y. Un mums ir lielumu. 

Mums ir nepieciešams, lai kodētu lielumu kaut kā. Mums ir daudz kanālus. Mēs varam izmantot krāsu. Mēs varam izmantot rādiusu. Mēs varētu izmantot necaurredzamību. Mēs varētu izmantot daudzas lietas kodu. Jebkurš no šiem atribūtiem un daudz vairāk, ka nav tur sarakstā, tāpēc, ka viņi pēc izvēles, mēs varētu izmanto, lai kodētu šos datus, insults un visas šīs lietas, es esmu minēts. 

Darīsim rādiusu. Es domāju, ka rādiuss ir visvairāk intuitīvākas. Tātad vēlreiz, mēs aizstāt kas iekodēts 40 un veikt dažus aprēķinus. Mēs atkal izmantot mūsu mīļākie skalu. Un mēs esam pagātnē d. Bet ne d, jo mēs vēlamies lielumu D. d ir tikai datu punkts. Mēs iet apjoms mērogā. 

Mēģināsim to vēlreiz. Ooh, tas nedarbojas. Kāpēc tas nedarbojas? 

Tātad, atceries, ko mēroga dara. Apskatīsim mērogā vēlreiz. Mēroga kartes no 1 līdz 10 par 22. līdz 600, vairāk vai mazāk. 600 ir milzīgs. Tas ir iemesls, kāpēc mēs esam nonākuši šajā. 

Tātad, mēs vēlamies, lai mainītu mūsu mērogu lai kaut ko vairāk saprātīgu. Teiksim, mēs vēlamies 0-60. 60 ir liels, bet 10 zemestrīces ir neticami reti. Patiesībā, viņi nekad nav noticis. 

Tātad, ko tas būs jādara, ir, tā ņemšu Mūsu lielums, kas iet no 1 līdz 10 un karti to, lai paplašinātu to ārā. Un karte to tālāk uz 0, lai 60 gadiem. Pieņemsim atsvaidzināt. 

Jauki, mums ir vizualizācija. Tas ir lieliski. Tas ir faktiskie dati. Jūs pamanīsiet, mana mazā rotaļlietu Piemēram, lielākā zemestrīce ir tiesības uz augšu no mums. Bet tas arī viss. Mums ir datumu virza vizualizāciju kas patērē datus un dod mums patiešām interesantu informāciju. Jā, pieņemsim pievienot dažas interaktivitāti uz to. Es teicu, ka biju spēcīgs spēks D3. 

Tātad šeit, katram elementam, mēs esam aprakstot ķekars atribūtiem. Bet mēs varam arī aprakstīt to, ko mēs gribam notikt ar interaktivitātes elementiem. Piemēram, mēs varētu aprakstīt kas notiek, kad mēs pele vairāk. Un ir ļoti līdzīgi, ka, ka ņemšu funkciju, ļoti līdzīgs atribūti mums bija agrāk, kur mēs kaut ko darīt, lai elements, kad mēs lidināties pār to. 

Tātad pirmā lieta, mums ir nepieciešams, lai jādara, ir izvēlēties šo elementu, lai atrastu to būtībā, pārlūkprogrammā. un tad mēs varētu noteikt atribūts uz to. Tātad, ko es daru šeit ir, kad mēs lidināties pār kaut ko, mēs iegūtu šo elementu un pēc tam noteikt tās necaurredzamību atpakaļ 1, lai pilnīgi necaurspīdīga. Let 's redzēt, ko tas izskatās. 

Šķiet, mēs esam extra semikols šeit. Tātad, ja mēs lidināties nekā šeit, tas kļūs pilns. Bet tagad, protams, to paliek pilna, jo mēs ir aprakstīts, kas notiek kad noņemt mūsu kursoru. Tātad, pieņemsim darīt tieši to par mouseout, nevis uz mouseover. 

Un mēs reset to tas, ko mums bija before-- 0,5. Un tagad, katru reizi, kad mēs lidināties, mēs iegūtu pilnu apli. Tas palīdz mums redzēt, ko mēs mēs esam izvēloties būtībā. 

Un tagad pieņemsim, tas tiešām lieliski. Pieņemsim savienot to reāliem datiem. Tātad, pieņemsim jautāt varētu USGS par saviem datiem. Tātad ASV Ģeoloģijas ir datus par zemestrīces. Viņi ir sabiedrības API, kas ir spējīgi varētu patērēt JSON formātā. Tātad, pieņemsim darīt. 

Tātad tas ir mazliet kodu, kas savieno ar USGS API. Un tur ir mazliet apstrādi par to. Tas nav būtiski, bet vienkāršo to vienkāršu datu formātā, piemēram, viens mums bija pirms tam. Tāpēc es varu atbrīvoties no mūsu aicinājumu Mūsu fake data.json failā. Un tā vietā, es esmu aicinot būtībā USGS. 

Pieņemsim atsvaidzināt, jauki. Tas ir faktiskais, reālās dzīves dati No šīs nedēļas par zemestrīcēm. Tas ir patiešām interesanti. Tas nav pārsteigums mums, bet ir daudz zemestrīces par West Coast Kalifornijā. Bet es domāju, ka tas bija ļoti interesanti ka tur bija tik daudz zemestrīces Aļaskā, un acīmredzot, šeit Midwest. Es domāju, interesanti, un mēs esam labi. Tas ir secinājums. 

Bet būtībā, šis ir tas, kas D3 palīdz mums darīt. Tas palīdz mums ņemt datus, saistošs to elementiem DOM, un ir šie elementi jāmaina kā funkcija no datiem, ir šie atribūti, visas tās daudzi atribūti elementiem, visi būt noderīga kanāliem nodot informāciju. 

D3 ir neticami spēcīgs bibliotēka un pārsteidzoši labi darboties. Tas ir daži spēcīgs sīkumi. Datu vizualizācija neticami spēcīgs instruments nogādāšanai cilvēkiem dziļi atziņas, kas izpaužas uz to pamata un palīdz viņiem saprast, jo šis dziļa un intuitīvu veidu, kā datu darbojas un kā dati maina mūsu dzīvi.