1
00:00:00,000 --> 00:00:00,780

2
00:00:00,780 --> 00:00:11,880
>> [Hudba hrát]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Jsem David
Chouinard, a to je D3.

4
00:00:16,480 --> 00:00:17,700
Vítejte u nás.

5
00:00:17,700 --> 00:00:21,270
Budeme se učit o D3 dnes.

6
00:00:21,270 --> 00:00:25,020
D3 je rámec JavaScript
pro stavbu vysokou kvalitu

7
00:00:25,020 --> 00:00:28,110
interaktivní vizualizace pro web.

8
00:00:28,110 --> 00:00:30,870
Věci jako to, co jsme
vidět za mnou,

9
00:00:30,870 --> 00:00:34,230
budeme se učit, aby se těm
věci, druh základy toho.

10
00:00:34,230 --> 00:00:36,452
Ale to bude v pohodě.

11
00:00:36,452 --> 00:00:38,160
Začněme
dělat pěkné obrázky.

12
00:00:38,160 --> 00:00:41,108

13
00:00:41,108 --> 00:00:44,350
Máme víc dema
vyhlídky k dispozici.

14
00:00:44,350 --> 00:00:48,040

15
00:00:48,040 --> 00:00:50,760
Pojďme na to.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- jdeme
začít hned dělat skvělé věci.

17
00:00:58,700 --> 00:01:01,240
Za prvé, na levé straně, máme kód.

18
00:01:01,240 --> 00:01:03,470
Na pravé straně, máme
Výsledkem našeho kódu.

19
00:01:03,470 --> 00:01:04,900
Pojďme projít.

20
00:01:04,900 --> 00:01:05,780
>> Pojďme udělat kruh.

21
00:01:05,780 --> 00:01:08,570
Jak to zní?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
jsme prostě udělali kruh.

23
00:01:14,934 --> 00:01:16,100
Ty mi věřit, že jo?

24
00:01:16,100 --> 00:01:18,190
Není to tam.

25
00:01:18,190 --> 00:01:21,830
>> Takže to, co jsme dělali tady je,
SVG je Scalable Vector Graphics.

26
00:01:21,830 --> 00:01:27,530
To je způsob, jak říct, že prohlížeč
jak vektorové grafiky v prohlížeči.

27
00:01:27,530 --> 00:01:30,740
To, co jsme právě udělal hned teď
se přidá kruh procházet.

28
00:01:30,740 --> 00:01:34,790
>> Slib, že kružnice
vyžaduje trochu základních atributů

29
00:01:34,790 --> 00:01:36,850
předtím, než můžeme skutečně vidět.

30
00:01:36,850 --> 00:01:40,045
Musíme říct, že svou polohu x,
její y postavení, její poloměr.

31
00:01:40,045 --> 00:01:43,310
Nechtěli jsme to nic z toho říct,
takže nejsme to vidět hned teď.

32
00:01:43,310 --> 00:01:46,210
Ale pojďme říct, že věci.

33
00:01:46,210 --> 00:01:49,510
>> Takže v první řadě, máte
dát naší kruhu jméno.

34
00:01:49,510 --> 00:01:53,070
Tak říkejme tomu kruh.

35
00:01:53,070 --> 00:01:54,406
Náš kruh má jméno teď.

36
00:01:54,406 --> 00:01:57,230

37
00:01:57,230 --> 00:01:59,490
A dejme tomu několik atributů.

38
00:01:59,490 --> 00:02:03,690
Jak se o cx se soustředí x, tak
střed x pozice.

39
00:02:03,690 --> 00:02:06,730
Řekněme, 200 na 200 pixelů.

40
00:02:06,730 --> 00:02:10,220
>> Pojďme dát mu y 200 pixelů stejně.

41
00:02:10,220 --> 00:02:16,032
A R, poloměr, asi 40 pixelů.

42
00:02:16,032 --> 00:02:16,950
Nyní se podívejme.

43
00:02:16,950 --> 00:02:21,740

44
00:02:21,740 --> 00:02:23,440
Nemůžu kouzlo.

45
00:02:23,440 --> 00:02:30,430

46
00:02:30,430 --> 00:02:31,520
>> Tady to je.

47
00:02:31,520 --> 00:02:37,330
Máme kruh v poloze 200
pixelů, 200 pixelů, poloměr 40 pixelů.

48
00:02:37,330 --> 00:02:38,280
Docela fajn, ne?

49
00:02:38,280 --> 00:02:38,988
Máme kruh.

50
00:02:38,988 --> 00:02:40,880
Jo.

51
00:02:40,880 --> 00:02:42,670
>> Takže není třeba následovat.

52
00:02:42,670 --> 00:02:45,790
Všechny tyto příklady, všechny z
kód dělám dnes

53
00:02:45,790 --> 00:02:51,300
budou poskytovány on-line na konci
ve formě interaktivních příkladů

54
00:02:51,300 --> 00:02:54,010
s kontrolními body na
Každý čin, a tak dále.

55
00:02:54,010 --> 00:02:55,160
>> Pojďme dělat více věcí.

56
00:02:55,160 --> 00:02:58,901
Tento černý kruh je opravdu ošklivý.

57
00:02:58,901 --> 00:03:01,541
Omlouvám se za tuto chybu
Zprávy tady.

58
00:03:01,541 --> 00:03:05,340
Tam jsme jít.

59
00:03:05,340 --> 00:03:06,350
>> Pojďme dát barvu.

60
00:03:06,350 --> 00:03:07,170
Jak to?

61
00:03:07,170 --> 00:03:08,340
Rád ocelově modrá.

62
00:03:08,340 --> 00:03:13,280

63
00:03:13,280 --> 00:03:16,030
No, náš kruh změnil barvu.

64
00:03:16,030 --> 00:03:17,320
To je skvělé.

65
00:03:17,320 --> 00:03:31,330
Udělejme to semi-transparentní
too-- semi-transparentní.

66
00:03:31,330 --> 00:03:33,670
>> Tak to jsou atributy
jsme definovat na kruhu.

67
00:03:33,670 --> 00:03:36,774
První věc, kterou jsme udělali, je
dáme kruh na stránce.

68
00:03:36,774 --> 00:03:38,690
A pak jsme definování
banda atributů.

69
00:03:38,690 --> 00:03:41,610
Některé z nich jsou zapotřebí,
jako CX, CY, a Radius.

70
00:03:41,610 --> 00:03:42,680
A ostatní jsou volitelné.

71
00:03:42,680 --> 00:03:44,730
>> Existuje mnohem více atributů.

72
00:03:44,730 --> 00:03:46,760
Je tu spousta z nich.

73
00:03:46,760 --> 00:03:53,070
Například bychom mohli mít
mrtvice stejně, zdvih červené.

74
00:03:53,070 --> 00:03:55,630
Ale pojďme odstranit to.

75
00:03:55,630 --> 00:04:00,450
Jsme zpátky do kruhu, modrým kruhem.

76
00:04:00,450 --> 00:04:01,600
>> Takže pojďme udělat více kruhů.

77
00:04:01,600 --> 00:04:02,810
Jak to?

78
00:04:02,810 --> 00:04:04,665
Pojďme udělat další kruh.

79
00:04:04,665 --> 00:04:05,985
Je to vzrušující, že jo?

80
00:04:05,985 --> 00:04:09,630

81
00:04:09,630 --> 00:04:12,300
>> Tak, že jsem jen Copy-vloženého
to, co jsme měli už.

82
00:04:12,300 --> 00:04:13,570
Říkejme tomu circle2.

83
00:04:13,570 --> 00:04:15,840
A pojďme udělat přesný
totéž a dát to

84
00:04:15,840 --> 00:04:20,450
atributy, vzhledem k x pozice 300.

85
00:04:20,450 --> 00:04:24,140
Hurá, máme dva kruhy teď.

86
00:04:24,140 --> 00:04:27,240
>> A samozřejmě, mohli bychom
aktualizaci těchto hodnot.

87
00:04:27,240 --> 00:04:31,640
Jsem to mohl dát na 400, a nyní se pohybuje.

88
00:04:31,640 --> 00:04:35,470
A protože je to nepříjemné, pojďme
odstranit, takže circle2.remove.

89
00:04:35,470 --> 00:04:39,000

90
00:04:39,000 --> 00:04:40,730
Je to pryč.

91
00:04:40,730 --> 00:04:43,170
>> Takže to, co děláme, a
je jen velmi, very-- to

92
00:04:43,170 --> 00:04:46,030
je velmi podobný tomu, co
může dělat v jQuery, například.

93
00:04:46,030 --> 00:04:48,240
Jsme jen manipulace
DOM, je to tzv.

94
00:04:48,240 --> 00:04:50,040
Možná jste slyšel to slovo.

95
00:04:50,040 --> 00:04:53,255
My vytváříme věci, nastavení
atributy na věci, odstranění věci.

96
00:04:53,255 --> 00:04:58,950

97
00:04:58,950 --> 00:05:02,360
>> A teď, tady je místo, kde to začíná být zajímavé.

98
00:05:02,360 --> 00:05:07,250
Takže později v kódu, mohli bychom ještě
odkazují na původní kruhu zde.

