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

2
00:00:00,780 --> 00:00:11,880
>> [Predvaja glasba]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Jaz sem David
Chouinard, in to je D3.

4
00:00:16,480 --> 00:00:17,700
Dobrodošli.

5
00:00:17,700 --> 00:00:21,270
Bomo danes spoznali D3.

6
00:00:21,270 --> 00:00:25,020
D3 je okvir JavaScript
za gradnjo visoko kakovost

7
00:00:25,020 --> 00:00:28,110
interaktivne vizualizacije za splet.

8
00:00:28,110 --> 00:00:30,870
Stvari, kot tisto, kar smo
vidim v zadnji mene,

9
00:00:30,870 --> 00:00:34,230
se bomo naučili, da bi tisti,
stvari, vrsta osnovami njo.

10
00:00:34,230 --> 00:00:36,452
Ampak to se dogaja, da se ohladi.

11
00:00:36,452 --> 00:00:38,160
Začnimo
kar lepe slike.

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

13
00:00:41,108 --> 00:00:44,350
Imamo več demos
obetov na voljo.

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

15
00:00:48,040 --> 00:00:50,760
Dajmo.

16
00:00:50,760 --> 00:00:58,700
>> Zakon I, DOM manipulation-- gremo
začeti takoj, kar kul stvari.

17
00:00:58,700 --> 00:01:01,240
Najprej, na levi strani, imamo kodo.

18
00:01:01,240 --> 00:01:03,470
Na desni strani imamo
Rezultat našega kodeksa.

19
00:01:03,470 --> 00:01:04,900
Gremo skozi njo.

20
00:01:04,900 --> 00:01:05,780
>> Naredimo krog.

21
00:01:05,780 --> 00:01:08,570
Kako se to sliši?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
smo le na krog.

23
00:01:14,934 --> 00:01:16,100
Vi mi ne verjamete, kajne?

24
00:01:16,100 --> 00:01:18,190
To ne obstaja.

25
00:01:18,190 --> 00:01:21,830
>> Torej, kaj smo naredili prav tukaj je,
SVG je razširljive vektorska grafika.

26
00:01:21,830 --> 00:01:27,530
To je način, kako povedati, da brskalnik
da vektorsko grafiko v brskalniku.

27
00:01:27,530 --> 00:01:30,740
Kaj smo pravkar storil zdaj
Doda se krog za brskanje.

28
00:01:30,740 --> 00:01:34,790
>> Obljuba je, da je krog
zahteva nekaj osnovnih lastnosti

29
00:01:34,790 --> 00:01:36,850
preden lahko dejansko videli.

30
00:01:36,850 --> 00:01:40,045
Moramo mu povedati svojo x položaj,
njen y položaj, njena polmer.

31
00:01:40,045 --> 00:01:43,310
Mi ga ni povedal, kaj od tega,
tako da smo ne vidim prav zdaj.

32
00:01:43,310 --> 00:01:46,210
Ampak dajmo povedati stvari.

33
00:01:46,210 --> 00:01:49,510
>> Torej, najprej, imaš
dati svoj krog ime.

34
00:01:49,510 --> 00:01:53,070
Torej, recimo ji krog.

35
00:01:53,070 --> 00:01:54,406
Naš krog ima ime zdaj.

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

37
00:01:57,230 --> 00:01:59,490
In dajmo mu še nekaj atributov.

38
00:01:59,490 --> 00:02:03,690
Kaj pa cx bi osredotočali x, tako
središče x položaja.

39
00:02:03,690 --> 00:02:06,730
Recimo, 200 za 200 pik.

40
00:02:06,730 --> 00:02:10,220
>> Dajmo to y 200 pik, kot dobro.

41
00:02:10,220 --> 00:02:16,032
In r polmer, približno 40 točk.

42
00:02:16,032 --> 00:02:16,950
Zdaj pa poglejmo.

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

44
00:02:21,740 --> 00:02:23,440
Ne morem pojasniti.

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

46
00:02:30,430 --> 00:02:31,520
>> Tam greš.

47
00:02:31,520 --> 00:02:37,330
Imamo krog na položaju 200
pik, 200 pik, premer 40 slikovnih pik.

48
00:02:37,330 --> 00:02:38,280
Nekako kul, kajne?

49
00:02:38,280 --> 00:02:38,988
Imamo krog.

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

51
00:02:40,880 --> 00:02:42,670
>> Tako da ni potrebe, da sledite skupaj.

52
00:02:42,670 --> 00:02:45,790
Vsi ti primeri, vsi
Koda sem danes počne

53
00:02:45,790 --> 00:02:51,300
bo na voljo na spletu na koncu
v obliki interaktivnih primerov

54
00:02:51,300 --> 00:02:54,010
s kontrolnimi točkami na
vsako dejanje, in tako naprej.

55
00:02:54,010 --> 00:02:55,160
>> Naredimo več stvari.

56
00:02:55,160 --> 00:02:58,901
Ta črni krog je res grdo.

57
00:02:58,901 --> 00:03:01,541
Žal mi je za to napako
Sporočila tam.

58
00:03:01,541 --> 00:03:05,340
Tam gremo.

59
00:03:05,340 --> 00:03:06,350
>> Dajmo to barvo.

60
00:03:06,350 --> 00:03:07,170
Kako pa je to?

61
00:03:07,170 --> 00:03:08,340
Rad jekleno modra.

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

63
00:03:13,280 --> 00:03:16,030
No, naš krog spremenila barvo.

64
00:03:16,030 --> 00:03:17,320
To je super.

65
00:03:17,320 --> 00:03:31,330
Naj bo to semi-transparent
too-- semi-transparent.

66
00:03:31,330 --> 00:03:33,670
>> Torej, to so atributi
smo opredelitvi na krog.

67
00:03:33,670 --> 00:03:36,774
Prva stvar, ki smo se je
smo se krog na strani.

68
00:03:36,774 --> 00:03:38,690
In potem smo opredeljevanju
kup atributov.

69
00:03:38,690 --> 00:03:41,610
Nekateri so potrebna,
kot CX, CY, in Radius.

70
00:03:41,610 --> 00:03:42,680
In drugi, so obvezna.

71
00:03:42,680 --> 00:03:44,730
>> Obstaja veliko več atributov.

72
00:03:44,730 --> 00:03:46,760
Veliko izmed njih.

73
00:03:46,760 --> 00:03:53,070
Na primer, lahko imamo
kapi, pa tudi, kap rdeče.

74
00:03:53,070 --> 00:03:55,630
Ampak kaj je odstraniti to.

75
00:03:55,630 --> 00:04:00,450
Vrnili smo se v krogu, modri krog.

76
00:04:00,450 --> 00:04:01,600
>> Torej, kaj je narediti več krogov.

77
00:04:01,600 --> 00:04:02,810
Kako pa je to?

78
00:04:02,810 --> 00:04:04,665
Naredimo še en krog.

79
00:04:04,665 --> 00:04:05,985
To je zanimivo, kajne?

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

81
00:04:09,630 --> 00:04:12,300
>> Tako da sem samo kopiraj-Prilepljeno
kar smo imeli že.

82
00:04:12,300 --> 00:04:13,570
Recimo circle2.

83
00:04:13,570 --> 00:04:15,840
In kaj je naredil natančen
Ista stvar in ga dal

84
00:04:15,840 --> 00:04:20,450
atributi, zaradi x položaj 300.

85
00:04:20,450 --> 00:04:24,140
Bravo, imamo dva kroga sedaj.

86
00:04:24,140 --> 00:04:27,240
>> In seveda, smo lahko
posodobi te vrednote.

87
00:04:27,240 --> 00:04:31,640
Jaz bi ga dal na 400, in zdaj se premika.

88
00:04:31,640 --> 00:04:35,470
In ker je nadležno, dajmo
ga odstranite, tako circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
To je izginil.

91
00:04:40,730 --> 00:04:43,170
>> Torej, kaj delamo, in
je samo zelo, very-- to

92
00:04:43,170 --> 00:04:46,030
je zelo podobno temu, kar
lahko naredite v jQuery, npr.

93
00:04:46,030 --> 00:04:48,240
Mi samo manipulacijo
DOM, je pozval.

94
00:04:48,240 --> 00:04:50,040
Morda ste slišali to besedo, preden.

95
00:04:50,040 --> 00:04:53,255
Smo ustvariti stvari, ki določa
atribute na stvari, odstranjevanje stvari.

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

97
00:04:58,950 --> 00:05:02,360
>> Zdaj, tukaj je, če postane zanimiva.

98
00:05:02,360 --> 00:05:07,250
Torej, pozneje v kodo, smo lahko še vedno
nanašajo na prvotni krog tukaj.

