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