99
00:05:07,250 --> 00:05:14,100
Takže pojďme obnovit svůj atribut CX.

100
00:05:14,100 --> 00:05:18,260
Řekněme, že jeho poloha x 400.

101
00:05:18,260 --> 00:05:22,406
A já jdu k přechodu
že, takže je to jasné.

102
00:05:22,406 --> 00:05:23,360
Tam jsme jít.

103
00:05:23,360 --> 00:05:24,780
>> Tak jsme přidali kruh.

104
00:05:24,780 --> 00:05:26,440
Nastavili jsme některé atributy.

105
00:05:26,440 --> 00:05:28,210
Přidali jsme další kruh, odstranili.

106
00:05:28,210 --> 00:05:31,650
A pak jsme se mění
původní kruh.

107
00:05:31,650 --> 00:05:35,400
>> Ale tady je místo, kde se dostane
mnohem zajímavější.

108
00:05:35,400 --> 00:05:39,070
Nejen, že můžeme nastavit atributy
jak jen hodnoty, můžeme říci,

109
00:05:39,070 --> 00:05:41,610
hej, kruh, jděte na pozici 200.

110
00:05:41,610 --> 00:05:44,540
Můžeme také nastavit jako funkce.

111
00:05:44,540 --> 00:05:48,850
>> Takže místo toho, aby 400 zde,
můžeme udělat nějaký výpočet

112
00:05:48,850 --> 00:05:53,950
za běhu, co jsme
chcete, aby atribut být.

113
00:05:53,950 --> 00:05:56,580
Tak to je to, jak byste vyjádřit to.

114
00:05:56,580 --> 00:06:00,660
My říkáme, místo 400, dovolte mi, abych
vám funkce místo.

115
00:06:00,660 --> 00:06:04,180
A tady, v této funkci,
můžeme žádný šílený výpočet.

116
00:06:04,180 --> 00:06:06,820
>> Mohli bychom mít čas a
podívejte se na nějaké jiné věci

117
00:06:06,820 --> 00:06:11,230
a dynamicky se rozhodnete pro
kruh, jakou hodnotu chceme.

118
00:06:11,230 --> 00:06:15,266
Co my jen tak
to náhodný x pozice?

119
00:06:15,266 --> 00:06:20,360

120
00:06:20,360 --> 00:06:21,120
Tak to je to.

121
00:06:21,120 --> 00:06:25,490
>> Takže to, co říká, že je pro
každé x, spusťte tuto funkci.

122
00:06:25,490 --> 00:06:29,340
A to, co děláme, je výpočet
některé věci, náhodném krát šířka

123
00:06:29,340 --> 00:06:30,410
a vracet to.

124
00:06:30,410 --> 00:06:34,765
Takže pokaždé, když jsme se spustit, že dostaneme
kruh, který jde do libovolného místa.

125
00:06:34,765 --> 00:06:36,394
Je to docela fajn.

126
00:06:36,394 --> 00:06:38,310
Mám pocit, že bych mohl vypadat
na tohle málo.

127
00:06:38,310 --> 00:06:44,274

128
00:06:44,274 --> 00:06:46,440
Začínáme se dostat do
něco tady zajímavé.

129
00:06:46,440 --> 00:06:49,120

130
00:06:49,120 --> 00:06:51,390
Udělejme tento údaj řízený teď.

131
00:06:51,390 --> 00:06:53,420
Neexistuje žádná data zde.

132
00:06:53,420 --> 00:06:54,482
Pojďme to změnit.

133
00:06:54,482 --> 00:06:57,440

134
00:06:57,440 --> 00:07:12,140
>> Act II, data Poháněná Documents--
Takže pojďme se vrátit sem.

135
00:07:12,140 --> 00:07:15,340
A ať to jen zbavit circle2,
proto, že jsme právě přidávání a odebírání

136
00:07:15,340 --> 00:07:15,840
za to.

137
00:07:15,840 --> 00:07:17,382
Tak jsme to opravdu potřebují.

138
00:07:17,382 --> 00:07:21,421
Musíme být mnohem chytřejší zde.

139
00:07:21,421 --> 00:07:23,170
Řekněme, že máme
Některé údaje o nějakého druhu.

140
00:07:23,170 --> 00:07:31,540

141
00:07:31,540 --> 00:07:40,020
Jeden moment-- řekněme,
jsme měli data tohoto formuláře.

142
00:07:40,020 --> 00:07:41,800
Měli jsme pole, jen
banda čísel.

143
00:07:41,800 --> 00:07:45,750
Máme sedm čísel tady,
bez ohledu na to represent-- částka

144
00:07:45,750 --> 00:07:48,810
na bankovním účtu lidí, jak
moc váží, bůh ví co.

145
00:07:48,810 --> 00:07:51,310
>> To jsou čísla, a my
Chcete používat naše kruhy

146
00:07:51,310 --> 00:07:53,240
představovat tato čísla nějak.

147
00:07:53,240 --> 00:07:55,515
Chceme tie dotazy
kruhy těchto čísel.

148
00:07:55,515 --> 00:07:58,750

149
00:07:58,750 --> 00:07:59,626
Takže to, co děláme.

150
00:07:59,626 --> 00:08:01,500
Řekněme, že chceme
kruh pro každé číslo.

151
00:08:01,500 --> 00:08:03,590
Mohli bychom udělat starý
věc, kterou jsme byli doing--

152
00:08:03,590 --> 00:08:06,020
kruh Připojit a circle2 a circle3.

153
00:08:06,020 --> 00:08:10,020
Ale to vymkne z ruky, a
je tu spousta opakování logiku.

154
00:08:10,020 --> 00:08:12,760
>> Tak pojďme chytřejší s tím.

155
00:08:12,760 --> 00:08:17,810
Namísto použití var kruh
svg.append, že jsme byli jen pomocí,

156
00:08:17,810 --> 00:08:21,580
budeme používat
tento malý blok zde.

157
00:08:21,580 --> 00:08:24,510
Nechci jít do hloubky-
do toho, co všechny tyto části dělat.

158
00:08:24,510 --> 00:08:26,020
A je to docela pokročilé tématu.

159
00:08:26,020 --> 00:08:27,830
A já si přál, abych mohl.

160
00:08:27,830 --> 00:08:31,370
>> Ale klíč věc recognize-- a
uvidíte, je velmi často v D3 kódu.

161
00:08:31,370 --> 00:08:36,840
Tento blok textu basic
vytváří tolik kruhů

162
00:08:36,840 --> 00:08:41,360
jako jsou datové prvky
V tomto poli přímo zde.

163
00:08:41,360 --> 00:08:53,420

164
00:08:53,420 --> 00:08:55,780
Takže to vytváří tolik
kruhy jak tam jsou prvky.

165
00:08:55,780 --> 00:08:58,520
Bude to nám vytvořit sedm kruhy.

166
00:08:58,520 --> 00:09:01,710
A to dělá opravdu, ale opravdu klíčovou věc.

167
00:09:01,710 --> 00:09:02,460
Takže pojďme běžet to.

168
00:09:02,460 --> 00:09:05,460
Pojďme odstranit naše další kruh.

169
00:09:05,460 --> 00:09:09,565
Řekněme, komentovat to
rozloučit se a spustit znovu.

170
00:09:09,565 --> 00:09:13,840

171
00:09:13,840 --> 00:09:15,260
>> Tam jsme jít.

172
00:09:15,260 --> 00:09:18,030
Takže tady náš kruh je
hodně tmavší, protože my

173
00:09:18,030 --> 00:09:20,720
mají sedm kruhy, jeden
na horní straně druhé.

174
00:09:20,720 --> 00:09:25,425
Právě jsme vytvořili sedm kruhů, jeden
každý pro každý z těchto datových prvků.

175
00:09:25,425 --> 00:09:28,860
Ale je tu klíčovou věc, která se stala
s tímto úryvku přímo zde.

176
00:09:28,860 --> 00:09:31,030
>> Je to, že data byla vázána.

177
00:09:31,030 --> 00:09:33,440
Takže každý z
tyto datové prvky,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, byl vázán
na konkrétní kruhu.

179
00:09:38,830 --> 00:09:40,960
Tak to ne jen vytvořil
banda kruhů

180
00:09:40,960 --> 00:09:43,420
ale spojuje tyto dvě věci dohromady.

181
00:09:43,420 --> 00:09:48,740
>> A v budoucnu, protože jsme vytvořili
ty kruhy s touto funkcí D3,

182
00:09:48,740 --> 00:09:52,430
Když ti dám kruh, můžete
dej mi data s ním spojené.

183
00:09:52,430 --> 00:09:53,280
Takže se můžeme ptát D3.

184
00:09:53,280 --> 00:09:54,840
Hej, D3, mám tento kruh.

185
00:09:54,840 --> 00:09:57,350
Co je to data, která kruh má?

186
00:09:57,350 --> 00:10:01,290
A D3 by nám říci 10 nebo 45 nebo 105.

187
00:10:01,290 --> 00:10:02,380
>> Tyto věci jsou vázány.

