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

2
00:00:00,780 --> 00:00:11,880
>> [Zenelejátszási]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: én vagyok David
Chouinard, és ez D3.

4
00:00:16,480 --> 00:00:17,700
Üdvözöljük.

5
00:00:17,700 --> 00:00:21,270
Megyünk, hogy megtudjuk, D3 ma.

6
00:00:21,270 --> 00:00:25,020
D3 egy JavaScript keretrendszer
az épület egy magas színvonalú

7
00:00:25,020 --> 00:00:28,110
Interaktív megjelenítési az interneten.

8
00:00:28,110 --> 00:00:30,870
Dolgok, mint mi vagyunk,
látta a hátán velem,

9
00:00:30,870 --> 00:00:34,230
fogunk tanulni, hogy azok,
dolgokat, egyfajta alapjait is.

10
00:00:34,230 --> 00:00:36,452
De ez lesz jó.

11
00:00:36,452 --> 00:00:38,160
Kezdjük
hogy szép képeket.

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

13
00:00:41,108 --> 00:00:44,350
Van több demók
A kilátásokkal elérhető.

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

15
00:00:48,040 --> 00:00:50,760
Csináljuk.

16
00:00:50,760 --> 00:00:58,700
>> Évi I. törvény, DOM manipulation-- megyünk
kezdeni rögtön, hogy jó dolog.

17
00:00:58,700 --> 00:01:01,240
Először is, a bal oldalon, van-kódot.

18
00:01:01,240 --> 00:01:03,470
A jobb oldalon van
az eredmény a mi kódot.

19
00:01:03,470 --> 00:01:04,900
Menjünk át rajta.

20
00:01:04,900 --> 00:01:05,780
>> Csináljunk egy kört.

21
00:01:05,780 --> 00:01:08,570
Hogy hangzik?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
mi csak tett egy kört.

23
00:01:14,934 --> 00:01:16,100
Nem hiszel nekem, ugye?

24
00:01:16,100 --> 00:01:18,190
Ez nem létezik.

25
00:01:18,190 --> 00:01:21,830
>> Szóval mit csináltunk itt van,
SVG méretezhető vektorgrafikus.

26
00:01:21,830 --> 00:01:27,530
Ez az az út, amit mondani a böngésző
hogy vektorgrafikus a böngészőben.

27
00:01:27,530 --> 00:01:30,740
Amit csináltam most
adunk egy kört böngészhet.

28
00:01:30,740 --> 00:01:34,790
>> Az ígéret szerint a kör
igényel egy kis alaptulajdonsága

29
00:01:34,790 --> 00:01:36,850
mielőtt ténylegesen látni.

30
00:01:36,850 --> 00:01:40,045
El kell mondanunk, hogy a x helyzetét,
a y pozícióját, sugara.

31
00:01:40,045 --> 00:01:43,310
Nem mondtunk, hogy bármely, hogy
így nem látunk most.

32
00:01:43,310 --> 00:01:46,210
De mondjuk meg, hogy a cucc.

33
00:01:46,210 --> 00:01:49,510
>> Tehát először is, megvan
hogy körünkben a nevét.

34
00:01:49,510 --> 00:01:53,070
Így nevezzük kört.

35
00:01:53,070 --> 00:01:54,406
Körünkben van neve most.

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

37
00:01:57,230 --> 00:01:59,490
És Adjunk néhány attribútuma.

38
00:01:59,490 --> 00:02:03,690
Mit szólnál CX volna középre x, így
A központ a x helyzetbe.

39
00:02:03,690 --> 00:02:06,730
Mondjuk, 200 200 pixel.

40
00:02:06,730 --> 00:02:10,220
>> Adjunk egy y 200 pixel is.

41
00:02:10,220 --> 00:02:16,032
És egy r, egy sugara, mintegy 40 pixel.

42
00:02:16,032 --> 00:02:16,950
Most lássuk.

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

44
00:02:21,740 --> 00:02:23,440
Nem tudom pontosan.

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

46
00:02:30,430 --> 00:02:31,520
>> Tessék.

47
00:02:31,520 --> 00:02:37,330
Van egy kört helyzetben 200
pixel, 200 pixel, sugara 40 pixel.

48
00:02:37,330 --> 00:02:38,280
Klassz, ugye?

49
00:02:38,280 --> 00:02:38,988
Van egy kört.

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

51
00:02:40,880 --> 00:02:42,670
>> Tehát nem kell, hogy kövesse végig.

52
00:02:42,670 --> 00:02:45,790
Mindezek a példák, mind a
A kód, amit ma teszek

53
00:02:45,790 --> 00:02:51,300
lesz online, az end
formájában interaktív példák

54
00:02:51,300 --> 00:02:54,010
A ellenőrző pontok
minden cselekedetét, és így tovább.

55
00:02:54,010 --> 00:02:55,160
>> Csináljuk több dolgot.

56
00:02:55,160 --> 00:02:58,901
Ez a fekete kör valóban csúnya.

57
00:02:58,901 --> 00:03:01,541
Sajnálom, hogy a hiba
üzenetek ott.

58
00:03:01,541 --> 00:03:05,340
Oda megyünk.

59
00:03:05,340 --> 00:03:06,350
>> Adjunk egy színt.

60
00:03:06,350 --> 00:03:07,170
Hogy-hogy?

61
00:03:07,170 --> 00:03:08,340
Szeretek acélkék.

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

63
00:03:13,280 --> 00:03:16,030
Nos, mi kört színt váltott.

64
00:03:16,030 --> 00:03:17,320
Ez nagyszerű.

65
00:03:17,320 --> 00:03:31,330
Legyünk félig átlátszó
too-- félig átlátszó.

66
00:03:31,330 --> 00:03:33,670
>> Tehát ezek azok a tulajdonságok
mi meghatározó a kör.

67
00:03:33,670 --> 00:03:36,774
Az első dolog, amit nem is
teszünk egy kört az oldalon.

68
00:03:36,774 --> 00:03:38,690
És akkor mi meghatározása
egy csomó tulajdonságait.

69
00:03:38,690 --> 00:03:41,610
Néhány ilyen van szükség,
mint a CX, CY, és Sugár.

70
00:03:41,610 --> 00:03:42,680
És a többi opcionális.

71
00:03:42,680 --> 00:03:44,730
>> Van egy csomó több attribútum.

72
00:03:44,730 --> 00:03:46,760
Van egy csomó közülük.

73
00:03:46,760 --> 00:03:53,070
Például, lehet egy
szélütés is, a stroke piros.

74
00:03:53,070 --> 00:03:55,630
De nézzük távolítsa el ezt.

75
00:03:55,630 --> 00:04:00,450
Újra itt vagyunk egy kört, egy kék kör.

76
00:04:00,450 --> 00:04:01,600
>> Szóval, hogy több kört.

77
00:04:01,600 --> 00:04:02,810
Hogy-hogy?

78
00:04:02,810 --> 00:04:04,665
Csináljunk egy másik kört.

79
00:04:04,665 --> 00:04:05,985
Ez izgalmas, ugye?

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

81
00:04:09,630 --> 00:04:12,300
>> Tehát mondjuk én csak Copy-beillesztett
amit már.

82
00:04:12,300 --> 00:04:13,570
Nevezzük ezt circle2.

83
00:04:13,570 --> 00:04:15,840
És lássuk a pontos
ugyanezt, és adja meg

84
00:04:15,840 --> 00:04:20,450
attribútumok, kaptak x pozíciója 300.

85
00:04:20,450 --> 00:04:24,140
Hurrá, van két kör most.

86
00:04:24,140 --> 00:04:27,240
>> És persze, tudtuk
frissíti ezeket az értékeket.

87
00:04:27,240 --> 00:04:31,640
Tudtam tedd 400, és most mozog.

88
00:04:31,640 --> 00:04:35,470
És mivel ez a bosszantó, hadd
távolítsa el, így circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Már elment.

91
00:04:40,730 --> 00:04:43,170
>> Szóval, mit csinálunk, és
csak nagyon, very-- erre

92
00:04:43,170 --> 00:04:46,030
nagyon hasonló ahhoz, amit
Tehet jQuery, például.

93
00:04:46,030 --> 00:04:48,240
Mi csak manipulálni
A DOM, úgy hívják.

94
00:04:48,240 --> 00:04:50,040
Lehet, hogy hallotta, hogy szót.

95
00:04:50,040 --> 00:04:53,255
Hozunk létre cucc, beállítás
attribútumok cucc, eltávolítja a cucc.

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

97
00:04:58,950 --> 00:05:02,360
>> Nos, itt kezd a dolog érdekes.

98
00:05:02,360 --> 00:05:07,250
Így később a kódot, akkor még mindig
lásd az eredeti kör itt.

99
00:05:07,250 --> 00:05:14,100
Akkor most visszaállítja a tulajdonsága, hogy CX.