99
00:05:07,250 --> 00:05:14,100
Torej, kaj je ponastaviti svoje atribut cx.

100
00:05:14,100 --> 00:05:18,260
Recimo, da svoje stališče do 400 x.

101
00:05:18,260 --> 00:05:22,406
In grem v tranziciji
da, tako da je očitno.

102
00:05:22,406 --> 00:05:23,360
Tam gremo.

103
00:05:23,360 --> 00:05:24,780
>> Tako smo dodali krog.

104
00:05:24,780 --> 00:05:26,440
Postavili smo nekaj atributov.

105
00:05:26,440 --> 00:05:28,210
Dodali smo še en krog, ki ga odstranili.

106
00:05:28,210 --> 00:05:31,650
In potem smo se spreminja
prvotni krog.

107
00:05:31,650 --> 00:05:35,400
>> Ampak tukaj je, kjer postane
Veliko bolj zanimivo.

108
00:05:35,400 --> 00:05:39,070
Ne samo, da bomo lahko nastavite atribute
kot samo vrednosti, lahko rečemo,

109
00:05:39,070 --> 00:05:41,610
hej, circle, pojdite na položaj 200.

110
00:05:41,610 --> 00:05:44,540
Mi jih lahko nastavite kot funkcije.

111
00:05:44,540 --> 00:05:48,850
>> Torej, namesto da tukaj 400,
lahko naredimo nekaj za izračun

112
00:05:48,850 --> 00:05:53,950
na letenje, za kaj smo
želijo, da atribut biti.

113
00:05:53,950 --> 00:05:56,580
Torej, to je, kako bi ga izraziti, da.

114
00:05:56,580 --> 00:06:00,660
Pravimo, namesto 400, pustite me
vam funkcijo namesto tega.

115
00:06:00,660 --> 00:06:04,180
In tu, v notranjosti te funkcije,
bomo lahko vsako noro izračun.

116
00:06:04,180 --> 00:06:06,820
>> Mi lahko vzamete čas in
pogled na neko drugo stvar

117
00:06:06,820 --> 00:06:11,230
in dinamično odločijo za
Krog kakšno vrednost želimo.

118
00:06:11,230 --> 00:06:15,266
Kaj pa mi daj
je naključno x položaj?

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

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

121
00:06:21,120 --> 00:06:25,490
>> Torej, kaj pravi, da je za
vsaka x, vodijo to funkcijo.

122
00:06:25,490 --> 00:06:29,340
In kaj počneva je izračun
nekatere stvari, naključni krat širina

123
00:06:29,340 --> 00:06:30,410
in se vračajo, da.

124
00:06:30,410 --> 00:06:34,765
Torej, vsakič, ko tečemo, da smo dobili
krog, da gre za naključno mesto.

125
00:06:34,765 --> 00:06:36,394
To je nekako kul.

126
00:06:36,394 --> 00:06:38,310
Počutim se, kot sem lahko ogledate
na to, za malo.

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

128
00:06:44,274 --> 00:06:46,440
Začenjamo priti do
nekaj zanimivega tukaj.

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

130
00:06:49,120 --> 00:06:51,390
Naj bo te podatke poganja zdaj.

131
00:06:51,390 --> 00:06:53,420
Ni podatkov tukaj.

132
00:06:53,420 --> 00:06:54,482
Oglejmo spremeniti.

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

134
00:06:57,440 --> 00:07:12,140
>> Zakon II, Data Driven Documents--
Torej vrnimo tukaj.

135
00:07:12,140 --> 00:07:15,340
In kaj je samo znebiti circle2,
ker smo pravkar dodajanje in odstranjevanje

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

137
00:07:15,840 --> 00:07:17,382
Tako smo v resnici ne potrebujejo.

138
00:07:17,382 --> 00:07:21,421
Moramo biti veliko bolj pameten tukaj.

139
00:07:21,421 --> 00:07:23,170
Recimo, da imamo
nekateri podatki o neke vrste.

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

141
00:07:31,540 --> 00:07:40,020
Ena moment-- recimo,
smo imeli podatke o tej obliki.

142
00:07:40,020 --> 00:07:41,800
Imeli smo niz, samo
kup številk.

143
00:07:41,800 --> 00:07:45,750
Imamo sedem številk tukaj,
ne glede na to represent-- znesek

144
00:07:45,750 --> 00:07:48,810
na bančni račun ljudi, kako
veliko tehtajo, bog ve kaj.

145
00:07:48,810 --> 00:07:51,310
>> To so številke, in smo
želite uporabiti naše kroge

146
00:07:51,310 --> 00:07:53,240
da predstavljajo te številke nekako.

147
00:07:53,240 --> 00:07:55,515
Želimo tie Nostra
krogi do teh številk.

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

149
00:07:58,750 --> 00:07:59,626
Torej, kaj počnemo.

150
00:07:59,626 --> 00:08:01,500
Recimo, da želimo
Krog za vsako številko.

151
00:08:01,500 --> 00:08:03,590
Mi lahko storite old
stvar, ki smo doing--

152
00:08:03,590 --> 00:08:06,020
Krog append in circle2 in circle3.

153
00:08:06,020 --> 00:08:10,020
Vendar ta uide iz rok, in
tam je veliko ponavljanja logiko.

154
00:08:10,020 --> 00:08:12,760
>> Torej, kaj je dobil bolj pameten s tem.

155
00:08:12,760 --> 00:08:17,810
Namesto uporabe var krog
svg.append da smo samo z uporabo,

156
00:08:17,810 --> 00:08:21,580
bomo uporabili
ta mali blok tukaj.

157
00:08:21,580 --> 00:08:24,510
Ne želim iti na poglobljeno
v tisto, kar so vsi ti deli storiti.

158
00:08:24,510 --> 00:08:26,020
In to je nekako napredno temo.

159
00:08:26,020 --> 00:08:27,830
In želim si, da bi lahko.

160
00:08:27,830 --> 00:08:31,370
>> Vendar je ključna stvar za recognize-- in
boste videli, je zelo pogosto v D3 kodo.

161
00:08:31,370 --> 00:08:36,840
Ta blok besedilni osnovami
ustvarja toliko krogov

162
00:08:36,840 --> 00:08:41,360
kot so podatkovni elementi
V tem polju prav tukaj.

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

164
00:08:53,420 --> 00:08:55,780
Torej, to ustvarja toliko
krogi kot obstajajo elementi.

165
00:08:55,780 --> 00:08:58,520
To se dogaja, da nam ustvarijo sedem krogov.

166
00:08:58,520 --> 00:09:01,710
In to je res, res ključno stvar.

167
00:09:01,710 --> 00:09:02,460
Torej, kaj je teči, da.

168
00:09:02,460 --> 00:09:05,460
Oglejmo odstraniti našo drugo krog.

169
00:09:05,460 --> 00:09:09,565
Naj samo Komentiraj
Delu ven in znova zagnati to.

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

171
00:09:13,840 --> 00:09:15,260
>> Tam gremo.

172
00:09:15,260 --> 00:09:18,030
Torej, naš krog je tu
veliko temnejši, ker smo

173
00:09:18,030 --> 00:09:20,720
imajo sedem krogov, eden
na vrhu drugega.

174
00:09:20,720 --> 00:09:25,425
Pravkar smo ustvarili sedem krogov, enega
vsak za vsako od teh podatkovnih elementov.

175
00:09:25,425 --> 00:09:28,860
Ampak tam je ključna stvar, ki se je zgodilo
s tem odrezkom tukaj.

176
00:09:28,860 --> 00:09:31,030
>> To je, da so podatki, vezani.

177
00:09:31,030 --> 00:09:33,440
Torej vsak od
ti podatkovni elementi,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, je vezan
za določen krog.

179
00:09:38,830 --> 00:09:40,960
Torej, to ni le ustvaril
kup krogov

180
00:09:40,960 --> 00:09:43,420
ampak veže ti dve stvari skupaj.

181
00:09:43,420 --> 00:09:48,740
>> In v prihodnosti, saj smo ustvarili
ti krogi s to funkcijo D3,

182
00:09:48,740 --> 00:09:52,430
če ti dam krog, lahko
daj mi podatke, povezane z njim.

183
00:09:52,430 --> 00:09:53,280
Torej se vprašajmo D3.

184
00:09:53,280 --> 00:09:54,840
Hej, D3, imam ta krog.

185
00:09:54,840 --> 00:09:57,350
Kaj je podatkov, da ima krog?

186
00:09:57,350 --> 00:10:01,290
In nam bo povedal, D3 10 ali 45 ali 105.

187
00:10:01,290 --> 00:10:02,380
>> Te stvari so vezani.

188
00:10:02,380 --> 00:10:04,490
To je zelo, zelo temeljni koncept.