188
00:10:02,380 --> 00:10:04,490
Je to velmi, velmi zásadní koncept.

189
00:10:04,490 --> 00:10:06,070
Podívejme se na to.

190
00:10:06,070 --> 00:10:12,210
>> Způsob, jakým bychom se ptát D3-- tak
To je relevantní pro to,

191
00:10:12,210 --> 00:10:16,620
ale jen věř mi na to.

192
00:10:16,620 --> 00:10:17,620
To je, jak jsme se ptát D3.

193
00:10:17,620 --> 00:10:21,312
Hej, D3, dej mi první
kruh, které můžete najít.

194
00:10:21,312 --> 00:10:23,580
Dej mi na první kruh můžete najít.

195
00:10:23,580 --> 00:10:29,660
A pak bychom mohli ptát D3, co je
údaje o tom, jako je toto, 10.

196
00:10:29,660 --> 00:10:33,380
>> Tak jsme se jen zeptat D3, si mě
První kruh můžete najít.

197
00:10:33,380 --> 00:10:34,400
Co je jeho údaje?

198
00:10:34,400 --> 00:10:36,650
10, který je skutečně dotazy
První datový prvek.

199
00:10:36,650 --> 00:10:42,150
Mohli bychom to ptát, hej, D3,
Najděte nás již třetí kruh.

200
00:10:42,150 --> 00:10:44,450
105.

201
00:10:44,450 --> 00:10:45,740
Proč je to opravdu důležité?

202
00:10:45,740 --> 00:10:49,790

203
00:10:49,790 --> 00:10:52,250
>> Tak tady, jsem se již zmínil
že bychom mohli použít funkce.

204
00:10:52,250 --> 00:10:54,910
A zmínil jsem se, že to
velmi mocná věc.

205
00:10:54,910 --> 00:11:03,070
Takže nejen naši funkce dělat věci
jako dělat nějaké výpočty, například,

206
00:11:03,070 --> 00:11:09,170
vrátí náhodné číslo, může
také dělat věci, na základě údajů.

207
00:11:09,170 --> 00:11:11,550
To je to, co údaje řízené dokumenty znamenají.

208
00:11:11,550 --> 00:11:13,750
To je to, co D3 znamená.

209
00:11:13,750 --> 00:11:17,800
>> Tak tohle x postition-- místo
ze jen říkám, všechny kruhy,

210
00:11:17,800 --> 00:11:21,735
si polohu x 200, my
To by mohlo dát funkci.

211
00:11:21,735 --> 00:11:26,140

212
00:11:26,140 --> 00:11:30,140
A tady můžeme udělat nějaký výpočet.

213
00:11:30,140 --> 00:11:33,710
a d zde stojí na místě pro data.

214
00:11:33,710 --> 00:11:36,120
Takže pokaždé, když máme
kruh, v podstatě,

215
00:11:36,120 --> 00:11:37,750
D3 bude vytvoření těchto sedmi kruhy.

216
00:11:37,750 --> 00:11:38,500
A pak za každých

217
00:11:38,500 --> 00:11:41,920
>> kruh, to půjde, hej,
circle1 jaký je tvůj x pozici.

218
00:11:41,920 --> 00:11:45,210
Dříve jsme byli
Vždycky odpovědi 200.

219
00:11:45,210 --> 00:11:48,630
Ale teď, pokaždé D3 se ptá
nám to, co je vaše pozice x,

220
00:11:48,630 --> 00:11:51,790
to bude dávat us-- máme
že kruh, takže máme data.

221
00:11:51,790 --> 00:11:55,290
Bude to, aby nám data a říct,
co chcete, expozice bude,

222
00:11:55,290 --> 00:11:57,120
na základě těchto dat.

223
00:11:57,120 --> 00:11:59,590
>> Pojďme se jen vrátit aktuální data.

224
00:11:59,590 --> 00:12:04,910
Takže pokud narazíme tohle, tohle dává
Údaje nás řízený dokumenty.

225
00:12:04,910 --> 00:12:08,040
Tyto kruhy jsou založeny
Ve vztahu Position--

226
00:12:08,040 --> 00:12:11,120
jsou základy jako funkce údajů.

227
00:12:11,120 --> 00:12:13,100
>> Takže pro první kruh,
D3 klade kruh.

228
00:12:13,100 --> 00:12:16,770
A pak D3 nás ptá, co dělat
Chcete expozice být.

229
00:12:16,770 --> 00:12:19,620
A my jen říct, co data.

230
00:12:19,620 --> 00:12:21,185
Proveďte expozici 10.

231
00:12:21,185 --> 00:12:26,320
>> Pak se zeptá, co chcete,
expozice bude pro druhý kruh.

232
00:12:26,320 --> 00:12:27,270
A my odpovídáme, 45.

233
00:12:27,270 --> 00:12:30,000

234
00:12:30,000 --> 00:12:32,230
A my, samozřejmě, může
dělat nějaké výpočty zde.

235
00:12:32,230 --> 00:12:35,510
Zjistil jsem, že tyto kruhy
jsou trochu naskládal nahoru.

236
00:12:35,510 --> 00:12:38,965
>> Tak vynásobte ji 3, násobit data 3.

237
00:12:38,965 --> 00:12:41,870

238
00:12:41,870 --> 00:12:43,840
Náš kruh zrovna rozšířila ven.

239
00:12:43,840 --> 00:12:46,730
Naše hodnota ztrojnásobil.

240
00:12:46,730 --> 00:12:51,010
>> Kruh je skutečně na okraji,
tak se pojďme možná trochu kompenzovat to.

241
00:12:51,010 --> 00:12:53,632
Řekněme, že by 20.

242
00:12:53,632 --> 00:12:56,070
Tady to máte.

243
00:12:56,070 --> 00:12:57,590
>> Jedná se o vizualizaci dat.

244
00:12:57,590 --> 00:13:01,767
Je to velmi jednoduchý člověk, ale to
nám dává nějaké nahlédnutí do našich dat.

245
00:13:01,767 --> 00:13:04,600
To nám říká, že jsme například
mají malý shluk prvků.

246
00:13:04,600 --> 00:13:06,340
A my máme velkou outlier zde.

247
00:13:06,340 --> 00:13:10,830
To nám dává nějaké informace
o distribuci.

248
00:13:10,830 --> 00:13:20,830
>> Pokud bychom byli, například, pro změnu
dat do 150 zde a Refresh,

249
00:13:20,830 --> 00:13:22,630
Naše vizualizace se změní.

250
00:13:22,630 --> 00:13:24,285
Tento dokument je dat řízený.

251
00:13:24,285 --> 00:13:32,640

252
00:13:32,640 --> 00:13:36,180
>> Tak samozřejmě, všechny tyto prvky,
Všechny tyto atributy zde,

253
00:13:36,180 --> 00:13:38,430
můžeme použít funkci, ne
jen čísla, a to nejen

254
00:13:38,430 --> 00:13:39,900
x a y pozice.

255
00:13:39,900 --> 00:13:42,120
Takže můžeme použít funkci pro barvu.

256
00:13:42,120 --> 00:13:45,260

257
00:13:45,260 --> 00:13:46,360
Takže budeme dělat to samé.

258
00:13:46,360 --> 00:13:49,360
Dáme to funkce.

259
00:13:49,360 --> 00:13:52,320
>> A řekněme, mohli bychom mít
podmiňovací způsob v naší funkce.

260
00:13:52,320 --> 00:13:54,770
Tato funkce může být
sto řádků dlouhý.

261
00:13:54,770 --> 00:13:57,150
To může udělat jen velmi, velmi složité věci.

262
00:13:57,150 --> 00:13:59,080
>> Takže pojďme dát if zde.

263
00:13:59,080 --> 00:14:03,420
Řekněme, že pokud naše údaje jsou méně
než 50, to je nějaký práh

264
00:14:03,420 --> 00:14:05,817
že se zajímáme
v z nějakého důvodu.

265
00:14:05,817 --> 00:14:06,650
Pojďme dělat to zelené.

266
00:14:06,650 --> 00:14:09,830

267
00:14:09,830 --> 00:14:15,320
V opačném případě, pojďme dělat to červené.

268
00:14:15,320 --> 00:14:16,110
Jak to?

269
00:14:16,110 --> 00:14:19,630

270
00:14:19,630 --> 00:14:21,220
Nice.

271
00:14:21,220 --> 00:14:24,860
>> Takže naše vizualizace dat začíná
zprostředkovat zajímavé informace

272
00:14:24,860 --> 00:14:26,727
na mnoha kanálech.

273
00:14:26,727 --> 00:14:28,560
Takže teď trochu znát
o distribuci.

274
00:14:28,560 --> 00:14:31,768
A my víme, že tam je nějaký druh
odříznout na 50, které nás zajímají.

275
00:14:31,768 --> 00:14:35,630
Víme, že existují dva datové body
pod tímto prahem, a většina z nich

276
00:14:35,630 --> 00:14:36,130
výše.

277
00:14:36,130 --> 00:14:41,510

278
00:14:41,510 --> 00:14:46,160
>> Tak jako poslední krok, tato data zde,
to je velmi vzácné vidět takhle.