100
00:05:14,100 --> 00:05:18,260
Mondjuk, hogy x helyzetben, hogy 400.

101
00:05:18,260 --> 00:05:22,406
És fogok átmenet
hogy így ez nyilvánvaló.

102
00:05:22,406 --> 00:05:23,360
Oda megyünk.

103
00:05:23,360 --> 00:05:24,780
>> De azt egyetlen kört.

104
00:05:24,780 --> 00:05:26,440
Mi meg néhány attribútum.

105
00:05:26,440 --> 00:05:28,210
Adtunk egy másik kör, kivette.

106
00:05:28,210 --> 00:05:31,650
És akkor mi módosításával
az eredeti kör.

107
00:05:31,650 --> 00:05:35,400
>> De itt van, ahol ez lesz
sokkal érdekesebb.

108
00:05:35,400 --> 00:05:39,070
Nem csak tudjuk állítani attribútumok
mint most értékek, azt mondhatjuk,

109
00:05:39,070 --> 00:05:41,610
Hé, kör, menj helyzetbe 200.

110
00:05:41,610 --> 00:05:44,540
Azt is be őket funkciókat.

111
00:05:44,540 --> 00:05:48,850
>> Tehát ahelyett, hogy 400 itt,
tudjuk, hogy néhány számítást

112
00:05:48,850 --> 00:05:53,950
on the fly, amit mi
szeretnénk, hogy a jellemző, hogy legyen.

113
00:05:53,950 --> 00:05:56,580
Szóval így azt fejezni.

114
00:05:56,580 --> 00:06:00,660
Azt mondjuk, ahelyett, 400, hadd
kapsz egy funkcióját.

115
00:06:00,660 --> 00:06:04,180
És itt, ezen belül a funkciót,
tudjuk, hogy minden őrült számítást.

116
00:06:04,180 --> 00:06:06,820
>> Tudtuk, hogy az idő és a
nézd meg néhány más dolog

117
00:06:06,820 --> 00:06:11,230
és dinamikusan döntsék
A kör milyen értéket akarunk.

118
00:06:11,230 --> 00:06:15,266
Mi lenne, hogy
ez egy random x helyzetben?

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

120
00:06:20,360 --> 00:06:21,120
Szóval ennyi.

121
00:06:21,120 --> 00:06:25,490
>> Tehát mi, hogy azt mondja, a
Minden x futtassa ezt a funkciót.

122
00:06:25,490 --> 00:06:29,340
És mit csinálunk éppen tervezi
Néhány dolog, egy véletlenszerű időpontokban szélessége

123
00:06:29,340 --> 00:06:30,410
és visszaadja azt.

124
00:06:30,410 --> 00:06:34,765
Így minden alkalommal futunk, hogy kapunk egy
kört, hogy megy egy random helyre.

125
00:06:34,765 --> 00:06:36,394
Ez klassz.

126
00:06:36,394 --> 00:06:38,310
Úgy érzem, tudtam nézni
Ebben az egy kicsit.

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

128
00:06:44,274 --> 00:06:46,440
Kezdünk eljutni
valami érdekeset itt.

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

130
00:06:49,120 --> 00:06:51,390
Nézzük, hogy ez adatvezérelt most.

131
00:06:51,390 --> 00:06:53,420
Nincs itt az adatait.

132
00:06:53,420 --> 00:06:54,482
Nézzük változtatni.

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

134
00:06:57,440 --> 00:07:12,140
>> Törvény II, adatvezérelt Documents--
Tehát térjünk vissza ide.

135
00:07:12,140 --> 00:07:15,340
És nézzük csak megszabadulni circle2,
mert mi csak hozzáadása és eltávolítása

136
00:07:15,340 --> 00:07:15,840
azt.

137
00:07:15,840 --> 00:07:17,382
Tehát nem igazán szükség van rá.

138
00:07:17,382 --> 00:07:21,421
Mi kell egy csomó okosabb itt.

139
00:07:21,421 --> 00:07:23,170
Mondjuk, van
Egyes adatok valamilyen.

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

141
00:07:31,540 --> 00:07:40,020
Egy moment-- mondjuk,
mi volt adatai ebben a formában.

142
00:07:40,020 --> 00:07:41,800
Volt egy tömb, csak
egy csomó számot.

143
00:07:41,800 --> 00:07:45,750
Van hét számból van,
legyen az bármi represent-- összege

144
00:07:45,750 --> 00:07:48,810
az emberek bankszámlájára, hogyan
sokkal súlyúak, isten tudja, mit.

145
00:07:48,810 --> 00:07:51,310
>> Ezek a számok, és mi
szeretnénk használni a körök

146
00:07:51,310 --> 00:07:53,240
hogy képviselje azokat a számokat valahogy.

147
00:07:53,240 --> 00:07:55,515
Azt akarja lekötni a
körök azokat a számokat.

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

149
00:07:58,750 --> 00:07:59,626
Szóval mit csinálunk.

150
00:07:59,626 --> 00:08:01,500
Mondjuk, azt akarjuk,
körben minden számot.

151
00:08:01,500 --> 00:08:03,590
Tudnánk tenni a régi
dolog voltunk doing--

152
00:08:03,590 --> 00:08:06,020
kör append és circle2 és circle3.

153
00:08:06,020 --> 00:08:10,020
De ez kiderül a kezét, és
van egy csomó ismétlődő logika.

154
00:08:10,020 --> 00:08:12,760
>> Szóval térjünk okosabb ezzel.

155
00:08:12,760 --> 00:08:17,810
Ahelyett, hogy a var kör
svg.append, hogy mi csak a,

156
00:08:17,810 --> 00:08:21,580
fogunk használni
ez a kis blokk van.

157
00:08:21,580 --> 00:08:24,510
Nem akarok menni mélyreható
abba, hogy mi ezeket a részeket nem.

158
00:08:24,510 --> 00:08:26,020
És ez a fajta egy bonyolultabb téma.

159
00:08:26,020 --> 00:08:27,830
És bárcsak tudnám.

160
00:08:27,830 --> 00:08:31,370
>> De a legfontosabb dolog, hogy recognize-- és
látni fogod, nagyon gyakran D3 kódot.

161
00:08:31,370 --> 00:08:36,840
Ez a szövegrész az alapvető
teremt annyi körök

162
00:08:36,840 --> 00:08:41,360
vannak olyan adatelemek
tömbbe itt.

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

164
00:08:53,420 --> 00:08:55,780
Tehát ez létrehoz annyi
körökben vannak olyan elemei.

165
00:08:55,780 --> 00:08:58,520
Ez létre fog hozni számunkra hét kört.

166
00:08:58,520 --> 00:09:01,710
És ez nem egy nagyon, nagyon legfontosabb dolog.

167
00:09:01,710 --> 00:09:02,460
Tehát fussunk, hogy.

168
00:09:02,460 --> 00:09:05,460
Nézzük eltávolítani a többi kört.

169
00:09:05,460 --> 00:09:09,565
Nézzük csak hozzászóló
elválnak, és futtassa újra.

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

171
00:09:13,840 --> 00:09:15,260
>> Oda megyünk.

172
00:09:15,260 --> 00:09:18,030
Tehát körünkben itt van egy
sokkal sötétebb, mert

173
00:09:18,030 --> 00:09:20,720
Hét körökben, egy
a tetején a többi.

174
00:09:20,720 --> 00:09:25,425
Most létrehozott hét kört, egy
minden minden egyes ilyen adatelemek.

175
00:09:25,425 --> 00:09:28,860
De van egy kulcs dolog, ami történt
ezzel a részlet itt.

176
00:09:28,860 --> 00:09:31,030
>> Ez az adat volt kötve.

177
00:09:31,030 --> 00:09:33,440
Tehát minden egyes ember
adatelemek,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, köteles volt
egy bizonyos kör.

179
00:09:38,830 --> 00:09:40,960
Tehát ezek nem csak létre
egy csomó körök

180
00:09:40,960 --> 00:09:43,420
de egybecseng a két dolgot együtt.

181
00:09:43,420 --> 00:09:48,740
>> És a jövőben, mert létrehoztunk
azokban a körökben ezzel a D3 funkciót,

182
00:09:48,740 --> 00:09:52,430
ha adok egy kört, akkor
add nekem a hozzátartozó adatot is.

183
00:09:52,430 --> 00:09:53,280
Így lehet kérni D3.

184
00:09:53,280 --> 00:09:54,840
Hé, D3, én ezt a kört.

185
00:09:54,840 --> 00:09:57,350
Mi az adatokat, hogy a körnek?

186
00:09:57,350 --> 00:10:01,290
És D3 megmutatná 10 vagy 45 vagy 105.

187
00:10:01,290 --> 00:10:02,380
>> Ezek a dolgok kötik.

188
00:10:02,380 --> 00:10:04,490
Ez egy nagyon-nagyon alapvető koncepciója.