189
00:10:04,490 --> 00:10:06,070
Oglejmo si to.

190
00:10:06,070 --> 00:10:12,210
>> Torej način bi vprašati D3-- tako
To je pomembno za to,

191
00:10:12,210 --> 00:10:16,620
ampak verjemite mi na njej.

192
00:10:16,620 --> 00:10:17,620
To je, kako bomo prosili D3.

193
00:10:17,620 --> 00:10:21,312
Hej, D3, daj mi prvo
krog, ki ga lahko najdete.

194
00:10:21,312 --> 00:10:23,580
Daj mi prvi krog lahko najdete.

195
00:10:23,580 --> 00:10:29,660
In potem bi se lahko vprašali D3, kaj je
Podatki o tem, kot je ta, 10.

196
00:10:29,660 --> 00:10:33,380
>> Tako smo samo vprašati D3, najti me
Prvi krog lahko najdete.

197
00:10:33,380 --> 00:10:34,400
Kaj je njegove podatke?

198
00:10:34,400 --> 00:10:36,650
10, ki je pravzaprav naša
Prvi element podatkov.

199
00:10:36,650 --> 00:10:42,150
Lahko bi ga vprašati, hej, D3,
nam najti naš tretji krog.

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

201
00:10:44,450 --> 00:10:45,740
Zakaj je to res pomembno?

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

203
00:10:49,790 --> 00:10:52,250
>> Torej, tukaj sem omenil
da lahko uporabljamo funkcije.

204
00:10:52,250 --> 00:10:54,910
In sem omenil, da je bil
zelo močna stvar.

205
00:10:54,910 --> 00:11:03,070
Torej ne samo, da lahko naši funkcije stvari
kot še nekaj računanja, na primer,

206
00:11:03,070 --> 00:11:09,170
vrne naključno število, je mogoče
tudi stvari, ki temeljijo na podatkih.

207
00:11:09,170 --> 00:11:11,550
To je tisto, na osnovi podatkov dokumenti pomenijo.

208
00:11:11,550 --> 00:11:13,750
To je tisto, kar stoji za D3.

209
00:11:13,750 --> 00:11:17,800
>> Torej, to x postition-- namesto
za samo rekel, vse kroge,

210
00:11:17,800 --> 00:11:21,735
dobili x položaj 200 smo
bi ji dal funkcijo.

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

212
00:11:26,140 --> 00:11:30,140
In tukaj, lahko naredimo nekaj izračun.

213
00:11:30,140 --> 00:11:33,710
in d tu stoji na mestu za podatke.

214
00:11:33,710 --> 00:11:36,120
Torej, vsakič, ko imamo
krog, v bistvu,

215
00:11:36,120 --> 00:11:37,750
D3 bo ustvarjanje teh sedem krogov.

216
00:11:37,750 --> 00:11:38,500
In nato za vsak

217
00:11:38,500 --> 00:11:41,920
>> krog, da se dogaja, da gredo, hej,
circle1 kaj je tvoj x položaj.

218
00:11:41,920 --> 00:11:45,210
Prej smo bili
Vedno odgovorite 200.

219
00:11:45,210 --> 00:11:48,630
Toda zdaj, vsakič D3 vpraša
nam, kaj je tvoj x položaj,

220
00:11:48,630 --> 00:11:51,790
to se dogaja, da us-- imamo
da krog, tako da imamo podatke.

221
00:11:51,790 --> 00:11:55,290
To se dogaja, da nam podatke in pravijo,
Kaj želite razstava biti,

222
00:11:55,290 --> 00:11:57,120
na podlagi teh podatkov.

223
00:11:57,120 --> 00:11:59,590
>> Poglejmo samo vrnitev dejanske podatke.

224
00:11:59,590 --> 00:12:04,910
Torej, če tečemo to, to daje
Podatki nas poganja dokumentov.

225
00:12:04,910 --> 00:12:08,040
Ti krogi temeljijo
V zvezi position--

226
00:12:08,040 --> 00:12:11,120
oni podlage v odvisnosti od podatkov.

227
00:12:11,120 --> 00:12:13,100
>> Tako v prvem krogu,
D3 postavlja krog.

228
00:12:13,100 --> 00:12:16,770
In potem D3 nas vpraša, kaj storiti
želite ekspozicija biti.

229
00:12:16,770 --> 00:12:19,620
In mi samo reči, ne glede podatkov.

230
00:12:19,620 --> 00:12:21,185
Naredite razstavo 10.

231
00:12:21,185 --> 00:12:26,320
>> Nato pa se sprašuje, kaj hočeš
Priročnik da je za drugi krog.

232
00:12:26,320 --> 00:12:27,270
In mi odgovorite, 45.

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

234
00:12:30,000 --> 00:12:32,230
In mi, seveda, lahko
narediti nekaj računanja tukaj.

235
00:12:32,230 --> 00:12:35,510
Se mi zdi, da je teh krogov
so nekako squished up.

236
00:12:35,510 --> 00:12:38,965
>> Torej jo pomnožimo s 3, pomnoži podatke s 3.

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

238
00:12:41,870 --> 00:12:43,840
Naš krog je pravkar razširila ven.

239
00:12:43,840 --> 00:12:46,730
Naša vrednost je potrojila.

240
00:12:46,730 --> 00:12:51,010
>> Krog je res na robu,
tako da je morda nekako ga nadomestiti.

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

242
00:12:53,632 --> 00:12:56,070
Tukaj imaš.

243
00:12:56,070 --> 00:12:57,590
>> To je vizualizacija podatkov.

244
00:12:57,590 --> 00:13:01,767
To je zelo osnovna, pač pa je to
nam daje vpogled v naše podatke.

245
00:13:01,767 --> 00:13:04,600
To nam pove, da je, na primer,
imajo malo skupek elementov.

246
00:13:04,600 --> 00:13:06,340
In imamo veliko osamelcev tukaj.

247
00:13:06,340 --> 00:13:10,830
To nam daje nekaj informacij
o porazdelitvi.

248
00:13:10,830 --> 00:13:20,830
>> Če smo, na primer, spremeniti
Podatki do 150 tukaj in osvežitev,

249
00:13:20,830 --> 00:13:22,630
Naša vizualizacija je spremenilo.

250
00:13:22,630 --> 00:13:24,285
Ta dokument je na osnovi podatkov.

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

252
00:13:32,640 --> 00:13:36,180
>> Torej seveda, vsi ti elementi,
vsi ti atributi tukaj,

253
00:13:36,180 --> 00:13:38,430
lahko uporabite funkcijo, ne
le številke, ne le

254
00:13:38,430 --> 00:13:39,900
x in y pozicije.

255
00:13:39,900 --> 00:13:42,120
Tako da bomo lahko uporabite funkcijo za barvo.

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

257
00:13:45,260 --> 00:13:46,360
Torej bomo naredili enako.

258
00:13:46,360 --> 00:13:49,360
Bomo ji dati funkcijo.

259
00:13:49,360 --> 00:13:52,320
>> In recimo, da bi lahko imeli
Pogojniki v naši funkcije.

260
00:13:52,320 --> 00:13:54,770
Ta funkcija se lahko
sto vrstic.

261
00:13:54,770 --> 00:13:57,150
To lahko storite zelo, zelo zapletene stvari.

262
00:13:57,150 --> 00:13:59,080
>> Torej, kaj je dal tudi izjavo, če tukaj.

263
00:13:59,080 --> 00:14:03,420
Recimo, če je naš podatki manj
od 50 let, ki je določen prag

264
00:14:03,420 --> 00:14:05,817
da smo zainteresirani
v nekega razloga.

265
00:14:05,817 --> 00:14:06,650
Naj bo zelena.

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

267
00:14:09,830 --> 00:14:15,320
V nasprotnem primeru pa bi bilo rdeče.

268
00:14:15,320 --> 00:14:16,110
Kako pa je to?

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

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

271
00:14:21,220 --> 00:14:24,860
>> Torej naš vizualizacija podatkov se začenja
da gre bolj zanimive podatke

272
00:14:24,860 --> 00:14:26,727
na številnih kanalih.

273
00:14:26,727 --> 00:14:28,560
Torej, zdaj vemo malo
o porazdelitvi.

274
00:14:28,560 --> 00:14:31,768
In vemo, da obstaja neke vrste
odrezani na 50, ki smo ga zanimajo.

275
00:14:31,768 --> 00:14:35,630
Vemo, da so podatki za dve točki
pod tem pragom in večina

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

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

278
00:14:41,510 --> 00:14:46,160
>> Tako kot zadnji korak, ti ​​podatki tu
to je zelo redko, da se to tako.

279
00:14:46,160 --> 00:14:52,610
Torej, kaj je to samo izseliti na spremenljivko
ker to je čistejše, kot je ta.

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