279
00:14:46,160 --> 00:14:52,610
Tak pojďme jen přesunout ji do proměnné
protože to je čistší, takhle.

280
00:14:52,610 --> 00:15:02,980

281
00:15:02,980 --> 00:15:05,197
A pak jsme se použít tuto proměnnou zde.

282
00:15:05,197 --> 00:15:06,280
Je to přesně to samé.

283
00:15:06,280 --> 00:15:07,280
Je to jen trochu čistší.

284
00:15:07,280 --> 00:15:25,300

285
00:15:25,300 --> 00:15:35,300
>> Další na řadě, Act III, Scales--
Takže jeden problém hned

286
00:15:35,300 --> 00:15:38,920
tady je, pokud změníme naše
Údaje v tomto 200 value--

287
00:15:38,920 --> 00:15:41,685
pokud bychom ho změnit na 400
nebo tak něco a refresh,

288
00:15:41,685 --> 00:15:44,540
pak tato hodnota prostě šel mimo obrazovku.

289
00:15:44,540 --> 00:15:49,040
Takže naše logika tady
o tom, jak děláme časy 3

290
00:15:49,040 --> 00:15:52,570
a 20, aby rozložil ji a poté
offset to trochu je opravdu neohrabaný.

291
00:15:52,570 --> 00:15:54,150
>> Co tato čísla znamenají?

292
00:15:54,150 --> 00:15:55,400
Oni jen těžko tam kódované.

293
00:15:55,400 --> 00:15:58,830
A oni velmi vázána na data.

294
00:15:58,830 --> 00:16:00,550
Chceme dokument dat řízený.

295
00:16:00,550 --> 00:16:05,460
Chceme velmi flexibilní dokument,
že zadaných údajů, adaptovat se

296
00:16:05,460 --> 00:16:07,900
a zastupuje ji.

297
00:16:07,900 --> 00:16:11,330
>> To, co potřebujeme, je v podstatě, my
mají tento rozsah čísel 10.

298
00:16:11,330 --> 00:16:12,640
45, 105.

299
00:16:12,640 --> 00:16:17,630
A my chceme zmapovat, že ven na
šířka, celou šířku sem.

300
00:16:17,630 --> 00:16:20,620
Takže máme rozsah
Čísla jdou od 0 do 100.

301
00:16:20,620 --> 00:16:24,980
A máme to campus I pokračuje
20-700, v tomto případě.

302
00:16:24,980 --> 00:16:26,515
>> Jsme trochu chceme zmapovat si to.

303
00:16:26,515 --> 00:16:30,002
Chceme měřítku, že až a
pak to kompenzovat trochu.

304
00:16:30,002 --> 00:16:33,165
Ukazuje se, že D3 má tyto.

305
00:16:33,165 --> 00:16:34,220
Říká se tomu stupnice.

306
00:16:34,220 --> 00:16:37,410

307
00:16:37,410 --> 00:16:38,250
Tak pojďme používat.

308
00:16:38,250 --> 00:16:46,300

309
00:16:46,300 --> 00:16:49,670
>> Způsob, jakým works-- budu
zadejte toto nahoru a pak ji vysvětlit.

310
00:16:49,670 --> 00:17:01,530

311
00:17:01,530 --> 00:17:02,450
To je měřítko.

312
00:17:02,450 --> 00:17:08,670
Co to bude dělat, je, bude to zmapovat
hodnot 1-200 na na 20-600.

313
00:17:08,670 --> 00:17:10,990
Můžeme zjistit, že.

314
00:17:10,990 --> 00:17:13,329
Můžeme vidět, že tady.

315
00:17:13,329 --> 00:17:21,704
>> Takže když jsem krmit 1-- jeden okamžik.

316
00:17:21,704 --> 00:17:47,764

317
00:17:47,764 --> 00:17:48,555
Dej mi jednu sekundu.

318
00:17:48,555 --> 00:17:53,680

319
00:17:53,680 --> 00:17:55,080
Musel jsem překlep to.

320
00:17:55,080 --> 00:18:15,320

321
00:18:15,320 --> 00:18:15,990
Tady to je.

322
00:18:15,990 --> 00:18:17,930
Je mi líto.

323
00:18:17,930 --> 00:18:22,050
>> Takže to, co bude dělat měřítko
je, bude mít hodnotu

324
00:18:22,050 --> 00:18:24,930
a pak převést to,
rozšířit, že ven, takže

325
00:18:24,930 --> 00:18:27,320
vyplní celou řadu žádáte.

326
00:18:27,320 --> 00:18:32,910
Takže v tomto případě, pokud bychom dát jeden,
to bude zmapovat, že se na 20 ° C.

327
00:18:32,910 --> 00:18:37,750
A pokud bychom dát 200, to je
jít na mapu, která na 600.

328
00:18:37,750 --> 00:18:40,460
A někde mezi tím,
pokud dostaneme 100, to je

329
00:18:40,460 --> 00:18:44,610
Bude někam
mezi 20 a 600.

330
00:18:44,610 --> 00:18:51,480
>> A samozřejmě, teď je to to, co
musíme odstranit ty pevný kódované

331
00:18:51,480 --> 00:18:53,402
věcí, které jsme právě tam.

332
00:18:53,402 --> 00:18:55,950
Takže to, co chceme udělat, je
mít data, že jsme

333
00:18:55,950 --> 00:19:00,950
vzhledem k tomu, že jednotlivé údaje
element, a předat ji v měřítku jako první.

334
00:19:00,950 --> 00:19:02,635
Takže váha bude měřítko to.

335
00:19:02,635 --> 00:19:27,020

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, máme malou chybu zde.

337
00:19:48,880 --> 00:19:50,120
Jsme chybějící údaje.

338
00:19:50,120 --> 00:19:51,290
Tady to je.

339
00:19:51,290 --> 00:19:58,550

340
00:19:58,550 --> 00:19:59,550
A že rozšiřuje ji.

341
00:19:59,550 --> 00:20:01,383
>> To nám dává stejný
Výsledek jsme měli předtím,

342
00:20:01,383 --> 00:20:04,030
ale místo toho, aby ty
pevný kódované omezení.

343
00:20:04,030 --> 00:20:07,790
A v případě, že velikost našeho
Změny plátno, například,

344
00:20:07,790 --> 00:20:11,790
Chceme-li mít po všem
400 pixelů a to squishes ven,

345
00:20:11,790 --> 00:20:15,440
můžeme mít over--
můžeme rozšířit ji, nebo se

346
00:20:15,440 --> 00:20:21,890
může snížit tuto levého okraje na
něco méně nebo více než 20.

347
00:20:21,890 --> 00:20:25,470
Tato čísla, tyto hard kódované
Čísla nyní smysl pro nás.

348
00:20:25,470 --> 00:20:28,110

349
00:20:28,110 --> 00:20:30,520
>> A my jsme mohli udělat mnohem víc
zajímavé věci stejně.

350
00:20:30,520 --> 00:20:35,990
Takže místo toho, aby lineární
měřítko, můžeme chtít přihlásit měřítko.

351
00:20:35,990 --> 00:20:37,840
A že nám dá logaritmické stupnice.

352
00:20:37,840 --> 00:20:41,269
>> Takže teď naše měřítko, místo
Jen rozšiřuje na to, že rozsah,

353
00:20:41,269 --> 00:20:42,810
to dělá složitější věci.

354
00:20:42,810 --> 00:20:48,790

355
00:20:48,790 --> 00:20:53,790
Místo toho, aby tento rozsah hard
kódovaný, a místo toho, aby 600,

356
00:20:53,790 --> 00:20:58,465
bychom mohli chtít, aby stačí použít šířku,
tak od 20 do šířky minus 40,

357
00:20:58,465 --> 00:21:02,392
2 krát okrajů na druhé straně.

358
00:21:02,392 --> 00:21:05,350
A to je mnohem větší smysl
někdo, kdo by mohl podívat na kód.

359
00:21:05,350 --> 00:21:08,080

360
00:21:08,080 --> 00:21:11,850
>> Zajímavé je, že váhy získat
velmi, velmi propracovaný stejně.

361
00:21:11,850 --> 00:21:13,350
Dělají spoustu zajímavých věcí.

362
00:21:13,350 --> 00:21:17,620
Takže váhy nemusí mít nutně
pracovat jen s čísly.

363
00:21:17,620 --> 00:21:18,955
Pojďme udělat barevné škály.

364
00:21:18,955 --> 00:21:23,120

365
00:21:23,120 --> 00:21:26,120
>> Takže náš sortiment by be--
Naší doménou je 1 až 200.

366
00:21:26,120 --> 00:21:28,220
To je vstup věc.

367
00:21:28,220 --> 00:21:33,793
Ale my chtít zmapovat od
zelené na červenou, např.

368
00:21:33,793 --> 00:21:39,710

369
00:21:39,710 --> 00:21:42,910
A teď, když jsme ho 1 projít,
budeme dostat zelenou.

370
00:21:42,910 --> 00:21:45,110
Dáme-li mu 200, dostaneme červenou.