189
00:10:04,490 --> 00:10:06,070
Nézzük meg, hogy.

190
00:10:06,070 --> 00:10:12,210
>> Szóval, ahogy mi megkérdeznéd D3-- így
ez irreleváns az,

191
00:10:12,210 --> 00:10:16,620
de csak bízz bennem rajta.

192
00:10:16,620 --> 00:10:17,620
Így kérünk D3.

193
00:10:17,620 --> 00:10:21,312
Hé, D3, hogy nekem az első
kör, amely megtalálható.

194
00:10:21,312 --> 00:10:23,580
Add nekem az első körben megtalálható.

195
00:10:23,580 --> 00:10:29,660
És akkor megkérdezhetnénk D3, mi
az adatokat, hogy, mint ez, a 10.

196
00:10:29,660 --> 00:10:33,380
>> Szóval csak kérdezni D3, rám talál
Az első körben megtalálható.

197
00:10:33,380 --> 00:10:34,400
Mi az adatokat?

198
00:10:34,400 --> 00:10:36,650
10, hogy valóban a mi
első adatok elem.

199
00:10:36,650 --> 00:10:42,150
Megkérdezhetnénk, hogy, hé, D3,
talál meg minket a harmadik kört.

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

201
00:10:44,450 --> 00:10:45,740
Miért van ez igazán fontos?

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

203
00:10:49,790 --> 00:10:52,250
>> Tehát itt már említettem,
hogy mi lehetett használni funkciókat.

204
00:10:52,250 --> 00:10:54,910
És azt említette, hogy volt
egy nagyon erős dolog.

205
00:10:54,910 --> 00:11:03,070
Így nem csak a funkciók a dolgokat
mint hogy némi számítást, például,

206
00:11:03,070 --> 00:11:09,170
vissza egy véletlen számot, akkor
is csinálni a dolgokat adatok alapján.

207
00:11:09,170 --> 00:11:11,550
Ez az, amit adatvezérelt dokumentumok jelenti.

208
00:11:11,550 --> 00:11:13,750
Ez az, amit D3 képvisel.

209
00:11:13,750 --> 00:11:17,800
>> Tehát ez x postition-- helyett
Az csak azt mondom, a köröket,

210
00:11:17,800 --> 00:11:21,735
hogy x helyzetben 200 mi
lehet, hogy ez egy funkciót.

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

212
00:11:26,140 --> 00:11:30,140
És itt, tudjuk, hogy néhány számítást.

213
00:11:30,140 --> 00:11:33,710
és d Itt áll a helyén az adatokat.

214
00:11:33,710 --> 00:11:36,120
Így minden alkalommal van
egy kör, alapvetően,

215
00:11:36,120 --> 00:11:37,750
D3 teremt a hét körökben.

216
00:11:37,750 --> 00:11:38,500
És akkor minden

217
00:11:38,500 --> 00:11:41,920
>> kört, hogy fog menni, hé,
CIRCLE1 mi a x helyzetét.

218
00:11:41,920 --> 00:11:45,210
Korábban voltunk
Mindig megválaszolása 200.

219
00:11:45,210 --> 00:11:48,630
De most, minden alkalommal D3 kéri
us mi a x helyzetben,

220
00:11:48,630 --> 00:11:51,790
ez meg fog adni us-- van
ez a kör, így már az adatokat.

221
00:11:51,790 --> 00:11:55,290
Meg fog adni nekünk az adatokat, és azt mondják,
Mit akarsz a kiállítás is,

222
00:11:55,290 --> 00:11:57,120
alapul, hogy az adatok.

223
00:11:57,120 --> 00:11:59,590
>> Nézzük csak vissza a tényleges adatokat.

224
00:11:59,590 --> 00:12:04,910
Tehát, ha fut ez az, ez ad
us adatvezérelt dokumentumokat.

225
00:12:04,910 --> 00:12:08,040
Ezek a körök alapján
kapcsolatban position--

226
00:12:08,040 --> 00:12:11,120
ők bázisok függvényében az adatokat.

227
00:12:11,120 --> 00:12:13,100
>> Tehát az első kört,
D3-hoz egy kört.

228
00:12:13,100 --> 00:12:16,770
És akkor D3 kéri tőlünk, hogy mit csinál
szeretné a kiállítás is.

229
00:12:16,770 --> 00:12:19,620
És mi csak azt mondják, amit az adatok.

230
00:12:19,620 --> 00:12:21,185
Hogy a kiállítás 10.

231
00:12:21,185 --> 00:12:26,320
>> Aztán megkérdezi, mit akar a
kiállítás, hogy a második kör.

232
00:12:26,320 --> 00:12:27,270
És mi válaszolunk, 45.

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

234
00:12:30,000 --> 00:12:32,230
És, persze, lehet
hogy néhány számítást itt.

235
00:12:32,230 --> 00:12:35,510
Rájöttem, hogy azokban a körökben
a fajta összenyomva fel.

236
00:12:35,510 --> 00:12:38,965
>> Szóval szorozd meg 3, szaporodnak adatok 3.

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

238
00:12:41,870 --> 00:12:43,840
A kör csak most bővült ki.

239
00:12:43,840 --> 00:12:46,730
Mi érték háromszorosára emelkedett.

240
00:12:46,730 --> 00:12:51,010
>> A kör valóban szélén,
úgyhogy talán egyfajta kompenzálni.

241
00:12:51,010 --> 00:12:53,632
Mondjuk, 20.

242
00:12:53,632 --> 00:12:56,070
Tessék.

243
00:12:56,070 --> 00:12:57,590
>> Ez egy adat vizualizáció.

244
00:12:57,590 --> 00:13:01,767
Ez egy nagyon alapvető egyet, de ez
ad némi betekintést adatokat.

245
00:13:01,767 --> 00:13:04,600
Azt mondja, hogy, például, mi
Van egy kis csoportja elemeket.

246
00:13:04,600 --> 00:13:06,340
És van egy nagy kiugró itt.

247
00:13:06,340 --> 00:13:10,830
Ez ad némi információt
eloszlásáról.

248
00:13:10,830 --> 00:13:20,830
>> Ha volt, például, változtatni
Az adatok 150 itt és frissítési,

249
00:13:20,830 --> 00:13:22,630
a vizualizáció változik.

250
00:13:22,630 --> 00:13:24,285
Ez a dokumentum adatok vezérelt.

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

252
00:13:32,640 --> 00:13:36,180
>> Így természetesen ezek az elemek,
ezek a tulajdonságok itt,

253
00:13:36,180 --> 00:13:38,430
tudjuk használni a funkciót, nem
csak a számokat, nem csak

254
00:13:38,430 --> 00:13:39,900
az x és az y pozíciókat.

255
00:13:39,900 --> 00:13:42,120
Így tudjuk használni a funkciót a szín.

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

257
00:13:45,260 --> 00:13:46,360
Tehát azt fogjuk csinálni ugyanazt.

258
00:13:46,360 --> 00:13:49,360
Majd adja meg a funkciót.

259
00:13:49,360 --> 00:13:52,320
>> És mondjuk, mi lehetett volna
conditionals a mi funkciót.

260
00:13:52,320 --> 00:13:54,770
Ez a funkció lehet
száz sor hosszú.

261
00:13:54,770 --> 00:13:57,150
Meg lehet csinálni, nagyon, nagyon bonyolult dolog.

262
00:13:57,150 --> 00:13:59,080
>> Tehát mondjuk az if itt.

263
00:13:59,080 --> 00:14:03,420
Mondjuk, ha adataink kevésbé
mint 50, ez aztán a küszöböt

264
00:14:03,420 --> 00:14:05,817
hogy érdekel minket
a valamilyen okból.

265
00:14:05,817 --> 00:14:06,650
Tegyünk a zöld.

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

267
00:14:09,830 --> 00:14:15,320
Ellenkező esetben, tegyük piros.

268
00:14:15,320 --> 00:14:16,110
Hogy-hogy?

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
>> Tehát mi adatvizualizáció kezd
közvetíteni érdekesebb információk

272
00:14:24,860 --> 00:14:26,727
számos csatornán.

273
00:14:26,727 --> 00:14:28,560
Tehát most már tudjuk egy kicsit
eloszlásáról.

274
00:14:28,560 --> 00:14:31,768
És tudjuk, hogy van valamiféle
vágva, 50, hogy mi érdekli.

275
00:14:31,768 --> 00:14:35,630
Tudjuk, hogy van két adatpont
az alatt, és legtöbbjük

276
00:14:35,630 --> 00:14:36,130
feletti.

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

278
00:14:41,510 --> 00:14:46,160
>> Tehát, mint egy végső lépésként, az adatokat itt,
ez nagyon ritka, hogy ennek ilyen.

279
00:14:46,160 --> 00:14:52,610
Úgyhogy csak kimozdíthatnák, hogy a változó
mert ez tisztább, mint ez.

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

