1 00:00:00,000 --> 00:00:00,780 2 00:00:00,780 --> 00:00:11,880 >> [MUZYKA GRY] 3 00:00:11,880 --> 00:00:16,480 >> DAVID Chouinard: Jestem Dawid Chouinard, a to D3. 4 00:00:16,480 --> 00:00:17,700 Witaj. 5 00:00:17,700 --> 00:00:21,270 Mamy zamiar dowiedzieć się o D3 dziś. 6 00:00:21,270 --> 00:00:25,020 D3 jest ramy JavaScript do tworzenia wysokiej jakości 7 00:00:25,020 --> 00:00:28,110 interaktywne wizualizacje dla sieci. 8 00:00:28,110 --> 00:00:30,870 Rzeczy, jak to, co mamy widząc w końcu mnie 9 00:00:30,870 --> 00:00:34,230 mamy zamiar nauczyć się tych rzeczy, rodzaj podstawy nim. 10 00:00:34,230 --> 00:00:36,452 Ale to będzie fajne. 11 00:00:36,452 --> 00:00:38,160 Zaczynajmy co ładne zdjęcia. 12 00:00:38,160 --> 00:00:41,108 13 00:00:41,108 --> 00:00:44,350 Mamy więcej dema perspektyw dostępnych. 14 00:00:44,350 --> 00:00:48,040 15 00:00:48,040 --> 00:00:50,760 Zróbmy to. 16 00:00:50,760 --> 00:00:58,700 >> Akt I, DOM manipulation-- jedziemy zacząć od razu, co fajne rzeczy. 17 00:00:58,700 --> 00:01:01,240 Przede wszystkim, po lewej stronie, mamy kodu. 18 00:01:01,240 --> 00:01:03,470 Po prawej stronie mamy Wynik naszego kodu. 19 00:01:03,470 --> 00:01:04,900 Przejdźmy przez to. 20 00:01:04,900 --> 00:01:05,780 >> Zróbmy koło. 21 00:01:05,780 --> 00:01:08,570 Jak to brzmi? 22 00:01:08,570 --> 00:01:14,934 svg.append circle-- po prostu się koło. 23 00:01:14,934 --> 00:01:16,100 Nie wierzysz mi, prawda? 24 00:01:16,100 --> 00:01:18,190 To nie istnieje. 25 00:01:18,190 --> 00:01:21,830 >> Więc to, co zrobiliśmy tu jest, SVG jest skalowalne grafiki wektorowej. 26 00:01:21,830 --> 00:01:27,530 To jest sposób, w jaki poinformować przeglądarkę, aby dokonać grafiki wektorowej w przeglądarce. 27 00:01:27,530 --> 00:01:30,740 Co nam po prostu nie teraz dodano okrąg przeglądania. 28 00:01:30,740 --> 00:01:34,790 >> Obietnica, że ​​koła wymaga trochę podstawowych atrybutów 29 00:01:34,790 --> 00:01:36,850 zanim będziemy mogli to obejrzeć. 30 00:01:36,850 --> 00:01:40,045 Musimy powiedzieć, że swoją pozycję x, jego pozycja y, jej promień. 31 00:01:40,045 --> 00:01:43,310 My go nie powiedzieć nic z tego, więc nie widzisz go teraz. 32 00:01:43,310 --> 00:01:46,210 Ale powiedzmy to rzeczy. 33 00:01:46,210 --> 00:01:49,510 >> Więc przede wszystkim, że masz aby dać naszym kręgu nazwę. 34 00:01:49,510 --> 00:01:53,070 Więc nazwijmy to koło. 35 00:01:53,070 --> 00:01:54,406 Nasze koło ma nazwę teraz. 36 00:01:54,406 --> 00:01:57,230 37 00:01:57,230 --> 00:01:59,490 I dajmy mu kilka atrybutów. 38 00:01:59,490 --> 00:02:03,690 Jak o cx skupiać x, więc Środek pozycji X. 39 00:02:03,690 --> 00:02:06,730 Powiedzmy, 200 na 200 pikseli. 40 00:02:06,730 --> 00:02:10,220 >> Dajmy mu y 200 pikseli, jak również. 41 00:02:10,220 --> 00:02:16,032 I r, promień, około 40 pikseli. 42 00:02:16,032 --> 00:02:16,950 Teraz zobaczmy. 43 00:02:16,950 --> 00:02:21,740 44 00:02:21,740 --> 00:02:23,440 Nie mogę przeliterować. 45 00:02:23,440 --> 00:02:30,430 46 00:02:30,430 --> 00:02:31,520 >> Proszę bardzo. 47 00:02:31,520 --> 00:02:37,330 Mamy okrąg w pozycji 200 pikseli, 200 pikseli, promień 40 pikseli. 48 00:02:37,330 --> 00:02:38,280 Niby fajne, prawda? 49 00:02:38,280 --> 00:02:38,988 Mamy koło. 50 00:02:38,988 --> 00:02:40,880 Tak. 51 00:02:40,880 --> 00:02:42,670 >> Więc nie trzeba podążać. 52 00:02:42,670 --> 00:02:45,790 We wszystkich tych przykładach, wszystkie Kod robię dziś 53 00:02:45,790 --> 00:02:51,300 będzie dostępna w Internecie na koniec w postaci interaktywnych przykłady 54 00:02:51,300 --> 00:02:54,010 z punktów kontrolnych w każdy akt, i tak dalej. 55 00:02:54,010 --> 00:02:55,160 >> Zróbmy więcej rzeczy. 56 00:02:55,160 --> 00:02:58,901 Ten czarny okrąg jest naprawdę brzydki. 57 00:02:58,901 --> 00:03:01,541 Przykro mi z powodu tego błędu Komunikaty tam. 58 00:03:01,541 --> 00:03:05,340 Nie idziemy. 59 00:03:05,340 --> 00:03:06,350 >> Dajmy mu kolor. 60 00:03:06,350 --> 00:03:07,170 Jak to jest? 61 00:03:07,170 --> 00:03:08,340 Lubię stalowego błękitu. 62 00:03:08,340 --> 00:03:13,280 63 00:03:13,280 --> 00:03:16,030 Cóż, nasz krąg zmienił kolor. 64 00:03:16,030 --> 00:03:17,320 To świetnie. 65 00:03:17,320 --> 00:03:31,330 Zróbmy to półprzezroczyste too-- półprzezroczyste. 66 00:03:31,330 --> 00:03:33,670 >> Więc to są atrybuty mamy do zdefiniowania na okręgu. 67 00:03:33,670 --> 00:03:36,774 Pierwszą rzeczą, jaką zrobiliśmy to kładziemy koło na stronie. 68 00:03:36,774 --> 00:03:38,690 A potem mamy definiowania kilka atrybutów. 69 00:03:38,690 --> 00:03:41,610 Niektóre z nich są wymagane jak CX, CY, i Radius. 70 00:03:41,610 --> 00:03:42,680 A inne są opcjonalne. 71 00:03:42,680 --> 00:03:44,730 >> Istnieje wiele więcej atrybutów. 72 00:03:44,730 --> 00:03:46,760 Istnieje wiele z nich. 73 00:03:46,760 --> 00:03:53,070 Na przykład, może to mieć udar mózgu, jak również, skok czerwony. 74 00:03:53,070 --> 00:03:55,630 Ale to usunięcie. 75 00:03:55,630 --> 00:04:00,450 Wracamy do okręgu, niebieskie koło. 76 00:04:00,450 --> 00:04:01,600 >> Więc zróbmy więcej okręgów. 77 00:04:01,600 --> 00:04:02,810 Jak to jest? 78 00:04:02,810 --> 00:04:04,665 Zróbmy kolejny krąg. 79 00:04:04,665 --> 00:04:05,985 To jest ekscytujące, prawda? 80 00:04:05,985 --> 00:04:09,630 81 00:04:09,630 --> 00:04:12,300 >> Więc powiedzieć, że po prostu skopiowali stamtąd co mieliśmy już. 82 00:04:12,300 --> 00:04:13,570 Nazwijmy to circle2. 83 00:04:13,570 --> 00:04:15,840 I zróbmy dokładny samo i dać go 84 00:04:15,840 --> 00:04:20,450 atrybuty, zważywszy Pozycja X 300. 85 00:04:20,450 --> 00:04:24,140 Yay, mamy dwa okręgi teraz. 86 00:04:24,140 --> 00:04:27,240 >> Oczywiście, moglibyśmy zaktualizować te wartości. 87 00:04:27,240 --> 00:04:31,640 I może umieścić go na 400, a teraz porusza. 88 00:04:31,640 --> 00:04:35,470 A ponieważ jest to irytujące, niech wyjmij go, więc circle2.remove. 89 00:04:35,470 --> 00:04:39,000 90 00:04:39,000 --> 00:04:40,730 To już nie ma. 91 00:04:40,730 --> 00:04:43,170 >> Więc to, co robimy i jest po prostu bardzo, very-- tego 92 00:04:43,170 --> 00:04:46,030 jest bardzo podobny do tego, co może zrobić w jQuery, na przykład. 93 00:04:46,030 --> 00:04:48,240 Jesteśmy po prostu manipulacji DOM, to się nazywa. 94 00:04:48,240 --> 00:04:50,040 Być może słyszał to słowo. 95 00:04:50,040 --> 00:04:53,255 Tworzymy rzeczy, ustawienie przypisuje się na rzeczy, usuwając rzeczy. 96 00:04:53,255 --> 00:04:58,950 97 00:04:58,950 --> 00:05:02,360 >> Teraz, tutaj, gdzie robi się ciekawie. 98 00:05:02,360 --> 00:05:07,250 Więc później w kodzie, moglibyśmy nadal odnosi się do pierwotnego kręgu tutaj. 99 00:05:07,250 --> 00:05:14,100 Warto więc przywrócić jego atrybut cx. 100 00:05:14,100 --> 00:05:18,260 Powiedzmy, jego pozycja do 400 x. 101 00:05:18,260 --> 00:05:22,406 I mam zamiar przejścia że tak, to oczywiste. 102 00:05:22,406 --> 00:05:23,360 Nie idziemy. 103 00:05:23,360 --> 00:05:24,780 >> Tak więc dodaliśmy koło. 104 00:05:24,780 --> 00:05:26,440 Stawiamy pewne atrybuty. 105 00:05:26,440 --> 00:05:28,210 Dodaliśmy kolejny krąg, usunąć go. 106 00:05:28,210 --> 00:05:31,650 A potem mamy modyfikacji oryginalne koło. 107 00:05:31,650 --> 00:05:35,400 >> Ale tu, gdzie robi Dużo bardziej interesujące. 108 00:05:35,400 --> 00:05:39,070 Nie tylko możemy ustawić atrybuty jak właśnie wartości, można powiedzieć, 109 00:05:39,070 --> 00:05:41,610 hej, koło, przejdź do pozycji 200. 110 00:05:41,610 --> 00:05:44,540 Możemy także ustawić je jako funkcje. 111 00:05:44,540 --> 00:05:48,850 >> Więc zamiast dawać 400 tutaj, możemy dokonać pewnych obliczeń 112 00:05:48,850 --> 00:05:53,950 w locie na to, co chce, że atrybut będzie. 113 00:05:53,950 --> 00:05:56,580 Tak to jest jak chcesz wyrazić, że. 114 00:05:56,580 --> 00:06:00,660 Mówimy, zamiast 400, pozwól mi dać funkcji zamiast. 115 00:06:00,660 --> 00:06:04,180 I tu, wewnątrz tej funkcji, możemy wykonać dowolny szalony obliczenia. 116 00:06:04,180 --> 00:06:06,820 >> Możemy trochę czasu i spojrzeć na coś innego 117 00:06:06,820 --> 00:06:11,230 i dynamicznie zdecydować koło, jakie wartości chcemy. 118 00:06:11,230 --> 00:06:15,266 Jak się po prostu dać Stanowisko to losowa x? 119 00:06:15,266 --> 00:06:20,360 120 00:06:20,360 --> 00:06:21,120 Więc to jest to. 121 00:06:21,120 --> 00:06:25,490 >> Więc co to mówi, jest dla co x, uruchomić tę funkcję. 122 00:06:25,490 --> 00:06:29,340 A to, co robimy jest obliczania pewne rzeczy, a przypadkowe razy szerokość 123 00:06:29,340 --> 00:06:30,410 i powrót tego. 124 00:06:30,410 --> 00:06:34,765 Dlatego za każdym razem prowadzimy, że mamy okrąg, że idzie do przypadkowym miejscu. 125 00:06:34,765 --> 00:06:36,394 To trochę chłodu. 126 00:06:36,394 --> 00:06:38,310 Czuję się jak mogłem patrzeć na to za mało. 127 00:06:38,310 --> 00:06:44,274 128 00:06:44,274 --> 00:06:46,440 Zaczynamy dostać się do coś tu interesujące. 129 00:06:46,440 --> 00:06:49,120 130 00:06:49,120 --> 00:06:51,390 Zróbmy to dane napędzany teraz. 131 00:06:51,390 --> 00:06:53,420 Nie ma danych tutaj. 132 00:06:53,420 --> 00:06:54,482 Zmieńmy to. 133 00:06:54,482 --> 00:06:57,440 134 00:06:57,440 --> 00:07:12,140 >> Akt II, danych Driven Documents-- Więc wróćmy do tutaj. 135 00:07:12,140 --> 00:07:15,340 I niech po prostu pozbyć circle2, bo my po prostu dodawanie i usuwanie 136 00:07:15,340 --> 00:07:15,840 go. 137 00:07:15,840 --> 00:07:17,382 Tak naprawdę nie jest to potrzebne. 138 00:07:17,382 --> 00:07:21,421 Musimy być bardziej sprytny tutaj. 139 00:07:21,421 --> 00:07:23,170 Powiedzmy, że mamy niektóre dane z pewnego rodzaju. 140 00:07:23,170 --> 00:07:31,540 141 00:07:31,540 --> 00:07:40,020 Moment-- Jeden powiedzmy, mieliśmy dane z tego formularza. 142 00:07:40,020 --> 00:07:41,800 Mieliśmy tablicę, po prostu kilka numerów. 143 00:07:41,800 --> 00:07:45,750 Mamy tu siedem liczb, co to represent-- ilość 144 00:07:45,750 --> 00:07:48,810 konta bankowego, ludzi, jak ważą, bóg wie co. 145 00:07:48,810 --> 00:07:51,310 >> Są to numery, a my Aby korzystać z naszych kręgów 146 00:07:51,310 --> 00:07:53,240 do reprezentowania tych liczb jakoś. 147 00:07:53,240 --> 00:07:55,515 Chcemy związać NASZEGO kółka do tych numerów. 148 00:07:55,515 --> 00:07:58,750 149 00:07:58,750 --> 00:07:59,626 Więc to, co robimy. 150 00:07:59,626 --> 00:08:01,500 Powiedzmy, że chcemy Koło dla każdej liczby. 151 00:08:01,500 --> 00:08:03,590 Moglibyśmy zrobić stare rzeczą byliśmy doing-- 152 00:08:03,590 --> 00:08:06,020 Koło dołączania i circle2 i circle3. 153 00:08:06,020 --> 00:08:10,020 Ale to wymknie się spod kontroli, a istnieje wiele powtarzających się logiki. 154 00:08:10,020 --> 00:08:12,760 >> Więc przejdźmy sprytniejsi z tym. 155 00:08:12,760 --> 00:08:17,810 Zamiast korzystać z okręgu var svg.append, że byliśmy tylko za pomocą, 156 00:08:17,810 --> 00:08:21,580 będziemy korzystać ten mały blok tutaj. 157 00:08:21,580 --> 00:08:24,510 Nie chcę iść na głębokości w to, co wszystkie te części nie. 158 00:08:24,510 --> 00:08:26,020 I jest to rodzaj zaawansowanego tematu. 159 00:08:26,020 --> 00:08:27,830 I wish I could. 160 00:08:27,830 --> 00:08:31,370 >> Ale kluczem jest, aby recognize-- i zobaczysz, jest bardzo często w kodzie D3. 161 00:08:31,370 --> 00:08:36,840 Ten blok tekstu podstawowego tworzy tak wielu środowisk 162 00:08:36,840 --> 00:08:41,360 jak są elementy danych w tej tablicy w prawo tutaj. 163 00:08:41,360 --> 00:08:53,420 164 00:08:53,420 --> 00:08:55,780 Więc to tworzy tak wielu koła jak istnieją elementy. 165 00:08:55,780 --> 00:08:58,520 To się stworzyć nam siedem okręgów. 166 00:08:58,520 --> 00:09:01,710 I robi się naprawdę kluczową rzeczą. 167 00:09:01,710 --> 00:09:02,460 Więc uruchom to. 168 00:09:02,460 --> 00:09:05,460 Miejmy usunąć inne nasze koło. 169 00:09:05,460 --> 00:09:09,565 Miejmy tylko skomentować ten rozstać się i uruchomić to ponownie. 170 00:09:09,565 --> 00:09:13,840 171 00:09:13,840 --> 00:09:15,260 >> Nie idziemy. 172 00:09:15,260 --> 00:09:18,030 Więc nasze grono o to dużo ciemniejszy, bo my 173 00:09:18,030 --> 00:09:20,720 siedem okręgów, jeden na wierzchu drugiej. 174 00:09:20,720 --> 00:09:25,425 Po prostu stworzył siedem okręgów, jeden każdy z każdym z tych elementów danych. 175 00:09:25,425 --> 00:09:28,860 Ale jest rzeczą, że stało się kluczowym z tym fragmencie tutaj. 176 00:09:28,860 --> 00:09:31,030 >> To, że dane związane. 177 00:09:31,030 --> 00:09:33,440 Tak więc każdy z te elementy danych, 178 00:09:33,440 --> 00:09:38,830 10, 45, 105, był związany w szczególności koła. 179 00:09:38,830 --> 00:09:40,960 Więc to nie tylko stworzył kilka kręgów 180 00:09:40,960 --> 00:09:43,420 ale łączy te dwie rzeczy razem. 181 00:09:43,420 --> 00:09:48,740 >> I w przyszłości, ponieważ utworzone te koła z tej funkcji D3, 182 00:09:48,740 --> 00:09:52,430 jeśli dam ci koło, można daj mi dane z nim związane. 183 00:09:52,430 --> 00:09:53,280 Możemy więc zapytać, D3. 184 00:09:53,280 --> 00:09:54,840 Hej, D3, mam ten krąg. 185 00:09:54,840 --> 00:09:57,350 Co znajduje się dane, że koło ma? 186 00:09:57,350 --> 00:10:01,290 I D3 powie nam 10 lub 45 lub 105. 187 00:10:01,290 --> 00:10:02,380 >> Te rzeczy są powiązane. 188 00:10:02,380 --> 00:10:04,490 To jest bardzo, bardzo podstawowe pojęcie. 189 00:10:04,490 --> 00:10:06,070 Spójrzmy na to. 190 00:10:06,070 --> 00:10:12,210 >> Więc sposób chcemy zwrócić D3-- tak to nie ma znaczenia dla tego, 191 00:10:12,210 --> 00:10:16,620 ale po prostu zaufaj mi na nim. 192 00:10:16,620 --> 00:10:17,620 W ten sposób prosimy D3. 193 00:10:17,620 --> 00:10:21,312 Hej, D3, daj mi pierwszy koło, które można znaleźć. 194 00:10:21,312 --> 00:10:23,580 Daj mi pierwszy krąg można znaleźć. 195 00:10:23,580 --> 00:10:29,660 I wtedy możemy zapytać D3, co jest Dane na ten temat, jak to, 10. 196 00:10:29,660 --> 00:10:33,380 >> Więc po prostu zapytać, D3, znaleźć mnie Pierwszy krąg można znaleźć. 197 00:10:33,380 --> 00:10:34,400 Co znajduje się jego dane? 198 00:10:34,400 --> 00:10:36,650 10, który jest wręcz naszym Pierwszy element danych. 199 00:10:36,650 --> 00:10:42,150 Możemy go zapytać, hej, D3, znaleźć nam nasz trzeci krąg. 200 00:10:42,150 --> 00:10:44,450 105. 201 00:10:44,450 --> 00:10:45,740 Dlaczego jest to naprawdę ważne? 202 00:10:45,740 --> 00:10:49,790 203 00:10:49,790 --> 00:10:52,250 >> Więc tutaj, wspomniałem że możemy korzystać z funkcji. 204 00:10:52,250 --> 00:10:54,910 A mówiłem, że był bardzo silny rzeczą. 205 00:10:54,910 --> 00:11:03,070 Więc może nie tylko nasze funkcje robienia rzeczy jak zrobić kilka obliczeń, na przykład, 206 00:11:03,070 --> 00:11:09,170 powrót liczby losowej, można również robić rzeczy, na podstawie danych. 207 00:11:09,170 --> 00:11:11,550 To jest to, co dane napędzane dokumenty chodzi. 208 00:11:11,550 --> 00:11:13,750 To, co wyróżnia D3 dla. 209 00:11:13,750 --> 00:11:17,800 >> Więc zamiast tego x postition-- po prostu mówiąc, wszystkie koła, 210 00:11:17,800 --> 00:11:21,735 uzyskać x pozycję 200, mamy może dać mu funkcję. 211 00:11:21,735 --> 00:11:26,140 212 00:11:26,140 --> 00:11:30,140 I tutaj możemy poczynić pewne obliczenia. 213 00:11:30,140 --> 00:11:33,710 d tutaj stoi w miejscu dla danych. 214 00:11:33,710 --> 00:11:36,120 Dlatego za każdym razem mamy koło, w zasadzie, 215 00:11:36,120 --> 00:11:37,750 D3 stworzy te siedem okręgów. 216 00:11:37,750 --> 00:11:38,500 A następnie dla każdego 217 00:11:38,500 --> 00:11:41,920 >> koło, to pójdzie, hej, CYRK1 jaka jest twoja pozycja x. 218 00:11:41,920 --> 00:11:45,210 Wcześniej byliśmy Zawsze odpowiadając 200. 219 00:11:45,210 --> 00:11:48,630 Ale teraz, za każdym razem pyta D3 nam co jest pozycja x, 220 00:11:48,630 --> 00:11:51,790 to nic nie da us-- mamy że koło, więc mamy dane. 221 00:11:51,790 --> 00:11:55,290 To da nam dane i powiedzieć, co chcesz Ekspozycja będzie, 222 00:11:55,290 --> 00:11:57,120 na podstawie tych danych. 223 00:11:57,120 --> 00:11:59,590 >> Niech tylko wrócić rzeczywiste dane. 224 00:11:59,590 --> 00:12:04,910 Jeśli więc uruchomić to, co daje Dane z USA napędzane dokumentów. 225 00:12:04,910 --> 00:12:08,040 Kręgi te są oparte w relacji position-- 226 00:12:08,040 --> 00:12:11,120 są zasady w funkcji danych. 227 00:12:11,120 --> 00:12:13,100 >> Tak więc w pierwszym kręgu D3 stawia koło. 228 00:12:13,100 --> 00:12:16,770 A potem D3 prosi nas, co robić chcesz Ekspozycja będzie. 229 00:12:16,770 --> 00:12:19,620 A my po prostu powiedzieć, co dane. 230 00:12:19,620 --> 00:12:21,185 Dodać ekspozycję 10. 231 00:12:21,185 --> 00:12:26,320 >> Następnie pyta, co chcesz Ekspozycja jest do drugiego koła. 232 00:12:26,320 --> 00:12:27,270 A my odpowiadamy, 45. 233 00:12:27,270 --> 00:12:30,000 234 00:12:30,000 --> 00:12:32,230 A my, oczywiście, może się tu obliczenia. 235 00:12:32,230 --> 00:12:35,510 Uważam, że te kręgi są trochę spłaszczony się. 236 00:12:35,510 --> 00:12:38,965 >> Tak więc pomnożyć przez 3, mnożenie danych przez 3. 237 00:12:38,965 --> 00:12:41,870 238 00:12:41,870 --> 00:12:43,840 Nasz krąg prostu się rozszerzył się. 239 00:12:43,840 --> 00:12:46,730 Nasza wartość została trzykrotnie. 240 00:12:46,730 --> 00:12:51,010 >> Koło jest naprawdę na krawędzi, więc niech to może i rodzaj przesunięcie go. 241 00:12:51,010 --> 00:12:53,632 Powiedzmy, przez 20. 242 00:12:53,632 --> 00:12:56,070 Proszę bardzo. 243 00:12:56,070 --> 00:12:57,590 >> Jest wizualizacja danych. 244 00:12:57,590 --> 00:13:01,767 To bardzo proste, jedno, ale to daje nam wgląd w nasze dane. 245 00:13:01,767 --> 00:13:04,600 Która głosi, że na przykładzie mieć mały klaster elementów. 246 00:13:04,600 --> 00:13:06,340 I tu mamy duży odrębne stanowisko. 247 00:13:06,340 --> 00:13:10,830 To daje nam informacje o dystrybucji. 248 00:13:10,830 --> 00:13:20,830 >> Jeśli są, na przykład, aby zmienić dane do 150 tutaj i odświeżenia, 249 00:13:20,830 --> 00:13:22,630 nasza wizualizacja zostanie zmieniona. 250 00:13:22,630 --> 00:13:24,285 Dokument ten jest napędzany danych. 251 00:13:24,285 --> 00:13:32,640 252 00:13:32,640 --> 00:13:36,180 >> Tak oczywiście, wszystkie te elementy, te wszystkie atrybuty, tutaj 253 00:13:36,180 --> 00:13:38,430 możemy skorzystać z funkcji, nie tylko liczby, a nie tylko 254 00:13:38,430 --> 00:13:39,900 X i Y pozycji. 255 00:13:39,900 --> 00:13:42,120 Tak więc możemy użyć funkcji do koloru. 256 00:13:42,120 --> 00:13:45,260 257 00:13:45,260 --> 00:13:46,360 Więc robimy to samo. 258 00:13:46,360 --> 00:13:49,360 Damy mu funkcję. 259 00:13:49,360 --> 00:13:52,320 >> I powiedzmy, możemy mieć warunkowe w naszej funkcji. 260 00:13:52,320 --> 00:13:54,770 Funkcja ta może być stu linii długich. 261 00:13:54,770 --> 00:13:57,150 To może zrobić bardzo, bardzo skomplikowane rzeczy. 262 00:13:57,150 --> 00:13:59,080 >> Więc postawmy się, jeśli stwierdzę. 263 00:13:59,080 --> 00:14:03,420 Powiedzmy, jeśli nasze dane są mniej niż 50, to jest jakiś próg 264 00:14:03,420 --> 00:14:05,817 że jesteśmy zainteresowani z jakiegoś powodu. 265 00:14:05,817 --> 00:14:06,650 Zróbmy to na zielono. 266 00:14:06,650 --> 00:14:09,830 267 00:14:09,830 --> 00:14:15,320 W przeciwnym razie, zróbmy go na czerwono. 268 00:14:15,320 --> 00:14:16,110 Jak to jest? 269 00:14:16,110 --> 00:14:19,630 270 00:14:19,630 --> 00:14:21,220 Ładny. 271 00:14:21,220 --> 00:14:24,860 >> Więc nasza wizualizacja danych zaczyna przekazać więcej ciekawych informacji 272 00:14:24,860 --> 00:14:26,727 na wielu kanałach. 273 00:14:26,727 --> 00:14:28,560 Więc teraz wiemy trochę o dystrybucji. 274 00:14:28,560 --> 00:14:31,768 I wiemy, że istnieje jakiś obcięte na 50, że jesteśmy zainteresowani. 275 00:14:31,768 --> 00:14:35,630 Wiemy, że są dwa punkty danych poniżej tego progu, a większość z nich 276 00:14:35,630 --> 00:14:36,130 powyżej. 277 00:14:36,130 --> 00:14:41,510 278 00:14:41,510 --> 00:14:46,160 >> Tak więc, w końcowej fazie, dane tutaj to bardzo rzadko zdarza się zobaczyć tak. 279 00:14:46,160 --> 00:14:52,610 Więc po prostu przenieść go do zmiennej bo to jest czystsze, tak. 280 00:14:52,610 --> 00:15:02,980 281 00:15:02,980 --> 00:15:05,197 A potem będziemy używać tej zmiennej. 282 00:15:05,197 --> 00:15:06,280 To jest dokładnie to samo. 283 00:15:06,280 --> 00:15:07,280 To jest po prostu nieco czystsze. 284 00:15:07,280 --> 00:15:25,300 285 00:15:25,300 --> 00:15:35,300 >> Następna w kolejce, Akt III, Scales-- Tak więc jeden problem w prawo 286 00:15:35,300 --> 00:15:38,920 tutaj jest, jeśli zmienimy nasze Dane w tym 200 value-- 287 00:15:38,920 --> 00:15:41,685 jeśli zmienimy ją do 400 czy coś i odświeżania, 288 00:15:41,685 --> 00:15:44,540 to wartość ta po prostu poszedł poza ekranem. 289 00:15:44,540 --> 00:15:49,040 Więc nasza logika tutaj od tego, jak robimy to razy 3 290 00:15:49,040 --> 00:15:52,570 i 20, do rozprzestrzeniania go, a następnie Przesunięcie to nieco jest naprawdę niezgrabne. 291 00:15:52,570 --> 00:15:54,150 >> Co te liczby oznaczają? 292 00:15:54,150 --> 00:15:55,400 Oni po prostu na sztywno tam. 293 00:15:55,400 --> 00:15:58,830 I są bardzo przywiązane do danych. 294 00:15:58,830 --> 00:16:00,550 Chcemy danych napędzane dokument. 295 00:16:00,550 --> 00:16:05,460 Chcemy bardzo elastyczny dokument, że podanych danych, dostosowuje się do niego 296 00:16:05,460 --> 00:16:07,900 i reprezentuje ją. 297 00:16:07,900 --> 00:16:11,330 >> Co to w zasadzie wystarczy, że mają ten zakres numerów 10. 298 00:16:11,330 --> 00:16:12,640 45, 105. 299 00:16:12,640 --> 00:16:17,630 I chcemy map, które wychodzą Szerokość, pełna szerokość tutaj. 300 00:16:17,630 --> 00:16:20,620 Mamy więc wybór Numery przechodząc od 0 do 100. 301 00:16:20,620 --> 00:16:24,980 I mamy to idzie mi kampusu od 20 do 700, w tym przypadku. 302 00:16:24,980 --> 00:16:26,515 >> W pewien sposób mapować, że na. 303 00:16:26,515 --> 00:16:30,002 Chcemy, aby skalować, że i następnie przesunięcie go trochę. 304 00:16:30,002 --> 00:16:33,165 Okazuje się, że D3 ma ich. 305 00:16:33,165 --> 00:16:34,220 To się nazywa skalę. 306 00:16:34,220 --> 00:16:37,410 307 00:16:37,410 --> 00:16:38,250 Więc użyjmy go. 308 00:16:38,250 --> 00:16:46,300 309 00:16:46,300 --> 00:16:49,670 >> Sposób, że works-- zamierzam wpisz to w górę, a następnie wyjaśnić. 310 00:16:49,670 --> 00:17:01,530 311 00:17:01,530 --> 00:17:02,450 To jest skala. 312 00:17:02,450 --> 00:17:08,670 Co to będzie zrobić, to będzie nakreślenie Wartości od 1 do 200 w celu 20 600. 313 00:17:08,670 --> 00:17:10,990 Możemy sprawdzić, że. 314 00:17:10,990 --> 00:17:13,329 Widzimy, że tutaj. 315 00:17:13,329 --> 00:17:21,704 >> Więc jeśli karmię go 1-- jednej chwili. 316 00:17:21,704 --> 00:17:47,764 317 00:17:47,764 --> 00:17:48,555 Daj mi chwilę. 318 00:17:48,555 --> 00:17:53,680 319 00:17:53,680 --> 00:17:55,080 Muszę literówka go. 320 00:17:55,080 --> 00:18:15,320 321 00:18:15,320 --> 00:18:15,990 Proszę bardzo. 322 00:18:15,990 --> 00:18:17,930 Przykro mi o tym. 323 00:18:17,930 --> 00:18:22,050 >> Więc co zrobi skali jest, to zajmie wartość 324 00:18:22,050 --> 00:18:24,930 a następnie przekonwertować, rozwiń że obecnie, więc 325 00:18:24,930 --> 00:18:27,320 wypełnia pełną gamę prosisz. 326 00:18:27,320 --> 00:18:32,910 Więc w tym przypadku, jeśli damy jej jednego, to będzie na mapie, że obecnie na 20. 327 00:18:32,910 --> 00:18:37,750 A jeśli damy mu 200, to Mapa, że ​​będzie na 600. 328 00:18:37,750 --> 00:18:40,460 I gdzieś pomiędzy, jeśli mamy 100, to 329 00:18:40,460 --> 00:18:44,610 będzie gdzieś pomiędzy 20 i 600. 330 00:18:44,610 --> 00:18:51,480 >> I oczywiście, teraz jest to co musimy usunąć te zakodowanego 331 00:18:51,480 --> 00:18:53,402 rzeczy mamy tam. 332 00:18:53,402 --> 00:18:55,950 Więc to, co chcemy zrobić, to wziąć dane, że jesteśmy 333 00:18:55,950 --> 00:19:00,950 biorąc pod uwagę, że indywidualne dane elementem, i przekazać go do skalowania pierwszy. 334 00:19:00,950 --> 00:19:02,635 Tak więc skala będzie skalować się. 335 00:19:02,635 --> 00:19:27,020 336 00:19:27,020 --> 00:19:48,880 >> Well-- Och, mamy tu mały błąd. 337 00:19:48,880 --> 00:19:50,120 Jesteśmy brakujących danych. 338 00:19:50,120 --> 00:19:51,290 Proszę bardzo. 339 00:19:51,290 --> 00:19:58,550 340 00:19:58,550 --> 00:19:59,550 I że rozszerza ją. 341 00:19:59,550 --> 00:20:01,383 >> To daje nam sam Wynik mieliśmy wcześniej, 342 00:20:01,383 --> 00:20:04,030 ale zamiast tych zakodowana ograniczeń. 343 00:20:04,030 --> 00:20:07,790 A jeśli wielkość naszego Zmiany płótno, na przykład, 344 00:20:07,790 --> 00:20:11,790 jeśli chcemy mieć nad tym 400 pikseli i jest squishes się, 345 00:20:11,790 --> 00:20:15,440 może mamy go over-- możemy ją poszerzyć, albo my 346 00:20:15,440 --> 00:20:21,890 może zmniejszyć ten lewy margines czymś więcej lub mniej niż 20. 347 00:20:21,890 --> 00:20:25,470 Te liczby, to trudno kodowane numery teraz sensu do nas. 348 00:20:25,470 --> 00:20:28,110 349 00:20:28,110 --> 00:20:30,520 >> I możemy zrobić o wiele więcej ciekawe rzeczy, jak również. 350 00:20:30,520 --> 00:20:35,990 Tak więc zamiast liniowego skalę, może chcemy, aby zalogować się skalą. 351 00:20:35,990 --> 00:20:37,840 I to da nam w skali logarytmicznej. 352 00:20:37,840 --> 00:20:41,269 >> Więc teraz nasza skalę, zamiast po prostu rozwija się ten zakres, 353 00:20:41,269 --> 00:20:42,810 to robić bardziej zaawansowane rzeczy. 354 00:20:42,810 --> 00:20:48,790 355 00:20:48,790 --> 00:20:53,790 Zamiast tego zakresu trudne kodowane i zamiast tego 600, 356 00:20:53,790 --> 00:20:58,465 może chcemy po prostu użyć szerokość, Tak więc od 20 do szerokości minus 40 357 00:20:58,465 --> 00:21:02,392 2 razy marży na drugiej stronie. 358 00:21:02,392 --> 00:21:05,350 A to sprawia, że ​​o wiele więcej sensu ktoś, kto może spojrzeć na kod. 359 00:21:05,350 --> 00:21:08,080 360 00:21:08,080 --> 00:21:11,850 >> Co ciekawe, waga się bardzo, bardzo wyrafinowane, jak również. 361 00:21:11,850 --> 00:21:13,350 Robią wiele ciekawych rzeczy. 362 00:21:13,350 --> 00:21:17,620 Więc wagi nie muszą działać tylko z numerami. 363 00:21:17,620 --> 00:21:18,955 Zróbmy skalę kolorów. 364 00:21:18,955 --> 00:21:23,120 365 00:21:23,120 --> 00:21:26,120 >> Tak więc nasza oferta może być: Naszą domeną jest od 1 do 200. 366 00:21:26,120 --> 00:21:28,220 To jest rzecz, wejście. 367 00:21:28,220 --> 00:21:33,793 Ale może chcemy mapować zielonego na czerwony, na przykład. 368 00:21:33,793 --> 00:21:39,710 369 00:21:39,710 --> 00:21:42,910 A teraz, jeśli to jeden przejść, mamy zamiar dostać się na zielono. 370 00:21:42,910 --> 00:21:45,110 Jeśli damy mu 200, my się na czerwono. 371 00:21:45,110 --> 00:21:49,480 A jeśli mijamy to coś pomiędzy, to będzie jakieś połączenie, które, 372 00:21:49,480 --> 00:21:52,520 gdzie w gradiencie między zielonym i czerwonym. 373 00:21:52,520 --> 00:21:55,210 >> I zamiast ten rodzaj logiki przylegający 374 00:21:55,210 --> 00:21:58,550 mamy tu z Warunkowe prawo tam, 375 00:21:58,550 --> 00:22:03,250 możemy mieć something-- liniową skalę między tymi. 376 00:22:03,250 --> 00:22:07,100 Więc chcemy użyć skali po prostu stworzony, które nazwaliśmy kolor. 377 00:22:07,100 --> 00:22:09,060 I damy mu d, które jest nasz element danych. 378 00:22:09,060 --> 00:22:14,250 379 00:22:14,250 --> 00:22:15,060 A tam idziemy. 380 00:22:15,060 --> 00:22:18,070 Mamy skalę kolorów. 381 00:22:18,070 --> 00:22:18,940 >> Więc to jest mapowanie. 382 00:22:18,940 --> 00:22:20,960 Więc po lewej stronie jest całkowicie zielony. 383 00:22:20,960 --> 00:22:22,560 Prawej jest cały czerwony. 384 00:22:22,560 --> 00:22:24,828 I wszystko pomiędzy jest funkcją d. 385 00:22:24,828 --> 00:22:33,369 386 00:22:33,369 --> 00:22:35,160 Mamy ciekawe wizualizacje tutaj. 387 00:22:35,160 --> 00:22:36,952 Ale nasze dane było trochę nudne. 388 00:22:36,952 --> 00:22:39,410 Zobaczmy, co możemy zrobić, jeśli mieliśmy więcej ciekawych danych. 389 00:22:39,410 --> 00:22:44,420 390 00:22:44,420 --> 00:22:50,500 >> Akt IV, Praca z Data-- pierwszą rzeczą, 391 00:22:50,500 --> 00:22:53,560 będziemy chcieli zrobić, aby nasze wizualizacja ciekawsze 392 00:22:53,560 --> 00:22:56,140 jest przeniesienie danych gdzieś indziej. 393 00:22:56,140 --> 00:22:58,310 To bardzo niezgrabne mieć dane zapisane na stałe tutaj. 394 00:22:58,310 --> 00:23:01,220 I ogólnie, będziemy pytać ktoś dla danych. 395 00:23:01,220 --> 00:23:05,400 Będziemy być może z prośbą do rządu, Census Bureau, co jest dane 396 00:23:05,400 --> 00:23:10,170 a następnie wykreślenie tego lub prosząc niektóre podmiotu trzeciego do niektórych danych 397 00:23:10,170 --> 00:23:13,330 a następnie budowę wizualizacja na tym. 398 00:23:13,330 --> 00:23:17,170 >> Więc pierwszą rzeczą, jaką chcemy zrobić jest poruszać, że gdzieś indziej. 399 00:23:17,170 --> 00:23:24,130 Więc mam zamiar stworzyć plik o nazwie data.json. 400 00:23:24,130 --> 00:23:25,600 JSON jest formatem danych. 401 00:23:25,600 --> 00:23:29,210 Nie musisz wiedzieć dużo o tym. 402 00:23:29,210 --> 00:23:33,210 I mamy zamiar skopiować Trochę danych mamy tam, 403 00:23:33,210 --> 00:23:40,330 wklej go tam dosłownie iść z powrotem do naszego kodu wizualizacji 404 00:23:40,330 --> 00:23:45,362 tutaj, i korzystać z tej funkcji tutaj. 405 00:23:45,362 --> 00:23:46,820 Nie musisz znać szczegóły. 406 00:23:46,820 --> 00:23:49,800 Ale co to zrobi to, znajdzie tego pliku, 407 00:23:49,800 --> 00:23:51,780 pobrać go i odesłać go do nas. 408 00:23:51,780 --> 00:24:11,660 409 00:24:11,660 --> 00:24:15,220 Więc co to robi to, to idzie i pobrać plik data.json. 410 00:24:15,220 --> 00:24:18,570 A potem cały kod to wcięty inside-- zasadniczo, 411 00:24:18,570 --> 00:24:21,800 wszystkie Kod mamy there-- będzie uruchomić tylko wtedy, gdy mamy dane z powrotem. 412 00:24:21,800 --> 00:24:25,760 I wtedy to się uruchomić, że Kod z danych mamy. 413 00:24:25,760 --> 00:24:28,870 Świetnie, mamy wizualizacja, która wysyła zapytanie 414 00:24:28,870 --> 00:24:31,390 gdzieś jakiegoś kodu innego, który jest zwykle 415 00:24:31,390 --> 00:24:36,110 gdzie pyta niektórych danych z gdzie indziej, która jest zwykle 416 00:24:36,110 --> 00:24:38,656 jak wizualizacje pracy. 417 00:24:38,656 --> 00:24:41,400 >> Ale chcę wrócić do tych danych. 418 00:24:41,400 --> 00:24:48,030 Tak więc dane w zasadniczy D3-- D3 pobiera dane, które jest lista rzeczy. 419 00:24:48,030 --> 00:24:53,000 D3 oczekuje dane po prostu lista rzeczy, szereg rzeczy. 420 00:24:53,000 --> 00:24:58,780 Nie ma znaczenia, co te rzeczy są tak długo, jak jest to matryca z nich. 421 00:24:58,780 --> 00:25:02,460 >> Więc, na przykład, możemy od Oczywiście nie zmiennoprzecinkowych. 422 00:25:02,460 --> 00:25:04,830 Mogliśmy negatywów. 423 00:25:04,830 --> 00:25:09,400 D3 nie obchodzi, tak długo, jak to jest lista rzeczy. 424 00:25:09,400 --> 00:25:13,270 >> Jak ciekawych rzeczy my może mieć, mogliśmy również 425 00:25:13,270 --> 00:25:19,410 posiada listę ciągów, takich jak to. 426 00:25:19,410 --> 00:25:25,440 Tak więc są to nagłówki Crimson Wybrałem się kilka dni temu. 427 00:25:25,440 --> 00:25:29,220 A może można znaleźć kilka ciekawych rzeczy o tych ciągu gazet. 428 00:25:29,220 --> 00:25:30,970 >> Więc jeszcze raz, to jest lista rzeczy. 429 00:25:30,970 --> 00:25:32,360 D3 nie obchodzi. 430 00:25:32,360 --> 00:25:35,572 To stało się ciąg. 431 00:25:35,572 --> 00:25:36,530 Zmieniliśmy nasze dane. 432 00:25:36,530 --> 00:25:38,210 >> Wróćmy do naszej wizualizacji. 433 00:25:38,210 --> 00:25:42,495 Teraz nasza wizualizacja oczekuje Wejście być numery. 434 00:25:42,495 --> 00:25:44,370 Więc będziemy mieć wprowadzić kilka zmian. 435 00:25:44,370 --> 00:25:47,180 436 00:25:47,180 --> 00:25:52,180 Tak na przykład, po pierwsze, może być chcemy umieścić te kręgi wraz 437 00:25:52,180 --> 00:25:56,870 przez długość nagłówka, liczba znaków w nagłówku. 438 00:25:56,870 --> 00:26:03,600 >> Więc co zrobimy is-- każdym razem nasze Funkcja jest wywoływana z ciągiem, 439 00:26:03,600 --> 00:26:09,095 znajdziemy to długość A następnie przekazać, że na skali. 440 00:26:09,095 --> 00:26:11,550 Kolor, wrócę że do stalowego błękitu. 441 00:26:11,550 --> 00:26:19,060 442 00:26:19,060 --> 00:26:20,420 A tam idziemy. 443 00:26:20,420 --> 00:26:23,190 Mamy wizualizację z Crimson nagłówki. 444 00:26:23,190 --> 00:26:25,500 >> Nasza skala jest nieco off. 445 00:26:25,500 --> 00:26:29,680 Załóżmy, że najdłużej Nagłówek jest długości 100 znaków, 446 00:26:29,680 --> 00:26:32,244 tak rozciągać, że się trochę. 447 00:26:32,244 --> 00:26:33,410 I mamy wizualizację. 448 00:26:33,410 --> 00:26:36,710 Wydaje się więc, że większość gazet są bardzo blisko siebie, 449 00:26:36,710 --> 00:26:38,750 w odniesieniu do linii znaków. 450 00:26:38,750 --> 00:26:41,200 Ale jedno jest naprawdę wyróżnia się. 451 00:26:41,200 --> 00:26:46,660 >> Możemy zbudować kilka narzędzi odkrywać, że więcej. 452 00:26:46,660 --> 00:26:50,710 Ale kiedy pracowałem nad tym, byłem ciekawe, czy w tym zestawie danych, 453 00:26:50,710 --> 00:26:53,880 nagłówki z dwukropkiem w nich będzie dłuższy. 454 00:26:53,880 --> 00:26:55,770 I zakłada, że ​​tak. 455 00:26:55,770 --> 00:26:56,660 >> Warto więc dowiedzieć. 456 00:26:56,660 --> 00:27:00,650 Użyjmy kolor kanał tak jak poprzednio, 457 00:27:00,650 --> 00:27:04,540 do kodowania niektórych o to, czy tam okrężnicy lub nie. 458 00:27:04,540 --> 00:27:07,220 Więc użyjemy warunkowe ponownie. 459 00:27:07,220 --> 00:27:09,350 Nie musisz wiedzieć szczegóły tego, 460 00:27:09,350 --> 00:27:14,260 ale to jest jak sprawdzić Ciąg na szczególny charakter 461 00:27:14,260 --> 00:27:16,355 w JavaScript, znowu, nie ma znaczenia. 462 00:27:16,355 --> 00:27:18,910 463 00:27:18,910 --> 00:27:23,270 >> Ale jeśli nie znajdziemy jelita grubego, wrócimy na zielono. 464 00:27:23,270 --> 00:27:26,100 A jeśli to zrobimy, wrócimy na czerwono. 465 00:27:26,100 --> 00:27:29,010 Więc jeszcze raz, pisze, że nie okrężnicy będzie czerwony. 466 00:27:29,010 --> 00:27:34,980 To jest to, co ta means-- miłe. 467 00:27:34,980 --> 00:27:38,040 >> Wygląda więc na to, że mój Hipoteza jest wpadł. 468 00:27:38,040 --> 00:27:39,360 Jest tylko dwóch. 469 00:27:39,360 --> 00:27:42,380 Mamy tylko sześć punktów danych i tylko dwie miały dwukropki. 470 00:27:42,380 --> 00:27:45,510 Ale wydaje się nieco bardziej na dolnym końcu, w rzeczywistości. 471 00:27:45,510 --> 00:27:47,830 Nagłówki z dwukropkami wydają ogólnie być krótszy, 472 00:27:47,830 --> 00:27:52,370 przynajmniej w naszych danych set-- interesujące. 473 00:27:52,370 --> 00:27:55,830 >> Powróćmy, że do Stal niebieska, a następnie zobaczyć 474 00:27:55,830 --> 00:28:00,601 co możemy zrobić jeszcze Więcej ciekawych danych. 475 00:28:00,601 --> 00:28:04,370 476 00:28:04,370 --> 00:28:09,070 Więc znowu, mówiłem, że Dane w D3 jest lista rzeczy. 477 00:28:09,070 --> 00:28:11,080 Widzieliśmy liczby różnych typów. 478 00:28:11,080 --> 00:28:12,810 Widzieliśmy sznurki. 479 00:28:12,810 --> 00:28:15,700 Ale rzeczy, może być również obiekty. 480 00:28:15,700 --> 00:28:20,080 >> Mogą być skomplikowane rzeczy które obejmują wiele rzeczy. 481 00:28:20,080 --> 00:28:24,510 Aby powiedzieć, że bardziej wyraźnie, W większości wypadków 482 00:28:24,510 --> 00:28:28,384 chcą zbudować każdy punkt danych, jak bardziej skomplikowane niż tylko jedną wartość. 483 00:28:28,384 --> 00:28:30,175 Jeśli chcesz sobie wyobrazić Baza danych o studentach, 484 00:28:30,175 --> 00:28:32,470 nie może być studentem wymienić, legitymacji studenckiej, 485 00:28:32,470 --> 00:28:36,370 i wiele rzeczy związane z konkretnego rekordu, 486 00:28:36,370 --> 00:28:39,834 nie tylko ciąg znaków lub liczba. 487 00:28:39,834 --> 00:28:40,750 Więc spójrzmy na to. 488 00:28:40,750 --> 00:28:55,180 489 00:28:55,180 --> 00:28:56,760 >> To jest jeden taki zestaw danych. 490 00:28:56,760 --> 00:28:59,090 Jest to zbiór danych na temat trzęsień ziemi. 491 00:28:59,090 --> 00:29:01,910 492 00:29:01,910 --> 00:29:08,430 Więc wszystko tutaj na naszej liście lub tablicy zawiera wiele rzeczy sam rzeczy. 493 00:29:08,430 --> 00:29:11,380 Więc każdy punkt danych ma Wielkość i współrzędnych. 494 00:29:11,380 --> 00:29:13,425 I koordynuje się zawiera dwie rzeczy. 495 00:29:13,425 --> 00:29:15,960 496 00:29:15,960 --> 00:29:20,450 >> Tak więc każdy dzień jest teraz dużo więcej skomplikowane i dużo bardziej interesujące 497 00:29:20,450 --> 00:29:22,700 i zawiera dużo więcej ciekawe informacje. 498 00:29:22,700 --> 00:29:26,730 Zobaczmy, udało nam się stworzyć z tego. 499 00:29:26,730 --> 00:29:36,130 Wracając z powrotem tutaj ponownie, używając nasz histogram koło wizualizacja 500 00:29:36,130 --> 00:29:42,110 zbudowaliśmy, zobaczymy, czy możemy budować wizualizacja rozkładu wielkości 501 00:29:42,110 --> 00:29:43,305 w naszym zbiorze danych. 502 00:29:43,305 --> 00:29:45,850 503 00:29:45,850 --> 00:29:48,660 >> Więc tutaj, to samo pojęcie. 504 00:29:48,660 --> 00:29:51,920 Ale teraz, d zawiera więcej rzeczy. 505 00:29:51,920 --> 00:29:54,780 d zawiera wiele elementów danych. 506 00:29:54,780 --> 00:29:57,946 Więc się d powrotem. 507 00:29:57,946 --> 00:29:59,670 D3 daje nam d. 508 00:29:59,670 --> 00:30:06,080 I odpowiadamy poprzez znalezienie wielkości o d a następnie przepuszczanie że skali. 509 00:30:06,080 --> 00:30:08,490 >> I wtedy musimy zmienić nasza skalę, oczywiście. 510 00:30:08,490 --> 00:30:12,980 Więc po prostu nie bezwzględne go znacznie więcej niż 10. 511 00:30:12,980 --> 00:30:15,485 Właściwie nigdy nie było Trzęsienie ziemi 10 wielkości. 512 00:30:15,485 --> 00:30:19,360 Ale to trochę nasza górna koniec, nasza górna spektrum. 513 00:30:19,360 --> 00:30:20,240 >> Miejmy odświeżyć. 514 00:30:20,240 --> 00:30:22,990 Ładny, mamy wizualizację. 515 00:30:22,990 --> 00:30:25,490 To ciekawe, note-- tak istnieją dwa punkty danych, które 516 00:30:25,490 --> 00:30:29,010 są niemal dokładnie nad sobą inne pod względem wielkości. 517 00:30:29,010 --> 00:30:31,350 Widać to przez krycie używamy. 518 00:30:31,350 --> 00:30:40,810 519 00:30:40,810 --> 00:30:42,690 >> Teraz mamy dane geograficzne. 520 00:30:42,690 --> 00:30:44,710 Mamy długości i szerokości geograficznej. 521 00:30:44,710 --> 00:30:47,549 Może moglibyśmy zrobić coś Dużo bardziej interesujące z tego. 522 00:30:47,549 --> 00:30:49,590 Przekonajmy się kilka ciekawy sposób na wizualizację 523 00:30:49,590 --> 00:30:53,500 Ten bardziej skomplikowany danych mamy dostęp. 524 00:30:53,500 --> 00:31:04,950 >> Akt V, Mapping-- fundamentalnie, Chcemy, aby umieścić je na mapie. 525 00:31:04,950 --> 00:31:07,690 To znaczy, to jest, gdzie to będzie. 526 00:31:07,690 --> 00:31:13,130 Chcemy do kodowania informacji o Stanowisko tych odczytów trzęsienia ziemi, 527 00:31:13,130 --> 00:31:16,350 jak również ich wielkość, bo mamy teraz. 528 00:31:16,350 --> 00:31:21,310 Rozumiemy jak spożywać bardziej skomplikowanych danych. 529 00:31:21,310 --> 00:31:26,200 >> Pierwszą rzeczą, jaką zrobimy to stworzyć mapę, mapę w tle. 530 00:31:26,200 --> 00:31:29,360 Zamierzam przejść przez Ten bardzo szybko. 531 00:31:29,360 --> 00:31:30,560 Jest to kod trudne. 532 00:31:30,560 --> 00:31:33,110 To jeszcze jeden z tych, recepty naprawdę nie 533 00:31:33,110 --> 00:31:35,690 mają w pełni zrozumieć do użycia. 534 00:31:35,690 --> 00:31:38,510 535 00:31:38,510 --> 00:31:39,740 Ale to jest kod. 536 00:31:39,740 --> 00:31:43,580 Ten kod tutaj tworzy mapę. 537 00:31:43,580 --> 00:31:45,730 >> Nie zamierzamy iść w szczegółach. 538 00:31:45,730 --> 00:31:54,210 Ale powierzchownie, co robi jest, wysyła zapytanie tego pliku us.json, który 539 00:31:54,210 --> 00:31:57,150 to plik danych, jak co mieliśmy wcześniej. 540 00:31:57,150 --> 00:31:59,150 To jest bardziej skomplikowane, oczywiście. 541 00:31:59,150 --> 00:32:02,920 Jednak w tym przypadku wszystkim, każdy punkt danych jest ten stan 542 00:32:02,920 --> 00:32:05,420 i ma listę długości i szerokości geograficznej 543 00:32:05,420 --> 00:32:10,500 że określenie wielokąta, taka forma, że ​​stan. 544 00:32:10,500 --> 00:32:13,280 >> Więc co D3 jest podobne, do tego, co robiliśmy wcześniej. 545 00:32:13,280 --> 00:32:18,140 Będzie on żądać i BIND do elementu. 546 00:32:18,140 --> 00:32:20,890 I jest to funkcja, która mapuje ten element się, 547 00:32:20,890 --> 00:32:23,410 na podstawie szerokości i długości geograficznej. 548 00:32:23,410 --> 00:32:24,580 Możesz przeczytać więcej na ten temat. 549 00:32:24,580 --> 00:32:27,385 A ja polecam. 550 00:32:27,385 --> 00:32:30,090 >> Istnieją powiązania na Koniec tego kodu pisał. 551 00:32:30,090 --> 00:32:31,570 I kod jest skomentował. 552 00:32:31,570 --> 00:32:34,050 Tam są linki do dalszego na ten temat. 553 00:32:34,050 --> 00:32:36,590 Polecam go znaleźć. 554 00:32:36,590 --> 00:32:39,460 Ale co dbamy o to funkcja projekcji. 555 00:32:39,460 --> 00:32:41,210 Chcę przez to przechodzić. 556 00:32:41,210 --> 00:32:43,522 >> Po pierwsze, pozwól mi pokazać Ci, że tak, mamy mapę. 557 00:32:43,522 --> 00:32:47,300 558 00:32:47,300 --> 00:32:49,970 Mapy są fajne. 559 00:32:49,970 --> 00:32:52,330 Więc spójrzmy na to Funkcja produkcji. 560 00:32:52,330 --> 00:32:56,481 >> Projekcja jest bardzo jak skali wagi ponownie. 561 00:32:56,481 --> 00:32:59,210 Więc co produkcja Projekcja ta funkcja 562 00:32:59,210 --> 00:33:06,610 nie jest, możemy przekazać mu długość i latitudes-- w tym przypadku, 563 00:33:06,610 --> 00:33:09,590 Wartości te są tu ac-long budynku 564 00:33:09,590 --> 00:33:13,990 siedzimy w prawo now-- projekcji. 565 00:33:13,990 --> 00:33:20,560 I projekcja przekonwertuje że w xiy wartości pikseli. 566 00:33:20,560 --> 00:33:23,300 >> Więc co robi projekcji jest bardzo podobny do naszej skali. 567 00:33:23,300 --> 00:33:27,270 To biorąc naszych szerokościach geograficznych i długości geograficznej, która reprezentuje cały glob 568 00:33:27,270 --> 00:33:31,390 i kurczy i wielkości, które w dół do placu, który chcemy, 569 00:33:31,390 --> 00:33:33,510 że daliśmy go. 570 00:33:33,510 --> 00:33:35,220 W tym przypadku mamy przekazując te wartości. 571 00:33:35,220 --> 00:33:41,370 I to daje nam, dobrze, że na ekranie oznacza 640 pikseli. 572 00:33:41,370 --> 00:33:46,250 Ten cały ekran jest 700 pikseli szeroki, więc sprawia, że ​​nam o tutaj, 573 00:33:46,250 --> 00:33:53,310 i 154 pikseli w dół, które chciałbym Szacunek jest dość dużo tutaj. 574 00:33:53,310 --> 00:33:57,250 >> Więc biorąc te LAT-long, które stanowią coś na całym świecie 575 00:33:57,250 --> 00:34:02,850 i squishing i przemieszczania się, że około aby dać nam wartości X i Y pikseli, 576 00:34:02,850 --> 00:34:05,450 jest to pierwsza rzecz, która jest odbywa się w tym kodzie odwzorowania. 577 00:34:05,450 --> 00:34:07,920 A potem reszta Kod zużywa dane 578 00:34:07,920 --> 00:34:14,310 Plany te, a potem lat-long na coś na ekranie. 579 00:34:14,310 --> 00:34:18,380 >> Ale mamy zamiar korzystać z tego występu funkcje, ponieważ okazuje się, 580 00:34:18,380 --> 00:34:20,270 mamy ac-tęskni tęskni, jak również. 581 00:34:20,270 --> 00:34:24,509 Patrząc wstecz na naszych danych, mamy szerokości i długości geograficznej 582 00:34:24,509 --> 00:34:25,425 dla każdej obserwacji. 583 00:34:25,425 --> 00:34:28,131 584 00:34:28,131 --> 00:34:29,130 Więc użyjmy projekcję. 585 00:34:29,130 --> 00:34:33,250 586 00:34:33,250 --> 00:34:37,639 >> Więc patrząc na naszej ekspozycji, chcemy naszą exposition-- 587 00:34:37,639 --> 00:34:39,590 mamy szerokość i długość geograficzną. 588 00:34:39,590 --> 00:34:40,770 Ale chcemy wartości pikseli. 589 00:34:40,770 --> 00:34:43,510 I okazuje się, że mają dokładnie co want-- projekcję. 590 00:34:43,510 --> 00:34:46,239 Bardzo podobnie jak my stosując skalę tutaj, 591 00:34:46,239 --> 00:34:52,075 my teraz będziemy używać projekcji i przekazać go koordynuje. 592 00:34:52,075 --> 00:34:55,241 593 00:34:55,241 --> 00:34:56,949 Więc pierwszą rzeczą, jesteśmy doing-- więc jesteśmy 594 00:34:56,949 --> 00:35:01,520 uzyskanie d, która jest indywidualne dane element indywidualnego trzęsienia 595 00:35:01,520 --> 00:35:02,370 czytanie. 596 00:35:02,370 --> 00:35:04,640 Pierwsze, co robimy jest uzyskać współrzędne. 597 00:35:04,640 --> 00:35:06,150 Dobra, mamy współrzędne. 598 00:35:06,150 --> 00:35:09,160 >> Druga rzecz, którą robimy jest przekazać, że w dniu projekcji. 599 00:35:09,160 --> 00:35:13,440 Projekcja konwertuje te współrzędne do wartości pikseli x i y. 600 00:35:13,440 --> 00:35:16,680 A potem ostatnią rzeczą, chcę zrobić, to po prostu x, 601 00:35:16,680 --> 00:35:19,342 których sprawa ta pierwsza. 602 00:35:19,342 --> 00:35:22,050 Jest to pierwszy z dwóch rzeczy które są zwracane przez projekcji. 603 00:35:22,050 --> 00:35:27,840 604 00:35:27,840 --> 00:35:29,630 >> Będziemy robić to samo dla y. 605 00:35:29,630 --> 00:35:34,960 Ale zamiast tego, wrócimy Drugi element y. 606 00:35:34,960 --> 00:35:35,980 Przygotuj się, aby odświeżyć. 607 00:35:35,980 --> 00:35:39,830 608 00:35:39,830 --> 00:35:46,450 Och, bardzo charakter here-- miło, mamy 609 00:35:46,450 --> 00:35:51,730 napędzane danych dokument to ukrywanie tego pliku JSON obiektów, 610 00:35:51,730 --> 00:35:57,560 sporządzeniu mapy i zmiany atrybutów w odniesieniu do danych, 611 00:35:57,560 --> 00:35:59,600 aby wyświetlić ją na mapie. 612 00:35:59,600 --> 00:36:00,840 To jest naprawdę ciekawe. 613 00:36:00,840 --> 00:36:03,770 To jest fajne. 614 00:36:03,770 --> 00:36:05,640 >> Weźmy go wycięcie. 615 00:36:05,640 --> 00:36:08,795 To znaczy, mamy dwa kawałki informacje z każdego punktu danych. 616 00:36:08,795 --> 00:36:10,000 To znaczy, trzy. 617 00:36:10,000 --> 00:36:12,540 Mamy współrzędne, który x i y. 618 00:36:12,540 --> 00:36:15,700 I mamy ogrom. 619 00:36:15,700 --> 00:36:17,420 >> Musimy zakodować wielkość jakoś. 620 00:36:17,420 --> 00:36:18,920 Mamy wiele kanałów. 621 00:36:18,920 --> 00:36:20,370 Możemy użyć koloru. 622 00:36:20,370 --> 00:36:21,890 Możemy użyć promień. 623 00:36:21,890 --> 00:36:23,040 Możemy używać krycie. 624 00:36:23,040 --> 00:36:25,540 Możemy korzystać z wielu rzeczy w kodzie. 625 00:36:25,540 --> 00:36:29,180 Każda z tych cech i wielu bardziej, że nie są tam wymienione, 626 00:36:29,180 --> 00:36:33,065 ponieważ są one opcjonalne, mogliśmy używać do kodowania tych danych, udar mózgu 627 00:36:33,065 --> 00:36:35,670 i wszystkie te rzeczy już wspomniałem. 628 00:36:35,670 --> 00:36:36,690 >> Zróbmy promień. 629 00:36:36,690 --> 00:36:38,830 Myślę, że promień jest najbardziej intuicyjny. 630 00:36:38,830 --> 00:36:46,210 Więc jeszcze raz, będziemy zastąpić zakodowane 40 i zrobić kilka obliczeń. 631 00:36:46,210 --> 00:36:48,810 Będziemy używać ponownie nasz ulubiony skalę. 632 00:36:48,810 --> 00:36:50,290 I jesteśmy obok d. 633 00:36:50,290 --> 00:36:55,850 Ale nie d, ponieważ chcemy wielkości z d. d jest tylko punkt danych. 634 00:36:55,850 --> 00:36:57,430 Miniemy wielkości w skali. 635 00:36:57,430 --> 00:36:58,470 >> Spróbujmy jeszcze raz. 636 00:36:58,470 --> 00:37:00,230 Och, to nie działa. 637 00:37:00,230 --> 00:37:02,940 Dlaczego to nie działa? 638 00:37:02,940 --> 00:37:04,387 >> Więc pamiętaj jaką skalę ma. 639 00:37:04,387 --> 00:37:05,470 Spójrzmy na skali ponownie. 640 00:37:05,470 --> 00:37:10,800 Mapy od 1 do 10 w skali do 22 do 600, bardziej lub mniej. 641 00:37:10,800 --> 00:37:12,030 600 jest ogromny. 642 00:37:12,030 --> 00:37:14,730 To dlatego jesteśmy coraz to. 643 00:37:14,730 --> 00:37:18,420 >> Dlatego chcemy, aby zmienić naszą skalę na coś bardziej rozsądnego. 644 00:37:18,420 --> 00:37:22,610 Powiedzmy, że chcemy 0 do 60. 645 00:37:22,610 --> 00:37:25,340 60 jest duży, ale 10 trzęsienia ziemi są niezwykle rzadkie. 646 00:37:25,340 --> 00:37:27,880 W rzeczywistości, oni nigdy nie stało. 647 00:37:27,880 --> 00:37:31,830 >> Więc co to będzie zrobić, to zajmie to nasza wielkość, która idzie od 1 do 10 648 00:37:31,830 --> 00:37:34,490 odwzorować go na rozszerzenie go. 649 00:37:34,490 --> 00:37:37,370 Odwzorować go na 0 do 60. 650 00:37:37,370 --> 00:37:38,840 Miejmy odświeżyć. 651 00:37:38,840 --> 00:37:41,850 >> Ładny, mamy wizualizację. 652 00:37:41,850 --> 00:37:42,500 To jest dobre. 653 00:37:42,500 --> 00:37:43,736 To faktyczne dane. 654 00:37:43,736 --> 00:37:46,360 Zauważysz, w moim małym zabawki Przykładem, największe trzęsienie ziemi 655 00:37:46,360 --> 00:37:49,417 jest prawo na nas. 656 00:37:49,417 --> 00:37:50,000 Ale to jest to. 657 00:37:50,000 --> 00:37:54,422 Mamy datę napędzane wizualizację który zużywa dane 658 00:37:54,422 --> 00:37:56,255 i daje nam naprawdę ciekawe informacje. 659 00:37:56,255 --> 00:38:02,600 660 00:38:02,600 --> 00:38:06,420 Tak, dodajmy kilka interaktywność do niego. 661 00:38:06,420 --> 00:38:08,675 Wspomniałem, że był silna siła D3. 662 00:38:08,675 --> 00:38:11,490 663 00:38:11,490 --> 00:38:15,060 >> Więc, dla każdego elementu, jesteśmy opisując kilka atrybutów. 664 00:38:15,060 --> 00:38:20,230 Ale możemy również opisać to, co chcemy się stało z elementami interaktywności. 665 00:38:20,230 --> 00:38:26,190 Na przykład, można opisać co się dzieje, kiedy myszkę. 666 00:38:26,190 --> 00:38:28,740 667 00:38:28,740 --> 00:38:33,640 I bardzo podobne, że że będziemy mieć funkcję, 668 00:38:33,640 --> 00:38:36,700 bardzo podobne do atrybuty mieliśmy wcześniej, 669 00:38:36,700 --> 00:38:44,650 gdzie coś zrobić elementu, gdy unoszą się nad nią. 670 00:38:44,650 --> 00:38:47,100 >> Więc pierwszą rzeczą, musimy zrobić, to wybrać ten element, 671 00:38:47,100 --> 00:38:49,435 go znaleźć w zasadzie w przeglądarce. 672 00:38:49,435 --> 00:38:57,090 673 00:38:57,090 --> 00:39:00,920 a następnie możemy ustawić atrybut do niego. 674 00:39:00,920 --> 00:39:06,870 Więc co tu robię to, gdy unoszą nad czymś, dostaniemy ten element 675 00:39:06,870 --> 00:39:11,197 a następnie ponownie ustawić jej krycie 1, całkowicie nieprzezroczysty. 676 00:39:11,197 --> 00:39:12,488 Zobaczmy, co to wygląda. 677 00:39:12,488 --> 00:39:29,430 678 00:39:29,430 --> 00:39:39,080 >> Wydaje się, mamy dodatkowe średnik tutaj. 679 00:39:39,080 --> 00:39:42,420 Jeśli więc unoszą się nad tutaj, to staje się pełna. 680 00:39:42,420 --> 00:39:46,530 681 00:39:46,530 --> 00:39:48,960 Ale teraz, oczywiście, go pozostaje pełna, bo my 682 00:39:48,960 --> 00:39:53,240 muszą opisać, co się dzieje, kiedy zdjąć nasz kursor. 683 00:39:53,240 --> 00:39:59,990 Warto więc zrobić dokładnie, że na mouseout, w przeciwieństwie do mouseover. 684 00:39:59,990 --> 00:40:06,399 >> A my go przywrócić co mieliśmy before-- 0,5. 685 00:40:06,399 --> 00:40:10,260 A teraz, za każdym razem, unosić, mamy pełne koło. 686 00:40:10,260 --> 00:40:13,468 To pomaga nam zobaczyć, co mamy mamy do wyboru zasadniczo. 687 00:40:13,468 --> 00:40:19,210 688 00:40:19,210 --> 00:40:22,860 >> A teraz zróbmy to naprawdę świetnie. 689 00:40:22,860 --> 00:40:26,210 Miejmy podłączyć do rzeczywistych danych. 690 00:40:26,210 --> 00:40:30,890 Warto więc zapytać, mógł USGS o swoich danych. 691 00:40:30,890 --> 00:40:35,630 Więc US Geological Survey ma danych na temat trzęsień ziemi. 692 00:40:35,630 --> 00:40:41,460 Mają API, które jest w stanie publicznego zużywanych w formacie JSON. 693 00:40:41,460 --> 00:40:42,548 Więc zróbmy to. 694 00:40:42,548 --> 00:40:49,730 695 00:40:49,730 --> 00:40:55,900 >> Więc to jest trochę kodu, który łączy się z API USGS. 696 00:40:55,900 --> 00:40:57,990 I jest trochę przetwarzania na nim. 697 00:40:57,990 --> 00:41:02,200 Nie jest to istotne, ale upraszcza do prostego formatu danych, jak ten 698 00:41:02,200 --> 00:41:03,800 mieliśmy wcześniej. 699 00:41:03,800 --> 00:41:08,140 Więc mogę się pozbyć naszego wezwania do nasz fałszywy data.json w aktach. 700 00:41:08,140 --> 00:41:13,110 A zamiast tego, Dzwonię USGS zasadniczo. 701 00:41:13,110 --> 00:41:16,700 >> Załóżmy, odświeżyć, ładne. 702 00:41:16,700 --> 00:41:21,260 To jest rzeczywiste, prawdziwych danych z tego tygodnia do trzęsienia ziemi. 703 00:41:21,260 --> 00:41:23,217 To jest naprawdę ciekawe. 704 00:41:23,217 --> 00:41:25,050 Nie jest to zaskakujące dla nas, ale są 705 00:41:25,050 --> 00:41:27,909 wiele trzęsień ziemi na West Coast w Kalifornii. 706 00:41:27,909 --> 00:41:30,950 Ale myślałem, że to bardzo ciekawe że było tak wiele trzęsień ziemi 707 00:41:30,950 --> 00:41:34,350 na Alasce, a zdaje się, tutaj, na Środkowym Zachodzie. 708 00:41:34,350 --> 00:41:37,630 Mam na myśli, ciekawe, i jesteśmy dobrzy. 709 00:41:37,630 --> 00:41:40,410 To konkluzja. 710 00:41:40,410 --> 00:41:43,760 >> Ale zasadniczo, to jest to, co pomaga nam w D3. 711 00:41:43,760 --> 00:41:48,030 To pomaga nam podjąć danych, wiążą jej elementów DOM, 712 00:41:48,030 --> 00:41:51,620 i mają te elementy zmienić jako funkcja danych, 713 00:41:51,620 --> 00:41:54,780 mają te atrybuty, wszystkie te wiele atrybutów elementów, 714 00:41:54,780 --> 00:41:57,393 być użyteczne kanały przekazać informacje. 715 00:41:57,393 --> 00:42:05,440 716 00:42:05,440 --> 00:42:09,290 >> D3 jest niesamowicie potężny Biblioteka i niezwykle dobrze prowadzony. 717 00:42:09,290 --> 00:42:12,260 To niektóre potężne rzeczy. 718 00:42:12,260 --> 00:42:15,960 Wizualizacja danych jest niezwykle potężnym narzędziem 719 00:42:15,960 --> 00:42:21,530 do przekazywania ludziom głębokich spostrzeżenia, które dostaje się do ich rdzenia 720 00:42:21,530 --> 00:42:25,430 i pomaga im zrozumieć, w ta głęboka i intuicyjny sposób, 721 00:42:25,430 --> 00:42:29,760 jak działa i jak dane Dane zmienia nasze życie. 722 00:42:29,760 --> 00:42:31,019