371
00:21:45,110 --> 00:21:49,480
A když jsme to projít něco mezi,
to bude nějaký mix, který,

372
00:21:49,480 --> 00:21:52,520
někde na gradientu
mezi zelenou a červenou.

373
00:21:52,520 --> 00:21:55,210
>> A místo toho, aby
tento druh neohrabaný logiky

374
00:21:55,210 --> 00:21:58,550
Máme zde
podmíněné právě tam,

375
00:21:58,550 --> 00:22:03,250
bychom mohli mít something--
lineární stupnice mezi těmi.

376
00:22:03,250 --> 00:22:07,100
Proto bychom použít stupnici jsme právě
vytvořený, který jsme nazvali barvu.

377
00:22:07,100 --> 00:22:09,060
A my bychom jej d, což
je náš datový prvek.

378
00:22:09,060 --> 00:22:14,250

379
00:22:14,250 --> 00:22:15,060
A tam jdeme.

380
00:22:15,060 --> 00:22:18,070
Máme barevné škály.

381
00:22:18,070 --> 00:22:18,940
>> Tak tohle je mapování.

382
00:22:18,940 --> 00:22:20,960
Tak daleko vlevo je zcela zeleně.

383
00:22:20,960 --> 00:22:22,560
Krajní pravice je zcela červené.

384
00:22:22,560 --> 00:22:24,828
A všechno mezi tím
je funkcí d.

385
00:22:24,828 --> 00:22:33,369

386
00:22:33,369 --> 00:22:35,160
Máme zajímavý
vizualizace zde.

387
00:22:35,160 --> 00:22:36,952
Ale naše data byla trochu nuda.

388
00:22:36,952 --> 00:22:39,410
Pojďme se podívat, co jsme mohli udělat, pokud
jsme měli více zajímavé údaje.

389
00:22:39,410 --> 00:22:44,420

390
00:22:44,420 --> 00:22:50,500
>> Zákon IV, práce s
Data-- první věc

391
00:22:50,500 --> 00:22:53,560
budeme chtít udělat, aby se naše
vizualizace zajímavější

392
00:22:53,560 --> 00:22:56,140
je přesunout data někam jinam.

393
00:22:56,140 --> 00:22:58,310
Je to velmi neohrabaný mít
Údaje, které zde pevný kódované.

394
00:22:58,310 --> 00:23:01,220
A obecně, budeme se ptát
někdo jiný pro data.

395
00:23:01,220 --> 00:23:05,400
Budeme snad žádá vládu,
Census Bureau, co je vaše data

396
00:23:05,400 --> 00:23:10,170
a pak vykreslování že nebo dotazem
Některé třetí subjekt, u některých dat

397
00:23:10,170 --> 00:23:13,330
a pak vybudování
vizualizace na to.

398
00:23:13,330 --> 00:23:17,170
>> Takže první věc, kterou chcete udělat,
je krok, který někam jinam.

399
00:23:17,170 --> 00:23:24,130
Takže budu vytvářet
soubor zde nazývá data.json.

400
00:23:24,130 --> 00:23:25,600
JSON je formát dat.

401
00:23:25,600 --> 00:23:29,210
Nemusíte vědět hodně o tom.

402
00:23:29,210 --> 00:23:33,210
A budeme kopírovat
malé množství dat máme tam,

403
00:23:33,210 --> 00:23:40,330
vložte jej tam doslovně, jděte
zpět k naší vizualizaci kódu

404
00:23:40,330 --> 00:23:45,362
tady, a použít tuto funkci přímo zde.

405
00:23:45,362 --> 00:23:46,820
Nemusíte znát podrobnosti.

406
00:23:46,820 --> 00:23:49,800
Ale co to bude dělat, je,
to se zjistí, že soubor,

407
00:23:49,800 --> 00:23:51,780
přines to, a vrátit ho k nám.

408
00:23:51,780 --> 00:24:11,660

409
00:24:11,660 --> 00:24:15,220
Takže to, co to dělá, je, že jde
a získat soubor data.json.

410
00:24:15,220 --> 00:24:18,570
A pak kód, který je
odsazené inside-- v podstatě,

411
00:24:18,570 --> 00:24:21,800
všechny kód máme there-- bude
spustit pouze tehdy, když jsme se získat data zpět.

412
00:24:21,800 --> 00:24:25,760
A pak, že to bude běh, že
kód s daty máme.

413
00:24:25,760 --> 00:24:28,870
Skvělé, máme
vizualizace, že dotazy

414
00:24:28,870 --> 00:24:31,390
pro nějaký kód někde
jinde, což je obvykle

415
00:24:31,390 --> 00:24:36,110
kde dotazy některé údaje z
někde jinde, což je obvykle

416
00:24:36,110 --> 00:24:38,656
jak vizualizace práce.

417
00:24:38,656 --> 00:24:41,400
>> Ale chci se vrátit k datům.

418
00:24:41,400 --> 00:24:48,030
Takže data Fundamentally v D3-- D3
spotřebuje data, která je seznam věcí.

419
00:24:48,030 --> 00:24:53,000
D3 očekává, že tyto údaje být jen seznam
věcí, řada věcí.

420
00:24:53,000 --> 00:24:58,780
Nezáleží na tom, jaké ty věci
jsou, pokud je to pole z nich.

421
00:24:58,780 --> 00:25:02,460
>> Tak tady, například, mohli jsme
Samozřejmě jsme s plovoucí desetinnou čárkou hodnoty.

422
00:25:02,460 --> 00:25:04,830
Mohli bychom mít negativní výsledky.

423
00:25:04,830 --> 00:25:09,400
D3 se nestará, tak dlouho
jak je to seznam věcí.

424
00:25:09,400 --> 00:25:13,270
>> Vzhledem k zajímavé věci, které jsme
by mohla mít, mohli bychom také

425
00:25:13,270 --> 00:25:19,410
mají seznam řetězců, jako je to.

426
00:25:19,410 --> 00:25:25,440
Tak to jsou titulky Crimson
Zvedl jsem před pár dny.

427
00:25:25,440 --> 00:25:29,220
A možná najdete několik zajímavých
věci, o těchto několika titulky.

428
00:25:29,220 --> 00:25:30,970
>> Takže ještě jednou, tohle je seznam věcí.

429
00:25:30,970 --> 00:25:32,360
D3 nestará.

430
00:25:32,360 --> 00:25:35,572
To se stalo, že řetězec.

431
00:25:35,572 --> 00:25:36,530
Změnili jsme naše data.

432
00:25:36,530 --> 00:25:38,210
>> Vraťme se k našemu vizualizaci.

433
00:25:38,210 --> 00:25:42,495
Nyní, naše vizualizace očekává
vstupní být čísla.

434
00:25:42,495 --> 00:25:44,370
Takže budeme mít
provést několik změn.

435
00:25:44,370 --> 00:25:47,180

436
00:25:47,180 --> 00:25:52,180
Tak například, v první řadě, možná
Chceme, aby tyto kruhy spolu

437
00:25:52,180 --> 00:25:56,870
délkou titulek,
počet znaků v titulku.

438
00:25:56,870 --> 00:26:03,600
>> Takže to, co budeme dělat, je-- pokaždé naše
Funkce je volána s řetězcem,

439
00:26:03,600 --> 00:26:09,095
zjistíme, že je to délka a
pak projít kolem toho v měřítku.

440
00:26:09,095 --> 00:26:11,550
Barva, vrátím
že k ocelově modrá.

441
00:26:11,550 --> 00:26:19,060

442
00:26:19,060 --> 00:26:20,420
A tam jdeme.

443
00:26:20,420 --> 00:26:23,190
Máme vizualizace
z Crimson titulky.

444
00:26:23,190 --> 00:26:25,500
>> Naše měřítko je trochu mimo.

445
00:26:25,500 --> 00:26:29,680
Předpokládejme, že nejdelší
titulek je dlouhý 100 znaků,

446
00:26:29,680 --> 00:26:32,244
tak, aby rozpětí se trochu.

447
00:26:32,244 --> 00:26:33,410
A máme vizualizaci.

448
00:26:33,410 --> 00:26:36,710
Takže se zdá, že většina titulky
jsou dost blízko u sebe,

449
00:26:36,710 --> 00:26:38,750
co se týče charakteru linky.

450
00:26:38,750 --> 00:26:41,200
Ale jeden tam opravdu vyniká.

451
00:26:41,200 --> 00:26:46,660
>> Mohli bychom postavit některé nástroje
prozkoumat, že více.

452
00:26:46,660 --> 00:26:50,710
Ale když jsem pracoval na to, byl jsem
zvědaví, zda v tomto souboru dat,

453
00:26:50,710 --> 00:26:53,880
titulky s dvojtečkou
v nich by být delší.

454
00:26:53,880 --> 00:26:55,770
I předpokládá, že ano.

455
00:26:55,770 --> 00:26:56,660
>> Takže pojďme zjistit.

456
00:26:56,660 --> 00:27:00,650
Pojďme používat barvy
kanál, jako jsme to udělali předtím,