281
00:15:02,980 --> 00:15:05,197
És akkor használjuk, hogy a változó itt.

282
00:15:05,197 --> 00:15:06,280
Ez pontosan ugyanaz a dolog.

283
00:15:06,280 --> 00:15:07,280
Ez csak egy kicsit tisztább.

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

285
00:15:25,300 --> 00:15:35,300
>> Következik, Act III, Scales--
Tehát az egyik probléma jobb

286
00:15:35,300 --> 00:15:38,920
Itt van, ha megváltoztatjuk a
adatokat ebben a 200 value--

287
00:15:38,920 --> 00:15:41,685
ha a változás, hogy 400
vagy valami, és frissíteni,

288
00:15:41,685 --> 00:15:44,540
akkor ez az érték csak ment offscreen.

289
00:15:44,540 --> 00:15:49,040
Szóval mi a logika itt
Az, hogy hogyan csináljuk a szer 3-

290
00:15:49,040 --> 00:15:52,570
és 20, hogy terítse szét, majd
ellensúlyozza, hogy egy kicsit valóban nehézkes.

291
00:15:52,570 --> 00:15:54,150
>> Mit jelentenek ezek az jelentenek a számok?

292
00:15:54,150 --> 00:15:55,400
Ők csak bedrótozott van.

293
00:15:55,400 --> 00:15:58,830
És ők nagyon kötődik az adatokat.

294
00:15:58,830 --> 00:16:00,550
Szeretnénk adatvezérelt dokumentumot.

295
00:16:00,550 --> 00:16:05,460
Szeretnénk egy nagyon rugalmas dokumentumot,
hogy az adott adatok, alkalmazkodik hozzá

296
00:16:05,460 --> 00:16:07,900
és képviseli.

297
00:16:07,900 --> 00:16:11,330
>> Amit alapvetően szüksége van, akkor
Van ebben a tartományban a számok 10.

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

299
00:16:12,640 --> 00:16:17,630
És szeretnénk feltérképezni, hogy ki rá
szélessége, teljes szélességében itt.

300
00:16:17,630 --> 00:16:20,620
Tehát van a tartományban
számokat majd 0-tól 100.

301
00:16:20,620 --> 00:16:24,980
És itt van ez a campus I megy
20-700, ebben az esetben.

302
00:16:24,980 --> 00:16:26,515
>> Azt a fajta szeretnénk feltérképezni, hogy a.

303
00:16:26,515 --> 00:16:30,002
Szeretnénk bővíteni, hogy fel-
majd ellensúlyozni, hogy egy kicsit.

304
00:16:30,002 --> 00:16:33,165
Kiderül, hogy a D3 rendelkezik ezekkel.

305
00:16:33,165 --> 00:16:34,220
Úgy hívják skálán.

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

307
00:16:37,410 --> 00:16:38,250
Úgyhogy használni.

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

309
00:16:46,300 --> 00:16:49,670
>> Az hogy works-- fogok
írja ezt fel, majd megmagyarázni.

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

311
00:17:01,530 --> 00:17:02,450
Ez egy skála.

312
00:17:02,450 --> 00:17:08,670
Mit fog tenni az, akkor feltérképezni
Értéke 1 és 200 a 20-600.

313
00:17:08,670 --> 00:17:10,990
Megnézhetjük, hogy.

314
00:17:10,990 --> 00:17:13,329
Láthatjuk, hogy itt.

315
00:17:13,329 --> 00:17:21,704
>> Tehát ha én táplálja 1-- egy pillanatra.

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

317
00:17:47,764 --> 00:17:48,555
Adj egy másodpercet.

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

319
00:17:53,680 --> 00:17:55,080
Azt kell helyesen írta azt.

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

321
00:18:15,320 --> 00:18:15,990
Tessék.

322
00:18:15,990 --> 00:18:17,930
Nagyon sajnálom, hogy.

323
00:18:17,930 --> 00:18:22,050
>> Tehát mi skálán fog tenni
a, el fog tartani egy értéket

324
00:18:22,050 --> 00:18:24,930
majd átalakítani, hogy
bővíteni, hogy ki, így

325
00:18:24,930 --> 00:18:27,320
kitölti a teljes körű kérsz.

326
00:18:27,320 --> 00:18:32,910
Tehát ebben az esetben, ha mi adunk neki egyet,
ez lesz feltérképezni, hogy ki rá 20.

327
00:18:32,910 --> 00:18:37,750
És ha mi adunk neki 200, ez
majd feltérképezni, hogy a 600.

328
00:18:37,750 --> 00:18:40,460
És valahol a kettő között,
Ha megkapjuk a 100, ez

329
00:18:40,460 --> 00:18:44,610
lesz valahol
A 20 és 600 között.

330
00:18:44,610 --> 00:18:51,480
>> És persze, most ezt
el kell távolítani azokat a bedrótozott

331
00:18:51,480 --> 00:18:53,402
dolgot kell ott.

332
00:18:53,402 --> 00:18:55,950
Tehát amit mi szeretnénk tenni,
hogy az adatok, hogy mi vagyunk

333
00:18:55,950 --> 00:19:00,950
adott, hogy az egyes adatok
elemet, és adja át a skála első.

334
00:19:00,950 --> 00:19:02,635
Tehát skála méretezni.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, van egy kis hiba itt.

337
00:19:48,880 --> 00:19:50,120
Mi a hiányzó adatokat.

338
00:19:50,120 --> 00:19:51,290
Tessék.

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

340
00:19:58,550 --> 00:19:59,550
És, hogy bővíti ki.

341
00:19:59,550 --> 00:20:01,383
>> Ez ad nekünk ugyanazt
eredményeképpen a miénk volt,

342
00:20:01,383 --> 00:20:04,030
de ahelyett, hogy azok
bedrótozott korlátok.

343
00:20:04,030 --> 00:20:07,790
És ha a méret a mi
vászon változások, például,

344
00:20:07,790 --> 00:20:11,790
Ha azt akarjuk, hogy ez a több mint
400 pixel és squishes ki,

345
00:20:11,790 --> 00:20:15,440
mi lehet ez over--
tudjuk bővíteni kellett, vagy

346
00:20:15,440 --> 00:20:21,890
csökkentheti ezt a bal margó
valamivel kevesebb vagy több mint 20.

347
00:20:21,890 --> 00:20:25,470
Ezek a számok, ezek a bedrótozott
szám már értelme számunkra.

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

349
00:20:28,110 --> 00:20:30,520
>> És mi lehetne csinálni sokkal több
Érdekes dolgok is.

350
00:20:30,520 --> 00:20:35,990
Tehát ahelyett, hogy egy lineáris
skála, amit érdemes jelentkezni skálán.

351
00:20:35,990 --> 00:20:37,840
És ez ad nekünk egy logaritmikus skálán.

352
00:20:37,840 --> 00:20:41,269
>> Tehát most mi skála helyett
Csak bővül ki, hogy a tartomány,

353
00:20:41,269 --> 00:20:42,810
csinál kifinomultabb dolgokat.

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

355
00:20:48,790 --> 00:20:53,790
Ahelyett, hogy ebben a tartományban a kemény
kódolt, és ahelyett, hogy a 600,

356
00:20:53,790 --> 00:20:58,465
azt érdemes csak használja a szélesség,
így a 20 és a szélesség mínusz 40,

357
00:20:58,465 --> 00:21:02,392
2-szer a margin a másik oldalon.

358
00:21:02,392 --> 00:21:05,350
És ez teszi sokkal több értelme
valakit, aki lehet, nézd meg a kódot.

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

360
00:21:08,080 --> 00:21:11,850
>> Érdekes, hogy a mérleg kap
Nagyon, nagyon kifinomult is.

361
00:21:11,850 --> 00:21:13,350
Ők egy csomó érdekes dolgot.

362
00:21:13,350 --> 00:21:17,620
Tehát mérleg nem feltétlenül rendelkeznek
működtetni, csak a számok.

363
00:21:17,620 --> 00:21:18,955
Csináljunk egy színskála.

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

365
00:21:23,120 --> 00:21:26,120
>> Így a választékba be--
a tartomány 1-200.

366
00:21:26,120 --> 00:21:28,220
Ez az input dolog.

367
00:21:28,220 --> 00:21:33,793
De érdemes feltérképezni a
zöld a piros, például.

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

369
00:21:39,710 --> 00:21:42,910
És most, ha mi adja át 1,
fogunk kapni zöld.

370
00:21:42,910 --> 00:21:45,110
Ha mi adunk neki 200, mi lesz piros.

371
00:21:45,110 --> 00:21:49,480
És ha mi adja át valami a kettő között,
ez lesz valamiféle elegye, hogy

372
00:21:49,480 --> 00:21:52,520
valahol a gradiens
zöld és piros.