281
00:15:02,980 --> 00:15:05,197
In potem bomo uporabili to spremenljivko tukaj.

282
00:15:05,197 --> 00:15:06,280
To je točno isto stvar.

283
00:15:06,280 --> 00:15:07,280
To je le nekoliko čistejši.

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

285
00:15:25,300 --> 00:15:35,300
>> Next up, Zakon III, Scales--
Torej en problem prav

286
00:15:35,300 --> 00:15:38,920
Tu je, če bomo spremenili naše
Podatki v tem 200 value--

287
00:15:38,920 --> 00:15:41,685
če jo spremenimo na 400
ali kaj podobnega in osvežitev,

288
00:15:41,685 --> 00:15:44,540
potem je ta vrednost le šla offscreen.

289
00:15:44,540 --> 00:15:49,040
Torej naša logika tukaj
kako delamo časi 3

290
00:15:49,040 --> 00:15:52,570
in 20, da se širijo in nato
, pobotajo bit res clunky.

291
00:15:52,570 --> 00:15:54,150
>> Kaj te številke pomenijo?

292
00:15:54,150 --> 00:15:55,400
Oni so le težko obstaja kodirana.

293
00:15:55,400 --> 00:15:58,830
In oni so zelo vezani na podatke.

294
00:15:58,830 --> 00:16:00,550
Želimo dokument podatkovni pogon.

295
00:16:00,550 --> 00:16:05,460
Želimo, zelo prožen dokument,
da določenih podatkov, prilagaja njej

296
00:16:05,460 --> 00:16:07,900
in ga predstavlja.

297
00:16:07,900 --> 00:16:11,330
>> Kaj smo v bistvu potrebujemo je, da smo
imajo to vrsto številke 10.

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

299
00:16:12,640 --> 00:16:17,630
In želimo, da karto ven na
širina, polna širina tukaj.

300
00:16:17,630 --> 00:16:20,620
Torej imamo obseg
številke gredo od 0 do 100.

301
00:16:20,620 --> 00:16:24,980
In imamo to campus I gre
20-700, v tem primeru.

302
00:16:24,980 --> 00:16:26,515
>> Mi nekako želimo preslikati da na.

303
00:16:26,515 --> 00:16:30,002
Želimo, da obsega gor in
potem to izravna malo.

304
00:16:30,002 --> 00:16:33,165
Izkaže se, da ima D3 ti.

305
00:16:33,165 --> 00:16:34,220
To se imenuje lestvica.

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

307
00:16:37,410 --> 00:16:38,250
Torej, dajmo ga uporabljate.

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

309
00:16:46,300 --> 00:16:49,670
>> Tako da works-- bom
ta tip gor in nato razložiti.

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

311
00:17:01,530 --> 00:17:02,450
To je lestvica.

312
00:17:02,450 --> 00:17:08,670
Kaj pa bo naredil, bo še začrtati
vrednosti od 1 do 200 na do 20 za 600.

313
00:17:08,670 --> 00:17:10,990
Mi lahko preverite to.

314
00:17:10,990 --> 00:17:13,329
Vidimo lahko, da je tu.

315
00:17:13,329 --> 00:17:21,704
>> Torej, če hranim jo 1-- en trenutek.

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

317
00:17:47,764 --> 00:17:48,555
Daj mi eno sekundo.

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

319
00:17:53,680 --> 00:17:55,080
Sem ga zatipkali.

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

321
00:18:15,320 --> 00:18:15,990
Tam greš.

322
00:18:15,990 --> 00:18:17,930
Žal mi je za to.

323
00:18:17,930 --> 00:18:22,050
>> Torej, kaj bo naredil lestvico
se bo to trajalo vrednost

324
00:18:22,050 --> 00:18:24,930
in potem pretvarjanja, da
razširiti, da ven, tako da

325
00:18:24,930 --> 00:18:27,320
zapolnjuje celoten spekter ste prosi za.

326
00:18:27,320 --> 00:18:32,910
Torej, v tem primeru, če jo en dal,
to se dogaja, da karto ven na 20.

327
00:18:32,910 --> 00:18:37,750
In če damo 200, to je
dogaja, da map, ki na 600.

328
00:18:37,750 --> 00:18:40,460
In nekje vmes,
Če bomo dobili 100, to je

329
00:18:40,460 --> 00:18:44,610
bo nekje
med 20 in 600.

330
00:18:44,610 --> 00:18:51,480
>> In seveda, zdaj je to kaj
moramo odstraniti tiste trde kodirane

331
00:18:51,480 --> 00:18:53,402
Stvari, ki jih imajo tam.

332
00:18:53,402 --> 00:18:55,950
Torej, kaj želimo storiti, je
da so podatki, ki smo si

333
00:18:55,950 --> 00:19:00,950
dati, da se posameznik podatki
element in ga prenese na prvi lestvici.

334
00:19:00,950 --> 00:19:02,635
Tako da bo lestvica jo povečati.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, imamo malo napako tukaj.

337
00:19:48,880 --> 00:19:50,120
Smo manjkajoče podatke.

338
00:19:50,120 --> 00:19:51,290
Tam greš.

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

340
00:19:58,550 --> 00:19:59,550
In da jo širi ven.

341
00:19:59,550 --> 00:20:01,383
>> To nam daje enaka
Rezultat smo imeli prej,

342
00:20:01,383 --> 00:20:04,030
ampak od tistih, ki imajo
težko kodirane omejitve.

343
00:20:04,030 --> 00:20:07,790
In če je velikost našega
Spremembe platno, na primer,

344
00:20:07,790 --> 00:20:11,790
če želimo, da je to preveliko
400 pik in je squishes ven,

345
00:20:11,790 --> 00:20:15,440
jo lahko imajo over--
ga lahko razširite, ali smo

346
00:20:15,440 --> 00:20:21,890
lahko zmanjša te tekme maržo
nekaj manj ali več kot 20.

347
00:20:21,890 --> 00:20:25,470
Te številke, ti težko kodirane
številke zdaj smisla za nas.

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

349
00:20:28,110 --> 00:20:30,520
>> In lahko naredimo veliko več
zanimivih stvari, kot dobro.

350
00:20:30,520 --> 00:20:35,990
Torej, namesto da ravno
lestvice, bomo morda želeli, da se prijavite lestvico.

351
00:20:35,990 --> 00:20:37,840
In da nam bo dala log lestvice.

352
00:20:37,840 --> 00:20:41,269
>> Torej, zdaj je naša lestvica, namesto
samo širi, da je območje,

353
00:20:41,269 --> 00:20:42,810
to počne bolj zapletene stvari.

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

355
00:20:48,790 --> 00:20:53,790
Namesto, da bi to območje težko
kodirani, in namesto da to 600,

356
00:20:53,790 --> 00:20:58,465
bomo morda želeli, da preprosto uporabite širino,
tako od 20 do širine minus 40,

357
00:20:58,465 --> 00:21:02,392
2-krat marža na drugi strani.

358
00:21:02,392 --> 00:21:05,350
In to naredi veliko bolj smiselno, da
nekdo, ki je morda videti na kodo.

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

360
00:21:08,080 --> 00:21:11,850
>> Zanimivo je, da so tehtnice dobili
Zelo, zelo prefinjeno kot dobro.

361
00:21:11,850 --> 00:21:13,350
Oni veliko zanimivih stvari.

362
00:21:13,350 --> 00:21:17,620
Torej lestvice nimajo nujno
delovati samo s številkami.

363
00:21:17,620 --> 00:21:18,955
Naredimo barvno lestvico.

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

365
00:21:23,120 --> 00:21:26,120
>> Tako da bi naša paleta be--
naša domena je 1 do 200.

366
00:21:26,120 --> 00:21:28,220
To je vhod stvar.

367
00:21:28,220 --> 00:21:33,793
Ampak morda želimo preslikati iz
zelene do rdeče, npr.

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

369
00:21:39,710 --> 00:21:42,910
In zdaj, če bomo na 1 mimo,
bomo dobili zeleno.

370
00:21:42,910 --> 00:21:45,110
Če damo 200, bomo dobili rdeče.

371
00:21:45,110 --> 00:21:49,480
In če bomo to mimo nekaj vmes,
to se dogaja, da neko mešanico, da

372
00:21:49,480 --> 00:21:52,520
nekje na gradient
med zeleno in rdečo.

373
00:21:52,520 --> 00:21:55,210
>> In namesto ob
ta vrsta okorne logike

374
00:21:55,210 --> 00:21:58,550
imamo tu z
pogojena prav tam,

375
00:21:58,550 --> 00:22:03,250
lahko imamo something--
linearna lestvica med tistimi.