457
00:27:00,650 --> 00:27:04,540
zakódovat některé o tom, zda
tam je dvojtečka, nebo ne.

458
00:27:04,540 --> 00:27:07,220
Takže budeme opět používat podmíněné.

459
00:27:07,220 --> 00:27:09,350
Nemusíte vědět
podrobnosti o to,

460
00:27:09,350 --> 00:27:14,260
ale to je to, jak jsme se ověřit
řetězec pro konkrétní znak

461
00:27:14,260 --> 00:27:16,355
v JavaScriptu, opět, není relevantní.

462
00:27:16,355 --> 00:27:18,910

463
00:27:18,910 --> 00:27:23,270
>> Ale pokud se nám nepodaří najít
tlustého střeva, vrátíme zeleně.

464
00:27:23,270 --> 00:27:26,100
A pokud ano, vrátíme červené.

465
00:27:26,100 --> 00:27:29,010
Takže znovu, titulky, že
mají dvojtečka bude červeně.

466
00:27:29,010 --> 00:27:34,980
To je to, co to means-- pěkné.

467
00:27:34,980 --> 00:27:38,040
>> Takže se zdá, že můj
hypotéza je narazil.

468
00:27:38,040 --> 00:27:39,360
Je tu jen dvě.

469
00:27:39,360 --> 00:27:42,380
Máme jen šest datových bodů
a pouze dva měli dvojtečky.

470
00:27:42,380 --> 00:27:45,510
Ale zdá se, trochu víc
na spodním konci, ve skutečnosti.

471
00:27:45,510 --> 00:27:47,830
Titulky s dvojtečkou se zdá
obecně být kratší,

472
00:27:47,830 --> 00:27:52,370
alespoň v našich dat set-- zajímavé.

473
00:27:52,370 --> 00:27:55,830
>> Vraťme se, že pro
ocelově modrá a pak uvidíte

474
00:27:55,830 --> 00:28:00,601
co můžeme udělat s ještě
další zajímavé údaje.

475
00:28:00,601 --> 00:28:04,370

476
00:28:04,370 --> 00:28:09,070
Takže znovu, jsem se zmínil, že
Data v D3 je seznam věcí.

477
00:28:09,070 --> 00:28:11,080
Viděli jsme počty mnoha typů.

478
00:28:11,080 --> 00:28:12,810
Už jsme viděli řetězce.

479
00:28:12,810 --> 00:28:15,700
Ale věci mohou být i objekty.

480
00:28:15,700 --> 00:28:20,080
>> Mohou to být složité věci
které obsahují spoustu věcí.

481
00:28:20,080 --> 00:28:24,510
Chcete říct, že jasněji,
ve většině případů jsme

482
00:28:24,510 --> 00:28:28,384
Chcete stavět každý datový bod as
mnohem složitější, než jen jednu hodnotu.

483
00:28:28,384 --> 00:28:30,175
Pokud byste si představit,
databáze o studentech,

484
00:28:30,175 --> 00:28:32,470
tam by mohlo být studentem
jméno, student ID,

485
00:28:32,470 --> 00:28:36,370
a spousta věcí spojené
s konkrétní záznam,

486
00:28:36,370 --> 00:28:39,834
ne jen řetězec nebo číslo.

487
00:28:39,834 --> 00:28:40,750
Tak se pojďme podívat na to.

488
00:28:40,750 --> 00:28:55,180

489
00:28:55,180 --> 00:28:56,760
>> To je jeden takový soubor údajů.

490
00:28:56,760 --> 00:28:59,090
To je datový soubor o zemětřesení.

491
00:28:59,090 --> 00:29:01,910

492
00:29:01,910 --> 00:29:08,430
Takže vše je zde na našem seznamu nebo pole
věcí, obsahuje mnoho věcí sám.

493
00:29:08,430 --> 00:29:11,380
Takže každý datový bod má
velikost a koordinovat.

494
00:29:11,380 --> 00:29:13,425
A koordinuje se
obsahují dvě věci.

495
00:29:13,425 --> 00:29:15,960

496
00:29:15,960 --> 00:29:20,450
>> Takže každý den, je nyní mnohem více
komplikované a mnohem zajímavější

497
00:29:20,450 --> 00:29:22,700
a obsahuje mnohem víc
zajímavé informace.

498
00:29:22,700 --> 00:29:26,730
Pojďme se podívat, jsme mohli postavit z toho.

499
00:29:26,730 --> 00:29:36,130
Vracet se zpátky sem, opět s použitím
Naše histogram kruh vizualizace

500
00:29:36,130 --> 00:29:42,110
jsme vybudovali, pojďme se podívat, jestli můžeme stavět
vizualizace distribuce velikosti

501
00:29:42,110 --> 00:29:43,305
v našem souboru dat.

502
00:29:43,305 --> 00:29:45,850

503
00:29:45,850 --> 00:29:48,660
>> Tak tady je to stejný koncept.

504
00:29:48,660 --> 00:29:51,920
Ale teď, d obsahuje více věcí.

505
00:29:51,920 --> 00:29:54,780
d obsahuje mnoho datových prvků.

506
00:29:54,780 --> 00:29:57,946
Tak jsme si d zpět.

507
00:29:57,946 --> 00:29:59,670
D3 nám dává d.

508
00:29:59,670 --> 00:30:06,080
A my odpovídáme tím, že najde velikosti
o d a pak předá že v měřítku.

509
00:30:06,080 --> 00:30:08,490
>> A pak musíme změnit
Naše měřítko, samozřejmě.

510
00:30:08,490 --> 00:30:12,980
Takže veličiny prostě ne
jít mnohem víc než 10.

511
00:30:12,980 --> 00:30:15,485
Ve skutečnosti, tam nikdy nebyl
10 velikost zemětřesení.

512
00:30:15,485 --> 00:30:19,360
Ale to je trochu naše horní
end, náš horní spektrum.

513
00:30:19,360 --> 00:30:20,240
>> Pojďme obnovit.

514
00:30:20,240 --> 00:30:22,990
Nice, máme vizualizaci.

515
00:30:22,990 --> 00:30:25,490
Je zajímavé note-- tak
existují dva datové body, které

516
00:30:25,490 --> 00:30:29,010
jsou téměř přesně na sebe
další, z hlediska velikosti.

517
00:30:29,010 --> 00:30:31,350
Vidíte to tím, neprůhlednosti jsme používáte.

518
00:30:31,350 --> 00:30:40,810

519
00:30:40,810 --> 00:30:42,690
>> Máme geografických dat teď.

520
00:30:42,690 --> 00:30:44,710
Máme zeměpisné šířky a délky.

521
00:30:44,710 --> 00:30:47,549
Možná bychom mohli udělat něco
mnohem zajímavější s tím.

522
00:30:47,549 --> 00:30:49,590
Pojďme si trochu více
zajímavý způsob, jak představit

523
00:30:49,590 --> 00:30:53,500
to složitější
Údaje, které mají přístup k.

524
00:30:53,500 --> 00:31:04,950
>> Zákon V, Mapping-- zásadně,
Chceme, aby tyto na mapě.

525
00:31:04,950 --> 00:31:07,690
Myslím, že to je místo, kde se to děje.

526
00:31:07,690 --> 00:31:13,130
Chceme zakódovat informace o
Postavení těchto zemětřesení čtení,

527
00:31:13,130 --> 00:31:16,350
jakož i jejich velikost,
protože máme teď.

528
00:31:16,350 --> 00:31:21,310
Chápeme, jak spotřebovat
složitější dat.

529
00:31:21,310 --> 00:31:26,200
>> První věc, kterou uděláme, je
vytvořit mapu, mapu pozadí.

530
00:31:26,200 --> 00:31:29,360
Chystám se projít
to velmi rychle.

531
00:31:29,360 --> 00:31:30,560
To je složité kód.

532
00:31:30,560 --> 00:31:33,110
Je to další z těch,
recepty nemáte opravdu

533
00:31:33,110 --> 00:31:35,690
muset plně pochopit, pro vás k použití.

534
00:31:35,690 --> 00:31:38,510

535
00:31:38,510 --> 00:31:39,740
Ale to je kód.

536
00:31:39,740 --> 00:31:43,580
Tento kód tady vytvoří mapu.

537
00:31:43,580 --> 00:31:45,730
>> Nebudeme chodit v detailu.

538
00:31:45,730 --> 00:31:54,210
Ale povrchně, co to dělá, je,
dotáže tento soubor us.json, který

539
00:31:54,210 --> 00:31:57,150
je datový soubor, jako je
ta, kterou jsme měli předtím.

540
00:31:57,150 --> 00:31:59,150
Je to složitější, samozřejmě.

541
00:31:59,150 --> 00:32:02,920
Ale v tomto případě vše,
každý datový bod je tento stav

542
00:32:02,920 --> 00:32:05,420
a má seznam
zeměpisné šířky a délky

543
00:32:05,420 --> 00:32:10,500
které definují polygon,
že forma, že stát.

544
00:32:10,500 --> 00:32:13,280
>> Takže to, co D3 bude dělat, je obdobný
k tomu, co jsme dělali předtím.