373
00:21:52,520 --> 00:21:55,210
>> És ahelyett,
ez a fajta belekapaszkodott logika

374
00:21:55,210 --> 00:21:58,550
mi van itt a
feltételes ott,

375
00:21:58,550 --> 00:22:03,250
mi volna something-- a
lineáris skála között.

376
00:22:03,250 --> 00:22:07,100
Szóval mi lenne a mérlegelés mi csak
létre, amit az úgynevezett színes.

377
00:22:07,100 --> 00:22:09,060
És mi lenne, hogy ez a D, amely
mi adatok elem.

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

379
00:22:14,250 --> 00:22:15,060
És ott is vagyunk.

380
00:22:15,060 --> 00:22:18,070
Van egy színskála.

381
00:22:18,070 --> 00:22:18,940
>> Tehát ez feltérképezése.

382
00:22:18,940 --> 00:22:20,960
Tehát a bal szélen teljesen zöld.

383
00:22:20,960 --> 00:22:22,560
A szélsőjobb teljesen piros.

384
00:22:22,560 --> 00:22:24,828
És minden között
függvénye d.

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

386
00:22:33,369 --> 00:22:35,160
Van egy érdekes
látványterveket itt.

387
00:22:35,160 --> 00:22:36,952
De mi adatok kedves volt unalmas.

388
00:22:36,952 --> 00:22:39,410
Lássuk, mit tehetünk, ha
mi volt érdekesebb adatokat.

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

390
00:22:44,420 --> 00:22:50,500
>> Törvény IV, dolgozik
Data-- az első dolog,

391
00:22:50,500 --> 00:22:53,560
mi szeretnénk csinálni, hogy a mi
vizualizáció érdekesebb

392
00:22:53,560 --> 00:22:56,140
van, hogy az adatok valahol máshol.

393
00:22:56,140 --> 00:22:58,310
Ez nagyon nehézkes, hogy
Az adatok bedrótozott itt.

394
00:22:58,310 --> 00:23:01,220
És általában leszünk kérve
valaki más az adatokat.

395
00:23:01,220 --> 00:23:05,400
Mi lesz talán kérve a kormányt,
A Census Bureau, mi az adatait

396
00:23:05,400 --> 00:23:10,170
majd ábrázolja, hogy kérdezzünk
Egyes harmadik féllel valamilyen adatot

397
00:23:10,170 --> 00:23:13,330
majd az épület egy
vizualizáció, hogy.

398
00:23:13,330 --> 00:23:17,170
>> Tehát az első dolog, amit szeretnénk csinálni
a lépés, hogy valahol máshol.

399
00:23:17,170 --> 00:23:24,130
Így fogok létrehozni
File Here nevű data.json.

400
00:23:24,130 --> 00:23:25,600
JSON adatformátum.

401
00:23:25,600 --> 00:23:29,210
Nem kell, hogy sokat róla.

402
00:23:29,210 --> 00:23:33,210
És fogunk másolni a
Kevés adat, ami ott van,

403
00:23:33,210 --> 00:23:40,330
illessze be oda szó, menj
vissza a megjelenítő kódot

404
00:23:40,330 --> 00:23:45,362
Itt, és használja ezt a funkciót itt.

405
00:23:45,362 --> 00:23:46,820
Nem kell tudni a részleteket.

406
00:23:46,820 --> 00:23:49,800
De ez mit fog csinálni az,
azt fogja találni, hogy a fájl,

407
00:23:49,800 --> 00:23:51,780
hozd el azt, és küldje vissza nekünk.

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

409
00:24:11,660 --> 00:24:15,220
Szóval mit is csinál ez az, ez megy
és kap a data.json fájlt.

410
00:24:15,220 --> 00:24:18,570
És akkor az összes kódot, ami
beljebb inside-- lényegében

411
00:24:18,570 --> 00:24:21,800
az összes kódot már there-- lesz
csak akkor működnek amikor megkapjuk az adatokat vissza.

412
00:24:21,800 --> 00:24:25,760
És akkor ez fog futni, hogy
kódot a rendelkezésünkre álló adatokkal.

413
00:24:25,760 --> 00:24:28,870
Nagy, van egy
vizualizáció, amely lekérdezi

414
00:24:28,870 --> 00:24:31,390
Néhány kódot valahol
más, ami általában

415
00:24:31,390 --> 00:24:36,110
ahol lekérdezi néhány adat
valahol máshol, ami általában

416
00:24:36,110 --> 00:24:38,656
hogyan látványterveket dolgozni.

417
00:24:38,656 --> 00:24:41,400
>> De azt akarom, hogy menjen vissza az adatokat.

418
00:24:41,400 --> 00:24:48,030
Így az adatok alapvetően D3-- D3
fogyaszt adatokat egy listát azokról a dolgokról.

419
00:24:48,030 --> 00:24:53,000
D3 számít az adatok csak egy listát
a dolgok, egy sor dolgot.

420
00:24:53,000 --> 00:24:58,780
Nem számít, hogy mik azok a dolgok
vannak, amíg ez egy sor őket.

421
00:24:58,780 --> 00:25:02,460
>> Tehát itt, például, tudtuk cselekedhetem
Természetesen már lebegőpontos értékeket.

422
00:25:02,460 --> 00:25:04,830
Mi volna negatívokat.

423
00:25:04,830 --> 00:25:09,400
D3 nem érdekli, így a hosszú
mivel ez egy listát azokról a dolgokról.

424
00:25:09,400 --> 00:25:13,270
>> Érdekes dolgokat
Lehetett volna, mi is

425
00:25:13,270 --> 00:25:19,410
Van egy lista a húrok ilyesmi.

426
00:25:19,410 --> 00:25:25,440
Tehát ezek a Crimson címlapra
Felvettem egy pár nappal ezelőtt.

427
00:25:25,440 --> 00:25:29,220
És talán itt talál néhány érdekes
dolog ezekről a címlapra.

428
00:25:29,220 --> 00:25:30,970
>> Tehát még egyszer: ez egy listát azokról a dolgokról.

429
00:25:30,970 --> 00:25:32,360
D3 nem érdekli.

430
00:25:32,360 --> 00:25:35,572
Ezek történetesen egy húr.

431
00:25:35,572 --> 00:25:36,530
Már megváltozott az adatainkat.

432
00:25:36,530 --> 00:25:38,210
>> Térjünk vissza a megjelenítés.

433
00:25:38,210 --> 00:25:42,495
Most, a vizualizáció számít
A bemenet lehet szám.

434
00:25:42,495 --> 00:25:44,370
Szóval megy, hogy
hogy néhány változtatást.

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

436
00:25:47,180 --> 00:25:52,180
Így például, először is, talán
akarjuk, hogy ezeket a köröket mentén

437
00:25:52,180 --> 00:25:56,870
A hossza a főcím, a
karakterek száma a főcím.

438
00:25:56,870 --> 00:26:03,600
>> Szóval, mit fogunk csinálni ez-- minden alkalommal meg
függvény hívására a húr,

439
00:26:03,600 --> 00:26:09,095
mi megtaláljuk hosszára és
majd át, hogy a skála.

440
00:26:09,095 --> 00:26:11,550
A színes, fogok visszatérni
hogy az acélkék.

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

442
00:26:19,060 --> 00:26:20,420
És ott is vagyunk.

443
00:26:20,420 --> 00:26:23,190
Van egy vizualizációs
A Crimson címoldalára.

444
00:26:23,190 --> 00:26:25,500
>> A skála egy kicsit off.

445
00:26:25,500 --> 00:26:29,680
Tegyük fel, hogy a leghosszabb
headline 100 karakter hosszú,

446
00:26:29,680 --> 00:26:32,244
így span, hogy egy kicsit.

447
00:26:32,244 --> 00:26:33,410
És van egy vizualizációs.

448
00:26:33,410 --> 00:26:36,710
Úgy tűnik tehát, hogy a legtöbb főcímek
elég közel vannak egymáshoz,

449
00:26:36,710 --> 00:26:38,750
jellemben sor.

450
00:26:38,750 --> 00:26:41,200
De egy valóban kiemelkedik.

451
00:26:41,200 --> 00:26:46,660
>> Tudnánk építeni néhány eszközt
felfedezni, hogy több.

452
00:26:46,660 --> 00:26:50,710
De amikor én dolgozom ezen, én voltam
Kíváncsi, hogy ebben az adathalmaz,

453
00:26:50,710 --> 00:26:53,880
szalagcímek a kettőspont
bennük hosszabb lenne.

454
00:26:53,880 --> 00:26:55,770
Azt feltételezi, hogy igen.

455
00:26:55,770 --> 00:26:56,660
>> Tehát nézzük meg.

456
00:26:56,660 --> 00:27:00,650
Éljünk a színes
csatorna, mint korábban,

457
00:27:00,650 --> 00:27:04,540
kódolni valamilyen arról, hogy
van egy vastagbél- vagy sem.