376
00:22:03,250 --> 00:22:07,100
Torej sva uporabili lestvico smo pravkar
ustvarjena, ki smo jo poimenovali barve.

377
00:22:07,100 --> 00:22:09,060
In bi mi dal to D, ki
je naš podatek.

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

379
00:22:14,250 --> 00:22:15,060
In tam gremo.

380
00:22:15,060 --> 00:22:18,070
Imamo barvno lestvico.

381
00:22:18,070 --> 00:22:18,940
>> Torej, to je preslikava.

382
00:22:18,940 --> 00:22:20,960
Torej skrajni levi je popolnoma zeleno.

383
00:22:20,960 --> 00:22:22,560
Skrajni desni je popolnoma rdeča.

384
00:22:22,560 --> 00:22:24,828
In vse vmes
je funkcija d.

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

386
00:22:33,369 --> 00:22:35,160
Imamo zanimivo
vizualizacije tukaj.

387
00:22:35,160 --> 00:22:36,952
Toda naši podatki, je nekako dolgočasno.

388
00:22:36,952 --> 00:22:39,410
Poglejmo, kaj lahko storimo, če
smo imeli več zanimivih podatkov.

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

390
00:22:44,420 --> 00:22:50,500
>> Zakon IV, ki delajo z
Data-- prvo stvar

391
00:22:50,500 --> 00:22:53,560
bomo želeli storiti, da bi naše
vizualizacija bolj zanimivo

392
00:22:53,560 --> 00:22:56,140
je, da se premaknete podatke nekje drugje.

393
00:22:56,140 --> 00:22:58,310
To je zelo clunky imeti
Podatki težko kodirane tukaj.

394
00:22:58,310 --> 00:23:01,220
In na splošno, bomo prosi
nekdo drug za podatke.

395
00:23:01,220 --> 00:23:05,400
Mi se bomo morda sprašuje vlado,
Census Bureau, kaj je tvoj podatki

396
00:23:05,400 --> 00:23:10,170
in nato ubral da ali prosi
nekatere tretje osebe subjekt za nekatere podatke

397
00:23:10,170 --> 00:23:13,330
in nato gradnjo
Vizualizacija na to.

398
00:23:13,330 --> 00:23:17,170
>> Torej prva stvar, želimo narediti
je premakniti, da nekje drugje.

399
00:23:17,170 --> 00:23:24,130
Tako da bom za ustvarjanje
datoteke tukaj imenovano data.json.

400
00:23:24,130 --> 00:23:25,600
JSON format podatkov.

401
00:23:25,600 --> 00:23:29,210
Nimate, da vedo veliko o tem.

402
00:23:29,210 --> 00:23:33,210
In bomo kopirati
malo podatkov imamo tam,

403
00:23:33,210 --> 00:23:40,330
ga prilepite tam dobesedno, pojdite
nazaj na našo vizualizacijo kodo

404
00:23:40,330 --> 00:23:45,362
tukaj, in uporabite to funkcijo tukaj.

405
00:23:45,362 --> 00:23:46,820
Nimate vedeti podrobnosti.

406
00:23:46,820 --> 00:23:49,800
Toda kaj bo to storiti, je,
bo našel datoteko,

407
00:23:49,800 --> 00:23:51,780
jo prinesi, in ga vrne k nam.

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

409
00:24:11,660 --> 00:24:15,220
Torej, kaj to ne pomeni, da gre
in dobili datoteko data.json.

410
00:24:15,220 --> 00:24:18,570
In potem vse kode, ki je
zamaknjen inside-- bistvu,

411
00:24:18,570 --> 00:24:21,800
Vse kode imamo there-- bo
teči šele, ko bomo dobili podatke nazaj.

412
00:24:21,800 --> 00:24:25,760
In potem se dogaja, da teče, da
koda s podatki, ki jih imamo.

413
00:24:25,760 --> 00:24:28,870
Super, imamo
vizualizacija, ki se sprašuje,

414
00:24:28,870 --> 00:24:31,390
nekaj kode nekje
drugega, ki je običajno

415
00:24:31,390 --> 00:24:36,110
kjer se sprašuje nekaj podatkov iz
nekje drugje, ki je ponavadi

416
00:24:36,110 --> 00:24:38,656
kako deluje vizualizacije.

417
00:24:38,656 --> 00:24:41,400
>> Ampak hočem iti nazaj do podatkov.

418
00:24:41,400 --> 00:24:48,030
Tako da so podatki v načelu D3-- D3
porabi podatkov, ki je seznam stvari.

419
00:24:48,030 --> 00:24:53,000
D3 pričakuje, da bodo podatki, samo se seznam
stvari, vrsta stvari.

420
00:24:53,000 --> 00:24:58,780
Ni važno, kaj te stvari
so, tako dolgo, kot je matrika njih.

421
00:24:58,780 --> 00:25:02,460
>> Torej, tukaj, na primer, bi lahko dne
Seveda so s plavajočo vejico.

422
00:25:02,460 --> 00:25:04,830
Mi bi lahko imeli negativne.

423
00:25:04,830 --> 00:25:09,400
D3 ne skrbi, tako dolgo
saj je seznam stvari.

424
00:25:09,400 --> 00:25:13,270
>> Kot smo zanimive stvari
bi imeli, bi tudi mi

425
00:25:13,270 --> 00:25:19,410
imajo seznam nizov, kot je ta.

426
00:25:19,410 --> 00:25:25,440
Torej, to so naslovi Crimson
Pobral sem pred nekaj dnevi.

427
00:25:25,440 --> 00:25:29,220
In morda boste našli nekaj zanimivih
stvari o teh a naslovnicah.

428
00:25:29,220 --> 00:25:30,970
>> Torej še enkrat, to je seznam stvari.

429
00:25:30,970 --> 00:25:32,360
D3 ne skrbi.

430
00:25:32,360 --> 00:25:35,572
To se zgodi, da se niz.

431
00:25:35,572 --> 00:25:36,530
Spremenili smo naše podatke.

432
00:25:36,530 --> 00:25:38,210
>> Vrnimo se na naše vizualizacije.

433
00:25:38,210 --> 00:25:42,495
Zdaj je naša vizualizacija pričakuje
vhod biti številke.

434
00:25:42,495 --> 00:25:44,370
Torej bomo imeli
narediti nekaj sprememb.

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

436
00:25:47,180 --> 00:25:52,180
Tako, na primer, najprej, morda
želimo, da se ti krogi skupaj

437
00:25:52,180 --> 00:25:56,870
z dolžino naslovom,
število znakov v naslovu.

438
00:25:56,870 --> 00:26:03,600
>> Torej, kaj bomo storili is-- vsakič naše
Funkcija se imenuje z vrvico,

439
00:26:03,600 --> 00:26:09,095
bomo ugotovili, da je dolžina in
nato pa mimo, da lestvice.

440
00:26:09,095 --> 00:26:11,550
Barva, bom vrnil
da jekleno modra.

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

442
00:26:19,060 --> 00:26:20,420
In tam gremo.

443
00:26:20,420 --> 00:26:23,190
Imamo vizualizacijo
od Crimson naslovnice.

444
00:26:23,190 --> 00:26:25,500
>> Naša lestvica je malo off.

445
00:26:25,500 --> 00:26:29,680
Denimo, da je najdaljša
naslov je dolg 100 znakov,

446
00:26:29,680 --> 00:26:32,244
tako da steče ven malo.

447
00:26:32,244 --> 00:26:33,410
In imamo vizualizacijo.

448
00:26:33,410 --> 00:26:36,710
Tako se zdi, da je večina naslovnice
so zelo blizu skupaj,

449
00:26:36,710 --> 00:26:38,750
v smislu značaja linije.

450
00:26:38,750 --> 00:26:41,200
Ampak ena res izstopa.

451
00:26:41,200 --> 00:26:46,660
>> Bomo lahko začeli graditi nekaj orodja
raziskati, da več.

452
00:26:46,660 --> 00:26:50,710
Toda, ko sem delal na tem, sem bil
radoveden, ali je v tem nizu podatkov,

453
00:26:50,710 --> 00:26:53,880
naslovi z dvopičjem
v njih ne bi bilo več.

454
00:26:53,880 --> 00:26:55,770
Jaz bi jih prevzema.

455
00:26:55,770 --> 00:26:56,660
>> Torej, kaj je izvedeti.

456
00:26:56,660 --> 00:27:00,650
Oglejmo uporabite barvo
kanal, kot smo to naredili prej,

457
00:27:00,650 --> 00:27:04,540
kodirati nekaj o tem, ali
tam je debelo črevo ali ne.

458
00:27:04,540 --> 00:27:07,220
Torej bomo ponovno uporabiti pogojno.

