1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [MUSIC JOC] 3 00:00:11,880 --> 00:00:16,480 >> DAVID Chouinard: Sunt David Chouinard, iar acest lucru este D3. 4 00:00:16,480 --> 00:00:17,700 Bine ai venit. 5 00:00:17,700 --> 00:00:21,270 Vom afla mai multe despre D3 astăzi. 6 00:00:21,270 --> 00:00:25,020 D3 este un cadru de activarea JavaScript- pentru a construi o înaltă calitate 7 00:00:25,020 --> 00:00:28,110 vizualizări interactive pentru web. 8 00:00:28,110 --> 00:00:30,870 Lucruri ca ceea ce suntem văzând în spate de mine, 9 00:00:30,870 --> 00:00:34,230 vom învăța să facă cele lucruri, un fel de elementele de bază ale acestuia. 10 00:00:34,230 --> 00:00:36,452 Dar va fi rece. 11 00:00:36,452 --> 00:00:38,160 Să începem a face poze frumoase. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Avem mai multe demo-uri de perspective disponibile. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Hai să o facem. 16 00:00:50,760 --> 00:00:58,700 >> Actul I, DOM manipulation-- mergem pentru a începe imediat face lucruri interesante. 17 00:00:58,700 --> 00:01:01,240 În primul rând, pe stânga, avem cod. 18 00:01:01,240 --> 00:01:03,470 In dreapta, avem rezultatul codul nostru. 19 00:01:03,470 --> 00:01:04,900 Să mergem prin ea. 20 00:01:04,900 --> 00:01:05,780 >> Să facem un cerc. 21 00:01:05,780 --> 00:01:08,570 Cum ți se pare? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- ne-am făcut un cerc. 23 00:01:14,934 --> 00:01:16,100 Tu nu mă crezi, nu? 24 00:01:16,100 --> 00:01:18,190 Nu e acolo. 25 00:01:18,190 --> 00:01:21,830 >> Deci, ceea ce am făcut aici este, SVG este grafică vectorială scalabilă. 26 00:01:21,830 --> 00:01:27,530 Acesta este modul în care spune browser-ului pentru a face grafică vectorială în browser. 27 00:01:27,530 --> 00:01:30,740 Ceea ce tocmai am făcut-o chiar acum Se adaugă un cerc pentru a căuta. 28 00:01:30,740 --> 00:01:34,790 >> Promisiunea este că cercul necesită un pic de atribute de bază 29 00:01:34,790 --> 00:01:36,850 înainte de a putea vedea de fapt. 30 00:01:36,850 --> 00:01:40,045 Trebuie să-l spun poziția x, poziția y, raza sa. 31 00:01:40,045 --> 00:01:43,310 Nu am spus nimic din toate acestea, așa că nu-l văd chiar acum. 32 00:01:43,310 --> 00:01:46,210 Dar să-l spun chestii. 33 00:01:46,210 --> 00:01:49,510 >> Deci, în primul rând, ai pentru a se obține cercul nostru un nume. 34 00:01:49,510 --> 00:01:53,070 Deci, haideți să-l numim cerc. 35 00:01:53,070 --> 00:01:54,406 Cerc nostru are un nume acum. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 Și să-l dau câteva atribute. 38 00:01:59,490 --> 00:02:03,690 Ce zici de cx-ar centru x, astfel centrul poziției x. 39 00:02:03,690 --> 00:02:06,730 Să spunem, 200 de 200 pixeli. 40 00:02:06,730 --> 00:02:10,220 >> Să dau un y de 200 de pixeli, de asemenea. 41 00:02:10,220 --> 00:02:16,032 Și o r, o rază, de aproximativ 40 de pixeli. 42 00:02:16,032 --> 00:02:16,950 Acum, să vedem. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Eu nu pot scrie. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Acolo te duci. 47 00:02:31,520 --> 00:02:37,330 Avem un cerc la poziția 200 pixeli, 200 pixeli pe o rază de 40 pixeli. 48 00:02:37,330 --> 00:02:38,280 Un fel de rece, nu? 49 00:02:38,280 --> 00:02:38,988 Avem un cerc. 50 00:02:38,988 --> 00:02:40,880 Da. 51 00:02:40,880 --> 00:02:42,670 >> Deci, nu este nevoie să urmeze de-a lungul. 52 00:02:42,670 --> 00:02:45,790 Toate aceste exemple, toate din codul Fac astăzi 53 00:02:45,790 --> 00:02:51,300 vor fi furnizate online la capătul sub formă de exemple interactive 54 00:02:51,300 --> 00:02:54,010 cu puncte de control de la fiecare act, și așa mai departe. 55 00:02:54,010 --> 00:02:55,160 >> Să facem mai multe lucruri. 56 00:02:55,160 --> 00:02:58,901 Acest cerc negru este foarte urât. 57 00:02:58,901 --> 00:03:01,541 Îmi pare rău pentru această eroare Mesajele acolo. 58 00:03:01,541 --> 00:03:05,340 Acolo mergem. 59 00:03:05,340 --> 00:03:06,350 >> Să dau o culoare. 60 00:03:06,350 --> 00:03:07,170 Cum e asta? 61 00:03:07,170 --> 00:03:08,340 Îmi place să albastru oțel. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Ei bine, cercul nostru schimbat culoarea. 64 00:03:16,030 --> 00:03:17,320 Grozav. 65 00:03:17,320 --> 00:03:31,330 Să facem o semi-transparent too-- semi-transparent. 66 00:03:31,330 --> 00:03:33,670 >> Deci, acestea sunt atribute suntem definirea pe cercul. 67 00:03:33,670 --> 00:03:36,774 Primul lucru pe care am făcut-o este am pus un cerc pe pagina. 68 00:03:36,774 --> 00:03:38,690 Și apoi vom definirea o grămadă de atribute. 69 00:03:38,690 --> 00:03:41,610 Unele dintre acestea sunt necesare, ca CX, CY, și Radius. 70 00:03:41,610 --> 00:03:42,680 Și altele sunt opționale. 71 00:03:42,680 --> 00:03:44,730 >> Există mult mai multe atribute. 72 00:03:44,730 --> 00:03:46,760 Există o mulțime de ei. 73 00:03:46,760 --> 00:03:53,070 De exemplu, am putea avea o accident vascular cerebral, de asemenea, un accident vascular cerebral de roșu. 74 00:03:53,070 --> 00:03:55,630 Dar să scoateți asta. 75 00:03:55,630 --> 00:04:00,450 Ne-am întors într-un cerc, un cerc albastru. 76 00:04:00,450 --> 00:04:01,600 >> Așa că hai să facem mai multe cercuri. 77 00:04:01,600 --> 00:04:02,810 Cum e asta? 78 00:04:02,810 --> 00:04:04,665 Să facem un alt cerc. 79 00:04:04,665 --> 00:04:05,985 Acest lucru este interesant, nu? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Deci, spune că doar Copy-Copiat ceea ce am avut deja. 82 00:04:12,300 --> 00:04:13,570 Să-i spunem circle2. 83 00:04:13,570 --> 00:04:15,840 Și să facem exact același lucru și dau 84 00:04:15,840 --> 00:04:20,450 atribute, având în vedere o poziție x de 300. 85 00:04:20,450 --> 00:04:24,140 Yay, avem două cercuri acum. 86 00:04:24,140 --> 00:04:27,240 >> Și, bineînțeles, am putea actualiza aceste valori. 87 00:04:27,240 --> 00:04:31,640 Am putea pune la 400, iar acum se mișcă. 88 00:04:31,640 --> 00:04:35,470 Si din moment ce e enervant, să scoateți-l, așa circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 A plecat acum. 91 00:04:40,730 --> 00:04:43,170 >> Deci, ce facem și este doar foarte, very-- acest 92 00:04:43,170 --> 00:04:46,030 este foarte similar cu ceea ce s-ar putea face în jQuery, de exemplu. 93 00:04:46,030 --> 00:04:48,240 Noi doar manipulare DOM, se numește. 94 00:04:48,240 --> 00:04:50,040 S-ar putea fi auzit acest cuvânt înainte. 95 00:04:50,040 --> 00:04:53,255 Suntem crearea de lucruri, stabilirea atribute pe chestii, eliminarea chestii. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Acum, aici e în cazul în care devine interesant. 98 00:05:02,360 --> 00:05:07,250 Deci, mai târziu, în codul, am putea încă se referă la cercul inițial aici. 99 00:05:07,250 --> 00:05:14,100 Așa că haideți să resetați atributul său de cx. 100 00:05:14,100 --> 00:05:18,260 Să spunem, poziția sa x 400. 101 00:05:18,260 --> 00:05:22,406 Și am de gând să tranziție că, deci e evident. 102 00:05:22,406 --> 00:05:23,360 Acolo mergem. 103 00:05:23,360 --> 00:05:24,780 >> Deci, am adaugat un cerc. 104 00:05:24,780 --> 00:05:26,440 Am stabilit unele atribute. 105 00:05:26,440 --> 00:05:28,210 Am adaugat un alt cerc, îndepărtat ea. 106 00:05:28,210 --> 00:05:31,650 Și apoi vom modifica cercul inițial. 107 00:05:31,650 --> 00:05:35,400 >> Dar aici e în cazul în care acesta devine mult mai interesant. 108 00:05:35,400 --> 00:05:39,070 Nu numai că putem stabili atribute ca doar valori, putem spune, 109 00:05:39,070 --> 00:05:41,610 hei, cerc, du-te la poziția 200. 110 00:05:41,610 --> 00:05:44,540 Putem de asemenea, le seta ca funcții. 111 00:05:44,540 --> 00:05:48,850 >> Deci, în loc de a da 400 aici, putem face unele de calcul 112 00:05:48,850 --> 00:05:53,950 pe zbor pentru ceea ce noi vrea ca atribut să fie. 113 00:05:53,950 --> 00:05:56,580 Deci, acesta este modul în care ar exprima asta. 114 00:05:56,580 --> 00:06:00,660 Spunem, în loc de 400, lasă-mă să îți dau o funcție în schimb. 115 00:06:00,660 --> 00:06:04,180 Și aici, în interiorul această funcție, putem face orice calcul nebun. 116 00:06:04,180 --> 00:06:06,820 >> Am putea lua timp și uita-te la un alt lucru 117 00:06:06,820 --> 00:06:11,230 și să decidă dinamic pentru cercul ce valoare vrem. 118 00:06:11,230 --> 00:06:15,266 Ce zici ne-am da un post x întâmplare? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Deci asta e. 121 00:06:21,120 --> 00:06:25,490 >> Deci, ce care spune este, pentru fiecare x, executați această funcție. 122 00:06:25,490 --> 00:06:29,340 Și ceea ce facem este calcularea unele lucruri, ori și aleatoare lățimea 123 00:06:29,340 --> 00:06:30,410 și returnarea că. 124 00:06:30,410 --> 00:06:34,765 Deci, de fiecare dată când executați, vom obține o cerc care merge la un loc aleator. 125 00:06:34,765 --> 00:06:36,394 E un fel de rece. 126 00:06:36,394 --> 00:06:38,310 Mă simt ca și cum aș putea uita la acest lucru pentru un mic. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Suntem incepand de a ajunge la ceva interesant aici. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Să facem condus acum aceste date. 131 00:06:51,390 --> 00:06:53,420 Nu e nici date aici. 132 00:06:53,420 --> 00:06:54,482 Să schimbăm asta. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Documents-- Actul II, Data Driven Deci, să ne întoarcem la aici. 135 00:07:12,140 --> 00:07:15,340 Și hai să scăpăm de circle2, pentru că suntem doar adăugarea și eliminarea 136 00:07:15,340 --> 00:07:15,840 ea. 137 00:07:15,840 --> 00:07:17,382 Deci, nu avem nevoie de el. 138 00:07:17,382 --> 00:07:21,421 Trebuie să fim mult mai inteligent aici. 139 00:07:21,421 --> 00:07:23,170 Să spunem, ne-am unele date de un anumit fel. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Un moment-- să zicem, am avut datele acest formular. 142 00:07:40,020 --> 00:07:41,800 Am avut o matrice, doar o grămadă de numere. 143 00:07:41,800 --> 00:07:45,750 Avem șapte numere aici, indiferent de acestea sumă reprezenta: 144 00:07:45,750 --> 00:07:48,810 în contul bancar oamenilor, cum mult acestea să cântărească, Dumnezeu știe ce. 145 00:07:48,810 --> 00:07:51,310 >> Acestea sunt numere, și noi doriți să utilizați cercurile noastre 146 00:07:51,310 --> 00:07:53,240 pentru a reprezenta aceste numere într-un fel. 147 00:07:53,240 --> 00:07:55,515 Vrem să lega nostru cercuri la aceste numere. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Deci, ceea ce facem. 150 00:07:59,626 --> 00:08:01,500 Să spunem, ne dorim o cerc pentru fiecare număr. 151 00:08:01,500 --> 00:08:03,590 Am putea face vechi lucru am fost doing-- 152 00:08:03,590 --> 00:08:06,020 Adăugare cerc și circle2 și circle3. 153 00:08:06,020 --> 00:08:10,020 Dar acest scapă de sub control, și există o mulțime de repetarea logică. 154 00:08:10,020 --> 00:08:12,760 >> Așa că hai să mai inteligent cu asta. 155 00:08:12,760 --> 00:08:17,810 În loc de a folosi cercului var svg.append că am fost doar folosind, 156 00:08:17,810 --> 00:08:21,580 vom utiliza acest mic bloc de aici. 157 00:08:21,580 --> 00:08:24,510 Nu vreau să merg în profunzime în ceea ce toate aceste părți face. 158 00:08:24,510 --> 00:08:26,020 Și e un fel de subiect avansat. 159 00:08:26,020 --> 00:08:27,830 Și am vrea să pot. 160 00:08:27,830 --> 00:08:31,370 >> Dar lucrul cheie pentru a recognize-- și veți vedea este foarte des în cod D3. 161 00:08:31,370 --> 00:08:36,840 Acest bloc de bază de text creeaza cat mai multe cercuri 162 00:08:36,840 --> 00:08:41,360 ca exista elemente de date în această matrice aici. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Deci, acest lucru creează cât mai multe cercuri ca exista elemente. 165 00:08:55,780 --> 00:08:58,520 Va ne crea șapte cercuri. 166 00:08:58,520 --> 00:09:01,710 Și o face un lucru foarte, foarte cheie. 167 00:09:01,710 --> 00:09:02,460 Deci să executați. 168 00:09:02,460 --> 00:09:05,460 Să elimina alte cercul nostru. 169 00:09:05,460 --> 00:09:09,565 Hai să comenteze această o parte afară și executați din nou. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Acolo mergem. 172 00:09:15,260 --> 00:09:18,030 Deci, cercul nostru de aici este o lot mai inchisa, pentru ca ne 173 00:09:18,030 --> 00:09:20,720 au șapte cercuri, o pe deasupra celuilalt. 174 00:09:20,720 --> 00:09:25,425 Tocmai am creat șapte cercuri, unul fiecare pentru fiecare dintre aceste elemente de date. 175 00:09:25,425 --> 00:09:28,860 Dar există un lucru care sa întâmplat cheie cu acest fragment aici. 176 00:09:28,860 --> 00:09:31,030 >> E ca datele au fost legat. 177 00:09:31,030 --> 00:09:33,440 Deci, fiecare dintre aceste elemente de date, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, a fost legat la un anumit cerc. 179 00:09:38,830 --> 00:09:40,960 Deci, acestea nu numai că a creat o grămadă de cercuri 180 00:09:40,960 --> 00:09:43,420 dar leagă aceste două lucruri împreună. 181 00:09:43,420 --> 00:09:48,740 >> Iar în viitor, pentru că am creat aceste cercuri cu această funcție D3, 182 00:09:48,740 --> 00:09:52,430 dacă ți-aș da un cerc, puteți da-mi datele asociate cu ea. 183 00:09:52,430 --> 00:09:53,280 Deci, putem întreba D3. 184 00:09:53,280 --> 00:09:54,840 Hei, D3, am acest cerc. 185 00:09:54,840 --> 00:09:57,350 Ce-i datele care cercul are? 186 00:09:57,350 --> 00:10:01,290 Și D3 ne-ar spune de 10 sau 45 sau 105. 187 00:10:01,290 --> 00:10:02,380 >> Aceste lucruri sunt legate. 188 00:10:02,380 --> 00:10:04,490 E un concept foarte, foarte fundamental. 189 00:10:04,490 --> 00:10:06,070 Să ne uităm la asta. 190 00:10:06,070 --> 00:10:12,210 >> Deci, modul în care ne-ar întreba D3-- așa acest lucru este irelevant pentru acest lucru, 191 00:10:12,210 --> 00:10:16,620 dar doar încredere în mine pe ea. 192 00:10:16,620 --> 00:10:17,620 Acesta este modul în care cerem D3. 193 00:10:17,620 --> 00:10:21,312 Hei, D3, da-mi primul cerc pe care le puteți găsi. 194 00:10:21,312 --> 00:10:23,580 Dă-mi primul cerc puteți găsi. 195 00:10:23,580 --> 00:10:29,660 Și atunci am putea întreba D3, ce este datele de pe care, ca aceasta, 10. 196 00:10:29,660 --> 00:10:33,380 >> Deci, ne-am întreba D3, găsiți-mi primul cerc puteți găsi. 197 00:10:33,380 --> 00:10:34,400 Ce-i datele sale? 198 00:10:34,400 --> 00:10:36,650 10, care este într-adevăr nostru primul element de date. 199 00:10:36,650 --> 00:10:42,150 Am putea întreba, hei, D3, ne sa treilea cercul nostru. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 De ce este acest lucru cu adevărat importantă? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Deci aici, am menționat pe care le-ar putea folosi funcțiile. 204 00:10:52,250 --> 00:10:54,910 Și am menționat că a fost un lucru foarte puternic. 205 00:10:54,910 --> 00:11:03,070 Deci, nu numai că se poate face funcțiile noastre lucruri ca face unele calcule, de exemplu, 206 00:11:03,070 --> 00:11:09,170 reveni un număr aleator, se poate De asemenea, face lucruri pe baza datelor. 207 00:11:09,170 --> 00:11:11,550 Aceasta este ceea ce înseamnă date condus documente. 208 00:11:11,550 --> 00:11:13,750 Asta e ceea ce reprezintă D3 pentru. 209 00:11:13,750 --> 00:11:17,800 >> Deci, acest x postition-- loc de doar că toate cercurile, 210 00:11:17,800 --> 00:11:21,735 obține x poziție 200, ne-am ar putea da o funcție. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 Și aici, putem face unele calcule. 213 00:11:30,140 --> 00:11:33,710 și d aici stă în loc pentru datele. 214 00:11:33,710 --> 00:11:36,120 Deci, de fiecare dată când avem un cerc, în esență, 215 00:11:36,120 --> 00:11:37,750 D3 va crea aceste șapte cercuri. 216 00:11:37,750 --> 00:11:38,500 Și apoi pentru fiecare 217 00:11:38,500 --> 00:11:41,920 >> cerc, se va merge, hei, circle1 care e poziția ta de x. 218 00:11:41,920 --> 00:11:45,210 Anterior, am fost răspunde întotdeauna 200. 219 00:11:45,210 --> 00:11:48,630 Dar acum, de fiecare dată D3 solicită ne care e poziția ta x, 220 00:11:48,630 --> 00:11:51,790 se va da us-- avem că cerc, așa că avem datele. 221 00:11:51,790 --> 00:11:55,290 Va să ne dea datele și spune, ce vrei expunerea să fie, 222 00:11:55,290 --> 00:11:57,120 pe baza acestor date. 223 00:11:57,120 --> 00:11:59,590 >> Să se întoarcă datele reale. 224 00:11:59,590 --> 00:12:04,910 Deci, dacă vom rula aceasta, aceasta dă Date noi condus documente. 225 00:12:04,910 --> 00:12:08,040 Aceste cercuri sunt bazate în ceea ce position-- 226 00:12:08,040 --> 00:12:11,120 acestea sunt baze ca o funcție a datelor. 227 00:12:11,120 --> 00:12:13,100 >> Deci, pentru primul cerc, D3 pune un cerc. 228 00:12:13,100 --> 00:12:16,770 Și apoi D3 ne cere, ce face vrei expunerea să fie. 229 00:12:16,770 --> 00:12:19,620 Și noi spunem doar, indiferent de datele sunt. 230 00:12:19,620 --> 00:12:21,185 Asigurați specificații 10. 231 00:12:21,185 --> 00:12:26,320 >> Apoi întreabă, ce vrei expunerea să fie pentru al doilea cerc. 232 00:12:26,320 --> 00:12:27,270 Iar noi răspundem la, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 Iar noi, desigur, poate face unele calcul aici. 235 00:12:32,230 --> 00:12:35,510 Mi se pare că aceste cercuri sunt un fel de squished sus. 236 00:12:35,510 --> 00:12:38,965 >> Deci, multiplica de 3, înmulțiți datele de 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Cerc nostru tocmai a fost extins afară. 239 00:12:43,840 --> 00:12:46,730 Valoarea noastră a fost triplat. 240 00:12:46,730 --> 00:12:51,010 >> Cercul este într-adevăr pe margine, Să poate un fel de ea compensare. 241 00:12:51,010 --> 00:12:53,632 Să spunem, de 20. 242 00:12:53,632 --> 00:12:56,070 Poftim. 243 00:12:56,070 --> 00:12:57,590 >> Aceasta este o vizualizare a datelor. 244 00:12:57,590 --> 00:13:01,767 Este un foarte de bază, dar acest lucru ne dă o idee despre datele noastre. 245 00:13:01,767 --> 00:13:04,600 Ea ne spune că, de exemplu, au un mic grup de elemente. 246 00:13:04,600 --> 00:13:06,340 Și avem o valoare aberantă mare aici. 247 00:13:06,340 --> 00:13:10,830 Acest lucru ne dă câteva informații despre distribuția. 248 00:13:10,830 --> 00:13:20,830 >> Dacă ar fi, de exemplu, să schimbe datele la 150 de aici și de reîmprospătare, 249 00:13:20,830 --> 00:13:22,630 vizualizare noastră este schimbat. 250 00:13:22,630 --> 00:13:24,285 Acest document este condus de date. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Deci, desigur, toate aceste elemente, toate aceste atribute aici, 253 00:13:36,180 --> 00:13:38,430 putem folosi o funcție, nu doar numerele, nu doar 254 00:13:38,430 --> 00:13:39,900 x și y pozițiile. 255 00:13:39,900 --> 00:13:42,120 Deci, putem folosi o funcție de culoare. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Deci, vom face la fel. 258 00:13:46,360 --> 00:13:49,360 Vom da o funcție. 259 00:13:49,360 --> 00:13:52,320 >> Și să spunem, am putea avea condiționale în funcție noastră. 260 00:13:52,320 --> 00:13:54,770 Această funcție poate fi sute de linii lungi. 261 00:13:54,770 --> 00:13:57,150 Se poate face lucruri foarte, foarte complicate. 262 00:13:57,150 --> 00:13:59,080 >> Deci să punem un if aici. 263 00:13:59,080 --> 00:14:03,420 Să spunem, în cazul în care datele noastre sunt mai puțin decât 50, asta e un prag 264 00:14:03,420 --> 00:14:05,817 că suntem interesați în pentru un motiv oarecare. 265 00:14:05,817 --> 00:14:06,650 Să facem acest verde. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 În caz contrar, să facem o roșie. 268 00:14:15,320 --> 00:14:16,110 Cum e asta? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Nisa. 271 00:14:21,220 --> 00:14:24,860 >> Deci vizualizare noastra de date începe pentru a transmite informații mai interesante 272 00:14:24,860 --> 00:14:26,727 pe mai multe canale. 273 00:14:26,727 --> 00:14:28,560 Deci, acum stim un pic despre distribuția. 274 00:14:28,560 --> 00:14:31,768 Și știm că există un fel de tăiat la 50, care suntem interesati de. 275 00:14:31,768 --> 00:14:35,630 Știm că există două puncte de date sub acest prag și cele mai multe dintre ele 276 00:14:35,630 --> 00:14:36,130 de mai sus. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Deci, ca o etapă finală, aceste date aici, este foarte rar la aceasta ca asta. 279 00:14:46,160 --> 00:14:52,610 Așa că hai să-l mute la o variabilă pentru că e mai curat, ca aceasta. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 Și apoi vom folosi acea variabila aici. 282 00:15:05,197 --> 00:15:06,280 Este exact același lucru. 283 00:15:06,280 --> 00:15:07,280 E doar un pic mai curat. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Următorul, Actul III, Scales-- Deci, o problema dreapta 286 00:15:35,300 --> 00:15:38,920 aici este, dacă vom schimba nostru date în acest 200 value-- 287 00:15:38,920 --> 00:15:41,685 dacă am schimba la 400 sau ceva și de reîmprospătare, 288 00:15:41,685 --> 00:15:44,540 atunci această valoare tocmai a offscreen. 289 00:15:44,540 --> 00:15:49,040 Deci, logica noastră aici de modul în care facem ori 3 290 00:15:49,040 --> 00:15:52,570 și 20, să-l întins și apoi compensa un pic este foarte greoaie. 291 00:15:52,570 --> 00:15:54,150 >> Ce înseamnă aceste numere? 292 00:15:54,150 --> 00:15:55,400 Ei pur și simplu greu codificate acolo. 293 00:15:55,400 --> 00:15:58,830 Și ei foarte mult legat de datele. 294 00:15:58,830 --> 00:16:00,550 Ne dorim un document de date condus. 295 00:16:00,550 --> 00:16:05,460 Ne dorim un document foarte flexibil, că datele prezentate, se adaptează la ea 296 00:16:05,460 --> 00:16:07,900 și reprezintă. 297 00:16:07,900 --> 00:16:11,330 >> Ceea ce avem nevoie de fapt este că au această gamă de numere 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 Și vrem să harta asta într-o formă lățimea, complet lățimea de aici. 300 00:16:17,630 --> 00:16:20,620 Deci avem gama de Numerele merg la 0 la 100. 301 00:16:20,620 --> 00:16:24,980 Și avem această campus am trecut 2-70, în acest caz. 302 00:16:24,980 --> 00:16:26,515 >> Ne fel de doresc să harta asta pe. 303 00:16:26,515 --> 00:16:30,002 Vrem la scară că până și apoi compensa un pic. 304 00:16:30,002 --> 00:16:33,165 Se pare că D3 are aceste. 305 00:16:33,165 --> 00:16:34,220 Se numește o scară. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Deci să-l folosească. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Modul în care works-- am de gând să acest tip în sus și apoi explica. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 Aceasta este o scală. 312 00:17:02,450 --> 00:17:08,670 Ce va face este, se va schița valori între 1 și 200 de pe la 2-60. 313 00:17:08,670 --> 00:17:10,990 Putem verifica asta. 314 00:17:10,990 --> 00:17:13,329 Putem vedea că aici. 315 00:17:13,329 --> 00:17:21,704 >> Deci, dacă am hrăni 1-- un moment. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Dă-mi o secundă. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Cred că am o scris corect. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Acolo te duci. 322 00:18:15,990 --> 00:18:17,930 Îmi pare rău pentru asta. 323 00:18:17,930 --> 00:18:22,050 >> Deci, ce va face o scală este, se va lua o valoare 324 00:18:22,050 --> 00:18:24,930 și apoi conversia, extinde asta, așa că 325 00:18:24,930 --> 00:18:27,320 umple întreaga gamă ceri pentru. 326 00:18:27,320 --> 00:18:32,910 Deci, în acest caz, dacă are un da, se va harta care intră 20. 327 00:18:32,910 --> 00:18:37,750 Și dacă ne dau 200, e O să harta care pe la 600. 328 00:18:37,750 --> 00:18:40,460 Și undeva în între, dacă vom obține 100, e 329 00:18:40,460 --> 00:18:44,610 Va fi undeva între 20 și 600. 330 00:18:44,610 --> 00:18:51,480 >> Și, bineînțeles, acum acest lucru este ceea ce avem nevoie pentru a elimina aceste codificate hard 331 00:18:51,480 --> 00:18:53,402 lucruri pe care le avem acolo. 332 00:18:53,402 --> 00:18:55,950 Deci, ceea ce vrem să facem este ia datele pe care suntem 333 00:18:55,950 --> 00:19:00,950 având în vedere, că datele individuale Element, și se trece la scară întâi. 334 00:19:00,950 --> 00:19:02,635 Deci scară se va intensifica. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, avem un pic de eroare aici. 337 00:19:48,880 --> 00:19:50,120 Ne lipsesc date. 338 00:19:50,120 --> 00:19:51,290 Acolo te duci. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 Și că se extinde afară. 341 00:19:59,550 --> 00:20:01,383 >> Asta ne dă aceeași rezultat, am avut înainte, 342 00:20:01,383 --> 00:20:04,030 dar în loc de a avea cele greu codificate constrângeri. 343 00:20:04,030 --> 00:20:07,790 Și dacă mărimea noastre modificări panza, de exemplu, 344 00:20:07,790 --> 00:20:11,790 dacă vrem să avem această peste 400 pixeli și squishes afară, 345 00:20:11,790 --> 00:20:15,440 putem avea over-- putem extinde, sau noi 346 00:20:15,440 --> 00:20:21,890 poate reduce această marjă stânga la ceva mai puțin sau mai mult de 20. 347 00:20:21,890 --> 00:20:25,470 Aceste numere, acestea greu codificate Numerele face acum sens pentru noi. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> Și am putea face mult mai mult lucruri interesante, de asemenea. 350 00:20:30,520 --> 00:20:35,990 Deci, în loc de a avea un liniar scară, am putea dori să vă conectați o scară. 351 00:20:35,990 --> 00:20:37,840 Și asta ne va da o scară jurnal. 352 00:20:37,840 --> 00:20:41,269 >> Deci, acum scară noastră, în loc de doar extinderea faptul că gama, 353 00:20:41,269 --> 00:20:42,810 se face lucrurile mai sofisticate. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 În loc de a avea aceasta gama greu codificate, și în loc de a avea acea 600, 356 00:20:53,790 --> 00:20:58,465 am putea dori să folosească doar lățimea, astfel de la 20 la lățimea minus 40, 357 00:20:58,465 --> 00:21:02,392 2 ori marja de cealaltă parte. 358 00:21:02,392 --> 00:21:05,350 Și acest lucru face mult mai mult sens pentru cineva care ar putea sa te uiti la codul. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Interesant, scalele primi foarte, foarte sofisticat de asemenea. 361 00:21:11,850 --> 00:21:13,350 Ei fac o mulțime de lucruri interesante. 362 00:21:13,350 --> 00:21:17,620 Deci, scale nu au neapărat să funcționeze doar cu numere. 363 00:21:17,620 --> 00:21:18,955 Să facem o scară de culori. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Deci, gama noastră ar putea be-- Domeniul nostru este de 1 până la 200. 366 00:21:26,120 --> 00:21:28,220 Asta e lucrul de intrare. 367 00:21:28,220 --> 00:21:33,793 Dar s-ar putea dori să harta de la verde la roșu, de exemplu. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 Și acum, dacă am trece 1, vom obține verde. 370 00:21:42,910 --> 00:21:45,110 Dacă da 200, vom primi roșu. 371 00:21:45,110 --> 00:21:49,480 Și dacă am trece ceva în între, se va fi ceva mix de faptul că, 372 00:21:49,480 --> 00:21:52,520 undeva pe gradientul între verde și roșu. 373 00:21:52,520 --> 00:21:55,210 >> Și în loc de a avea acest tip de logică greoaie 374 00:21:55,210 --> 00:21:58,550 avem aici cu condiționată chiar acolo, 375 00:21:58,550 --> 00:22:03,250 am putea avea un something-- scară liniară între cele. 376 00:22:03,250 --> 00:22:07,100 Deci, vom folosi scara ne-am a creat, pe care am numit culoare. 377 00:22:07,100 --> 00:22:09,060 Și am da d, care este elementul noastra de date. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 Și acolo mergem. 380 00:22:15,060 --> 00:22:18,070 Avem o gama de culori. 381 00:22:18,070 --> 00:22:18,940 >> Deci, aceasta este de cartografiere. 382 00:22:18,940 --> 00:22:20,960 Deci, extrema stângă este complet verde. 383 00:22:20,960 --> 00:22:22,560 Extrema dreaptă este complet roșu. 384 00:22:22,560 --> 00:22:24,828 Și totul în între este o funcție a d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Avem un interesant vizualizari aici. 387 00:22:35,160 --> 00:22:36,952 Dar datele noastre a fost un fel de plictisitor. 388 00:22:36,952 --> 00:22:39,410 Să vedem ce am putea face dacă am avut mai multe date interesante. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Actul IV, cu de lucru Data-- primul lucru 391 00:22:50,500 --> 00:22:53,560 vom dori să facem pentru a face nostru vizualizare mai interesant 392 00:22:53,560 --> 00:22:56,140 este de a muta datele în altă parte. 393 00:22:56,140 --> 00:22:58,310 Este foarte greoaie de a avea datele de greu codificate aici. 394 00:22:58,310 --> 00:23:01,220 Și, în general, vom fi cere altcineva pentru datele. 395 00:23:01,220 --> 00:23:05,400 Vom poate cere guvernului, Census Bureau, care e datele dvs. 396 00:23:05,400 --> 00:23:10,170 și apoi complot care sau cere o entitate terță parte pentru anumite date 397 00:23:10,170 --> 00:23:13,330 și apoi construirea unui vizualizare pe asta. 398 00:23:13,330 --> 00:23:17,170 >> Deci, primul lucru vrem să facem este muta că în altă parte. 399 00:23:17,170 --> 00:23:24,130 Așa că am de gând să creeze un fișier numit aici data.json. 400 00:23:24,130 --> 00:23:25,600 JSON este formatul de date. 401 00:23:25,600 --> 00:23:29,210 Nu trebuie să știe prea multe despre asta. 402 00:23:29,210 --> 00:23:33,210 Și vom copia puține date avem acolo, 403 00:23:33,210 --> 00:23:40,330 lipiți-l acolo textual, du-te înapoi la codul nostru vizualizare 404 00:23:40,330 --> 00:23:45,362 aici, și de a folosi această funcție aici. 405 00:23:45,362 --> 00:23:46,820 Nu trebuie să cunoască detaliile. 406 00:23:46,820 --> 00:23:49,800 Dar ce va face este, se va găsi acel fișier, 407 00:23:49,800 --> 00:23:51,780 aduce o, și a reveni la noi. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Deci, ce face acest lucru este, merge și obține fișierul data.json. 410 00:24:15,220 --> 00:24:18,570 Și apoi tot codul care este indentate inside-- în esență, 411 00:24:18,570 --> 00:24:21,800 tot codul avem there-- va rula numai atunci când vom obține datele înapoi. 412 00:24:21,800 --> 00:24:25,760 Și apoi o să executați cod cu datele pe care le avem. 413 00:24:25,760 --> 00:24:28,870 Grozav, avem o vizualizare care interoghează 414 00:24:28,870 --> 00:24:31,390 pentru un cod undeva altceva, care este de obicei 415 00:24:31,390 --> 00:24:36,110 în cazul în care se întreabă unele date de la în altă parte, care este de obicei 416 00:24:36,110 --> 00:24:38,656 cum funcționează vizualizări. 417 00:24:38,656 --> 00:24:41,400 >> Dar vreau să mă întorc la datele. 418 00:24:41,400 --> 00:24:48,030 Deci datele în mod fundamental în D3-- D3 consumă date care este o listă de lucruri. 419 00:24:48,030 --> 00:24:53,000 D3 se așteaptă ca datele să fie doar o listă de lucruri, o serie de lucruri. 420 00:24:53,000 --> 00:24:58,780 Nu contează ce lucruri respective sunt, atât timp cât este o matrice de ele. 421 00:24:58,780 --> 00:25:02,460 >> Deci, aici, de exemplu, am putea de Desigur au valori în virgulă mobilă. 422 00:25:02,460 --> 00:25:04,830 Am putea avea negative. 423 00:25:04,830 --> 00:25:09,400 D3 nu-i pasă, atâta timp ca este o listă de lucruri. 424 00:25:09,400 --> 00:25:13,270 >> Ca lucrurile interesante noi ar putea avea, am putea, de asemenea, 425 00:25:13,270 --> 00:25:19,410 au o listă de șiruri de genul asta. 426 00:25:19,410 --> 00:25:25,440 Deci, acestea sunt titlurile Crimson Am luat câteva zile în urmă. 427 00:25:25,440 --> 00:25:29,220 Și poate că puteți găsi unele interesante lucruri despre aceste titluri a. 428 00:25:29,220 --> 00:25:30,970 >> Deci, din nou, aceasta este o listă de lucruri. 429 00:25:30,970 --> 00:25:32,360 D3 nu-i pasă. 430 00:25:32,360 --> 00:25:35,572 Acestea se întâmplă să fie un șir. 431 00:25:35,572 --> 00:25:36,530 Ne-am schimbat datele noastre. 432 00:25:36,530 --> 00:25:38,210 >> Să revenim la vizualizare nostru. 433 00:25:38,210 --> 00:25:42,495 Acum, vizualizare nostru așteaptă de intrare să fie numere. 434 00:25:42,495 --> 00:25:44,370 Deci, vom avea pentru a face câteva modificări. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Deci, de exemplu, în primul rând, poate dorim a pune aceste cercuri de-a lungul 437 00:25:52,180 --> 00:25:56,870 de lungimea titlu, Numărul de caractere în titlu. 438 00:25:56,870 --> 00:26:03,600 >> Deci, ce vom face este-- de fiecare dată nostru Funcția se numește cu un șir de caractere, 439 00:26:03,600 --> 00:26:09,095 vom găsi că este de lungime și apoi trece asta scară. 440 00:26:09,095 --> 00:26:11,550 Culoarea, voi întoarce care a albastru oțel. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 Și acolo mergem. 443 00:26:20,420 --> 00:26:23,190 Avem o vizualizare titluri de Crimson. 444 00:26:23,190 --> 00:26:25,500 >> Scară noastra este un pic off. 445 00:26:25,500 --> 00:26:29,680 Să presupunem că cel mai mult titlu este de 100 de caractere lung, 446 00:26:29,680 --> 00:26:32,244 astfel încât se întind un pic. 447 00:26:32,244 --> 00:26:33,410 Și avem o vizualizare. 448 00:26:33,410 --> 00:26:36,710 Deci, se pare că cele mai multe titluri sunt destul de apropiate, 449 00:26:36,710 --> 00:26:38,750 în ceea ce privește linia caracter. 450 00:26:38,750 --> 00:26:41,200 Dar într-o acolo într-adevăr iese în evidență. 451 00:26:41,200 --> 00:26:46,660 >> Am putea construi o serie de instrumente de a explora că mai. 452 00:26:46,660 --> 00:26:50,710 Dar când am fost de lucru pe acest lucru, am fost curios dacă, în acest set de date, 453 00:26:50,710 --> 00:26:53,880 titrează cu două puncte în ele ar fi mai mare. 454 00:26:53,880 --> 00:26:55,770 Am presupune acestea ar. 455 00:26:55,770 --> 00:26:56,660 >> Așa că hai să aflăm. 456 00:26:56,660 --> 00:27:00,650 Să folosim culoarea canal cum am făcut-o mai înainte, 457 00:27:00,650 --> 00:27:04,540 pentru a codifica unele despre dacă există un colon sau nu. 458 00:27:04,540 --> 00:27:07,220 Deci, vom folosi din nou un condiționată. 459 00:27:07,220 --> 00:27:09,350 Nu trebuie să știi detaliile acest lucru, 460 00:27:09,350 --> 00:27:14,260 dar acest lucru este modul în care verifica o șir pentru un anumit caracter 461 00:27:14,260 --> 00:27:16,355 în JavaScript, din nou, nu este relevant. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Dar dacă nu găsim o colon, vom reveni verde. 464 00:27:23,270 --> 00:27:26,100 Și dacă vom face, vom returna roșu. 465 00:27:26,100 --> 00:27:29,010 Deci, din nou, titrează că au un colon va fi de culoare roșie. 466 00:27:29,010 --> 00:27:34,980 Aceasta este ceea ce acest means-- frumos. 467 00:27:34,980 --> 00:27:38,040 >> Deci, se pare că mea ipoteză este lovit. 468 00:27:38,040 --> 00:27:39,360 Sunt doar două. 469 00:27:39,360 --> 00:27:42,380 Avem doar șase puncte de date și doar doi au avut două puncte. 470 00:27:42,380 --> 00:27:45,510 Dar se pare un pic mai mult pe capătul de jos, de fapt. 471 00:27:45,510 --> 00:27:47,830 Prima pagină cu două puncte par să fie în general mai scurte, 472 00:27:47,830 --> 00:27:52,370 cel puțin în datele noastre la set-- interesant. 473 00:27:52,370 --> 00:27:55,830 >> Să ne întoarcem care a oțel albastru și apoi a se vedea 474 00:27:55,830 --> 00:28:00,601 ceea ce putem face cu mai mai multe date interesante. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Deci, din nou, am menționat că date într-D3 este o listă de lucruri. 477 00:28:09,070 --> 00:28:11,080 Am văzut un număr de mai multe tipuri. 478 00:28:11,080 --> 00:28:12,810 Am văzut siruri de caractere. 479 00:28:12,810 --> 00:28:15,700 Dar lucrurile pot fi, de asemenea, obiecte. 480 00:28:15,700 --> 00:28:20,080 >> Ele pot fi lucruri complicate care includ o mulțime de lucruri. 481 00:28:20,080 --> 00:28:24,510 A spune că mai clar, în cele mai multe cazuri, noi 482 00:28:24,510 --> 00:28:28,384 vrea să construiască fiecare punct de date ca mai complicat decât o valoare. 483 00:28:28,384 --> 00:28:30,175 Dacă ai imagina un bază de date despre studenți, 484 00:28:30,175 --> 00:28:32,470 ar putea fi un elev nume, un ID de student, 485 00:28:32,470 --> 00:28:36,370 și o mulțime de lucruri asociate cu un anumit înregistrare, 486 00:28:36,370 --> 00:28:39,834 nu doar un șir sau un număr. 487 00:28:39,834 --> 00:28:40,750 Deci, să ne uităm la asta. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> Aceasta este una dintre aceste date stabilite. 490 00:28:56,760 --> 00:28:59,090 Acesta este un set de date despre cutremure. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Deci, tot aici, pe lista noastră sau matrice de lucruri conține multe lucruri în sine. 493 00:29:08,430 --> 00:29:11,380 Deci, fiecare punct de date are o mărime și o coordonează. 494 00:29:11,380 --> 00:29:13,425 Și se coordonează conține două lucruri. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Deci, fiecare zi este acum mult mai complicat și mult mai interesant 497 00:29:20,450 --> 00:29:22,700 și conține mult mai informații interesante. 498 00:29:22,700 --> 00:29:26,730 Să vedem am putea construi din asta. 499 00:29:26,730 --> 00:29:36,130 Revenind înapoi aici, din nou, folosind vizualizare nostru cerc histograma 500 00:29:36,130 --> 00:29:42,110 ne-am construit, să vedem dacă putem construi o vizualizare de distribuție mărime 501 00:29:42,110 --> 00:29:43,305 în setul noastra de date. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Deci, aici, e același concept. 504 00:29:48,660 --> 00:29:51,920 Dar acum, d conține mai multe lucruri. 505 00:29:51,920 --> 00:29:54,780 d conține multe elemente de date. 506 00:29:54,780 --> 00:29:57,946 Deci, vom fi d înapoi. 507 00:29:57,946 --> 00:29:59,670 D3 ne dă d. 508 00:29:59,670 --> 00:30:06,080 Și am răspuns prin găsirea amploarea de d și apoi trece la scara care. 509 00:30:06,080 --> 00:30:08,490 >> Și atunci trebuie să se schimbe scară noastră, desigur. 510 00:30:08,490 --> 00:30:12,980 Deci, mărimi, pur și simplu nu merge mult mai mult de 10. 511 00:30:12,980 --> 00:30:15,485 De fapt, niciodată nu a existat un cutremur cu magnitudinea de 10. 512 00:30:15,485 --> 00:30:19,360 Dar asta e un fel de superior noastre scop, spectru nostru superior. 513 00:30:19,360 --> 00:30:20,240 >> Să refresh. 514 00:30:20,240 --> 00:30:22,990 Nisa, avem o vizualizare. 515 00:30:22,990 --> 00:30:25,490 Este interesant de note-- așa există două puncte de date care 516 00:30:25,490 --> 00:30:29,010 sunt aproape exact pe partea de sus a fiecărei parte, în ceea ce privește dimensiunea. 517 00:30:29,010 --> 00:30:31,350 Veti vedea acest lucru prin opacitatea folosim. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Avem date geografice acum. 520 00:30:42,690 --> 00:30:44,710 Avem latitudini și longitudine. 521 00:30:44,710 --> 00:30:47,549 Poate am putea face ceva mult mai interesant cu asta. 522 00:30:47,549 --> 00:30:49,590 Să găsim ceva mai mult mod interesant de a vizualiza 523 00:30:49,590 --> 00:30:53,500 acest lucru mai complicat Date avem acces la. 524 00:30:53,500 --> 00:31:04,950 >> Actul V, Mapping-- fundamental, vrem să astea pe o hartă. 525 00:31:04,950 --> 00:31:07,690 Adică, acest lucru este în cazul în care acest lucru se întâmplă. 526 00:31:07,690 --> 00:31:13,130 Ne dorim pentru a codifica informații despre Poziția acestor lecturi cutremur, 527 00:31:13,130 --> 00:31:16,350 precum și amploarea lor, pentru că avem asta acum. 528 00:31:16,350 --> 00:31:21,310 Noi înțelegem cum de a consuma date mai complicate. 529 00:31:21,310 --> 00:31:26,200 >> Primul lucru pe care vom face este crea o hartă, o harta de fundal. 530 00:31:26,200 --> 00:31:29,360 Am de gând să treacă prin acest lucru foarte repede. 531 00:31:29,360 --> 00:31:30,560 Acest lucru este cod complicat. 532 00:31:30,560 --> 00:31:33,110 Este un alt unul dintre cei rețete tu nu prea 533 00:31:33,110 --> 00:31:35,690 Trebuie să înțelegem pe deplin pentru tine de a utiliza. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Dar acest lucru este cod. 536 00:31:39,740 --> 00:31:43,580 Acest cod de aici creează o hartă. 537 00:31:43,580 --> 00:31:45,730 >> Nu vom merge în detaliu. 538 00:31:45,730 --> 00:31:54,210 Dar superficial, ceea ce face este, se întreabă acest dosar us.json, care 539 00:31:54,210 --> 00:31:57,150 este un fișier de date ca cea pe care am avut-o înainte. 540 00:31:57,150 --> 00:31:59,150 E mult mai complex, desigur. 541 00:31:59,150 --> 00:32:02,920 Dar, în acest caz, totul, fiecare punct de date este acest stat 542 00:32:02,920 --> 00:32:05,420 și are o listă de latitudini și longitudine 543 00:32:05,420 --> 00:32:10,500 care definesc poligonul, această formă, acea stare. 544 00:32:10,500 --> 00:32:13,280 >> Deci, ce va face D3 este similară a ceea ce am făcut înainte. 545 00:32:13,280 --> 00:32:18,140 Se va solicita și lega că la un element. 546 00:32:18,140 --> 00:32:20,890 Și există o funcție care va harta acel element afară, 547 00:32:20,890 --> 00:32:23,410 bazat pe latitudini și longitudine. 548 00:32:23,410 --> 00:32:24,580 Puteți citi mai multe despre aceasta. 549 00:32:24,580 --> 00:32:27,385 Și eu îl recomand. 550 00:32:27,385 --> 00:32:30,090 >> Există link-uri la sfârșitul acestui cod postate. 551 00:32:30,090 --> 00:32:31,570 Și codul este comentat. 552 00:32:31,570 --> 00:32:34,050 În există link-uri pentru mai mult de pe aceasta. 553 00:32:34,050 --> 00:32:36,590 Vă recomand să-l cauți. 554 00:32:36,590 --> 00:32:39,460 Dar ce ne pasă este această funcție proiecție. 555 00:32:39,460 --> 00:32:41,210 Vreau să merg prin asta. 556 00:32:41,210 --> 00:32:43,522 >> Mai întâi de toate, permiteți-mi să arăt voi care, da, avem o hartă. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Hărțile sunt cool. 559 00:32:49,970 --> 00:32:52,330 Deci, să ne uităm la acest funcția de producție. 560 00:32:52,330 --> 00:32:56,481 >> Proiecția este foarte mult ca o scară, cântare din nou. 561 00:32:56,481 --> 00:32:59,210 Deci, ce producția de această funcție proiecție 562 00:32:59,210 --> 00:33:06,610 nu este, am putea să-l dați longitudine și latitudes-- în acest caz, 563 00:33:06,610 --> 00:33:09,590 aceste valori aici sunt lat-lungi ale clădirii 564 00:33:09,590 --> 00:33:13,990 stăm în dreapta now-- de proiecție. 565 00:33:13,990 --> 00:33:20,560 Și proiecție va converti că în x și y valorile pixelilor. 566 00:33:20,560 --> 00:33:23,300 >> Deci, ceea ce face proiecție este foarte similar cu scara noastră. 567 00:33:23,300 --> 00:33:27,270 Durează latitudinile noastre și longitudine că reprezintă un întreg glob 568 00:33:27,270 --> 00:33:31,390 și în scădere și dimensionarea că până la pătrat pe care ne-o dorim, 569 00:33:31,390 --> 00:33:33,510 că l-am dat. 570 00:33:33,510 --> 00:33:35,220 În acest caz, suntem trecerea acestor valori. 571 00:33:35,220 --> 00:33:41,370 Și ne dă, ei bine, asta pe ecran înseamnă 640 pixeli. 572 00:33:41,370 --> 00:33:46,250 Acest ecran întreg este de 700 pixeli larg, astfel încât ne face despre aici, 573 00:33:46,250 --> 00:33:53,310 și 154 de pixeli derulează, pe care i-ar estimare este destul de mult aici. 574 00:33:53,310 --> 00:33:57,250 >> Deci, luând aceste lat-lungi, care reprezintă ceva pe întregul glob 575 00:33:57,250 --> 00:34:02,850 și squishing și se deplasează în jurul valorii de care a ne x și y valorile pixelilor da, 576 00:34:02,850 --> 00:34:05,450 acesta este primul lucru care-i făcut în acest cod de cartografiere. 577 00:34:05,450 --> 00:34:07,920 Și apoi restul Codul consumă datele 578 00:34:07,920 --> 00:34:14,310 și apoi harti aceste lat-lungi într-o formă ceva pe ecran. 579 00:34:14,310 --> 00:34:18,380 >> Dar vom folosi această proiecție funcții, pentru că se pare că 580 00:34:18,380 --> 00:34:20,270 Avem lat-Longs lungi, de asemenea. 581 00:34:20,270 --> 00:34:24,509 Privind înapoi la datele noastre, ne-am latitudini și coordonatele longitudinale 582 00:34:24,509 --> 00:34:25,425 pentru fiecare observație. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Deci să folosească proiecție. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Deci, uita la expunerea noastră, ne-o dorim exposition-- nostru 587 00:34:37,639 --> 00:34:39,590 avem o latitudine și longitudine un. 588 00:34:39,590 --> 00:34:40,770 Dar vrem valorile pixelilor. 589 00:34:40,770 --> 00:34:43,510 Și se pare că, avem exact ceea ce doresti cu proiecție. 590 00:34:43,510 --> 00:34:46,239 Foarte mult ca am fost folosind scala din dreapta aici, 591 00:34:46,239 --> 00:34:52,075 ne acum de gând să utilizeze proiecție și trece-l coordonează. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Deci, primul lucru suntem doing-- așa suntem 594 00:34:56,949 --> 00:35:01,520 obtinerea d, care este un individ date element al unui cutremur individ 595 00:35:01,520 --> 00:35:02,370 lectură. 596 00:35:02,370 --> 00:35:04,640 Primul lucru pe care îl facem este să coordonatele. 597 00:35:04,640 --> 00:35:06,150 Bine, avem coordonatele. 598 00:35:06,150 --> 00:35:09,160 >> Al doilea lucru pe care îl facem este transmite că pe proiecție. 599 00:35:09,160 --> 00:35:13,440 Proiectie convertește aceste coordonate în valorile pixelilor, x și y. 600 00:35:13,440 --> 00:35:16,680 Și apoi ultimul lucru de care avem vrei sa faci este doar obține x, 601 00:35:16,680 --> 00:35:19,342 care acest caz este prima. 602 00:35:19,342 --> 00:35:22,050 Este prima din cele două lucruri care sunt returnate de proiecție. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Vom face același lucru pentru y. 605 00:35:29,630 --> 00:35:34,960 Dar, în loc, vom returna al doilea element, y. 606 00:35:34,960 --> 00:35:35,980 Gata pentru a reîmprospăta obține. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, caracter suplimentar here-- frumos, ne-am 609 00:35:46,450 --> 00:35:51,730 un document condus de date care este ascunde acest fișier JSON de obiecte, 610 00:35:51,730 --> 00:35:57,560 face o hartă, și schimbarea atribuie în raport cu datele 611 00:35:57,560 --> 00:35:59,600 să-l proiecteze pe o hartă. 612 00:35:59,600 --> 00:36:00,840 Acest lucru este foarte interesant. 613 00:36:00,840 --> 00:36:03,770 Acest lucru este rece. 614 00:36:03,770 --> 00:36:05,640 >> Să-l ia la un alt nivel. 615 00:36:05,640 --> 00:36:08,795 Adică, avem două bucăți de Informații cu fiecare punct de date. 616 00:36:08,795 --> 00:36:10,000 Adică, trei. 617 00:36:10,000 --> 00:36:12,540 Avem coordonatele, care este un x și y. 618 00:36:12,540 --> 00:36:15,700 Și avem amploarea. 619 00:36:15,700 --> 00:36:17,420 >> Avem nevoie pentru a codifica magnitudinea cumva. 620 00:36:17,420 --> 00:36:18,920 Avem o mulțime de canale. 621 00:36:18,920 --> 00:36:20,370 Putem folosi culoare. 622 00:36:20,370 --> 00:36:21,890 Putem folosi rază. 623 00:36:21,890 --> 00:36:23,040 Am putea folosi opacitate. 624 00:36:23,040 --> 00:36:25,540 Am putea folosi multe lucruri în cod. 625 00:36:25,540 --> 00:36:29,180 Oricare dintre aceste atribute și multe mai mult că nu sunt enumerate aici, 626 00:36:29,180 --> 00:36:33,065 pentru că sunt opționale, am putea utilizați pentru a codifica aceste date, accident vascular cerebral 627 00:36:33,065 --> 00:36:35,670 și toate aceste lucruri le-am menționat. 628 00:36:35,670 --> 00:36:36,690 >> Să facem rază. 629 00:36:36,690 --> 00:36:38,830 Cred că raza este cel mai intuitiv. 630 00:36:38,830 --> 00:36:46,210 Deci, din nou, vom înlocui așa de greu codificate- 40 și să facă unele calcule. 631 00:36:46,210 --> 00:36:48,810 Vom folosi din nou scara noastră favorită. 632 00:36:48,810 --> 00:36:50,290 Și am trecut d. 633 00:36:50,290 --> 00:36:55,850 Dar nu d pentru că vrem amploarea de d. d este doar punctul de date. 634 00:36:55,850 --> 00:36:57,430 Vom trece magnitudinea la scară. 635 00:36:57,430 --> 00:36:58,470 >> Să încercăm din nou. 636 00:36:58,470 --> 00:37:00,230 Ooh, aceasta nu funcționează. 637 00:37:00,230 --> 00:37:02,940 De ce nu-l nu funcționează? 638 00:37:02,940 --> 00:37:04,387 >> Deci, amintiți-vă ce face scară. 639 00:37:04,387 --> 00:37:05,470 Să ne uităm la scară din nou. 640 00:37:05,470 --> 00:37:10,800 Scala hărți la 1 la 10 pe to la 22 to 600, mai mult sau mai puțin. 641 00:37:10,800 --> 00:37:12,030 600 este imens. 642 00:37:12,030 --> 00:37:14,730 Acesta este motivul pentru care vei primi asta. 643 00:37:14,730 --> 00:37:18,420 >> Așa că vrem să se schimbe scara noastră pentru ceva mai rezonabil. 644 00:37:18,420 --> 00:37:22,610 Să spunem, vrem 0-60. 645 00:37:22,610 --> 00:37:25,340 60 este mare, dar 10 cutremure sunt incredibil de rare. 646 00:37:25,340 --> 00:37:27,880 De fapt, ei nu fi întâmplat. 647 00:37:27,880 --> 00:37:31,830 >> Deci, ce va face este, ea va lua magnitudine nostru care merge la 1 la 10 648 00:37:31,830 --> 00:37:34,490 și o hartă pe pentru ao extinde afară. 649 00:37:34,490 --> 00:37:37,370 Și mapa la 0 pentru a 60 de ani. 650 00:37:37,370 --> 00:37:38,840 Să refresh. 651 00:37:38,840 --> 00:37:41,850 >> Nisa, avem o vizualizare. 652 00:37:41,850 --> 00:37:42,500 Este un lucru extraordinar. 653 00:37:42,500 --> 00:37:43,736 Acest lucru este date reale. 654 00:37:43,736 --> 00:37:46,360 Veți observa, în mica mea jucărie exemplu, cel mai mare cutremur 655 00:37:46,360 --> 00:37:49,417 este chiar deasupra noastră. 656 00:37:49,417 --> 00:37:50,000 Dar asta e. 657 00:37:50,000 --> 00:37:54,422 Avem o dată condus vizualizare care consumă datele 658 00:37:54,422 --> 00:37:56,255 și ne dă într-adevăr informații interesante. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Da, hai adăuga unele interactivitate la ea. 661 00:38:06,420 --> 00:38:08,675 Am menționat că a fost forța tare de D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Deci, aici, pentru fiecare element, suntem descrie o grămadă de atribute. 664 00:38:15,060 --> 00:38:20,230 Dar putem descrie, de asemenea, ceea ce ne dorim să se întâmple cu elemente de interactivitate. 665 00:38:20,230 --> 00:38:26,190 De exemplu, am putea descrie ce se întâmplă atunci când mouse-ul peste. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 Și foarte similar care, că va lua o funcție, 668 00:38:33,640 --> 00:38:36,700 foarte asemanatoare cu atributele am avut înainte, 669 00:38:36,700 --> 00:38:44,650 unde facem ceva pentru a Element când am hover peste el. 670 00:38:44,650 --> 00:38:47,100 >> Deci, primul lucru pe care trebuie să că este o acel element, 671 00:38:47,100 --> 00:38:49,435 să-l găsiți, practic, în browser. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 și apoi ne-am putea stabili un atribut să-l. 674 00:39:00,920 --> 00:39:06,870 Deci, ceea ce fac aici este, atunci când am hover peste ceva, vom primi acest element 675 00:39:06,870 --> 00:39:11,197 și apoi setați opacitatea înapoi la 1, la complet opacă. 676 00:39:11,197 --> 00:39:12,488 Să vedem cum arată. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Se pare că avem o punct și virgulă în plus aici. 679 00:39:39,080 --> 00:39:42,420 Deci, dacă noi hover peste aici, devine plin. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Dar acum, desigur, ea rămâne complet, pentru că noi 682 00:39:48,960 --> 00:39:53,240 Trebuie să descrie ceea ce se întâmplă când scoateți cursorul noastră. 683 00:39:53,240 --> 00:39:59,990 Deci, haideți să facem exact asta pe mouseout, spre deosebire de mouseover. 684 00:39:59,990 --> 00:40:06,399 >> Și vom resetat la ceea ce am avut before-- 0,5. 685 00:40:06,399 --> 00:40:10,260 Și acum, de fiecare dată când hover, avem un cerc complet. 686 00:40:10,260 --> 00:40:13,468 Ea ne ajută să vedem ce suntem selectarea esență. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> Și acum să facem acest grozav. 689 00:40:22,860 --> 00:40:26,210 Să conectați acest la date reale. 690 00:40:26,210 --> 00:40:30,890 Așa că haideți să cerem ar putea USGS despre datele lor. 691 00:40:30,890 --> 00:40:35,630 Deci, US Geological Survey are date despre cutremure. 692 00:40:35,630 --> 00:40:41,460 Ei au un API public care este capabil a fi consumate în format JSON. 693 00:40:41,460 --> 00:40:42,548 Așa că hai să facem asta. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Deci, aceasta este un pic de cod care se conectează la API USGS. 696 00:40:55,900 --> 00:40:57,990 Și există un pic de prelucrare pe ea. 697 00:40:57,990 --> 00:41:02,200 Acest lucru nu este relevant, dar simplifică aceasta la un format de date simplu ca cel 698 00:41:02,200 --> 00:41:03,800 am avut înainte. 699 00:41:03,800 --> 00:41:08,140 Așa că am scăpa de apelul nostru de a data.json nostru fals la dosar. 700 00:41:08,140 --> 00:41:13,110 Și în loc, sun USGS, în esență,. 701 00:41:13,110 --> 00:41:16,700 >> Să refresh, frumos. 702 00:41:16,700 --> 00:41:21,260 Acest lucru este, date reale din viața reală din această săptămână pentru cutremure. 703 00:41:21,260 --> 00:41:23,217 Acest lucru este foarte interesant. 704 00:41:23,217 --> 00:41:25,050 Acest lucru nu este surprinzător pentru noi, dar există 705 00:41:25,050 --> 00:41:27,909 o mulțime de cutremure pe West Coast din California. 706 00:41:27,909 --> 00:41:30,950 Dar am crezut că a fost foarte interesant că au existat atât de multe cutremure 707 00:41:30,950 --> 00:41:34,350 în Alaska, și aparent, aici, în Midwest. 708 00:41:34,350 --> 00:41:37,630 Adică, interesant, și suntem bine. 709 00:41:37,630 --> 00:41:40,410 Asta e concluzia. 710 00:41:40,410 --> 00:41:43,760 >> Dar fundamental, această este ceea ce ajută D3 ne facem. 711 00:41:43,760 --> 00:41:48,030 Ea ne ajută să ne ia de date, bind l la elemente DOM, 712 00:41:48,030 --> 00:41:51,620 și au aceste elemente se schimbe în funcție de date, 713 00:41:51,620 --> 00:41:54,780 au aceste atribute, toate multe atribute ale elementelor, 714 00:41:54,780 --> 00:41:57,393 fi util pentru toate canalele pentru a transmite informații. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 este un incredibil de puternic bibliotecă și uimitor de bine gestionată. 717 00:42:09,290 --> 00:42:12,260 Acest lucru este unele chestii puternic. 718 00:42:12,260 --> 00:42:15,960 Vizualizare a datelor este o instrument incredibil de puternic 719 00:42:15,960 --> 00:42:21,530 pentru transportul de persoane profunde perspective care ajunge la miezul lor 720 00:42:21,530 --> 00:42:25,430 și îi ajută să înțeleagă, în acest mod profund și intuitiv, 721 00:42:25,430 --> 00:42:29,760 modul în care datele de lucrări și modul în care Date schimbă viața noastră. 722 00:42:29,760 --> 00:42:31,019