458
00:27:04,540 --> 00:27:07,220
Tehát azt fogjuk használni a feltételes újra.

459
00:27:07,220 --> 00:27:09,350
Nem kell tudni
a részleteket a,

460
00:27:09,350 --> 00:27:14,260
de mi ezt ellenőrizni a
karakterlánc egy adott karakterhez

461
00:27:14,260 --> 00:27:16,355
A JavaScript újra, nem releváns.

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

463
00:27:18,910 --> 00:27:23,270
>> De ha nem találunk egy
vastagbélrák, ismét zöld.

464
00:27:23,270 --> 00:27:26,100
És ha így teszünk, akkor vissza a piros.

465
00:27:26,100 --> 00:27:29,010
Tehát újra, szalagcímek
már a vastagbél piros lesz.

466
00:27:29,010 --> 00:27:34,980
Ez az, amit ez a means-- szép.

467
00:27:34,980 --> 00:27:38,040
>> Úgy tűnik tehát, hogy az én
hipotézist ütközött.

468
00:27:38,040 --> 00:27:39,360
Már csak kettő.

469
00:27:39,360 --> 00:27:42,380
Már csak hat adatpont
és csak kettő kettőspont.

470
00:27:42,380 --> 00:27:45,510
De úgy tűnik, egy kicsit
az alsó végén, valójában.

471
00:27:45,510 --> 00:27:47,830
Címlapra kettőspont tűnik
hogy általában rövidebb,

472
00:27:47,830 --> 00:27:52,370
legalábbis a mi adatok set-- érdekes.

473
00:27:52,370 --> 00:27:55,830
>> Térjünk vissza, hogy a
acélkék és aztán majd meglátjuk

474
00:27:55,830 --> 00:28:00,601
mi tudjuk, hogy még
További érdekes adat.

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

476
00:28:04,370 --> 00:28:09,070
Tehát még egyszer megemlítettem, hogy
adatok D3 egy listát azokról a dolgokról.

477
00:28:09,070 --> 00:28:11,080
Láttuk számok sok fajta.

478
00:28:11,080 --> 00:28:12,810
Láttuk szálakat.

479
00:28:12,810 --> 00:28:15,700
De a dolog is lehet objektumokat.

480
00:28:15,700 --> 00:28:20,080
>> Lehetnek bonyolult dolgokat
amelyek magukban foglalják egy csomó dolgot.

481
00:28:20,080 --> 00:28:24,510
Ha azt mondjuk, hogy világosabban,
a legtöbb esetben, mi

482
00:28:24,510 --> 00:28:28,384
szeretnék építeni minden adatot pontot
bonyolultabb, mint csak egy értéket.

483
00:28:28,384 --> 00:28:30,175
Ha azt képzelni, hogy egy
adatbázis mintegy diákok,

484
00:28:30,175 --> 00:28:32,470
ott lehet egy diák
megnevezni, a diákigazolvány,

485
00:28:32,470 --> 00:28:36,370
és egy csomó dolog jár
egy adott rekord,

486
00:28:36,370 --> 00:28:39,834
Nem csak egy string vagy több.

487
00:28:39,834 --> 00:28:40,750
Tehát nézzük meg, hogy.

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

489
00:28:55,180 --> 00:28:56,760
>> Ez az egyik ilyen adatállomány.

490
00:28:56,760 --> 00:28:59,090
Ez egy olyan adatállomány, mintegy földrengések.

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

492
00:29:01,910 --> 00:29:08,430
Tehát itt minden a listán, vagy tömb
A dolgok tartalmaz sok mindent magának.

493
00:29:08,430 --> 00:29:11,380
Szóval minden adatpont van
nagyságát és a koordináta.

494
00:29:11,380 --> 00:29:13,425
És koordinálja magukat
tartalmaznak két dolgot.

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

496
00:29:15,960 --> 00:29:20,450
>> Tehát minden nap most sokkal több
bonyolult és sokkal érdekesebb

497
00:29:20,450 --> 00:29:22,700
és sokkal többet tartalmaz
érdekes információkat.

498
00:29:22,700 --> 00:29:26,730
Lássuk, tudtuk építeni belőle.

499
00:29:26,730 --> 00:29:36,130
Visszatérve itt megint segítségével
a hisztogram kört vizualizációs

500
00:29:36,130 --> 00:29:42,110
hoztuk létre, lássuk, ha tudjuk építeni a
vizualizáció nagyságrenddel elosztó

501
00:29:42,110 --> 00:29:43,305
A adatbázisunk.

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

503
00:29:45,850 --> 00:29:48,660
>> Tehát itt, hogy ez ugyanaz a fogalom.

504
00:29:48,660 --> 00:29:51,920
De most, d tartalmaz több dolgot.

505
00:29:51,920 --> 00:29:54,780
d tartalmaz sok adatot elemeket.

506
00:29:54,780 --> 00:29:57,946
Így kapunk D vissza.

507
00:29:57,946 --> 00:29:59,670
D3 ad nekünk d.

508
00:29:59,670 --> 00:30:06,080
És azzal válaszolunk, hogy megtalálják a nagysága
A d majd halad, hogy a skála.

509
00:30:06,080 --> 00:30:08,490
>> És akkor meg kell változtatnunk
a skála, természetesen.

510
00:30:08,490 --> 00:30:12,980
Így nagyságrendekkel egyszerűen nem
ennél jóval több, mint 10.

511
00:30:12,980 --> 00:30:15,485
Igazából még soha nem volt
10 magnitúdójú földrengés.

512
00:30:15,485 --> 00:30:19,360
De ez a fajta a felső
Végül a felső spektrum.

513
00:30:19,360 --> 00:30:20,240
>> Nézzük frissíteni.

514
00:30:20,240 --> 00:30:22,990
Szép, van egy vizualizációs.

515
00:30:22,990 --> 00:30:25,490
Érdekes note-- így
van két adat pont, amely

516
00:30:25,490 --> 00:30:29,010
szinte pontosan tetején minden
Más, nagyságát.

517
00:30:29,010 --> 00:30:31,350
Látod ezt a homály mi használ.

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

519
00:30:40,810 --> 00:30:42,690
>> Van földrajzi adatok teremteni.

520
00:30:42,690 --> 00:30:44,710
Van szélességi és hosszúsági fok.

521
00:30:44,710 --> 00:30:47,549
Talán tudnánk tenni valamit a
sokkal érdekesebb az, hogy.

522
00:30:47,549 --> 00:30:49,590
Nézzük meg egy kicsit
Érdekes módon, hogy szemléltesse

523
00:30:49,590 --> 00:30:53,500
ez a bonyolultabb
adatokat mi való.

524
00:30:53,500 --> 00:31:04,950
>> Évi V. törvény, Mapping-- alapvetően,
akarjuk, hogy ezeket a térképen.

525
00:31:04,950 --> 00:31:07,690
Úgy értem, ez hova vezet ez.

526
00:31:07,690 --> 00:31:13,130
Azt akarjuk, hogy kódolni információkat
elhelyezkedése a földrengés olvasmányok,

527
00:31:13,130 --> 00:31:16,350
valamint azok nagyságát,
mert van, hogy most.

528
00:31:16,350 --> 00:31:21,310
Megértjük, hogy kell fogyasztani
bonyolultabb adat.

529
00:31:21,310 --> 00:31:26,200
>> Az első dolog, amit megteszek van
hozzon létre egy térképet, a háttérben térképet.

530
00:31:26,200 --> 00:31:29,360
Én megyek keresztül,
ezt a nagyon gyorsan.

531
00:31:29,360 --> 00:31:30,560
Ez trükkös kódot.

532
00:31:30,560 --> 00:31:33,110
Ez is egy olyan
receptek nem igazán

533
00:31:33,110 --> 00:31:35,690
meg kell érteniük, teljesen használhat.

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

535
00:31:38,510 --> 00:31:39,740
De ez kódot.

536
00:31:39,740 --> 00:31:43,580
Ez a kód itt létrehoz egy térképet.

537
00:31:43,580 --> 00:31:45,730
>> Nem fogunk menni részletesen.

538
00:31:45,730 --> 00:31:54,210
De felületesen, mit csinál,
lekérdezi ezt a us.json fájlt, amely

539
00:31:54,210 --> 00:31:57,150
egy adatfájlt, mint
Az egyik a miénk volt.

540
00:31:57,150 --> 00:31:59,150
Ez bonyolultabb, természetesen.

541
00:31:59,150 --> 00:32:02,920
De ebben az esetben, minden,
Minden adat pont ez az állapot

542
00:32:02,920 --> 00:32:05,420
és van egy listája
szélességi és hosszúsági

543
00:32:05,420 --> 00:32:10,500
hogy meghatározzák a sokszög,
a formában, hogy az állami.