459
00:27:07,220 --> 00:27:09,350
Nimate vedeti
podrobnosti o tem,

460
00:27:09,350 --> 00:27:14,260
ampak to je, kako preveriti
Niz za določenega značaja

461
00:27:14,260 --> 00:27:16,355
v JavaScriptu, še enkrat, ni pomembno.

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

463
00:27:18,910 --> 00:27:23,270
>> Toda, če ne bomo našli
debelo črevo, se bomo vrnili zeleno.

464
00:27:23,270 --> 00:27:26,100
In če bomo to storili, bomo vrnili rdeče.

465
00:27:26,100 --> 00:27:29,010
Torej še enkrat, da naslovnice
se bo debelega črevesa rdeče.

466
00:27:29,010 --> 00:27:34,980
To je tisto, kar ta means-- lepo.

467
00:27:34,980 --> 00:27:38,040
>> Tako se zdi, da je moj
hipoteza je vrč.

468
00:27:38,040 --> 00:27:39,360
Obstaja samo dva.

469
00:27:39,360 --> 00:27:42,380
Imamo le šest točk podatkov
in samo dva imela debelo črevo.

470
00:27:42,380 --> 00:27:45,510
Vendar se zdi nekoliko bolj
na spodnjem koncu, v bistvu.

471
00:27:45,510 --> 00:27:47,830
Naslovi z dvopičjem zdi
na splošno krajša,

472
00:27:47,830 --> 00:27:52,370
vsaj v naših podatkih set-- zanimivo.

473
00:27:52,370 --> 00:27:55,830
>> Vrnimo se, da
jekleno modra in potem videli

474
00:27:55,830 --> 00:28:00,601
kaj lahko naredimo s še
več zanimivih podatkov.

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

476
00:28:04,370 --> 00:28:09,070
Torej še enkrat, sem omenil, da
Podatki v D3 je seznam stvari.

477
00:28:09,070 --> 00:28:11,080
Videli smo število mnogih vrst.

478
00:28:11,080 --> 00:28:12,810
Smo videli strune.

479
00:28:12,810 --> 00:28:15,700
Toda stvari so lahko tudi objekti.

480
00:28:15,700 --> 00:28:20,080
>> Lahko so zapletene stvari
ki vključuje veliko stvari.

481
00:28:20,080 --> 00:28:24,510
Bolj jasno povedati, da je
V večini primerov,

482
00:28:24,510 --> 00:28:28,384
želijo zgraditi vsako podatkovno točko, kot je
bolj zapleteno kot samo eno vrednost.

483
00:28:28,384 --> 00:28:30,175
Če bi si lahko predstavljate
Baza podatkov o študente,

484
00:28:30,175 --> 00:28:32,470
tam lahko študent
ime, študent ID,

485
00:28:32,470 --> 00:28:36,370
in veliko stvari, povezanih
s posebno evidenco,

486
00:28:36,370 --> 00:28:39,834
Ne le niz ali več.

487
00:28:39,834 --> 00:28:40,750
Torej, si oglejmo to.

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

489
00:28:55,180 --> 00:28:56,760
>> To je eden od ti podatki določeni.

490
00:28:56,760 --> 00:28:59,090
To je nabor podatkov o potresih.

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

492
00:29:01,910 --> 00:29:08,430
Torej vse, kar je tukaj na našem seznamu ali niz
stvari, ki vsebuje sam veliko stvari.

493
00:29:08,430 --> 00:29:11,380
Torej vsaka podatkovna točka ima
Obseg in usklajevati.

494
00:29:11,380 --> 00:29:13,425
In se usklajuje
vsebuje dve stvari.

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

496
00:29:15,960 --> 00:29:20,450
>> Torej, vsak dan je zdaj veliko več
zapletena in veliko bolj zanimivo

497
00:29:20,450 --> 00:29:22,700
in vsebuje veliko več
zanimive informacije.

498
00:29:22,700 --> 00:29:26,730
Poglejmo, bomo lahko začeli graditi od tega.

499
00:29:26,730 --> 00:29:36,130
Vrača nazaj tukaj, ponovno uporabo
naša histogram krog vizualizacija

500
00:29:36,130 --> 00:29:42,110
smo zgradili, da vidimo, če lahko gradimo
vizualizacije porazdelitve magnitude

501
00:29:42,110 --> 00:29:43,305
v naši zbirki podatkov.

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

503
00:29:45,850 --> 00:29:48,660
>> Torej, tukaj, to je isti koncept.

504
00:29:48,660 --> 00:29:51,920
Toda zdaj, d vsebuje več stvari.

505
00:29:51,920 --> 00:29:54,780
d vsebuje veliko elementov podatkov.

506
00:29:54,780 --> 00:29:57,946
Tako smo dobili dni nazaj.

507
00:29:57,946 --> 00:29:59,670
D3 nam daje d.

508
00:29:59,670 --> 00:30:06,080
In mi odgovoriti z iskanjem obseg
D in nato mimo, da obsega.

509
00:30:06,080 --> 00:30:08,490
>> In potem moramo spremeniti
naš obseg, seveda.

510
00:30:08,490 --> 00:30:12,980
Torej magnitude preprosto ne
iti več kot 10.

511
00:30:12,980 --> 00:30:15,485
Pravzaprav, še nikoli ni bilo
10 magnituda potresa.

512
00:30:15,485 --> 00:30:19,360
Ampak to je nekako naša zgornja
konec, naš zgornji spekter.

513
00:30:19,360 --> 00:30:20,240
>> Oglejmo osvežitev.

514
00:30:20,240 --> 00:30:22,990
Lepo, da imamo vizualizacijo.

515
00:30:22,990 --> 00:30:25,490
Zanimivo je, da note--
obstajata dve podatkovne točke,

516
00:30:25,490 --> 00:30:29,010
so skoraj popolnoma drug vrh
drugi, v smislu velikosti.

517
00:30:29,010 --> 00:30:31,350
Vidiš to Nepreglednost bomo uporabljali.

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

519
00:30:40,810 --> 00:30:42,690
>> Imamo geografske podatke zdaj.

520
00:30:42,690 --> 00:30:44,710
Imamo zemljepisne širine in dolžine.

521
00:30:44,710 --> 00:30:47,549
Mogoče bi lahko storili nekaj, kar
Veliko bolj zanimivo s tem.

522
00:30:47,549 --> 00:30:49,590
Poiščimo nekaj več
zanimiv način vizualizirati

523
00:30:49,590 --> 00:30:53,500
to bolj zapleteno
Podatki imamo dostop do.

524
00:30:53,500 --> 00:31:04,950
>> Zakon V, Mapping-- bistveno,
želimo postaviti ti na zemljevidu.

525
00:31:04,950 --> 00:31:07,690
Mislim, to je, če se to dogaja.

526
00:31:07,690 --> 00:31:13,130
Želimo, da za kodiranje podatkov o
Položaj teh potresnih branjih

527
00:31:13,130 --> 00:31:16,350
kot tudi njihova velikost,
ker imamo zdaj.

528
00:31:16,350 --> 00:31:21,310
Zavedamo se, kako se porabijo
bolj zapletene podatke.

529
00:31:21,310 --> 00:31:26,200
>> Prva stvar, ki jo bom naredil je,
ustvariti zemljevid, ozadje zemljevida.

530
00:31:26,200 --> 00:31:29,360
Bom šel skozi
to zelo hitro.

531
00:31:29,360 --> 00:31:30,560
To je zapleteno kodo.

532
00:31:30,560 --> 00:31:33,110
To je še ena od tistih
recepti ne boste res

533
00:31:33,110 --> 00:31:35,690
ima polno razumevanje za vas, da uporabite.

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

535
00:31:38,510 --> 00:31:39,740
Toda to je koda.

536
00:31:39,740 --> 00:31:43,580
Ta koda tukaj ustvari zemljevid.

537
00:31:43,580 --> 00:31:45,730
>> Ne bomo iti v podrobnosti.

538
00:31:45,730 --> 00:31:54,210
Ampak površno, kaj počne, je,
se sprašuje to us.json datoteko, ki

539
00:31:54,210 --> 00:31:57,150
je datoteka podatkov kot
enega smo imeli prej.

540
00:31:57,150 --> 00:31:59,150
To je bolj zapleteno, seveda.

541
00:31:59,150 --> 00:32:02,920
Toda v tem primeru je vse,
vsaka podatkovna točka je to stanje

542
00:32:02,920 --> 00:32:05,420
in ima seznam
zemljepisne širine in dolžine

543
00:32:05,420 --> 00:32:10,500
da določite poligon,
da je oblika, ki stanje.

544
00:32:10,500 --> 00:32:13,280
>> Torej, kaj bo naredil D3 je podoben
s tem, kar smo naredili doslej.