545
00:32:13,280 --> 00:32:18,140
To bude vyžadovat, aby i
vážou, že na prvek.

546
00:32:18,140 --> 00:32:20,890
A je tu funkce, která
bude mapovat tento prvek ven,

547
00:32:20,890 --> 00:32:23,410
na základě zeměpisných šířkách a délky.

548
00:32:23,410 --> 00:32:24,580
Můžete si přečíst více o tom.

549
00:32:24,580 --> 00:32:27,385
A já doporučuji.

550
00:32:27,385 --> 00:32:30,090
>> Tam jsou odkazy na
Konec tohoto kódu nenapsal.

551
00:32:30,090 --> 00:32:31,570
A kód je komentoval.

552
00:32:31,570 --> 00:32:34,050
V tam jsou odkazy na další na to.

553
00:32:34,050 --> 00:32:36,590
Doporučuji vám to najít.

554
00:32:36,590 --> 00:32:39,460
Ale to, co nás zajímá, je
tato projekce funkce.

555
00:32:39,460 --> 00:32:41,210
Chci jít přes to.

556
00:32:41,210 --> 00:32:43,522
>> Za prvé, dovolte mi ukázat
vy, že ano, máme mapu.

557
00:32:43,522 --> 00:32:47,300

558
00:32:47,300 --> 00:32:49,970
Mapy jsou v pohodě.

559
00:32:49,970 --> 00:32:52,330
Tak se pojďme podívat na to
produkční funkce.

560
00:32:52,330 --> 00:32:56,481
>> Projekce je velmi
jako měřítku, váhy znovu.

561
00:32:56,481 --> 00:32:59,210
Takže to, co výroba pro
Tato funkce projekce

562
00:32:59,210 --> 00:33:06,610
to je, mohli bychom to projít délku
a latitudes-- v tomto případě,

563
00:33:06,610 --> 00:33:09,590
tyto hodnoty jsou zde
lat-touží budovy

564
00:33:09,590 --> 00:33:13,990
sedíme v právu
now-- na projekci.

565
00:33:13,990 --> 00:33:20,560
A projekce převede
že do hodnoty pixelů x a y.

566
00:33:20,560 --> 00:33:23,300
>> Takže to, co je projekce dělá
je velmi podobná naší měřítku.

567
00:33:23,300 --> 00:33:27,270
Je to při našich zeměpisných šířkách a
délka, která představuje celou zeměkouli

568
00:33:27,270 --> 00:33:31,390
a smršťování a velikosti, které
dolů na náměstí, které chceme,

569
00:33:31,390 --> 00:33:33,510
že jsme ho dal.

570
00:33:33,510 --> 00:33:35,220
V tomto případě, my jsme
předávání těchto hodnot.

571
00:33:35,220 --> 00:33:41,370
A to nám dává, dobře, že
Na obrazovce znamená 640 pixelů.

572
00:33:41,370 --> 00:33:46,250
Celá tato obrazovka je 700 pixelů
široký, takže z nás dělá asi tady,

573
00:33:46,250 --> 00:33:53,310
a 154 pixelů dolů, které bych
odhad je skoro tady.

574
00:33:53,310 --> 00:33:57,250
>> Takže při těch lat-touží, což
představují něco na celém světě

575
00:33:57,250 --> 00:34:02,850
a squishing a pohybující se, že kolem
se nám hodnoty X a Y pixelů,

576
00:34:02,850 --> 00:34:05,450
To je první věc, která je
provádí v této mapovací kód.

577
00:34:05,450 --> 00:34:07,920
A pak zbytek
Kód spotřebovává data

578
00:34:07,920 --> 00:34:14,310
a pak mapuje ty lat-touží
na něco, co na obrazovce.

579
00:34:14,310 --> 00:34:18,380
>> Ale budeme používat tuto projekci
funkce, protože se ukáže, že

580
00:34:18,380 --> 00:34:20,270
máme lat-touží touží stejně.

581
00:34:20,270 --> 00:34:24,509
Při zpětném pohledu na našich dat, máme
zeměpisné šířky a délky souřadnice

582
00:34:24,509 --> 00:34:25,425
pro každé pozorování.

583
00:34:25,425 --> 00:34:28,131

584
00:34:28,131 --> 00:34:29,130
Takže pojďme použít projekci.

585
00:34:29,130 --> 00:34:33,250

586
00:34:33,250 --> 00:34:37,639
>> Takže při pohledu na naší expozici,
chceme naši exposition--

587
00:34:37,639 --> 00:34:39,590
máme zeměpisné šířky a délky.

588
00:34:39,590 --> 00:34:40,770
Ale my chceme hodnoty obrazových bodů.

589
00:34:40,770 --> 00:34:43,510
A ukázalo se, máme přesně
to, co jsme want-- projekci.

590
00:34:43,510 --> 00:34:46,239
Velmi podobně jako jsme byli
pomocí stupnice tady,

591
00:34:46,239 --> 00:34:52,075
Nyní bude používat projekci
a předat koordinuje.

592
00:34:52,075 --> 00:34:55,241

593
00:34:55,241 --> 00:34:56,949
Takže první věc
jsme doing-- tak jsme

594
00:34:56,949 --> 00:35:01,520
dostat d, což je individuální údaje
prvek individuální zemětřesení

595
00:35:01,520 --> 00:35:02,370
čtení.

596
00:35:02,370 --> 00:35:04,640
První věc, kterou děláme
je získat souřadnice.

597
00:35:04,640 --> 00:35:06,150
Dobře, máme souřadnice.

598
00:35:06,150 --> 00:35:09,160
>> Druhá věc, co děláme, je
Onoho na projekci.

599
00:35:09,160 --> 00:35:13,440
Projekce převádí tyto souřadnice
do hodnoty pixelů, x a y.

600
00:35:13,440 --> 00:35:16,680
A pak poslední věc, kterou bychom
chci udělat, je dostat x,

601
00:35:16,680 --> 00:35:19,342
což v tomto případě je první z nich.

602
00:35:19,342 --> 00:35:22,050
Jedná se o první z těchto dvou věcí
které jsou vráceny projekcí.

603
00:35:22,050 --> 00:35:27,840

604
00:35:27,840 --> 00:35:29,630
>> Uděláme totéž pro y.

605
00:35:29,630 --> 00:35:34,960
Ale místo toho, vrátíme
Druhý prvek, y.

606
00:35:34,960 --> 00:35:35,980
Připravte se na obnovit.

607
00:35:35,980 --> 00:35:39,830

608
00:35:39,830 --> 00:35:46,450
Ooh, extra charakter
here-- pěkné, máme

609
00:35:46,450 --> 00:35:51,730
Údaje řízený dokument, který je
skrývání tento JSON soubor objektů,

610
00:35:51,730 --> 00:35:57,560
dělat mapy, a měnící se
atribut ve vztahu k údajům

611
00:35:57,560 --> 00:35:59,600
promítat ji na mapě.

612
00:35:59,600 --> 00:36:00,840
To je opravdu zajímavé.

613
00:36:00,840 --> 00:36:03,770
To je v pohodě.

614
00:36:03,770 --> 00:36:05,640
>> Pojďme si to do zářezu.

615
00:36:05,640 --> 00:36:08,795
Myslím, že máme dva kusy
informace s každým datového bodu.

616
00:36:08,795 --> 00:36:10,000
Myslím, tři.

617
00:36:10,000 --> 00:36:12,540
Máme souřadnice,
což je x a y.

618
00:36:12,540 --> 00:36:15,700
A máme velikost.

619
00:36:15,700 --> 00:36:17,420
>> Musíme zakódovat velikosti nějak.

620
00:36:17,420 --> 00:36:18,920
Máme spoustu kanálů.

621
00:36:18,920 --> 00:36:20,370
Můžeme použít barvu.

622
00:36:20,370 --> 00:36:21,890
Můžeme použít poloměr.

623
00:36:21,890 --> 00:36:23,040
Mohli bychom použít krytí.

624
00:36:23,040 --> 00:36:25,540
Mohli bychom použít mnoho věcí v kódu.

625
00:36:25,540 --> 00:36:29,180
Některé z těchto atributů a mnoho
více, že tam nejsou uvedeny,

626
00:36:29,180 --> 00:36:33,065
proto, že jsou povinné, mohli bychom
používají pro zakódování tato data, mrtvice

627
00:36:33,065 --> 00:36:35,670
a všechny tyto věci, které jsem zmínil.

628
00:36:35,670 --> 00:36:36,690
>> Pojďme dělat poloměr.

629
00:36:36,690 --> 00:36:38,830
Myslím si, že poloměr je nejvíce intuitivní.

630
00:36:38,830 --> 00:36:46,210
Takže znovu, budeme nahrazovat, že pevně
40 a provést některé výpočty.

631
00:36:46,210 --> 00:36:48,810
Budeme znovu použít náš oblíbený měřítko.

632
00:36:48,810 --> 00:36:50,290
A my jsme v minulosti d.

633
00:36:50,290 --> 00:36:55,850
Ale ne d, protože chceme velikost
D. d je jen datový bod.

634
00:36:55,850 --> 00:36:57,430
Budeme projít velikost měřítku.