544
00:32:10,500 --> 00:32:13,280
>> Tehát mi D3 fog tenni hasonló
hogy mit csináltunk előtt.

545
00:32:13,280 --> 00:32:18,140
Kérni fogja, hogy és
kötődik, amely egy elemhez.

546
00:32:18,140 --> 00:32:20,890
És van olyan funkció, amely
feltérképezi az adott elem ki,

547
00:32:20,890 --> 00:32:23,410
alapuló szélességi és hosszúsági.

548
00:32:23,410 --> 00:32:24,580
Elolvashatja bővebben.

549
00:32:24,580 --> 00:32:27,385
És ajánlom.

550
00:32:27,385 --> 00:32:30,090
>> Vannak linkek a
végén ezt a kódot írt.

551
00:32:30,090 --> 00:32:31,570
És a kód kommentálta.

552
00:32:31,570 --> 00:32:34,050
Ebben vannak linkek a további erről.

553
00:32:34,050 --> 00:32:36,590
Azt javaslom, keresse ki.

554
00:32:36,590 --> 00:32:39,460
De mi törődünk van
ez az előrejelzés funkció.

555
00:32:39,460 --> 00:32:41,210
Azt akarom, hogy menjen át, hogy.

556
00:32:41,210 --> 00:32:43,522
>> Először is, hadd mutassam
Önnek, hogy igen, van egy térképet.

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

558
00:32:47,300 --> 00:32:49,970
Térképek hűvös.

559
00:32:49,970 --> 00:32:52,330
Tehát nézzük meg ezt a
termelési függvény.

560
00:32:52,330 --> 00:32:56,481
>> Vetítés nagyon is
mint egy skála, mérlegek újra.

561
00:32:56,481 --> 00:32:59,210
Tehát mi termelés
ez az előrejelzés funkció

562
00:32:59,210 --> 00:33:06,610
nem is tudtunk átadni hosszúsági
és latitudes-- ebben az esetben,

563
00:33:06,610 --> 00:33:09,590
Az értékek itt vannak a
lat-vágyik az épület

564
00:33:09,590 --> 00:33:13,990
ülünk a jobb
now-- a vetítés.

565
00:33:13,990 --> 00:33:20,560
, És a vetítés konvertálni
Ezt figyelembe x és y pixel értékeket.

566
00:33:20,560 --> 00:33:23,300
>> Tehát mi vetítés csinál
nagyon hasonlít a mi skála.

567
00:33:23,300 --> 00:33:27,270
Az felidézi mi szélességi és
hosszúság, amely képviseli az egész világon

568
00:33:27,270 --> 00:33:31,390
és a szűkülő és a mérettel, hogy
le a térre, hogy azt akarjuk,

569
00:33:31,390 --> 00:33:33,510
hogy már adtunk neki.

570
00:33:33,510 --> 00:33:35,220
Ebben az esetben mi vagyunk
múló ezeket az értékeket.

571
00:33:35,220 --> 00:33:41,370
És ez ad nekünk, nos,
a képernyőn azt jelenti, 640 képpont.

572
00:33:41,370 --> 00:33:46,250
Ez a teljes képernyő 700 pixel
széles, így teszi velünk itt,

573
00:33:46,250 --> 00:33:53,310
és 154 pixel le, amit én
becslés nagyjából itt.

574
00:33:53,310 --> 00:33:57,250
>> Tehát, hogy ezeket a lat-vágyik, amely
ez olyasvalami, az egész világon

575
00:33:57,250 --> 00:34:02,850
és squishing és mozgó szerint körülbelül
hogy nekünk x és y pixel értékeket,

576
00:34:02,850 --> 00:34:05,450
ez az első dolog, ami
elvégezni a leképezést kódot.

577
00:34:05,450 --> 00:34:07,920
És akkor a többi része a
kód fogyasztja az adatok

578
00:34:07,920 --> 00:34:14,310
majd azokat rendeli lat-vágyik
rá valamit a képernyőn.

579
00:34:14,310 --> 00:34:18,380
>> De fogunk használni ezt a vetítés
funkciók, mert kiderül,

580
00:34:18,380 --> 00:34:20,270
mi lat-vágyik vágyik is.

581
00:34:20,270 --> 00:34:24,509
Visszatekintve az adatainkat, van
szélességi és hosszúsági koordináták

582
00:34:24,509 --> 00:34:25,425
minden megfigyelés.

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

584
00:34:28,131 --> 00:34:29,130
Tehát vegyünk vetítés.

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

586
00:34:33,250 --> 00:34:37,639
>> Így nézett a kiállítás,
azt akarjuk, hogy exposition--

587
00:34:37,639 --> 00:34:39,590
van egy szélességi és hosszúsági egy.

588
00:34:39,590 --> 00:34:40,770
De mi szeretnénk pixel értékeket.

589
00:34:40,770 --> 00:34:43,510
És kiderül, mi is pontosan
amit want-- vetítés.

590
00:34:43,510 --> 00:34:46,239
Nagyon hasonlít voltunk
a skála itt,

591
00:34:46,239 --> 00:34:52,075
mi most fog használni vetítés
és adja át a koordinátákat.

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

593
00:34:55,241 --> 00:34:56,949
Tehát az első dolog
mi doing-- így vagyunk

594
00:34:56,949 --> 00:35:01,520
szerzés d, ami egy egyedi adat
eleme, amely egyedi földrengés

595
00:35:01,520 --> 00:35:02,370
olvasás.

596
00:35:02,370 --> 00:35:04,640
Az első dolog, amit
van, hogy a koordinátákat.

597
00:35:04,640 --> 00:35:06,150
Rendben, mi van a koordinátákat.

598
00:35:06,150 --> 00:35:09,160
>> A második dolog, amit tehetünk,
továbbítom a vetítés.

599
00:35:09,160 --> 00:35:13,440
Projection átalakítja azokat koordinátákat
a pixel értékeket, x és y.

600
00:35:13,440 --> 00:35:16,680
És akkor az utolsó dolog, amit
akarok, csak kap az x,

601
00:35:16,680 --> 00:35:19,342
amely ebben az esetben az első.

602
00:35:19,342 --> 00:35:22,050
Ez az első a két dolog
által visszaadott vetítés.

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

604
00:35:27,840 --> 00:35:29,630
>> Mi ugyanezt tesszük az y.

605
00:35:29,630 --> 00:35:34,960
De ahelyett, ismét
A második elem, a y.

606
00:35:34,960 --> 00:35:35,980
Készüljön frissíteni.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, extra karakter
here-- szép, van

609
00:35:46,450 --> 00:35:51,730
adatvezérelt dokumentumot, ami
eltitkolták ezt a JSON fájlban tárgyak,

610
00:35:51,730 --> 00:35:57,560
hogy egy térképet, és a változó
attribútum vonatkozásában az adatok

611
00:35:57,560 --> 00:35:59,600
vetíteni azt a térképen.

612
00:35:59,600 --> 00:36:00,840
Ez nagyon érdekes.

613
00:36:00,840 --> 00:36:03,770
Ez jó.

614
00:36:03,770 --> 00:36:05,640
>> Nézzük meg most egy kicsit.

615
00:36:05,640 --> 00:36:08,795
Úgy értem, van két darab
információk minden adatpont.

616
00:36:08,795 --> 00:36:10,000
Úgy értem, három.

617
00:36:10,000 --> 00:36:12,540
Megvan a koordinátákat,
amely egy x és y.

618
00:36:12,540 --> 00:36:15,700
És mi van a nagyságát.

619
00:36:15,700 --> 00:36:17,420
>> Meg kell kódolni nagyságát valahogy.

620
00:36:17,420 --> 00:36:18,920
Van egy csomó csatorna.

621
00:36:18,920 --> 00:36:20,370
Tudjuk használni színű.

622
00:36:20,370 --> 00:36:21,890
Tudjuk használni sugara.

623
00:36:21,890 --> 00:36:23,040
Jól jönne fedőképesség.

624
00:36:23,040 --> 00:36:25,540
Jól jönne sok mindent kódot.

625
00:36:25,540 --> 00:36:29,180
Bármely e jellemzők és sok
Több, amelyek nem szerepelnek ott,

626
00:36:29,180 --> 00:36:33,065
mert ők nem kötelező, amit lehetett
használja kódolni az adatokat, a stroke-

627
00:36:33,065 --> 00:36:35,670
és ezek mind már említettem.

628
00:36:35,670 --> 00:36:36,690
>> Csináljuk sugara.

629
00:36:36,690 --> 00:36:38,830
Azt hiszem sugara a leginkább intuitív.

630
00:36:38,830 --> 00:36:46,210
Tehát újra, akkor cserélje hogy kódolva
40, és egyes számítások.

631
00:36:46,210 --> 00:36:48,810
Használni fogjuk a kedvenc skálán újra.

632
00:36:48,810 --> 00:36:50,290
És mi már d.