545
00:32:13,280 --> 00:32:18,140
To bo zahteva, da in
vežejo, da element.

546
00:32:18,140 --> 00:32:20,890
In tam je funkcija, ki
bo map ta element ven,

547
00:32:20,890 --> 00:32:23,410
na podlagi zemljepisne širine in dolžine.

548
00:32:23,410 --> 00:32:24,580
Si lahko preberete več o tem.

549
00:32:24,580 --> 00:32:27,385
In sem jo priporočam.

550
00:32:27,385 --> 00:32:30,090
>> Obstajajo povezave na
Konec te kode objavil.

551
00:32:30,090 --> 00:32:31,570
In koda je komentiral.

552
00:32:31,570 --> 00:32:34,050
V obstajajo povezave za dodatno o tem.

553
00:32:34,050 --> 00:32:36,590
Priporočam vam, da si jo gor.

554
00:32:36,590 --> 00:32:39,460
Toda kaj nam je mar, je
ta funkcija projekcija.

555
00:32:39,460 --> 00:32:41,210
Rad bi šel skozi to.

556
00:32:41,210 --> 00:32:43,522
>> Najprej mi dovolite, da pokažejo
ste, da, ja, imamo zemljevid.

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

558
00:32:47,300 --> 00:32:49,970
Zemljevidi so kul.

559
00:32:49,970 --> 00:32:52,330
Torej, si oglejmo to
produkcijska funkcija.

560
00:32:52,330 --> 00:32:56,481
>> Projekcija je zelo veliko
kot lestvice, spet lestvic.

561
00:32:56,481 --> 00:32:59,210
Torej, kaj se proizvodnja
ta funkcija projekcija

562
00:32:59,210 --> 00:33:06,610
pa je, bi lahko to mimo dolžino
in latitudes-- v tem primeru,

563
00:33:06,610 --> 00:33:09,590
Te vrednote so tukaj
LAT-hrepeni stavbe

564
00:33:09,590 --> 00:33:13,990
sedimo v desno
now-- za projekcijo.

565
00:33:13,990 --> 00:33:20,560
In projekcija bo pretvoril
da v x in y vrednosti točk.

566
00:33:20,560 --> 00:33:23,300
>> Torej, kaj projekcija počne
je zelo podobna naši lestvici.

567
00:33:23,300 --> 00:33:27,270
To je ob naših zemljepisnih širinah in
dolžine, ki predstavlja celotno zemeljsko oblo

568
00:33:27,270 --> 00:33:31,390
ter krčenje in velikosti, ki
do trga, da želimo,

569
00:33:31,390 --> 00:33:33,510
ki smo ga dal.

570
00:33:33,510 --> 00:33:35,220
V tem primeru smo
prenos teh vrednot.

571
00:33:35,220 --> 00:33:41,370
In to nam daje dobro, da
na zaslonu pomeni 640 slikovnih pik.

572
00:33:41,370 --> 00:33:46,250
Ta celoten zaslon je 700 slikovnih pik
široka, tako da nam naredi približno tu,

573
00:33:46,250 --> 00:33:53,310
in 154 pik dol, kar želim
ocena je precej tukaj.

574
00:33:53,310 --> 00:33:57,250
>> Torej, ob teh lat-hrepeni, ki
predstavljajo nekaj na celotnem svetu

575
00:33:57,250 --> 00:34:02,850
in squishing in se gibljejo, da približno
da nam vrednosti X in Y pikslov,

576
00:34:02,850 --> 00:34:05,450
To je prva stvar, ki je
storiti v tem kartiranje kodo.

577
00:34:05,450 --> 00:34:07,920
In potem ostali
Koda porablja podatkov

578
00:34:07,920 --> 00:34:14,310
nato preslika tiste lat-hrepeni
na nekaj na zaslonu.

579
00:34:14,310 --> 00:34:18,380
>> Vendar bomo uporabljati to projekcijo
funkcije, saj se izkaže,

580
00:34:18,380 --> 00:34:20,270
imamo lat-hrepeni hrepeni kot dobro.

581
00:34:20,270 --> 00:34:24,509
Če se ozremo na naše podatke, ki smo jih
zemljepisne širine in dolžine koordinate

582
00:34:24,509 --> 00:34:25,425
za vsako opazovanje.

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

584
00:34:28,131 --> 00:34:29,130
Torej, kaj je uporabiti projekcijo.

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

586
00:34:33,250 --> 00:34:37,639
>> Tako je videti na našem priročniku,
želimo našo exposition--

587
00:34:37,639 --> 00:34:39,590
imamo širino in dolžino.

588
00:34:39,590 --> 00:34:40,770
Ampak želimo vrednote pixel.

589
00:34:40,770 --> 00:34:43,510
In se je izkazalo, imamo natanko
kaj smo want-- projekcijo.

590
00:34:43,510 --> 00:34:46,239
Zelo všeč mi je bilo
uporabo lestvice tukaj,

591
00:34:46,239 --> 00:34:52,075
smo zdaj tekoč rabiti projekcijo
in mimo usklajuje.

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

593
00:34:55,241 --> 00:34:56,949
Torej prva stvar,
smo doing-- tako da smo

594
00:34:56,949 --> 00:35:01,520
pridobivanje d, ki je posameznik podatki
element posameznega potresa

595
00:35:01,520 --> 00:35:02,370
branje.

596
00:35:02,370 --> 00:35:04,640
Prva stvar, ki delamo
je dobil koordinate.

597
00:35:04,640 --> 00:35:06,150
Vse je v redu, imamo koordinate.

598
00:35:06,150 --> 00:35:09,160
>> Druga stvar, ki mi je
mimo, da je na projekciji.

599
00:35:09,160 --> 00:35:13,440
Projekcija pretvori tiste koordinate
v vrednosti točk, x in y.

600
00:35:13,440 --> 00:35:16,680
In potem je zadnja stvar, smo
želim storiti, je le dobil x,

601
00:35:16,680 --> 00:35:19,342
ki v tem primeru je prva.

602
00:35:19,342 --> 00:35:22,050
To je prvi od dveh stvari
da se vrnejo s projekcijo.

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

604
00:35:27,840 --> 00:35:29,630
>> Bomo naredili enako za y.

605
00:35:29,630 --> 00:35:34,960
Toda namesto, bomo vrnili
drugi element, y.

606
00:35:34,960 --> 00:35:35,980
Pripravite se na osvežitev.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, extra lik
here-- lepo, imamo

609
00:35:46,450 --> 00:35:51,730
usmerjenih dokument podatke, ki je
prikrivanje tega JSON datoteke predmetov,

610
00:35:51,730 --> 00:35:57,560
izdelavo zemljevida, in spreminjanje
atribut v zvezi s podatki

611
00:35:57,560 --> 00:35:59,600
da se projekt na zemljevidu.

612
00:35:59,600 --> 00:36:00,840
To je res zanimivo.

613
00:36:00,840 --> 00:36:03,770
To je kul.

614
00:36:03,770 --> 00:36:05,640
>> Dajmo ga vzemite up zarezo.

615
00:36:05,640 --> 00:36:08,795
Mislim, da imamo dva kosov
Podatki z vsako podatkovno točko.

616
00:36:08,795 --> 00:36:10,000
Mislim, tri.

617
00:36:10,000 --> 00:36:12,540
Imamo koordinate,
ki je x in y.

618
00:36:12,540 --> 00:36:15,700
In imamo obseg.

619
00:36:15,700 --> 00:36:17,420
>> Moramo kodirati velikosti nekako.

620
00:36:17,420 --> 00:36:18,920
Imamo veliko kanalov.

621
00:36:18,920 --> 00:36:20,370
Mi lahko uporabite barvo.

622
00:36:20,370 --> 00:36:21,890
Mi lahko uporabite radij.

623
00:36:21,890 --> 00:36:23,040
Mi lahko uporabite motnosti.

624
00:36:23,040 --> 00:36:25,540
Lahko uporabite veliko stvari v kodo.

625
00:36:25,540 --> 00:36:29,180
Katerokoli od teh lastnosti in veliko
več, da se tam ni naveden,

626
00:36:29,180 --> 00:36:33,065
ker oni so obvezna, smo lahko
uporabljajo za kodiranje te podatke, kap

627
00:36:33,065 --> 00:36:35,670
in vse te stvari, ki sem jih omenil.

628
00:36:35,670 --> 00:36:36,690
>> Naredimo radij.

629
00:36:36,690 --> 00:36:38,830
Mislim, da polmer je najbolj intuitivna.

630
00:36:38,830 --> 00:36:46,210
Torej še enkrat, boste morali zamenjati, da težko kodirane-
40 in narediti nekaj izračunov.

