1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [Hudba hrať] 3 00:00:11,880 --> 00:00:16,480 >> DAVID Chouinard: Som David Chouinard, a to je D3. 4 00:00:16,480 --> 00:00:17,700 Vitajte u nás. 5 00:00:17,700 --> 00:00:21,270 Budeme sa učiť o D3 dnes. 6 00:00:21,270 --> 00:00:25,020 D3 je rámec JavaScript pre stavbu vysokú kvalitu 7 00:00:25,020 --> 00:00:28,110 interaktívne vizualizácie pre web. 8 00:00:28,110 --> 00:00:30,870 Veci ako to, čo sme vidieť za mnou, 9 00:00:30,870 --> 00:00:34,230 budeme sa učiť, aby sa tým veci, druh základy toho. 10 00:00:34,230 --> 00:00:36,452 Ale to bude v pohode. 11 00:00:36,452 --> 00:00:38,160 Začnime robiť pekné obrázky. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Máme viac dema vyhliadky k dispozícii. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Poďme na to. 16 00:00:50,760 --> 00:00:58,700 >> Act I, DOM manipulation-- ideme začať hneď robiť skvelé veci. 17 00:00:58,700 --> 00:01:01,240 Po prvé, na ľavej strane, máme kód. 18 00:01:01,240 --> 00:01:03,470 Na pravej strane, máme Výsledkom nášho kódu. 19 00:01:03,470 --> 00:01:04,900 Poďme prejsť. 20 00:01:04,900 --> 00:01:05,780 >> Poďme urobiť kruh. 21 00:01:05,780 --> 00:01:08,570 Ako to znie? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- sme proste urobili kruh. 23 00:01:14,934 --> 00:01:16,100 Ty mi veriť, že jo? 24 00:01:16,100 --> 00:01:18,190 Nie je to tam. 25 00:01:18,190 --> 00:01:21,830 >> Takže to, čo sme robili tu je, SVG je Scalable Vector Graphics. 26 00:01:21,830 --> 00:01:27,530 To je spôsob, ako povedať, že prehliadač ako vektorovej grafiky v prehliadači. 27 00:01:27,530 --> 00:01:30,740 To, čo sme práve urobil hneď teraz sa pridá kruh prechádzať. 28 00:01:30,740 --> 00:01:34,790 >> Sľub, že kružnica vyžaduje trochu základných atribútov 29 00:01:34,790 --> 00:01:36,850 predtým, než môžeme skutočne vidieť. 30 00:01:36,850 --> 00:01:40,045 Musíme povedať, že svoju polohu x, jej y postavenie, jej polomer. 31 00:01:40,045 --> 00:01:43,310 Nechceli sme to nič z toho povedať, takže nie sme to vidieť hneď teraz. 32 00:01:43,310 --> 00:01:46,210 Ale poďme povedať, že veci. 33 00:01:46,210 --> 00:01:49,510 >> Takže v prvom rade, máte dať našej kruhu meno. 34 00:01:49,510 --> 00:01:53,070 Tak hovorme tomu kruh. 35 00:01:53,070 --> 00:01:54,406 Náš kruh má meno teraz. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 A dajme tomu niekoľko atribútov. 38 00:01:59,490 --> 00:02:03,690 Ako sa o cx sa sústredí x, tak stred x pozície. 39 00:02:03,690 --> 00:02:06,730 Povedzme, 200 na 200 pixelov. 40 00:02:06,730 --> 00:02:10,220 >> Poďme dať mu y 200 pixelov rovnako. 41 00:02:10,220 --> 00:02:16,032 A R, polomer, asi 40 pixelov. 42 00:02:16,032 --> 00:02:16,950 Teraz sa pozrime. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Nemôžem kúzlo. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Tu to je. 47 00:02:31,520 --> 00:02:37,330 Máme kruh v polohe 200 pixelov, 200 pixelov, polomer 40 pixelov. 48 00:02:37,330 --> 00:02:38,280 Celkom fajn, nie? 49 00:02:38,280 --> 00:02:38,988 Máme kruh. 50 00:02:38,988 --> 00:02:40,880 Jo. 51 00:02:40,880 --> 00:02:42,670 >> Takže nie je potrebné nasledovať. 52 00:02:42,670 --> 00:02:45,790 Všetky tieto príklady, všetky z kód robím dnes 53 00:02:45,790 --> 00:02:51,300 budú poskytované on-line na konci vo forme interaktívnych príkladov 54 00:02:51,300 --> 00:02:54,010 s kontrolnými bodmi na Každý čin, a tak ďalej. 55 00:02:54,010 --> 00:02:55,160 >> Poďme robiť viac vecí. 56 00:02:55,160 --> 00:02:58,901 Tento čierny kruh je naozaj škaredý. 57 00:02:58,901 --> 00:03:01,541 Ospravedlňujem sa za túto chybu Správy tu. 58 00:03:01,541 --> 00:03:05,340 Tam sme ísť. 59 00:03:05,340 --> 00:03:06,350 >> Poďme dať farbu. 60 00:03:06,350 --> 00:03:07,170 Ako to? 61 00:03:07,170 --> 00:03:08,340 Rád oceľovo modrá. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 No, náš kruh zmenil farbu. 64 00:03:16,030 --> 00:03:17,320 To je skvelé. 65 00:03:17,320 --> 00:03:31,330 Urobme to semi-transparentné too-- semi-transparentné. 66 00:03:31,330 --> 00:03:33,670 >> Tak to sú atribúty sme definovať na kruhu. 67 00:03:33,670 --> 00:03:36,774 Prvá vec, ktorú sme urobili, je dáme kruh na stránke. 68 00:03:36,774 --> 00:03:38,690 A potom sme definovanie banda atribútov. 69 00:03:38,690 --> 00:03:41,610 Niektoré z nich sú potrebné, ako CX, CY, a Radius. 70 00:03:41,610 --> 00:03:42,680 A ostatné sú voliteľné. 71 00:03:42,680 --> 00:03:44,730 >> Existuje oveľa viac atribútov. 72 00:03:44,730 --> 00:03:46,760 Je tu veľa z nich. 73 00:03:46,760 --> 00:03:53,070 Napríklad by sme mohli mať mŕtvica rovnako, zdvih červené. 74 00:03:53,070 --> 00:03:55,630 Ale poďme odstrániť to. 75 00:03:55,630 --> 00:04:00,450 Sme späť do kruhu, modrým kruhom. 76 00:04:00,450 --> 00:04:01,600 >> Takže poďme urobiť viac kruhov. 77 00:04:01,600 --> 00:04:02,810 Ako to? 78 00:04:02,810 --> 00:04:04,665 Poďme urobiť ďalšie kruh. 79 00:04:04,665 --> 00:04:05,985 Je to vzrušujúce, že jo? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Tak, že som len Copy-vloženého to, čo sme mali už. 82 00:04:12,300 --> 00:04:13,570 Hovorme tomu circle2. 83 00:04:13,570 --> 00:04:15,840 A poďme urobiť presný to isté a dať to 84 00:04:15,840 --> 00:04:20,450 atribúty, vzhľadom k x pozícia 300. 85 00:04:20,450 --> 00:04:24,140 Hurá, máme dva kruhy teraz. 86 00:04:24,140 --> 00:04:27,240 >> A samozrejme, mohli by sme aktualizáciu týchto hodnôt. 87 00:04:27,240 --> 00:04:31,640 Som to mohol dať na 400, a teraz sa pohybuje. 88 00:04:31,640 --> 00:04:35,470 A pretože je to nepríjemné, poďme odstrániť, takže circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 Je to preč. 91 00:04:40,730 --> 00:04:43,170 >> Takže to, čo robíme, a je len veľmi, very-- to 92 00:04:43,170 --> 00:04:46,030 je veľmi podobný tomu, čo môže robiť v jQuery, napríklad. 93 00:04:46,030 --> 00:04:48,240 Sme len manipulácia DOM, je to tzv. 94 00:04:48,240 --> 00:04:50,040 Možno ste počul to slovo. 95 00:04:50,040 --> 00:04:53,255 My vytvárame veci, nastavenie atribúty na veci, odstránenie veci. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> A teraz, tu je miesto, kde to začína byť zaujímavé. 98 00:05:02,360 --> 00:05:07,250 Takže neskôr v kóde, mohli by sme ešte odkazujú na pôvodnú kruhu tu. 99 00:05:07,250 --> 00:05:14,100 Takže poďme obnoviť svoj atribút CX. 100 00:05:14,100 --> 00:05:18,260 Povedzme, že jeho poloha x 400. 101 00:05:18,260 --> 00:05:22,406 A ja idem k prechodu že, takže je to jasné. 102 00:05:22,406 --> 00:05:23,360 Tam sme ísť. 103 00:05:23,360 --> 00:05:24,780 >> Tak sme pridali kruh. 104 00:05:24,780 --> 00:05:26,440 Nastavili sme niektoré atribúty. 105 00:05:26,440 --> 00:05:28,210 Pridali sme ďalšie kruh, odstránili. 106 00:05:28,210 --> 00:05:31,650 A potom sme sa mení pôvodnej kruh. 107 00:05:31,650 --> 00:05:35,400 >> Ale tu je miesto, kde sa dostane oveľa zaujímavejšie. 108 00:05:35,400 --> 00:05:39,070 Nielen, že môžeme nastaviť atribúty ako len hodnoty, môžeme povedať, 109 00:05:39,070 --> 00:05:41,610 hej, kruh, choďte na pozícii 200. 110 00:05:41,610 --> 00:05:44,540 Môžeme tiež nastaviť ako funkcia. 111 00:05:44,540 --> 00:05:48,850 >> Takže namiesto toho, aby 400 tu, môžeme urobiť nejaký výpočet 112 00:05:48,850 --> 00:05:53,950 za behu, čo sme chcete, aby atribút byť. 113 00:05:53,950 --> 00:05:56,580 Tak to je to, ako by ste vyjadriť to. 114 00:05:56,580 --> 00:06:00,660 My hovoríme, miesto 400, dovoľte mi, aby som vám funkcie miesto. 115 00:06:00,660 --> 00:06:04,180 A tu, v tejto funkcii, môžeme žiadny šialený výpočet. 116 00:06:04,180 --> 00:06:06,820 >> Mohli by sme mať čas a pozrite sa na nejaké iné veci 117 00:06:06,820 --> 00:06:11,230 a dynamicky sa rozhodnete pre kruh, akú hodnotu chceme. 118 00:06:11,230 --> 00:06:15,266 Čo my len tak to náhodný x pozície? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Tak to je to. 121 00:06:21,120 --> 00:06:25,490 >> Takže to, čo hovorí, že je pre každé x, spustite túto funkciu. 122 00:06:25,490 --> 00:06:29,340 A to, čo robíme, je výpočet niektoré veci, náhodnom krát šírka 123 00:06:29,340 --> 00:06:30,410 a vracať to. 124 00:06:30,410 --> 00:06:34,765 Takže zakaždým, keď sme sa spustiť, že dostaneme kruh, ktorý ide do ľubovoľného miesta. 125 00:06:34,765 --> 00:06:36,394 Je to celkom fajn. 126 00:06:36,394 --> 00:06:38,310 Mám pocit, že by som mohol vyzerať na tohle málo. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Začíname sa dostať do niečo tu zaujímavé. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Urobme tento údaj riadený teraz. 131 00:06:51,390 --> 00:06:53,420 Neexistuje žiadne dáta tu. 132 00:06:53,420 --> 00:06:54,482 Poďme to zmeniť. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Act II, dáta Poháňaná Documents-- Takže poďme sa vrátiť sem. 135 00:07:12,140 --> 00:07:15,340 A nech to len zbaviť circle2, preto, že sme práve pridávanie a odoberanie 136 00:07:15,340 --> 00:07:15,840 za to. 137 00:07:15,840 --> 00:07:17,382 Tak sme to naozaj potrebujú. 138 00:07:17,382 --> 00:07:21,421 Musíme byť oveľa múdrejší tu. 139 00:07:21,421 --> 00:07:23,170 Povedzme, že máme Niektoré údaje o nejakého druhu. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Jeden moment-- povedzme, sme mali dáta tohto formulára. 142 00:07:40,020 --> 00:07:41,800 Mali sme poľa, len banda čísel. 143 00:07:41,800 --> 00:07:45,750 Máme sedem čísel tu, bez ohľadu na to represent-- suma 144 00:07:45,750 --> 00:07:48,810 na bankovom účte ľudí, ako moc váži, boh vie čo. 145 00:07:48,810 --> 00:07:51,310 >> To sú čísla, a my Chcete používať naše kruhy 146 00:07:51,310 --> 00:07:53,240 predstavovať tieto čísla nejako. 147 00:07:53,240 --> 00:07:55,515 Chceme rozhodujuca otázky kruhy týchto čísel. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Takže to, čo robíme. 150 00:07:59,626 --> 00:08:01,500 Povedzme, že chceme kruh pre každé číslo. 151 00:08:01,500 --> 00:08:03,590 Mohli by sme urobiť starý vec, ktorú sme boli doing-- 152 00:08:03,590 --> 00:08:06,020 kruh Pripojiť a circle2 a circle3. 153 00:08:06,020 --> 00:08:10,020 Ale to vymkne z ruky, a je tu veľa opakovanie logiku. 154 00:08:10,020 --> 00:08:12,760 >> Tak poďme múdrejší s tým. 155 00:08:12,760 --> 00:08:17,810 Namiesto použitia var kruh svg.append, že sme boli len pomocou, 156 00:08:17,810 --> 00:08:21,580 budeme používať tento malý blok tu. 157 00:08:21,580 --> 00:08:24,510 Nechcem ísť do hloubky- do toho, čo všetky tieto časti robiť. 158 00:08:24,510 --> 00:08:26,020 A je to celkom pokročilé téme. 159 00:08:26,020 --> 00:08:27,830 A ja si prial, aby som mohol. 160 00:08:27,830 --> 00:08:31,370 >> Ale kľúč vec recognize-- a uvidíte, je veľmi často v D3 kóde. 161 00:08:31,370 --> 00:08:36,840 Tento blok textu basic vytvára toľko kruhov 162 00:08:36,840 --> 00:08:41,360 ako sú dátové prvky V tomto poli priamo tu. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Takže to vytvára toľko kruhy ako tam sú prvky. 165 00:08:55,780 --> 00:08:58,520 Bude to nám vytvoriť sedem kruhy. 166 00:08:58,520 --> 00:09:01,710 A to robí naozaj, ale naozaj kľúčovú vec. 167 00:09:01,710 --> 00:09:02,460 Takže poďme bežať to. 168 00:09:02,460 --> 00:09:05,460 Poďme odstrániť naše ďalšie kruh. 169 00:09:05,460 --> 00:09:09,565 Povedzme, komentovať to rozlúčiť sa a spustiť znova. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Tam sme ísť. 172 00:09:15,260 --> 00:09:18,030 Takže tu náš kruh je veľa tmavšie, pretože my 173 00:09:18,030 --> 00:09:20,720 majú sedem kruhy, jeden na hornej strane druhej. 174 00:09:20,720 --> 00:09:25,425 Práve sme vytvorili sedem kruhov, jeden každý pre každý z týchto dátových prvkov. 175 00:09:25,425 --> 00:09:28,860 Ale je tu kľúčovou vec, ktorá sa stala s týmto úryvku priamo tu. 176 00:09:28,860 --> 00:09:31,030 >> Je to, že dáta bola viazaná. 177 00:09:31,030 --> 00:09:33,440 Takže každý z tieto dátové prvky, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, bol viazaný na konkrétny kruhu. 179 00:09:38,830 --> 00:09:40,960 Tak to nie len vytvoril banda kruhov 180 00:09:40,960 --> 00:09:43,420 ale spája tieto dve veci dohromady. 181 00:09:43,420 --> 00:09:48,740 >> A v budúcnosti, pretože sme vytvorili tie kruhy s touto funkciou D3, 182 00:09:48,740 --> 00:09:52,430 Keď ti dám kruh, môžete daj mi dáta s ním spojené. 183 00:09:52,430 --> 00:09:53,280 Takže sa môžeme pýtať D3. 184 00:09:53,280 --> 00:09:54,840 Hej, D3, mám tento kruh. 185 00:09:54,840 --> 00:09:57,350 Čo je to dáta, ktoré kruh má? 186 00:09:57,350 --> 00:10:01,290 A D3 by nám povedať 10 alebo 45 alebo 105. 187 00:10:01,290 --> 00:10:02,380 >> Tieto veci sú viazané. 188 00:10:02,380 --> 00:10:04,490 Je to veľmi, veľmi zásadný koncept. 189 00:10:04,490 --> 00:10:06,070 Pozrime sa na to. 190 00:10:06,070 --> 00:10:12,210 >> Spôsob, akým by sme sa pýtať D3-- tak To je relevantné pre to, 191 00:10:12,210 --> 00:10:16,620 ale len ver mi na to. 192 00:10:16,620 --> 00:10:17,620 To je, ako sme sa pýtať D3. 193 00:10:17,620 --> 00:10:21,312 Hej, D3, daj mi prvý kruh, ktoré môžete nájsť. 194 00:10:21,312 --> 00:10:23,580 Daj mi na prvý kruh môžete nájsť. 195 00:10:23,580 --> 00:10:29,660 A potom by sme mohli pýtať D3, čo je údaje o tom, ako je toto, 10. 196 00:10:29,660 --> 00:10:33,380 >> Tak sme sa len opýtať D3, si ma Prvý kruh môžete nájsť. 197 00:10:33,380 --> 00:10:34,400 Čo je jeho údaje? 198 00:10:34,400 --> 00:10:36,650 10, ktorý je skutočne otázky Prvý dátový prvok. 199 00:10:36,650 --> 00:10:42,150 Mohli by sme to pýtať, hej, D3, Nájdite nás už tretí kruh. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Prečo je to naozaj dôležité? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Tak tu, som sa už zmienil že by sme mohli použiť funkcie. 204 00:10:52,250 --> 00:10:54,910 A spomenul som sa, že to veľmi mocná vec. 205 00:10:54,910 --> 00:11:03,070 Takže nielen našu funkcie robiť veci ako robiť nejaké výpočty, napríklad, 206 00:11:03,070 --> 00:11:09,170 vráti náhodné číslo, môže tiež robiť veci, na základe údajov. 207 00:11:09,170 --> 00:11:11,550 To je to, čo údaje riadené dokumenty znamenajú. 208 00:11:11,550 --> 00:11:13,750 To je to, čo D3 znamená. 209 00:11:13,750 --> 00:11:17,800 >> Tak toto x postition-- miesto zo len hovorím, všetky kruhy, 210 00:11:17,800 --> 00:11:21,735 si polohu x 200, my To by mohlo dať funkciu. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 A tu môžeme urobiť nejaký výpočet. 213 00:11:30,140 --> 00:11:33,710 a d tu stojí na mieste pre dáta. 214 00:11:33,710 --> 00:11:36,120 Takže zakaždým, keď máme kruh, v podstate, 215 00:11:36,120 --> 00:11:37,750 D3 bude vytvorenie týchto siedmich kruhy. 216 00:11:37,750 --> 00:11:38,500 A potom za každých 217 00:11:38,500 --> 00:11:41,920 >> kruh, to pôjde, hej, circle1 aký je tvoj x pozíciu. 218 00:11:41,920 --> 00:11:45,210 Predtým sme boli Vždycky odpovede 200. 219 00:11:45,210 --> 00:11:48,630 Ale teraz, zakaždým D3 sa pýta nám to, čo je vaša pozícia x, 220 00:11:48,630 --> 00:11:51,790 to bude dávať us-- máme že kruh, takže máme dáta. 221 00:11:51,790 --> 00:11:55,290 Bude to, aby nám dáta a povedať, čo chcete, expozícia bude, 222 00:11:55,290 --> 00:11:57,120 na základe týchto údajov. 223 00:11:57,120 --> 00:11:59,590 >> Poďme sa len vrátiť aktuálne dáta. 224 00:11:59,590 --> 00:12:04,910 Takže ak narazíme tohle, tohle dáva Údaje nás riadený dokumenty. 225 00:12:04,910 --> 00:12:08,040 Tieto kruhy sú založené Vo vzťahu Position-- 226 00:12:08,040 --> 00:12:11,120 sú základy ako funkcie údajov. 227 00:12:11,120 --> 00:12:13,100 >> Takže pre prvý kruh, D3 kladie kruh. 228 00:12:13,100 --> 00:12:16,770 A potom D3 nás pýta, čo robiť Chcete expozície byť. 229 00:12:16,770 --> 00:12:19,620 A my len povedať, čo dáta. 230 00:12:19,620 --> 00:12:21,185 Vykonajte expozíciu 10. 231 00:12:21,185 --> 00:12:26,320 >> Potom sa spýta, čo chcete, expozície bude pre druhý kruh. 232 00:12:26,320 --> 00:12:27,270 A my odpovedáme, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 A my, samozrejme, môže robiť nejaké výpočty tu. 235 00:12:32,230 --> 00:12:35,510 Zistil som, že tieto kruhy sú trochu naskladali hore. 236 00:12:35,510 --> 00:12:38,965 >> Tak vynásobte ju 3, násobiť dáta 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Náš kruh zrovna rozšírila von. 239 00:12:43,840 --> 00:12:46,730 Naše hodnota strojnásobil. 240 00:12:46,730 --> 00:12:51,010 >> Kruh je skutočne na okraji, tak sa poďme možno trochu kompenzovať to. 241 00:12:51,010 --> 00:12:53,632 Povedzme, že by 20. 242 00:12:53,632 --> 00:12:56,070 Tu to máte. 243 00:12:56,070 --> 00:12:57,590 >> Jedná sa o vizualizáciu dát. 244 00:12:57,590 --> 00:13:01,767 Je to veľmi jednoduchý človek, ale to nám dáva nejaké nahliadnutie do našich dát. 245 00:13:01,767 --> 00:13:04,600 To nám hovorí, že sme napríklad majú malý zhluk prvkov. 246 00:13:04,600 --> 00:13:06,340 A my máme veľkú outlier tu. 247 00:13:06,340 --> 00:13:10,830 To nám dáva nejaké informácie o distribúcii. 248 00:13:10,830 --> 00:13:20,830 >> Ak by sme boli, napríklad, pre zmenu dát do 150 tu a Refresh, 249 00:13:20,830 --> 00:13:22,630 Naše vizualizácie sa zmení. 250 00:13:22,630 --> 00:13:24,285 Tento dokument je dát riadený. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Tak samozrejme, všetky tieto prvky, Všetky tieto atribúty tu, 253 00:13:36,180 --> 00:13:38,430 môžeme použiť funkciu, nie len čísla, a to nielen 254 00:13:38,430 --> 00:13:39,900 x a y pozície. 255 00:13:39,900 --> 00:13:42,120 Takže môžeme použiť funkciu pre farbu. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Takže budeme robiť to isté. 258 00:13:46,360 --> 00:13:49,360 Dáme to funkcia. 259 00:13:49,360 --> 00:13:52,320 >> A povedzme, mohli by sme mať podmieňovací spôsob v našej funkcie. 260 00:13:52,320 --> 00:13:54,770 Táto funkcia môže byť sto riadkov dlhý. 261 00:13:54,770 --> 00:13:57,150 To môže urobiť len veľmi, veľmi zložité veci. 262 00:13:57,150 --> 00:13:59,080 >> Takže poďme dať if tu. 263 00:13:59,080 --> 00:14:03,420 Povedzme, že ak naše údaje sú menej ako 50, to je nejaký prah 264 00:14:03,420 --> 00:14:05,817 že sa zaujímame v z nejakého dôvodu. 265 00:14:05,817 --> 00:14:06,650 Poďme robiť to zelené. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 V opačnom prípade, poďme robiť to červené. 268 00:14:15,320 --> 00:14:16,110 Ako to? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Nice. 271 00:14:21,220 --> 00:14:24,860 >> Takže naše vizualizácie dát začína sprostredkovať zaujímavé informácie 272 00:14:24,860 --> 00:14:26,727 na mnohých kanáloch. 273 00:14:26,727 --> 00:14:28,560 Takže teraz trochu poznať o distribúcii. 274 00:14:28,560 --> 00:14:31,768 A my vieme, že tam je nejaký druh odrezať na 50, ktoré nás zaujímajú. 275 00:14:31,768 --> 00:14:35,630 Vieme, že existujú dva dátové body pod týmto prahom, a väčšina z nich 276 00:14:35,630 --> 00:14:36,130 vyššie. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Tak ako posledný krok, tieto dáta tu, to je veľmi zriedkavé vidieť takhle. 279 00:14:46,160 --> 00:14:52,610 Tak poďme len presunúť ju do premennej pretože to je čistejšie, takhle. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 A potom sme sa použiť túto premennú tu. 282 00:15:05,197 --> 00:15:06,280 Je to presne to isté. 283 00:15:06,280 --> 00:15:07,280 Je to len trochu čistejšie. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Ďalší na rade, Act III, Scales-- Takže jeden problém hneď 286 00:15:35,300 --> 00:15:38,920 tu je, ak zmeníme naše Údaje v tomto 200 value-- 287 00:15:38,920 --> 00:15:41,685 ak by sme ho zmeniť na 400 alebo tak niečo a refresh, 288 00:15:41,685 --> 00:15:44,540 potom táto hodnota jednoducho išiel mimo obrazovku. 289 00:15:44,540 --> 00:15:49,040 Takže naša logika tu o tom, ako robíme časy 3 290 00:15:49,040 --> 00:15:52,570 a 20, aby rozložil ju a potom offset to trochu je naozaj neohrabaný. 291 00:15:52,570 --> 00:15:54,150 >> Čo tieto čísla znamenajú? 292 00:15:54,150 --> 00:15:55,400 Oni len ťažko tam kódované. 293 00:15:55,400 --> 00:15:58,830 A oni veľmi viazaná na dáta. 294 00:15:58,830 --> 00:16:00,550 Chceme dokument dát riadený. 295 00:16:00,550 --> 00:16:05,460 Chceme veľmi flexibilné dokument, že zadaných údajov, adaptovať sa 296 00:16:05,460 --> 00:16:07,900 a zastupuje ju. 297 00:16:07,900 --> 00:16:11,330 >> To, čo potrebujeme, je v podstate, my majú tento rozsah čísel 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 A my chceme zmapovať, že von na šírka, celú šírku sem. 300 00:16:17,630 --> 00:16:20,620 Takže máme rozsah Čísla idú od 0 do 100. 301 00:16:20,620 --> 00:16:24,980 A máme to campus I pokračuje 20-700, v tomto prípade. 302 00:16:24,980 --> 00:16:26,515 >> Sme trochu chceme zmapovať si to. 303 00:16:26,515 --> 00:16:30,002 Chceme meradle, že až a potom to kompenzovať trochu. 304 00:16:30,002 --> 00:16:33,165 Ukazuje sa, že D3 má tieto. 305 00:16:33,165 --> 00:16:34,220 Hovorí sa tomu stupnice. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Tak poďme používať. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Spôsob, akým works-- budem zadajte toto hore a potom ju vysvetliť. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 To je meradlo. 312 00:17:02,450 --> 00:17:08,670 Čo to bude robiť, je, bude to zmapovať hodnôt 1-200 na na 20-600. 313 00:17:08,670 --> 00:17:10,990 Môžeme zistiť, že. 314 00:17:10,990 --> 00:17:13,329 Môžeme vidieť, že tu. 315 00:17:13,329 --> 00:17:21,704 >> Takže keď som kŕmiť 1-- jeden okamih. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Daj mi jednu sekundu. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Musel som preklep to. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Tu to je. 322 00:18:15,990 --> 00:18:17,930 Je mi ľúto. 323 00:18:17,930 --> 00:18:22,050 >> Takže to, čo bude robiť mierka je, bude mať hodnotu 324 00:18:22,050 --> 00:18:24,930 a potom previesť to, rozšíriť, že von, takže 325 00:18:24,930 --> 00:18:27,320 vyplní celú radu žiadate. 326 00:18:27,320 --> 00:18:32,910 Takže v tomto prípade, ak by sme dať jeden, to bude zmapovať, že sa na 20 ° C. 327 00:18:32,910 --> 00:18:37,750 A ak by sme dať 200, to je ísť na mapu, ktorá na 600. 328 00:18:37,750 --> 00:18:40,460 A niekde medzi tým, ak dostaneme 100, to je 329 00:18:40,460 --> 00:18:44,610 Bude niekam medzi 20 a 600. 330 00:18:44,610 --> 00:18:51,480 >> A samozrejme, teraz je to to, čo musíme odstrániť tie pevný kódované 331 00:18:51,480 --> 00:18:53,402 vecí, ktoré sme práve tam. 332 00:18:53,402 --> 00:18:55,950 Takže to, čo chceme urobiť, je mať dáta, že sme 333 00:18:55,950 --> 00:19:00,950 vzhľadom na to, že jednotlivé údaje element, a odovzdať ju v mierke ako prvý. 334 00:19:00,950 --> 00:19:02,635 Takže váha bude mierka to. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Oh, máme malú chybu tu. 337 00:19:48,880 --> 00:19:50,120 Sme chýbajúce údaje. 338 00:19:50,120 --> 00:19:51,290 Tu to je. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 A že rozširuje ju. 341 00:19:59,550 --> 00:20:01,383 >> To nám dáva rovnaký Výsledok sme mali predtým, 342 00:20:01,383 --> 00:20:04,030 ale namiesto toho, aby tie pevný kódované obmedzenia. 343 00:20:04,030 --> 00:20:07,790 A v prípade, že veľkosť nášho Zmeny plátno, napríklad, 344 00:20:07,790 --> 00:20:11,790 Ak chceme mať po všetkom 400 pixelov a to squishes von, 345 00:20:11,790 --> 00:20:15,440 môžeme mať over-- môžeme rozšíriť ju, alebo sa 346 00:20:15,440 --> 00:20:21,890 môže znížiť túto ľavého okraja na niečo menej alebo viac ako 20. 347 00:20:21,890 --> 00:20:25,470 Tieto čísla, tieto hard kódované Čísla teraz zmysel pre nás. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> A my sme mohli urobiť oveľa viac zaujímavé veci rovnako. 350 00:20:30,520 --> 00:20:35,990 Takže namiesto toho, aby lineárne mierka, môžeme chcieť prihlásiť meradlo. 351 00:20:35,990 --> 00:20:37,840 A že nám dá logaritmickej stupnice. 352 00:20:37,840 --> 00:20:41,269 >> Takže teraz naše meradlo, miesto Len rozširuje na to, že rozsah, 353 00:20:41,269 --> 00:20:42,810 to robí zložitejšie veci. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Namiesto toho, aby tento rozsah hard kódovaný, a namiesto toho, aby 600, 356 00:20:53,790 --> 00:20:58,465 by sme mohli chcieť, aby stačí použiť šírku, tak od 20 do šírky mínus 40, 357 00:20:58,465 --> 00:21:02,392 2 krát okrajov na druhej strane. 358 00:21:02,392 --> 00:21:05,350 A to je oveľa väčší zmysel niekto, kto by mohol pozrieť na kód. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Zaujímavé je, že váhy získať veľmi, veľmi prepracovaný rovnako. 361 00:21:11,850 --> 00:21:13,350 Robia veľa zaujímavých vecí. 362 00:21:13,350 --> 00:21:17,620 Takže váhy nemusia mať nutne pracovať len s číslami. 363 00:21:17,620 --> 00:21:18,955 Poďme urobiť farebnej škály. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Takže náš sortiment by be-- Našou doménou je 1 až 200. 366 00:21:26,120 --> 00:21:28,220 To je vstup vec. 367 00:21:28,220 --> 00:21:33,793 Ale my chcieť zmapovať od zelenej na červenú, napr. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 A teraz, keď sme ho 1 prejsť, budeme dostať zelenú. 370 00:21:42,910 --> 00:21:45,110 Dáme ak mu 200, dostaneme červenú. 371 00:21:45,110 --> 00:21:49,480 A keď sme to prejsť niečo medzi, to bude nejaký mix, ktorý, 372 00:21:49,480 --> 00:21:52,520 niekde na gradientu medzi zelenou a červenou. 373 00:21:52,520 --> 00:21:55,210 >> A namiesto toho, aby tento druh neohrabaný logiky 374 00:21:55,210 --> 00:21:58,550 Máme tu podmienené práve tam, 375 00:21:58,550 --> 00:22:03,250 by sme mohli mať something-- lineárna stupnica medzi tými. 376 00:22:03,250 --> 00:22:07,100 Preto by sme použiť stupnicu sme práve vytvorený, ktorý sme nazvali farbu. 377 00:22:07,100 --> 00:22:09,060 A my by sme ho d, čo je náš dátový prvok. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 A tam ideme. 380 00:22:15,060 --> 00:22:18,070 Máme farebnej škály. 381 00:22:18,070 --> 00:22:18,940 >> Tak toto je mapovanie. 382 00:22:18,940 --> 00:22:20,960 Tak ďaleko vľavo je úplne zelene. 383 00:22:20,960 --> 00:22:22,560 Krajnej pravice je úplne červené. 384 00:22:22,560 --> 00:22:24,828 A všetko medzi tým je funkciou d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Máme zaujímavý vizualizácia tu. 387 00:22:35,160 --> 00:22:36,952 Ale naše dáta bola trochu nuda. 388 00:22:36,952 --> 00:22:39,410 Poďme sa pozrieť, čo sme mohli urobiť, ak sme mali viac zaujímavé údaje. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Zákon IV, práca s Data-- prvá vec 391 00:22:50,500 --> 00:22:53,560 budeme chcieť urobiť, aby sa naša vizualizácia zaujímavejšie 392 00:22:53,560 --> 00:22:56,140 je presunúť dáta niekam inam. 393 00:22:56,140 --> 00:22:58,310 Je to veľmi neohrabaný mať Údaje, ktoré tu pevný kódované. 394 00:22:58,310 --> 00:23:01,220 A všeobecne, budeme sa pýtať niekto iný pre dáta. 395 00:23:01,220 --> 00:23:05,400 Budeme snáď žiada vládu, Census Bureau, čo je vaše dáta 396 00:23:05,400 --> 00:23:10,170 a potom vykresľovanie že alebo dotazom Niektoré tretie subjekt, u niektorých dát 397 00:23:10,170 --> 00:23:13,330 a potom vybudovanie vizualizácia na to. 398 00:23:13,330 --> 00:23:17,170 >> Takže prvá vec, ktorú chcete urobiť, je krok, ktorý niekam inam. 399 00:23:17,170 --> 00:23:24,130 Takže budem vytvárať súbor tu nazýva data.json. 400 00:23:24,130 --> 00:23:25,600 JSON je formát dát. 401 00:23:25,600 --> 00:23:29,210 Nemusíte vedieť veľa o tom. 402 00:23:29,210 --> 00:23:33,210 A budeme kopírovať malé množstvo dát máme tam, 403 00:23:33,210 --> 00:23:40,330 vložte ho tam doslovne, choďte späť k našej vizualizáciu kódu 404 00:23:40,330 --> 00:23:45,362 tu, a použiť túto funkciu priamo tu. 405 00:23:45,362 --> 00:23:46,820 Nemusíte poznať podrobnosti. 406 00:23:46,820 --> 00:23:49,800 Ale čo to bude robiť, je, to sa zistí, že súbor, 407 00:23:49,800 --> 00:23:51,780 prines to, a vrátiť ho k nám. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Takže to, čo to robí, je, že ide a získať súbor data.json. 410 00:24:15,220 --> 00:24:18,570 A potom kód, ktorý je odsadené inside-- v podstate, 411 00:24:18,570 --> 00:24:21,800 všetky kód máme there-- bude spustiť len vtedy, keď sme sa získať dáta späť. 412 00:24:21,800 --> 00:24:25,760 A potom, že to bude beh, že kód s dátami máme. 413 00:24:25,760 --> 00:24:28,870 Skvelé, máme vizualizácia, že otázky 414 00:24:28,870 --> 00:24:31,390 pre nejaký kód niekde inde, čo je zvyčajne 415 00:24:31,390 --> 00:24:36,110 kde dotazy niektoré údaje z niekde inde, čo je zvyčajne 416 00:24:36,110 --> 00:24:38,656 ako vizualizácia práce. 417 00:24:38,656 --> 00:24:41,400 >> Ale chcem sa vrátiť k dátam. 418 00:24:41,400 --> 00:24:48,030 Takže dáta Fundamentally v D3-- D3 spotrebuje dáta, ktorá je zoznam vecí. 419 00:24:48,030 --> 00:24:53,000 D3 očakáva, že tieto údaje byť len zoznam vecí, rad vecí. 420 00:24:53,000 --> 00:24:58,780 Nezáleží na tom, aké tie veci sú, ak je to pole z nich. 421 00:24:58,780 --> 00:25:02,460 >> Tak tu, napríklad, mohli sme Samozrejme sme s plávajúcou desatinnou čiarkou hodnoty. 422 00:25:02,460 --> 00:25:04,830 Mohli by sme mať negatívne výsledky. 423 00:25:04,830 --> 00:25:09,400 D3 sa nestará, tak dlho ako je to zoznam vecí. 424 00:25:09,400 --> 00:25:13,270 >> Vzhľadom k zaujímavej veci, ktoré sme by mohla mať, mohli by sme tiež 425 00:25:13,270 --> 00:25:19,410 majú zoznam reťazcov, ako je to. 426 00:25:19,410 --> 00:25:25,440 Tak to sú titulky Crimson Zdvihol som pred pár dňami. 427 00:25:25,440 --> 00:25:29,220 A možno nájdete niekoľko zaujímavých veci, o týchto niekoľkých titulky. 428 00:25:29,220 --> 00:25:30,970 >> Takže ešte raz, toto je zoznam vecí. 429 00:25:30,970 --> 00:25:32,360 D3 nestará. 430 00:25:32,360 --> 00:25:35,572 To sa stalo, že reťazec. 431 00:25:35,572 --> 00:25:36,530 Zmenili sme naše dáta. 432 00:25:36,530 --> 00:25:38,210 >> Vráťme sa k nášmu vizualizáciu. 433 00:25:38,210 --> 00:25:42,495 Teraz, naše vizualizácie očakáva vstupné byť čísla. 434 00:25:42,495 --> 00:25:44,370 Takže budeme mať vykonať niekoľko zmien. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Tak napríklad, v prvom rade, možno Chceme, aby tieto kruhy spolu 437 00:25:52,180 --> 00:25:56,870 dĺžkou titulok, počet znakov v titulku. 438 00:25:56,870 --> 00:26:03,600 >> Takže to, čo budeme robiť, je-- zakaždým naše Funkcia je volaná s reťazcom, 439 00:26:03,600 --> 00:26:09,095 zistíme, že je to dĺžka a potom prejsť okolo toho v mierke. 440 00:26:09,095 --> 00:26:11,550 Farba, vrátim že k oceľovo modrá. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 A tam ideme. 443 00:26:20,420 --> 00:26:23,190 Máme vizualizácia z Crimson titulky. 444 00:26:23,190 --> 00:26:25,500 >> Naša mierka je trochu mimo. 445 00:26:25,500 --> 00:26:29,680 Predpokladajme, že najdlhšia titulok je dlhý 100 znakov, 446 00:26:29,680 --> 00:26:32,244 tak, aby rozpätie sa trochu. 447 00:26:32,244 --> 00:26:33,410 A máme vizualizáciu. 448 00:26:33,410 --> 00:26:36,710 Takže sa zdá, že väčšina titulky sú dosť blízko pri sebe, 449 00:26:36,710 --> 00:26:38,750 čo sa týka charakteru linky. 450 00:26:38,750 --> 00:26:41,200 Ale jeden tam naozaj vyniká. 451 00:26:41,200 --> 00:26:46,660 >> Mohli by sme postaviť niektoré nástroje preskúmať, že viac. 452 00:26:46,660 --> 00:26:50,710 Ale keď som pracoval na to, bol som zvedaví, či v tomto súbore dát, 453 00:26:50,710 --> 00:26:53,880 titulky s dvojbodkou v nich by byť dlhšia. 454 00:26:53,880 --> 00:26:55,770 Aj predpokladá, že áno. 455 00:26:55,770 --> 00:26:56,660 >> Takže poďme zistiť. 456 00:26:56,660 --> 00:27:00,650 Poďme používať farby kanál, ako sme to urobili predtým, 457 00:27:00,650 --> 00:27:04,540 zakódovať niektoré o tom, či tam je dvojbodka, alebo nie. 458 00:27:04,540 --> 00:27:07,220 Takže budeme opäť používať podmienené. 459 00:27:07,220 --> 00:27:09,350 Nemusíte vedieť podrobnosti o to, 460 00:27:09,350 --> 00:27:14,260 ale to je to, ako sme sa overiť reťazec pre konkrétny znak 461 00:27:14,260 --> 00:27:16,355 v JavaScripte, opäť, nie je relevantná. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Ale ak sa nám nepodarí nájsť hrubého čreva, vrátime zelene. 464 00:27:23,270 --> 00:27:26,100 A ak áno, vrátime červené. 465 00:27:26,100 --> 00:27:29,010 Takže znovu, titulky, že majú dvojbodka bude červeno. 466 00:27:29,010 --> 00:27:34,980 To je to, čo to means-- pekné. 467 00:27:34,980 --> 00:27:38,040 >> Takže sa zdá, že môj hypotéza je narazil. 468 00:27:38,040 --> 00:27:39,360 Je tu len dve. 469 00:27:39,360 --> 00:27:42,380 Máme len šesť dátových bodov a iba dvaja mali dvojbodky. 470 00:27:42,380 --> 00:27:45,510 Ale zdá sa, trochu viac na spodnom konci, v skutočnosti. 471 00:27:45,510 --> 00:27:47,830 Titulky s dvojbodkou sa zdá všeobecne byť kratšia, 472 00:27:47,830 --> 00:27:52,370 aspoň v našich dát set-- zaujímavé. 473 00:27:52,370 --> 00:27:55,830 >> Vráťme sa, že pre oceľovo modrá a potom uvidíte 474 00:27:55,830 --> 00:28:00,601 čo môžeme urobiť s ešte ďalšie zaujímavé informácie. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Takže znovu, som sa zmienil, že Dáta v D3 je zoznam vecí. 477 00:28:09,070 --> 00:28:11,080 Videli sme počty mnohých typov. 478 00:28:11,080 --> 00:28:12,810 Už sme videli reťazca. 479 00:28:12,810 --> 00:28:15,700 Ale veci môžu byť aj objekty. 480 00:28:15,700 --> 00:28:20,080 >> Môžu to byť zložité veci ktoré obsahujú veľa vecí. 481 00:28:20,080 --> 00:28:24,510 Chcete povedať, že jasnejšie, vo väčšine prípadov sme 482 00:28:24,510 --> 00:28:28,384 Chcete stavať každý dátový bod as oveľa zložitejšie, než len jednu hodnotu. 483 00:28:28,384 --> 00:28:30,175 Ak by ste si predstaviť, databázy o študentoch, 484 00:28:30,175 --> 00:28:32,470 tam by mohlo byť študentom meno, študent ID, 485 00:28:32,470 --> 00:28:36,370 a veľa vecí spojené s konkrétny záznam, 486 00:28:36,370 --> 00:28:39,834 nie len reťazec alebo číslo. 487 00:28:39,834 --> 00:28:40,750 Tak sa poďme pozrieť na to. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> To je jeden taký súbor údajov. 490 00:28:56,760 --> 00:28:59,090 To je dátový súbor o zemetrasení. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Takže všetko je tu na našom zozname alebo pole vecí, obsahuje veľa vecí sám. 493 00:29:08,430 --> 00:29:11,380 Takže každý dátový bod má veľkosť a koordinovať. 494 00:29:11,380 --> 00:29:13,425 A koordinuje sa obsahujú dve veci. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Takže každý deň, je teraz oveľa viac komplikované a oveľa zaujímavejšie 497 00:29:20,450 --> 00:29:22,700 a obsahuje oveľa viac zaujímavé informácie. 498 00:29:22,700 --> 00:29:26,730 Poďme sa pozrieť, sme mohli postaviť z toho. 499 00:29:26,730 --> 00:29:36,130 Vracať sa späť sem, opäť s použitím Naše histogram kruh vizualizácie 500 00:29:36,130 --> 00:29:42,110 sme vybudovali, poďme sa pozrieť, či môžeme stavať vizualizácia distribúcia veľkosti 501 00:29:42,110 --> 00:29:43,305 v našom súbore dát. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Tak tu je to rovnaký koncept. 504 00:29:48,660 --> 00:29:51,920 Ale teraz, d obsahuje viac vecí. 505 00:29:51,920 --> 00:29:54,780 d obsahuje mnoho dátových prvkov. 506 00:29:54,780 --> 00:29:57,946 Tak sme si d späť. 507 00:29:57,946 --> 00:29:59,670 D3 nám dáva d. 508 00:29:59,670 --> 00:30:06,080 A my odpovedáme tým, že nájde veľkosti o d a potom odovzdá že v mierke. 509 00:30:06,080 --> 00:30:08,490 >> A potom musíme zmeniť Naše meradlo, samozrejme. 510 00:30:08,490 --> 00:30:12,980 Takže veličiny proste nie ísť oveľa viac než 10. 511 00:30:12,980 --> 00:30:15,485 V skutočnosti, tam nikdy nebol 10 veľkosť zemetrasenia. 512 00:30:15,485 --> 00:30:19,360 Ale to je trochu naša hornej end, náš horné spektrum. 513 00:30:19,360 --> 00:30:20,240 >> Poďme obnoviť. 514 00:30:20,240 --> 00:30:22,990 Nice, máme vizualizáciu. 515 00:30:22,990 --> 00:30:25,490 Je zaujímavé note-- tak existujú dva dátové body, ktoré 516 00:30:25,490 --> 00:30:29,010 sú takmer presne na seba ďalší, z hľadiska veľkosti. 517 00:30:29,010 --> 00:30:31,350 Vidíte to tým, netransparentnosti sme používate. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Máme geografických dát teraz. 520 00:30:42,690 --> 00:30:44,710 Máme zemepisnej šírky a dĺžky. 521 00:30:44,710 --> 00:30:47,549 Možno by sme mohli urobiť niečo oveľa zaujímavejšie s tým. 522 00:30:47,549 --> 00:30:49,590 Poďme si trochu viac zaujímavý spôsob, ako predstaviť 523 00:30:49,590 --> 00:30:53,500 to zložitejšie Údaje, ktoré majú prístup k. 524 00:30:53,500 --> 00:31:04,950 >> Zákon V, Mapping-- zásadne, Chceme, aby tieto na mape. 525 00:31:04,950 --> 00:31:07,690 Myslím, že to je miesto, kde sa to deje. 526 00:31:07,690 --> 00:31:13,130 Chceme zakódovať informácie o Postavenie týchto zemetrasenie čítanie, 527 00:31:13,130 --> 00:31:16,350 ako aj ich veľkosť, pretože máme teraz. 528 00:31:16,350 --> 00:31:21,310 Chápeme, ako spotrebovať zložitejšie dát. 529 00:31:21,310 --> 00:31:26,200 >> Prvá vec, ktorú urobíme, je vytvoriť mapu, mapu pozadia. 530 00:31:26,200 --> 00:31:29,360 Chystám sa prejsť to veľmi rýchlo. 531 00:31:29,360 --> 00:31:30,560 To je zložité kód. 532 00:31:30,560 --> 00:31:33,110 Je to ďalší z tých, recepty nemáte naozaj 533 00:31:33,110 --> 00:31:35,690 musieť plne pochopiť, pre vás na použitie. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Ale to je kód. 536 00:31:39,740 --> 00:31:43,580 Tento kód tu vytvorí mapu. 537 00:31:43,580 --> 00:31:45,730 >> Nebudeme chodiť v detaile. 538 00:31:45,730 --> 00:31:54,210 Ale povrchne, čo to robí, je, opýta tento súbor us.json, ktorý 539 00:31:54,210 --> 00:31:57,150 je dátový súbor, ako je tá, ktorú sme mali predtým. 540 00:31:57,150 --> 00:31:59,150 Je to zložitejšie, samozrejme. 541 00:31:59,150 --> 00:32:02,920 Ale v tomto prípade všetko, každý dátový bod je tento stav 542 00:32:02,920 --> 00:32:05,420 a má zoznam zemepisnej šírky a dĺžky 543 00:32:05,420 --> 00:32:10,500 ktoré definujú polygón, že forma, že štát. 544 00:32:10,500 --> 00:32:13,280 >> Takže to, čo D3 bude robiť, je obdobný k tomu, čo sme robili predtým. 545 00:32:13,280 --> 00:32:18,140 To bude vyžadovať, aby aj viažu, že na prvok. 546 00:32:18,140 --> 00:32:20,890 A je tu funkcia, ktorá bude mapovať tento prvok von, 547 00:32:20,890 --> 00:32:23,410 na základe zemepisných šírkach a dĺžky. 548 00:32:23,410 --> 00:32:24,580 Môžete si prečítať viac o tom. 549 00:32:24,580 --> 00:32:27,385 A ja odporúčam. 550 00:32:27,385 --> 00:32:30,090 >> Tam sú odkazy na Koniec tohto kódu nenapísal. 551 00:32:30,090 --> 00:32:31,570 A kód je komentoval. 552 00:32:31,570 --> 00:32:34,050 V tam sú odkazy na ďalšie na to. 553 00:32:34,050 --> 00:32:36,590 Odporúčam vám to nájsť. 554 00:32:36,590 --> 00:32:39,460 Ale to, čo nás zaujíma, je táto projekcia funkcia. 555 00:32:39,460 --> 00:32:41,210 Chcem ísť cez to. 556 00:32:41,210 --> 00:32:43,522 >> Po prvé, dovoľte mi ukázať vy, že áno, máme mapu. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Mapy sú v pohode. 559 00:32:49,970 --> 00:32:52,330 Tak sa poďme pozrieť na to produkčnej funkcie. 560 00:32:52,330 --> 00:32:56,481 >> Projekcia je veľmi ako meradle, váhy znova. 561 00:32:56,481 --> 00:32:59,210 Takže to, čo výroba pre Táto funkcia projekcia 562 00:32:59,210 --> 00:33:06,610 to je, mohli by sme to prejsť dĺžku a latitudes-- v tomto prípade, 563 00:33:06,610 --> 00:33:09,590 tieto hodnoty sú tu lat-túži budovy 564 00:33:09,590 --> 00:33:13,990 sedíme v práve now-- na projekciu. 565 00:33:13,990 --> 00:33:20,560 A projekcie prevedie že do hodnoty pixelov x a y. 566 00:33:20,560 --> 00:33:23,300 >> Takže to, čo je projekcia robí je veľmi podobná našej meradle. 567 00:33:23,300 --> 00:33:27,270 Je to pri našich zemepisných šírkach a dĺžka, ktorá predstavuje celú zemeguľu 568 00:33:27,270 --> 00:33:31,390 a zmršťovanie a veľkosti, ktoré dole na námestí, ktoré chceme, 569 00:33:31,390 --> 00:33:33,510 že sme ho dal. 570 00:33:33,510 --> 00:33:35,220 V tomto prípade, my sme odovzdávanie týchto hodnôt. 571 00:33:35,220 --> 00:33:41,370 A to nám dáva, dobre, že Na obrazovke znamená 640 pixelov. 572 00:33:41,370 --> 00:33:46,250 Celá táto obrazovka je 700 pixelov široký, takže z nás robí asi tu, 573 00:33:46,250 --> 00:33:53,310 a 154 pixelov dole, ktoré by som odhad je skoro tu. 574 00:33:53,310 --> 00:33:57,250 >> Takže pri tých lat-túži, čo predstavujú niečo na celom svete 575 00:33:57,250 --> 00:34:02,850 a squishing a pohybujúce sa, že okolo sa nám hodnoty X a Y pixelov, 576 00:34:02,850 --> 00:34:05,450 To je prvá vec, ktorá je vykonáva v tejto mapovacej kód. 577 00:34:05,450 --> 00:34:07,920 A potom zvyšok Kód spotrebováva dáta 578 00:34:07,920 --> 00:34:14,310 a potom mapuje tie lat-túžia na niečo, čo na obrazovke. 579 00:34:14,310 --> 00:34:18,380 >> Ale budeme používať túto projekciu funkcie, pretože sa ukáže, že 580 00:34:18,380 --> 00:34:20,270 máme lat-túži túži rovnako. 581 00:34:20,270 --> 00:34:24,509 Pri spätnom pohľade na našich dát, máme zemepisnej šírky a dĺžky súradnice 582 00:34:24,509 --> 00:34:25,425 pre každé pozorovanie. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Takže poďme použiť projekciu. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Takže pri pohľade na našej expozícii, chceme našu exposition-- 587 00:34:37,639 --> 00:34:39,590 máme zemepisnej šírky a dĺžky. 588 00:34:39,590 --> 00:34:40,770 Ale my chceme hodnoty obrazových bodov. 589 00:34:40,770 --> 00:34:43,510 A ukázalo sa, máme presne to, čo sme want-- projekciu. 590 00:34:43,510 --> 00:34:46,239 Veľmi podobne ako sme boli pomocou stupnice tu, 591 00:34:46,239 --> 00:34:52,075 Teraz bude používať projekciu a odovzdať koordinuje. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Takže prvá vec sme doing-- tak sme 594 00:34:56,949 --> 00:35:01,520 dostať d, čo je individuálne údaje prvok individuálne zemetrasenie 595 00:35:01,520 --> 00:35:02,370 čítanie. 596 00:35:02,370 --> 00:35:04,640 Prvá vec, ktorú robíme je získať súradnice. 597 00:35:04,640 --> 00:35:06,150 Dobre, máme súradnice. 598 00:35:06,150 --> 00:35:09,160 >> Druhá vec, čo robíme, je Onoho na projekciu. 599 00:35:09,160 --> 00:35:13,440 Projekcia prevádza tieto súradnice do hodnoty pixelov, x a y. 600 00:35:13,440 --> 00:35:16,680 A potom posledná vec, ktorú by sme chcem urobiť, je dostať x, 601 00:35:16,680 --> 00:35:19,342 čo v tomto prípade je prvý z nich. 602 00:35:19,342 --> 00:35:22,050 Jedná sa o prvú z týchto dvoch vecí ktoré sú vrátené projekciou. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Urobíme to isté pre y. 605 00:35:29,630 --> 00:35:34,960 Ale namiesto toho, vrátime Druhý prvok, y. 606 00:35:34,960 --> 00:35:35,980 Pripravte sa na obnoviť. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Ooh, extra charakter here-- pekné, máme 609 00:35:46,450 --> 00:35:51,730 Údaje riadený dokument, ktorý je skrývanie tento JSON súbor objektov, 610 00:35:51,730 --> 00:35:57,560 robiť mapy, a meniace sa atribút vo vzťahu k údajom 611 00:35:57,560 --> 00:35:59,600 premietať ju na mape. 612 00:35:59,600 --> 00:36:00,840 To je naozaj zaujímavé. 613 00:36:00,840 --> 00:36:03,770 To je v pohode. 614 00:36:03,770 --> 00:36:05,640 >> Poďme si to do zárezu. 615 00:36:05,640 --> 00:36:08,795 Myslím, že máme dva kusy informácie s každým dátového bodu. 616 00:36:08,795 --> 00:36:10,000 Myslím, tri. 617 00:36:10,000 --> 00:36:12,540 Máme súradnice, čo je x a y. 618 00:36:12,540 --> 00:36:15,700 A máme veľkosť. 619 00:36:15,700 --> 00:36:17,420 >> Musíme zakódovať veľkosti nejako. 620 00:36:17,420 --> 00:36:18,920 Máme veľa kanálov. 621 00:36:18,920 --> 00:36:20,370 Môžeme použiť farbu. 622 00:36:20,370 --> 00:36:21,890 Môžeme použiť polomer. 623 00:36:21,890 --> 00:36:23,040 Mohli by sme použiť krytie. 624 00:36:23,040 --> 00:36:25,540 Mohli by sme použiť mnoho vecí v kóde. 625 00:36:25,540 --> 00:36:29,180 Niektoré z týchto atribútov a mnoho viac, že ​​tam nie sú uvedené, 626 00:36:29,180 --> 00:36:33,065 preto, že sú povinné, mohli by sme používajú pre zakódovanie tieto dáta, mŕtvica 627 00:36:33,065 --> 00:36:35,670 a všetky tieto veci, ktoré som spomenul. 628 00:36:35,670 --> 00:36:36,690 >> Poďme robiť polomer. 629 00:36:36,690 --> 00:36:38,830 Myslím si, že polomer je najviac intuitívne. 630 00:36:38,830 --> 00:36:46,210 Takže znovu, budeme nahrádzať, že pevne 40 a vykonať niektoré výpočty. 631 00:36:46,210 --> 00:36:48,810 Budeme znova použiť náš obľúbený meradlo. 632 00:36:48,810 --> 00:36:50,290 A my sme v minulosti d. 633 00:36:50,290 --> 00:36:55,850 Ale nie d, pretože chceme veľkosť D. d je len dátový bod. 634 00:36:55,850 --> 00:36:57,430 Budeme prejsť veľkosť meradle. 635 00:36:57,430 --> 00:36:58,470 >> Skúsme to znova. 636 00:36:58,470 --> 00:37:00,230 Ooh, to nefunguje. 637 00:37:00,230 --> 00:37:02,940 Prečo to nefunguje? 638 00:37:02,940 --> 00:37:04,387 >> Takže pamätajte akom rozsahu robí. 639 00:37:04,387 --> 00:37:05,470 Poďme sa pozrieť na meradle znova. 640 00:37:05,470 --> 00:37:10,800 Mierka mapy 1-10 na na 22 až 600, viac alebo menej. 641 00:37:10,800 --> 00:37:12,030 600 je obrovský. 642 00:37:12,030 --> 00:37:14,730 To je dôvod, prečo sme stále to. 643 00:37:14,730 --> 00:37:18,420 >> Takže chceme zmeniť naše mierku na niečo rozumnejšie. 644 00:37:18,420 --> 00:37:22,610 Povedzme, že chceme 0-60. 645 00:37:22,610 --> 00:37:25,340 60 je veľký, ale 10 zemetrasenie sú neuveriteľne zriedkavé. 646 00:37:25,340 --> 00:37:27,880 V skutočnosti, že som sa nikdy nestalo. 647 00:37:27,880 --> 00:37:31,830 >> Takže to, čo to bude robiť, je, bude to trvať Naše veľkosť, ktorá ide od 1 do 10 648 00:37:31,830 --> 00:37:34,490 a mapovať na rozbaľte ho. 649 00:37:34,490 --> 00:37:37,370 A namapovať na 0-60. 650 00:37:37,370 --> 00:37:38,840 Poďme obnoviť. 651 00:37:38,840 --> 00:37:41,850 >> Nice, máme vizualizáciu. 652 00:37:41,850 --> 00:37:42,500 To je skvelé. 653 00:37:42,500 --> 00:37:43,736 To je aktuálne dáta. 654 00:37:43,736 --> 00:37:46,360 Určite ste si všimli, v mojom malom hračky príklad, najväčšie zemetrasenie 655 00:37:46,360 --> 00:37:49,417 je priamo nad nami. 656 00:37:49,417 --> 00:37:50,000 Ale to je všetko. 657 00:37:50,000 --> 00:37:54,422 Máme dátum riadený vizualizácie že spotrebováva dáta 658 00:37:54,422 --> 00:37:56,255 a nám dáva naozaj zaujímavé informácie. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Jo, poďme pridať nejaký interaktivita na to. 661 00:38:06,420 --> 00:38:08,675 Zmienil som sa, že to silná sila D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Tak tu, pre každý prvok, sme popisujúci veľa atribútov. 664 00:38:15,060 --> 00:38:20,230 Ale môžeme tiež popísať to, čo chceme sa stane s interaktivity prvkami. 665 00:38:20,230 --> 00:38:26,190 Napríklad by sme mohli popísať čo sa stane, keď myši. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 A veľmi podobné, že, ktorá bude mať funkciu, 668 00:38:33,640 --> 00:38:36,700 veľmi podobný atribúty sme mali predtým, 669 00:38:36,700 --> 00:38:44,650 kde sme sa urobiť niečo pre prvok, keď sme sa vznášať sa nad ním. 670 00:38:44,650 --> 00:38:47,100 >> Takže prvá vec, ktorú musíme urobiť, je vybrať tento prvok, 671 00:38:47,100 --> 00:38:49,435 ho nájsť v podstate, v prehliadači. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 a potom by sme mohli nastaviť atribút na to. 674 00:39:00,920 --> 00:39:06,870 Takže to, čo tu robím, je, keď sme sa vznášať nad niečím, dostaneme tento prvok 675 00:39:06,870 --> 00:39:11,197 a potom nastaviť jeho priehľadnosť späť 1, úplne nepriehľadný. 676 00:39:11,197 --> 00:39:12,488 Poďme sa pozrieť, ako to vyzerá. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Zdá sa, že máme navyše bodkočiarka tu. 679 00:39:39,080 --> 00:39:42,420 Takže ak by sme tu vznášať, dostane plný. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Ale teraz, samozrejme, to pobyty plné, pretože my 682 00:39:48,960 --> 00:39:53,240 musí popísať, čo sa deje Pri odobratí našu kurzor. 683 00:39:53,240 --> 00:39:59,990 Tak poďme urobiť presne to, na mouseOut, na rozdiel od mouseover. 684 00:39:59,990 --> 00:40:06,399 >> A budeme resetovať do to, čo sme mali before-- 0,5. 685 00:40:06,399 --> 00:40:10,260 A teraz, zakaždým, keď sme vznášať sa, dostaneme kruh. 686 00:40:10,260 --> 00:40:13,468 Pomáha nám vidieť, čo máme sme výber v podstate. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> A teraz poďme, aby to naozaj skvelé. 689 00:40:22,860 --> 00:40:26,210 Poďme sa pripojiť to na reálne dáta. 690 00:40:26,210 --> 00:40:30,890 Takže poďme opýtať mohol USGS o ich dáta. 691 00:40:30,890 --> 00:40:35,630 Takže US Geological Survey má k dispozícii údaje o zemetrasení. 692 00:40:35,630 --> 00:40:41,460 Majú verejné API, ktorý je schopný byť konzumovaný vo formáte JSON. 693 00:40:41,460 --> 00:40:42,548 Tak poďme to urobiť. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Tak toto je trochu kódu, ktorý sa pripojí k USGS API. 696 00:40:55,900 --> 00:40:57,990 A je tu trochu spracovanie na to. 697 00:40:57,990 --> 00:41:02,200 To nie je podstatné, ale zjednodušuje ju na jednoduchý formát dát, ako je tá 698 00:41:02,200 --> 00:41:03,800 sme mali predtým. 699 00:41:03,800 --> 00:41:08,140 Tak som sa zbaviť našu výzvu na náš falošný data.json na súbor. 700 00:41:08,140 --> 00:41:13,110 A namiesto toho, volám USGS v podstate. 701 00:41:13,110 --> 00:41:16,700 >> Poďme obnoviť, pekné. 702 00:41:16,700 --> 00:41:21,260 To je skutočné, real-life dát od tohto týždňa k zemetraseniu. 703 00:41:21,260 --> 00:41:23,217 To je naozaj zaujímavé. 704 00:41:23,217 --> 00:41:25,050 To nie je prekvapujúce pre nás, ale tam sú 705 00:41:25,050 --> 00:41:27,909 veľa zemetrasení na West Coast v Kalifornii. 706 00:41:27,909 --> 00:41:30,950 Ale myslel som, že je to veľmi zaujímavé že tam bolo toľko zemetrasení 707 00:41:30,950 --> 00:41:34,350 na Aljaške, a zdá sa, tu na Stredozápade. 708 00:41:34,350 --> 00:41:37,630 Myslím, zaujímavý, a sme dobrí. 709 00:41:37,630 --> 00:41:40,410 To je záver. 710 00:41:40,410 --> 00:41:43,760 >> Ale v podstate to je to, čo D3 nám pomáha robiť. 711 00:41:43,760 --> 00:41:48,030 Pomáha nám trvať dát, bind to prvkov v DOM, 712 00:41:48,030 --> 00:41:51,620 a majú tieto prvky zmeniť ako funkcia týchto údajov, 713 00:41:51,620 --> 00:41:54,780 mať tie atribúty, sú všetky veľa atribútov prvkov, 714 00:41:54,780 --> 00:41:57,393 všetky užitočné pre kanály sprostredkovať informácie. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 je neuveriteľne silný knižnica a prekvapivo dobre spustiť. 717 00:42:09,290 --> 00:42:12,260 To je nejaká silná vec. 718 00:42:12,260 --> 00:42:15,960 Vizualizácia dát je neuveriteľne mocný nástroj 719 00:42:15,960 --> 00:42:21,530 pre dopravu osôb na hlboké postrehy, že dôjde k ich jadru 720 00:42:21,530 --> 00:42:25,430 a pomáha im porozumieť, v Tento hlboký a intuitívny spôsob, 721 00:42:25,430 --> 00:42:29,760 ako funguje dát a ako Údaje zmení náš život. 722 00:42:29,760 --> 00:42:31,019