633
00:36:50,290 --> 00:36:55,850
D-t nem, mert azt akarjuk nagysága
A d. d csak az adatok pontot.

634
00:36:55,850 --> 00:36:57,430
Majd át a nagysága arányos.

635
00:36:57,430 --> 00:36:58,470
>> Próbáljuk meg újra.

636
00:36:58,470 --> 00:37:00,230
Ooh, ez nem működik.

637
00:37:00,230 --> 00:37:02,940
Miért fontos ez nem működik?

638
00:37:02,940 --> 00:37:04,387
>> Úgy emlékszem, milyen mértékben teszi.

639
00:37:04,387 --> 00:37:05,470
Nézzük meg skálán újra.

640
00:37:05,470 --> 00:37:10,800
Méretarányú térképek 1-10 on
a 22-600, többé-kevésbé.

641
00:37:10,800 --> 00:37:12,030
600 hatalmas.

642
00:37:12,030 --> 00:37:14,730
Ez az, amiért mi vagyunk egyre ennek.

643
00:37:14,730 --> 00:37:18,420
>> Ezért szeretnénk változtatni a skála
valamilyen kényelmesebb.

644
00:37:18,420 --> 00:37:22,610
Mondjuk, azt akarjuk, 0-60.

645
00:37:22,610 --> 00:37:25,340
60 nagy, de 10 földrengések
rendkívül ritkák.

646
00:37:25,340 --> 00:37:27,880
Tény, hogy soha nem történt.

647
00:37:27,880 --> 00:37:31,830
>> Szóval mi ez fog tenni, hogy elviszem
mi nagyságrendű, hogy megy 1-10

648
00:37:31,830 --> 00:37:34,490
és térkép azt, hogy bővítse ki.

649
00:37:34,490 --> 00:37:37,370
És térkép azt, hogy 0-60.

650
00:37:37,370 --> 00:37:38,840
Nézzük frissíteni.

651
00:37:38,840 --> 00:37:41,850
>> Szép, van egy vizualizációs.

652
00:37:41,850 --> 00:37:42,500
Ez nagyszerű.

653
00:37:42,500 --> 00:37:43,736
Ez a tényleges adatok.

654
00:37:43,736 --> 00:37:46,360
Észre fogod venni, az én kis játék
Például, a legnagyobb földrengés

655
00:37:46,360 --> 00:37:49,417
igaza van a nyakunkon.

656
00:37:49,417 --> 00:37:50,000
De ennyi.

657
00:37:50,000 --> 00:37:54,422
Van egy időpontra hajtott vizualizációs
hogy fogyasztja az adatok

658
00:37:54,422 --> 00:37:56,255
és ad nekünk igazán
érdekes információkat.

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

660
00:38:02,600 --> 00:38:06,420
Igen, jól jöhet egy
interaktivitás hozzá.

661
00:38:06,420 --> 00:38:08,675
Már említettem, hogy volt
Az erős ereje D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Tehát itt, minden egyes elemére vagyunk
leírja egy csomó tulajdonságait.

664
00:38:15,060 --> 00:38:20,230
De azt is leírják, hogy mit akarunk
történni interaktivitás elemeket.

665
00:38:20,230 --> 00:38:26,190
Például, tudtuk leírni
mi történik, ha az egeret.

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

667
00:38:28,740 --> 00:38:33,640
És nagyon hasonlít,
hogy viszem a funkciót,

668
00:38:33,640 --> 00:38:36,700
nagyon hasonló a
tulajdonítja a miénk volt,

669
00:38:36,700 --> 00:38:44,650
ahol nem teszünk valamit a
eleme, amikor lebeg felette.

670
00:38:44,650 --> 00:38:47,100
>> Tehát első dolog, amit meg kell
tennie, hogy válassza ki azt az elemet,

671
00:38:47,100 --> 00:38:49,435
megtalálni alapvetően a böngészőben.

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

673
00:38:57,090 --> 00:39:00,920
és akkor tudnánk állítani
Egy tulajdonság azt.

674
00:39:00,920 --> 00:39:06,870
Szóval mit csinálok itt, amikor lebeg
több mint valamit, mi lesz az adott elem

675
00:39:06,870 --> 00:39:11,197
majd állítsa opacitása vissza
1, a teljesen átlátszatlan.

676
00:39:11,197 --> 00:39:12,488
Lássuk, mit, hogy néz ki.

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

678
00:39:29,430 --> 00:39:39,080
>> Úgy tűnik, van egy
extra pontosvessző itt.

679
00:39:39,080 --> 00:39:42,420
Tehát, ha lebeg ide, megtelik.

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

681
00:39:46,530 --> 00:39:48,960
De most, persze,
marad a teljes, mert

682
00:39:48,960 --> 00:39:53,240
van, hogy mi történik
ha felszámoljuk kurzort.

683
00:39:53,240 --> 00:39:59,990
Akkor most pontosan erre a
mouseout, szemben a mouseover.

684
00:39:59,990 --> 00:40:06,399
>> És mi visszaállíthatja az
amit kellett before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
És most, minden alkalommal, amikor
hover, kapunk egy teljes kört.

686
00:40:10,260 --> 00:40:13,468
Ez segít nekünk, hogy mi vagyunk
mi kiválasztása alapvetően.

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

688
00:40:19,210 --> 00:40:22,860
>> És most nézzük, hogy ez nagyon jó.

689
00:40:22,860 --> 00:40:26,210
Nézzük csatlakoztassa a valós adatokat.

690
00:40:26,210 --> 00:40:30,890
Úgyhogy kérni lehetne
USGS arról, hogy az adatok.

691
00:40:30,890 --> 00:40:35,630
Így a US Geological Survey
rendelkezik adatokkal arról földrengések.

692
00:40:35,630 --> 00:40:41,460
Nekik van egy nyilvános API, ami képes
fogyasztottak JSON formátumban.

693
00:40:41,460 --> 00:40:42,548
Tehát lássuk, hogy.

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

695
00:40:49,730 --> 00:40:55,900
>> Szóval ez egy kicsit olyan kód,
csatlakozik az USGS API.

696
00:40:55,900 --> 00:40:57,990
És van egy kis feldolgozó rajta.

697
00:40:57,990 --> 00:41:02,200
Ez nem releváns, de egyszerűsíti azt
egy egyszerű adat formátumban, mint például az

698
00:41:02,200 --> 00:41:03,800
a miénk volt.

699
00:41:03,800 --> 00:41:08,140
Szóval én megszabadulni a hívás
a hamis data.json a fájlt.

700
00:41:08,140 --> 00:41:13,110
És ahelyett, hívom
Az USGS alapvetően.

701
00:41:13,110 --> 00:41:16,700
>> Nézzük frissíteni, szép.

702
00:41:16,700 --> 00:41:21,260
Ez a tényleges, valós adatok
E heti földrengés esetében.

703
00:41:21,260 --> 00:41:23,217
Ez nagyon érdekes.

704
00:41:23,217 --> 00:41:25,050
Ez nem meglepő
számunkra, de vannak

705
00:41:25,050 --> 00:41:27,909
Sok földrengés a
West Coast Kaliforniában.

706
00:41:27,909 --> 00:41:30,950
De azt hittem, nagyon érdekes
hogy olyan sokan voltak a földrengések

707
00:41:30,950 --> 00:41:34,350
Alaszkában, és nyilván,
itt a Midwest.

708
00:41:34,350 --> 00:41:37,630
Úgy értem, érdekes, és jók vagyunk.

709
00:41:37,630 --> 00:41:40,410
Erre a következtetésre.

710
00:41:40,410 --> 00:41:43,760
>> De alapvetően ez
amit D3 segít csinálni.

711
00:41:43,760 --> 00:41:48,030
Ez segít bennünket, hogy az adatok, bind
hogy tartalmaz DOM,

712
00:41:48,030 --> 00:41:51,620
és ezek az elemek megváltoztatására
függvényében az adatok,

713
00:41:51,620 --> 00:41:54,780
hogy ezeket a tulajdonságokat, az összes
sok attribútum az elemek,

714
00:41:54,780 --> 00:41:57,393
Az összes hasznos lehet csatornák
információ közvetítésére.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 egy hihetetlenül erős
Könyvtár és meglepően jól fut.

717
00:42:09,290 --> 00:42:12,260
Ez valami nagy dolog.

718
00:42:12,260 --> 00:42:15,960
Adatmegjelenítési egy
Hihetetlenül hatékony eszköz

719
00:42:15,960 --> 00:42:21,530
továbbítására, hogy az emberek mély
felismerésekre jut, hogy fő

720
00:42:21,530 --> 00:42:25,430
és segít nekik megérteni, a
ezt a mély és intuitív módon,

721
00:42:25,430 --> 00:42:29,760
az adatok hogyan működik, és hogyan
adatváltozások életünk.

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