631
00:36:46,210 --> 00:36:48,810
Bomo spet uporabite našo najljubšo lestvice.

632
00:36:48,810 --> 00:36:50,290
In smo mimo d.

633
00:36:50,290 --> 00:36:55,850
Ne pa dni, ker želimo, da se obseg
D. d je le podatkovna točka.

634
00:36:55,850 --> 00:36:57,430
Bomo mimo velikost v merilu.

635
00:36:57,430 --> 00:36:58,470
>> Poskusimo, da še enkrat.

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

637
00:37:00,230 --> 00:37:02,940
Zakaj ne deluje?

638
00:37:02,940 --> 00:37:04,387
>> Torej, ne pozabite, kaj lestvica počne.

639
00:37:04,387 --> 00:37:05,470
Oglejmo si na lestvici znova.

640
00:37:05,470 --> 00:37:10,800
Merilu karte od 1 do 10 na
do 22 in 600 bolj ali manj.

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

642
00:37:12,030 --> 00:37:14,730
To je razlog, zakaj smo dobili to.

643
00:37:14,730 --> 00:37:18,420
>> Torej želimo spremeniti našo lestvico
v nekaj bolj razumno.

644
00:37:18,420 --> 00:37:22,610
Recimo, da želimo med 0 in 60.

645
00:37:22,610 --> 00:37:25,340
60 je velik, vendar 10 potresov
so neverjetno redke.

646
00:37:25,340 --> 00:37:27,880
V resnici, oni se ni nikoli zgodilo.

647
00:37:27,880 --> 00:37:31,830
>> Torej, kaj bo to storiti, je, da bomo sprejeti
naš obseg, ki gre od 1 do 10

648
00:37:31,830 --> 00:37:34,490
in map na, da jo razširite ven.

649
00:37:34,490 --> 00:37:37,370
In map na med 0 in 60.

650
00:37:37,370 --> 00:37:38,840
Oglejmo osvežitev.

651
00:37:38,840 --> 00:37:41,850
>> Lepo, da imamo vizualizacijo.

652
00:37:41,850 --> 00:37:42,500
To je super.

653
00:37:42,500 --> 00:37:43,736
To je dejanski podatki.

654
00:37:43,736 --> 00:37:46,360
Opazili boste, po mojem igračko
Na primer, največji potres

655
00:37:46,360 --> 00:37:49,417
je prav na vrhu nas.

656
00:37:49,417 --> 00:37:50,000
Ampak to je to.

657
00:37:50,000 --> 00:37:54,422
Imamo datum poganja vizualizacijo
ki porabi podatke

658
00:37:54,422 --> 00:37:56,255
in nam daje resnično
zanimive informacije.

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

660
00:38:02,600 --> 00:38:06,420
Ja, dajmo dodati nekaj
interaktivnost z njo.

661
00:38:06,420 --> 00:38:08,675
Omenil sem, da je bil
močna sila D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Torej, tukaj, za vsak element, smo
opisuje kup atributov.

664
00:38:15,060 --> 00:38:20,230
Lahko pa tudi opisati, kaj hočemo
zgodilo z interaktivnostjo elementov.

665
00:38:20,230 --> 00:38:26,190
Na primer, lahko opišemo
kaj se zgodi, ko smo z miško nad.

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

667
00:38:28,740 --> 00:38:33,640
In zelo podobna, da
da bom funkcijo,

668
00:38:33,640 --> 00:38:36,700
Zelo podobna
atributov smo imeli prej,

669
00:38:36,700 --> 00:38:44,650
kjer smo narediti nekaj, da
element, ko hover nad njim.

670
00:38:44,650 --> 00:38:47,100
>> Torej prva stvar, moramo
storiti je, da izberete ta element,

671
00:38:47,100 --> 00:38:49,435
da ga v bistvu našli v brskalniku.

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

673
00:38:57,090 --> 00:39:00,920
in potem smo lahko nastavite
atribut z njo.

674
00:39:00,920 --> 00:39:06,870
Torej, kaj delam tu, ko smo hover
čez nekaj, kar smo dobili, da je element

675
00:39:06,870 --> 00:39:11,197
in nato določiti njegovo nepreglednost nazaj
do 1, popolnoma motno.

676
00:39:11,197 --> 00:39:12,488
Poglejmo, kaj to izgleda.

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

678
00:39:29,430 --> 00:39:39,080
>> Zdi se, imamo
extra podpičje tukaj.

679
00:39:39,080 --> 00:39:42,420
Torej, če smo hover tukaj, postane v celoti.

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

681
00:39:46,530 --> 00:39:48,960
Toda zdaj, seveda, da
ostane v celoti, ker smo

682
00:39:48,960 --> 00:39:53,240
opisati, kaj se zgodi
kdaj odstraniti našo kazalec.

683
00:39:53,240 --> 00:39:59,990
Torej, kaj je točno to, da je na
mouseout, za razliko od prehodov miške.

684
00:39:59,990 --> 00:40:06,399
>> In jo bomo ponastavijo
kar smo imeli before-- 0,5.

685
00:40:06,399 --> 00:40:10,260
In zdaj, vsakič, ko smo
hover, smo dobili cel krog.

686
00:40:10,260 --> 00:40:13,468
Pomaga nam videti, kaj smo
smo v bistvu izbiro.

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

688
00:40:19,210 --> 00:40:22,860
>> In zdaj pa bi to res super.

689
00:40:22,860 --> 00:40:26,210
Oglejmo povezati to realnih podatkov.

690
00:40:26,210 --> 00:40:30,890
Torej, kaj je vprašati, lahko
USGS o njihovih podatkov.

691
00:40:30,890 --> 00:40:35,630
Torej, US Geological Survey
ima podatke o potresih.

692
00:40:35,630 --> 00:40:41,460
Imajo javni API, ki je sposoben
ki se porabijo v formatu JSON.

693
00:40:41,460 --> 00:40:42,548
Torej, kaj je naredil.

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

695
00:40:49,730 --> 00:40:55,900
>> Tako da je to malo kode, ki
poveže z USGS API.

696
00:40:55,900 --> 00:40:57,990
In tam je malo predelave na njem.

697
00:40:57,990 --> 00:41:02,200
To ni pomembno, vendar ga poenostavlja
za navadno obliko podatkov kot enega

698
00:41:02,200 --> 00:41:03,800
smo imeli prej.

699
00:41:03,800 --> 00:41:08,140
Torej znebim naš poziv, da
naš ponaredek data.json na datoteko.

700
00:41:08,140 --> 00:41:13,110
In namesto, sem kliče
USGS bistvu.

701
00:41:13,110 --> 00:41:16,700
>> Oglejmo osvežiti, lepo.

702
00:41:16,700 --> 00:41:21,260
To je dejanska, v realnem življenju podatki
od tega tedna za potrese.

703
00:41:21,260 --> 00:41:23,217
To je res zanimivo.

704
00:41:23,217 --> 00:41:25,050
To ni presenetljivo
za nas, vendar obstajajo

705
00:41:25,050 --> 00:41:27,909
veliko potresov na
West Coast v Kaliforniji.

706
00:41:27,909 --> 00:41:30,950
Mislil sem, da je zelo zanimivo
da je bilo tako veliko potresov

707
00:41:30,950 --> 00:41:34,350
na Aljaski, in očitno,
tukaj v Midwest.

708
00:41:34,350 --> 00:41:37,630
Mislim, zanimivo, in smo dobri.

709
00:41:37,630 --> 00:41:40,410
To je zaključek.

710
00:41:40,410 --> 00:41:43,760
>> Ampak v bistvu je to
je tisto, kar D3 nam pomaga narediti.

711
00:41:43,760 --> 00:41:48,030
Pomaga nam, da podatki, bind
je na elemente v DOM,

712
00:41:48,030 --> 00:41:51,620
in imajo ti elementi spremeniti
v odvisnosti od podatkov,

713
00:41:51,620 --> 00:41:54,780
imajo tiste atribute, vsa
veliko lastnosti elementov,

714
00:41:54,780 --> 00:41:57,393
vse koristne za kanale
posredovati informacije.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 je neverjetno močna
knjižnica in presenetljivo dobro teči.

717
00:42:09,290 --> 00:42:12,260
To je nekaj močna stvar.

718
00:42:12,260 --> 00:42:15,960
Vizualizacija podatkov je
neverjetno močno orodje

719
00:42:15,960 --> 00:42:21,530
za prenos na ljudi globoke
spoznanj, ki dobi na njihovo jedro

720
00:42:21,530 --> 00:42:25,430
ter jim pomaga razumeti, v
ta globoka in intuitiven način,

721
00:42:25,430 --> 00:42:29,760
kako deluje in kako podatki
Podatki spremeni naše življenje.

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