635
00:36:57,430 --> 00:36:58,470
>> Zkusme to znovu.

636
00:36:58,470 --> 00:37:00,230
Ooh, to nefunguje.

637
00:37:00,230 --> 00:37:02,940
Proč to nefunguje?

638
00:37:02,940 --> 00:37:04,387
>> Takže pamatujte jakém rozsahu dělá.

639
00:37:04,387 --> 00:37:05,470
Pojďme se podívat na měřítku znovu.

640
00:37:05,470 --> 00:37:10,800
Měřítko mapy 1-10 na
na 22 až 600, více nebo méně.

641
00:37:10,800 --> 00:37:12,030
600 je obrovský.

642
00:37:12,030 --> 00:37:14,730
To je důvod, proč jsme stále to.

643
00:37:14,730 --> 00:37:18,420
>> Takže chceme změnit naše měřítko
na něco rozumnější.

644
00:37:18,420 --> 00:37:22,610
Řekněme, že chceme 0-60.

645
00:37:22,610 --> 00:37:25,340
60 je velký, ale 10 zemětřesení
jsou neuvěřitelně vzácné.

646
00:37:25,340 --> 00:37:27,880
Ve skutečnosti, že jsem se nikdy nestalo.

647
00:37:27,880 --> 00:37:31,830
>> Takže to, co to bude dělat, je, bude to trvat
Naše velikost, která jde od 1 do 10

648
00:37:31,830 --> 00:37:34,490
a mapovat na rozbalte ho.

649
00:37:34,490 --> 00:37:37,370
A namapovat na 0-60.

650
00:37:37,370 --> 00:37:38,840
Pojďme obnovit.

651
00:37:38,840 --> 00:37:41,850
>> Nice, máme vizualizaci.

652
00:37:41,850 --> 00:37:42,500
To je skvělé.

653
00:37:42,500 --> 00:37:43,736
To je aktuální data.

654
00:37:43,736 --> 00:37:46,360
Určitě jste si všimli, v mém malém hračky
příklad, největší zemětřesení

655
00:37:46,360 --> 00:37:49,417
je přímo nad námi.

656
00:37:49,417 --> 00:37:50,000
Ale to je všechno.

657
00:37:50,000 --> 00:37:54,422
Máme datum řízený vizualizace
že spotřebovává data

658
00:37:54,422 --> 00:37:56,255
a nám dává opravdu
zajímavé informace.

659
00:37:56,255 --> 00:38:02,600

660
00:38:02,600 --> 00:38:06,420
Jo, pojďme přidat nějaký
interaktivita na to.

661
00:38:06,420 --> 00:38:08,675
Zmínil jsem se, že to
silná síla D3.

662
00:38:08,675 --> 00:38:11,490

663
00:38:11,490 --> 00:38:15,060
>> Tak tady, pro každý prvek, jsme
popisující spoustu atributů.

664
00:38:15,060 --> 00:38:20,230
Ale můžeme také popsat to, co chceme
se stane s interaktivity prvky.

665
00:38:20,230 --> 00:38:26,190
Například bychom mohli popsat
co se stane, když myši.

666
00:38:26,190 --> 00:38:28,740

667
00:38:28,740 --> 00:38:33,640
A velmi podobné, že,
která bude mít funkci,

668
00:38:33,640 --> 00:38:36,700
velmi podobný
atributy jsme měli předtím,

669
00:38:36,700 --> 00:38:44,650
kde jsme se udělat něco pro
prvek, když jsme se vznášet se nad ním.

670
00:38:44,650 --> 00:38:47,100
>> Takže první věc, kterou musíme
udělat, je vybrat tento prvek,

671
00:38:47,100 --> 00:38:49,435
jej najít v podstatě, v prohlížeči.

672
00:38:49,435 --> 00:38:57,090

673
00:38:57,090 --> 00:39:00,920
a pak bychom mohli nastavit
atribut na to.

674
00:39:00,920 --> 00:39:06,870
Takže to, co tady dělám, je, když jsme se vznášet
nad něčím, dostaneme tento prvek

675
00:39:06,870 --> 00:39:11,197
a pak nastavit jeho průhlednost zpět
1, zcela neprůhledný.

676
00:39:11,197 --> 00:39:12,488
Pojďme se podívat, jak to vypadá.

677
00:39:12,488 --> 00:39:29,430

678
00:39:29,430 --> 00:39:39,080
>> Zdá se, že máme
navíc středník zde.

679
00:39:39,080 --> 00:39:42,420
Takže pokud bychom tady vznášet, dostane plný.

680
00:39:42,420 --> 00:39:46,530

681
00:39:46,530 --> 00:39:48,960
Ale teď, samozřejmě, to
pobyty plné, protože my

682
00:39:48,960 --> 00:39:53,240
musí popsat, co se děje
Při odebrání naši kurzor.

683
00:39:53,240 --> 00:39:59,990
Tak pojďme udělat přesně to, na
mouseOut, na rozdíl od mouseover.

684
00:39:59,990 --> 00:40:06,399
>> A budeme resetovat do
to, co jsme měli before-- 0,5.

685
00:40:06,399 --> 00:40:10,260
A teď, pokaždé, když jsme
vznášet se, dostaneme kruh.

686
00:40:10,260 --> 00:40:13,468
Pomáhá nám vidět, co máme
jsme výběr v podstatě.

687
00:40:13,468 --> 00:40:19,210

688
00:40:19,210 --> 00:40:22,860
>> A teď pojďme, aby to opravdu skvělé.

689
00:40:22,860 --> 00:40:26,210
Pojďme se připojit to na reálná data.

690
00:40:26,210 --> 00:40:30,890
Takže pojďme zeptat mohl
USGS o jejich data.

691
00:40:30,890 --> 00:40:35,630
Takže US Geological Survey
má k dispozici údaje o zemětřesení.

692
00:40:35,630 --> 00:40:41,460
Mají veřejné API, který je schopen
být konzumován ve formátu JSON.

693
00:40:41,460 --> 00:40:42,548
Tak pojďme to udělat.

694
00:40:42,548 --> 00:40:49,730

695
00:40:49,730 --> 00:40:55,900
>> Tak tohle je trochu kódu, který
se připojí k USGS API.

696
00:40:55,900 --> 00:40:57,990
A je tu trochu zpracování na to.

697
00:40:57,990 --> 00:41:02,200
To není podstatné, ale zjednodušuje ji
na jednoduchý formát dat, jako je ta

698
00:41:02,200 --> 00:41:03,800
jsme měli předtím.

699
00:41:03,800 --> 00:41:08,140
Tak jsem se zbavit naši výzvu k
náš falešný data.json na soubor.

700
00:41:08,140 --> 00:41:13,110
A místo toho, volám
USGS v podstatě.

701
00:41:13,110 --> 00:41:16,700
>> Pojďme obnovit, pěkné.

702
00:41:16,700 --> 00:41:21,260
To je skutečné, real-life dat
od tohoto týdne k zemětřesení.

703
00:41:21,260 --> 00:41:23,217
To je opravdu zajímavé.

704
00:41:23,217 --> 00:41:25,050
To není překvapující
pro nás, ale tam jsou

705
00:41:25,050 --> 00:41:27,909
hodně zemětřesení na
West Coast v Kalifornii.

706
00:41:27,909 --> 00:41:30,950
Ale myslel jsem, že je to velmi zajímavé
že tam bylo tolik zemětřesení

707
00:41:30,950 --> 00:41:34,350
na Aljašce, a zdá se,
tady na Středozápadě.

708
00:41:34,350 --> 00:41:37,630
Myslím, zajímavý, a jsme dobří.

709
00:41:37,630 --> 00:41:40,410
To je závěr.

710
00:41:40,410 --> 00:41:43,760
>> Ale v podstatě to
je to, co D3 nám pomáhá dělat.

711
00:41:43,760 --> 00:41:48,030
Pomáhá nám trvat dat, bind
to prvků v DOM,

712
00:41:48,030 --> 00:41:51,620
a mají tyto prvky změnit
jako funkce těchto údajů,

713
00:41:51,620 --> 00:41:54,780
mít ty atributy, jsou všechny
mnoho atributů prvků,

714
00:41:54,780 --> 00:41:57,393
všechny užitečné pro kanály
zprostředkovat informace.

715
00:41:57,393 --> 00:42:05,440

716
00:42:05,440 --> 00:42:09,290
>> D3 je neuvěřitelně silný
knihovna a překvapivě dobře spustit.

717
00:42:09,290 --> 00:42:12,260
To je nějaká silná věc.

718
00:42:12,260 --> 00:42:15,960
Vizualizace dat je
neuvěřitelně mocný nástroj

719
00:42:15,960 --> 00:42:21,530
pro dopravu osob na hluboké
postřehy, že dojde k jejich jádru

720
00:42:21,530 --> 00:42:25,430
a pomáhá jim porozumět, v
Tento hluboký a intuitivní způsob,

721
00:42:25,430 --> 00:42:29,760
jak funguje dat a jak
Údaje změní náš život.

722
00:42:29,760 --> 00:42:31,019