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

2
00:00:00,780 --> 00:00:11,880
>> [Muusika mängib]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Ma olen David
Chouinard, ja see on D3.

4
00:00:16,480 --> 00:00:17,700
Tere.

5
00:00:17,700 --> 00:00:21,270
Me läheme õppida D3 täna.

6
00:00:21,270 --> 00:00:25,020
D3 on JavaScript raamistik
hoone kõrge kvaliteediga

7
00:00:25,020 --> 00:00:28,110
Interaktiivne visualiseerimine veebis.

8
00:00:28,110 --> 00:00:30,870
Asjad, mida me
näeme tagasi mind,

9
00:00:30,870 --> 00:00:34,230
me ei kavatse õppida tegema neid
asju, millist põhitõdesid ta.

10
00:00:34,230 --> 00:00:36,452
Aga see saab olema lahe.

11
00:00:36,452 --> 00:00:38,160
Alustuseks
tegemist päris pilte.

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

13
00:00:41,108 --> 00:00:44,350
Meil on rohkem demos
väljavaateid saadaval.

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

15
00:00:48,040 --> 00:00:50,760
Teeme ära.

16
00:00:50,760 --> 00:00:58,700
>> I vaatus, DOM manipulation-- me läheme
kohe alustada tehes lahedaid asju.

17
00:00:58,700 --> 00:01:01,240
Esiteks, vasakul on meil koodi.

18
00:01:01,240 --> 00:01:03,470
Paremal on meil
Tänu meie koodi.

19
00:01:03,470 --> 00:01:04,900
Lähme läbi.

20
00:01:04,900 --> 00:01:05,780
>> Teeme ringi.

21
00:01:05,780 --> 00:01:08,570
Kuidas see kõlab?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
me just ringi.

23
00:01:14,934 --> 00:01:16,100
Sa ei usu mind, eks?

24
00:01:16,100 --> 00:01:18,190
See ei ole seal.

25
00:01:18,190 --> 00:01:21,830
>> Nii et mida me tegime siin on,
SVG on skaalautuvia vektorgraafika.

26
00:01:21,830 --> 00:01:27,530
See on viis, kuidas me ütleme, et brauser
teha vektorgraafika brauseris.

27
00:01:27,530 --> 00:01:30,740
Mida me lihtsalt ei kohe
lisatakse ringi sirvida.

28
00:01:30,740 --> 00:01:34,790
>> Lubadus on, et ringi
nõuab natuke põhilised oskused

29
00:01:34,790 --> 00:01:36,850
enne kui saame tegelikult näha.

30
00:01:36,850 --> 00:01:40,045
Me peame ütlema seda oma x asendis,
Oma y positsiooni, tema raadiusega.

31
00:01:40,045 --> 00:01:43,310
Me ei ütle ükskõik mida,
nii me ei näe seda kohe.

32
00:01:43,310 --> 00:01:46,210
Kuid olgem öelda seda kraami.

33
00:01:46,210 --> 00:01:49,510
>> Nii kõigepealt, sul
anda meie ring nimi.

34
00:01:49,510 --> 00:01:53,070
Nii saab seda nimetada ringi.

35
00:01:53,070 --> 00:01:54,406
Meie ring on nimi nüüd.

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

37
00:01:57,230 --> 00:01:59,490
Ja andkem seda paar atribuute.

38
00:01:59,490 --> 00:02:03,690
Kuidas cx oleks keskele x, nii et
kesklinnas x asendis.

39
00:02:03,690 --> 00:02:06,730
Oletame, 200 200 pikslit.

40
00:02:06,730 --> 00:02:10,220
>> Anname siis y 200 pikslit samuti.

41
00:02:10,220 --> 00:02:16,032
Ja r, raadiusega, umbes 40 pikslit.

42
00:02:16,032 --> 00:02:16,950
Nüüd vaatame.

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

44
00:02:21,740 --> 00:02:23,440
Ma ei saa kirjutada.

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

46
00:02:30,430 --> 00:02:31,520
>> Seal sa lähed.

47
00:02:31,520 --> 00:02:37,330
Meil on ringi asendis 200
pikslit, 200 pikslit, raadius 40 pikslit.

48
00:02:37,330 --> 00:02:38,280
Selline lahe, eks?

49
00:02:38,280 --> 00:02:38,988
Meil on ring.

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

51
00:02:40,880 --> 00:02:42,670
>> Nii ei ole vaja jälgida mööda.

52
00:02:42,670 --> 00:02:45,790
Kõik need näited, mis kõik
kood teen täna

53
00:02:45,790 --> 00:02:51,300
antakse lõpus veebis
vormis interaktiivseid näited

54
00:02:51,300 --> 00:02:54,010
koos kontrollpunktidest
iga tegu, ja nii edasi.

55
00:02:54,010 --> 00:02:55,160
>> Teeme rohkem asju.

56
00:02:55,160 --> 00:02:58,901
See must ring on tõesti kole.

57
00:02:58,901 --> 00:03:01,541
Mul on kahju, et viga
Sõnumite seal.

58
00:03:01,541 --> 00:03:05,340
Seal me läheme.

59
00:03:05,340 --> 00:03:06,350
>> Anname see värv.

60
00:03:06,350 --> 00:03:07,170
Kuidas nii?

61
00:03:07,170 --> 00:03:08,340
Mulle meeldib terashall.

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

63
00:03:13,280 --> 00:03:16,030
Noh, meie ring värvi muutnud.

64
00:03:16,030 --> 00:03:17,320
See on tore.

65
00:03:17,320 --> 00:03:31,330
Teeme seda poolläbipaistva
too-- poolläbipaistev.

66
00:03:31,330 --> 00:03:33,670
>> Nii et need on atribuudid
me määratlemisel ring.

67
00:03:33,670 --> 00:03:36,774
Esimene asi, mida me tegime, on
panime ringi lehel.

68
00:03:36,774 --> 00:03:38,690
Ja siis me määratleda
hunnik atribuute.

69
00:03:38,690 --> 00:03:41,610
Mõned neist on vaja,
nagu CX, CY, ja Radius.

70
00:03:41,610 --> 00:03:42,680
Ja teised on vabatahtlik.

71
00:03:42,680 --> 00:03:44,730
>> Seal on palju rohkem atribuute.

72
00:03:44,730 --> 00:03:46,760
Seal on palju.

73
00:03:46,760 --> 00:03:53,070
Näiteks võiksime
insult samuti, insult punane.

74
00:03:53,070 --> 00:03:55,630
Kuid olgem eemalda seda.

75
00:03:55,630 --> 00:04:00,450
Oleme tagasi ringi, sinine ring.

76
00:04:00,450 --> 00:04:01,600
>> Nii saab teha rohkem ringe.

77
00:04:01,600 --> 00:04:02,810
Kuidas nii?

78
00:04:02,810 --> 00:04:04,665
Teeme teise ringi.

79
00:04:04,665 --> 00:04:05,985
See on põnev, eks?

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

81
00:04:09,630 --> 00:04:12,300
>> Nii öelda, et ma lihtsalt Copy-kleebitud
mida me juba.

82
00:04:12,300 --> 00:04:13,570
Kutsume seda CIRCLE2.

83
00:04:13,570 --> 00:04:15,840
Ja olgem teha täpselt
Sama asi ja seda

84
00:04:15,840 --> 00:04:20,450
atribuute, kuna x positsiooni 300.

85
00:04:20,450 --> 00:04:24,140
Jee, meil on kaks ringi nüüd.

86
00:04:24,140 --> 00:04:27,240
>> Ja muidugi, me võiksime
uuenda neid väärtusi.

87
00:04:27,240 --> 00:04:31,640
Ma võiks panna seda 400, ja nüüd ta liigub.

88
00:04:31,640 --> 00:04:35,470
Ja kuna see on tüütu, olgem
eemaldada, nii circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
See on läinud nüüd.

91
00:04:40,730 --> 00:04:43,170
>> Nii, mida me teeme ja
on lihtsalt väga, very-- seda

92
00:04:43,170 --> 00:04:46,030
on väga sarnane sellega, mida
võiks teha jQuery, näiteks.

93
00:04:46,030 --> 00:04:48,240
Me lihtsalt manipuleerimine
DOM, seda nimetatakse.

94
00:04:48,240 --> 00:04:50,040
Te olete kuulnud, et sõna varem.

95
00:04:50,040 --> 00:04:53,255
Loome asju, millega
atribuudid kraami, eemaldades kraami.

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

97
00:04:58,950 --> 00:05:02,360
>> Nüüd, siin on koht, kus ta saab huvitav.

98
00:05:02,360 --> 00:05:07,250
Nii hiljem kood, võiksime veel
viitavad algsele ringi siin.

99
00:05:07,250 --> 00:05:14,100
Nii saab nullida selle atribuudi cx.

100
00:05:14,100 --> 00:05:18,260
Oletame, selle x asendis 400.

101
00:05:18,260 --> 00:05:22,406
Ja ma lähen üleminek
et nii see on selge.

102
00:05:22,406 --> 00:05:23,360
Seal me läheme.

103
00:05:23,360 --> 00:05:24,780
>> Nii me lisada ringi.

104
00:05:24,780 --> 00:05:26,440
Seame mõned atribuudid.

105
00:05:26,440 --> 00:05:28,210
Lisasime teise ringi, eemaldatakse see.

106
00:05:28,210 --> 00:05:31,650
Ja siis me muutmise
originaal ringi.

107
00:05:31,650 --> 00:05:35,400
>> Aga siin, kus ta saab
palju muud huvitavat.

108
00:05:35,400 --> 00:05:39,070
Mitte ainult ei saa me seame atribuute
lihtsalt väärtustab võib öelda,

109
00:05:39,070 --> 00:05:41,610
hey, ringi, minge positsioneerida 200.

110
00:05:41,610 --> 00:05:44,540
Me ei saa seada ka neid funktsioone.

111
00:05:44,540 --> 00:05:48,850
>> Nii et selle asemel, et anda 400 siin
saame teha mõned arvutused

112
00:05:48,850 --> 00:05:53,950
lennult, mida me
tahan, et atribuut olema.

113
00:05:53,950 --> 00:05:56,580
Nii see on, kuidas sa väljendada seda.

114
00:05:56,580 --> 00:06:00,660
Me ütleme, mitte 400, las ma
teile funktsiooni asemel.

115
00:06:00,660 --> 00:06:04,180
Ja siin sees seda funktsiooni,
saame teha hull arvutamisel.

116
00:06:04,180 --> 00:06:06,820
>> Võiksime võtta aega ja
mõningaid teine ​​asi

117
00:06:06,820 --> 00:06:11,230
ja dünaamiliselt otsustada
Ringi milline väärtus tahame.

118
00:06:11,230 --> 00:06:15,266
Kuidas me lihtsalt anda
see juhuslik x asendis?

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

120
00:06:20,360 --> 00:06:21,120
Nii et see, et.

121
00:06:21,120 --> 00:06:25,490
>> Mis siis, et ütleb, on, et
iga x, kestab see funktsioon.

122
00:06:25,490 --> 00:06:29,340
Ja mida me teeme on arvutamise
mõned asjad, juhuslik korda laius

123
00:06:29,340 --> 00:06:30,410
ja tagastades.

124
00:06:30,410 --> 00:06:34,765
Nii et iga kord, kui me joosta, et saame
ringi, et läheb suvalise koha.

125
00:06:34,765 --> 00:06:36,394
See on selline lahe.

126
00:06:36,394 --> 00:06:38,310
Ma tunnen, et mul võiks vaadata
selles vähe.

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

128
00:06:44,274 --> 00:06:46,440
Me oled hakanud saada
midagi huvitavat siin.

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

130
00:06:49,120 --> 00:06:51,390
Teeme seda infot sõita nüüd.

131
00:06:51,390 --> 00:06:53,420
Ei ole andmeid siin.

132
00:06:53,420 --> 00:06:54,482
Muudame seda.

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

134
00:06:57,440 --> 00:07:12,140
>> Act II, Data Driven Documents--
Nii saab tagasi siit.

135
00:07:12,140 --> 00:07:15,340
Ja olgem lihtsalt lahti saada CIRCLE2,
sest me lihtsalt lisades ja eemaldades

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

137
00:07:15,840 --> 00:07:17,382
Nii et me tõesti ei vaja seda.

138
00:07:17,382 --> 00:07:21,421
Me peame olema palju targem siin.

139
00:07:21,421 --> 00:07:23,170
Oletame, et meil
mõned andmed mingisugune.

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

141
00:07:31,540 --> 00:07:40,020
Üks moment-- oletame,
meil oli andmeid selle vormi.

142
00:07:40,020 --> 00:07:41,800
Meil oli massiiv, vaid
hunnik numbreid.

143
00:07:41,800 --> 00:07:45,750
Meil on seitse numbrit,
olenemata nende represent-- summa

144
00:07:45,750 --> 00:07:48,810
inimeste pangakontole, kuidas
palju kaaluvad need, jumal teab mida.

145
00:07:48,810 --> 00:07:51,310
>> Need on numbrid, ja me
soovite kasutada meie ringid

146
00:07:51,310 --> 00:07:53,240
esindada neid numbreid kuidagi.

147
00:07:53,240 --> 00:07:55,515
Me tahame, et siduda meie
ringid need numbrid.

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

149
00:07:58,750 --> 00:07:59,626
Nii et mida me teeme.

150
00:07:59,626 --> 00:08:01,500
Oletame, et me tahame
ringi iga number.

151
00:08:01,500 --> 00:08:03,590
Me võiks teha vana
asi olime doing--

152
00:08:03,590 --> 00:08:06,020
ringi append ja CIRCLE2 ja circle3.

153
00:08:06,020 --> 00:08:10,020
Aga see läheb käest ära ja
seal on palju korrata loogika.

154
00:08:10,020 --> 00:08:12,760
>> Nii lähme targem sellega.

155
00:08:12,760 --> 00:08:17,810
Selle asemel, et var ringi
svg.append, et me olime lihtsalt kasutades,

156
00:08:17,810 --> 00:08:21,580
me ei kavatse kasutada
see väike plokk siin.

157
00:08:21,580 --> 00:08:24,510
Ma ei taha minna sügavuti
sellest, mida kõik need osad teha.

158
00:08:24,510 --> 00:08:26,020
Ja see on selline arenenud teema.

159
00:08:26,020 --> 00:08:27,830
Ja ma soovin, et ma võiks.

160
00:08:27,830 --> 00:08:31,370
>> Aga peamine asi recognize-- ja
näete on väga sageli D3-kood.

161
00:08:31,370 --> 00:08:36,840
See tekstilõik põhi
tekitab nii palju ringe

162
00:08:36,840 --> 00:08:41,360
kui on andmeelementide
Selles massiivi siin.

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

164
00:08:53,420 --> 00:08:55,780
Nii et see tekitab nii palju
ringkondades on elemente.

165
00:08:55,780 --> 00:08:58,520
See saab luua meile seitse ringkondades.

166
00:08:58,520 --> 00:09:01,710
Ja see tõesti võti asi.

167
00:09:01,710 --> 00:09:02,460
Nii saab käivitada seda.

168
00:09:02,460 --> 00:09:05,460
Olgem eemaldada meie teisi ringi.

169
00:09:05,460 --> 00:09:09,565
Lihtsalt Kommenteeri
osalisele välja ja käivitada uuesti.

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

171
00:09:13,840 --> 00:09:15,260
>> Seal me läheme.

172
00:09:15,260 --> 00:09:18,030
Nii et meie ringi siin
palju tumedam, sest me

173
00:09:18,030 --> 00:09:20,720
on seitse ringi, üks
peal muud.

174
00:09:20,720 --> 00:09:25,425
Me lihtsalt loodud seitse ringi, üks
Iga iga andmeosiseid.

175
00:09:25,425 --> 00:09:28,860
Aga seal on oluline asi, mis juhtus
see väljavõte siin.

176
00:09:28,860 --> 00:09:31,030
>> See, et andmed on seotud.

177
00:09:31,030 --> 00:09:33,440
Nii et iga üksik
nende andmete elemente,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, oli seotud
konkreetse ringi.

179
00:09:38,830 --> 00:09:40,960
Nii et need mitte ainult luua
hunnik ringid

180
00:09:40,960 --> 00:09:43,420
kuid seob need kaks asja kokku.

181
00:09:43,420 --> 00:09:48,740
>> Ja tulevikus, sest me loodud
need ringid selle D3 funktsiooni

182
00:09:48,740 --> 00:09:52,430
kui ma annan sulle ringiga, saate
anna mulle andmeid sellega seotud.

183
00:09:52,430 --> 00:09:53,280
Nii saame küsida D3.

184
00:09:53,280 --> 00:09:54,840
Hei, D3, mul on see ring.

185
00:09:54,840 --> 00:09:57,350
Mis on andmeid, et ring on?

186
00:09:57,350 --> 00:10:01,290
Ja D3 oleks meile 10 või 45 või 105.

187
00:10:01,290 --> 00:10:02,380
>> Need asjad on seotud.

188
00:10:02,380 --> 00:10:04,490
See on väga, väga oluline mõiste.

189
00:10:04,490 --> 00:10:06,070
Vaatame seda.

190
00:10:06,070 --> 00:10:12,210
>> Nii, kuidas me tahaks küsida D3-- nii
see on ebaoluline,

191
00:10:12,210 --> 00:10:16,620
aga lihtsalt usalda mind seda.

192
00:10:16,620 --> 00:10:17,620
See, kuidas me küsime D3.

193
00:10:17,620 --> 00:10:21,312
Hei, D3, anna mulle esimene
ringi, et leiad.

194
00:10:21,312 --> 00:10:23,580
Anna mulle esimese ringi leiad.

195
00:10:23,580 --> 00:10:29,660
Ja siis me võiksime küsida, D3, mis on
andmeid, et niimoodi, 10.

196
00:10:29,660 --> 00:10:33,380
>> Nii et me lihtsalt küsida D3, leia mind
Esimene ring leiad.

197
00:10:33,380 --> 00:10:34,400
Mis on selle andmed?

198
00:10:34,400 --> 00:10:36,650
10, mis on tõepoolest meie
Esimesed andmed element.

199
00:10:36,650 --> 00:10:42,150
Võiksime küsida seda, hei, D3,
meid leida meie kolmanda ringi.

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

201
00:10:44,450 --> 00:10:45,740
Miks on see tõesti oluline?

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

203
00:10:49,790 --> 00:10:52,250
>> Nii siin mainisin
et me võiks kasutada funktsioone.

204
00:10:52,250 --> 00:10:54,910
Ja ma mainisin, et oli
väga võimas asi.

205
00:10:54,910 --> 00:11:03,070
Nii et mitte ainult ei saa meie funktsioonid asju
nagu teha mõned arvutamine, näiteks

206
00:11:03,070 --> 00:11:09,170
tagastab juhusliku arvu, võib see
Samuti teha asju, mis põhineb andmetel.

207
00:11:09,170 --> 00:11:11,550
See on see, mida andmed sõidetakse dokumentidel tähendavad.

208
00:11:11,550 --> 00:11:13,750
Seda D3 seisab.

209
00:11:13,750 --> 00:11:17,800
>> Nii et see x postition-- asemel
lihtsalt öeldes, kõik ringid,

210
00:11:17,800 --> 00:11:21,735
saada x asendis 200, meil
võiks see funktsioon.

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

212
00:11:26,140 --> 00:11:30,140
Ja siin saame teha mõned arvutused.

213
00:11:30,140 --> 00:11:33,710
ja d siin seisab koht andmeid.

214
00:11:33,710 --> 00:11:36,120
Nii et iga kord, kui me ei
ringi, põhiliselt

215
00:11:36,120 --> 00:11:37,750
D3 loob need seitse ringkondades.

216
00:11:37,750 --> 00:11:38,500
Ja seejärel iga

217
00:11:38,500 --> 00:11:41,920
>> ringi, siis läheb käima, hei,
RING1 mis su x asendis.

218
00:11:41,920 --> 00:11:45,210
Varem olime
alati vastates 200.

219
00:11:45,210 --> 00:11:48,630
Aga nüüd, iga kord D3 küsib
meile, mida su x asendis,

220
00:11:48,630 --> 00:11:51,790
see saab anda us-- meil
et ringi, nii et meil on andmed.

221
00:11:51,790 --> 00:11:55,290
See läheb meile andmed ja öelda,
mida sa tahad ekspositsioon olla,

222
00:11:55,290 --> 00:11:57,120
andmete põhjal.

223
00:11:57,120 --> 00:11:59,590
>> Olgem lihtsalt tagasi tegelikud andmed.

224
00:11:59,590 --> 00:12:04,910
Nii et kui võtame seda, et see annab
meil andmed sõidetakse dokumente.

225
00:12:04,910 --> 00:12:08,040
Need ringid on aluseks
seoses position--

226
00:12:08,040 --> 00:12:11,120
nad alused funktsioonina andmeid.

227
00:12:11,120 --> 00:12:13,100
>> Nii esimese ringi
D3 paneb ringi.

228
00:12:13,100 --> 00:12:16,770
Ja siis D3 küsib meilt, mida teha
soovite ekspositsioon olla.

229
00:12:16,770 --> 00:12:19,620
Ja me lihtsalt öelda, mida iganes andmed.

230
00:12:19,620 --> 00:12:21,185
Tee ekspositsioon 10.

231
00:12:21,185 --> 00:12:26,320
>> Siis ta küsib, mida sa tahad
ekspositsioon olla teise ringi.

232
00:12:26,320 --> 00:12:27,270
Ja me vastame, 45.

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

234
00:12:30,000 --> 00:12:32,230
Ja meil on loomulikult võimalik
teha mõned arvutamise siin.

235
00:12:32,230 --> 00:12:35,510
Ma leian, et need ringid
on selline squished üles.

236
00:12:35,510 --> 00:12:38,965
>> Nii korrutada see 3 korrutada andmete 3.

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

238
00:12:41,870 --> 00:12:43,840
Meie ringi just laiendatud välja.

239
00:12:43,840 --> 00:12:46,730
Meie väärtus kolmekordistus.

240
00:12:46,730 --> 00:12:51,010
>> Ring on tõesti äärel,
nii et vaatame äkki mingi selle maha.

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

242
00:12:53,632 --> 00:12:56,070
Siin minna.

243
00:12:56,070 --> 00:12:57,590
>> See on andmete visualiseerimine.

244
00:12:57,590 --> 00:13:01,767
See on väga lihtne, aga see
annab meile aimu meie andmeid.

245
00:13:01,767 --> 00:13:04,600
See ütleb meile, et me näiteks
on vähe klastri elemente.

246
00:13:04,600 --> 00:13:06,340
Ja meil on suur võõrväärtusena siin.

247
00:13:06,340 --> 00:13:10,830
See annab meile infot
umbes jaotus.

248
00:13:10,830 --> 00:13:20,830
>> Kui me näiteks muuta
andmed 150 siin ja värskendada,

249
00:13:20,830 --> 00:13:22,630
Meie visualiseerimine on muutunud.

250
00:13:22,630 --> 00:13:24,285
See dokument on andmeid sõida.

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

252
00:13:32,640 --> 00:13:36,180
>> Nii et loomulikult, kõik need elemendid,
kõik need omadused siin

253
00:13:36,180 --> 00:13:38,430
saame kasutada funktsiooni, ei
lihtsalt numbrid, mitte ainult

254
00:13:38,430 --> 00:13:39,900
x ja y seisukohti.

255
00:13:39,900 --> 00:13:42,120
Nii saame kasutada funktsiooni värvi.

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

257
00:13:45,260 --> 00:13:46,360
Nii et me teeme sama.

258
00:13:46,360 --> 00:13:49,360
Me anname selle funktsiooni.

259
00:13:49,360 --> 00:13:52,320
>> Ja oletame, et me võiksime olla
conditionals meie funktsiooni.

260
00:13:52,320 --> 00:13:54,770
See funktsioon võib olla
sada rida pikk.

261
00:13:54,770 --> 00:13:57,150
Seda saab teha väga keerulisi asju.

262
00:13:57,150 --> 00:13:59,080
>> Nii paneme kui avaldus siin.

263
00:13:59,080 --> 00:14:03,420
Ütleme, kui meie andmed on väiksem
kui 50, see on mõnede läve

264
00:14:03,420 --> 00:14:05,817
et me oleme huvitatud
aastal mingil põhjusel.

265
00:14:05,817 --> 00:14:06,650
Teeme seda roheliselt.

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

267
00:14:09,830 --> 00:14:15,320
Vastasel korral teeme seda punaselt.

268
00:14:15,320 --> 00:14:16,110
Kuidas nii?

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
>> Nii et meie andmete visualiseerimise hakkab
edasi rohkem huvitavat teavet

272
00:14:24,860 --> 00:14:26,727
on palju kanaleid.

273
00:14:26,727 --> 00:14:28,560
Nüüd me teame natuke
umbes jaotus.

274
00:14:28,560 --> 00:14:31,768
Ja me teame, et seal on mingi
katkestas 50, et me oleme huvitatud.

275
00:14:31,768 --> 00:14:35,630
Me teame, et on olemas kaks andmepunkti
alla selle künnise ja enamik neist

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

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

278
00:14:41,510 --> 00:14:46,160
>> Nii lõppastmes, neid andmeid siin,
see on väga haruldane, et näha seda niimoodi.

279
00:14:46,160 --> 00:14:52,610
Võtame liigutada välja muutuja
sest see on puhtam, niimoodi.

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

281
00:15:02,980 --> 00:15:05,197
Ja siis me kasutame, et muutuja siin.

282
00:15:05,197 --> 00:15:06,280
See on täpselt sama asi.

283
00:15:06,280 --> 00:15:07,280
See on lihtsalt natuke puhtamaks.

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

285
00:15:25,300 --> 00:15:35,300
>> Next up, III seadus, Scales--
Nii et üks probleem õigus

286
00:15:35,300 --> 00:15:38,920
siin on, kui me muudame oma
andmed selles 200 value--

287
00:15:38,920 --> 00:15:41,685
Kui me muudame seda 400
või midagi ja värskendada,

288
00:15:41,685 --> 00:15:44,540
see väärtus lihtsalt läks offscreen.

289
00:15:44,540 --> 00:15:49,040
Nii et meie loogika siin
kuidas me teeme korda 3

290
00:15:49,040 --> 00:15:52,570
ja 20, mis laotatakse ning seejärel
kompenseerida seda natuke on tõesti kohmakad.

291
00:15:52,570 --> 00:15:54,150
>> Mida need numbrid tähendavad?

292
00:15:54,150 --> 00:15:55,400
Nad lihtsalt kõva kodeeritud seal.

293
00:15:55,400 --> 00:15:58,830
Ja nad väga palju seotud andmed.

294
00:15:58,830 --> 00:16:00,550
Me tahame andmeid sõidetakse dokument.

295
00:16:00,550 --> 00:16:05,460
Tahame väga paindlik dokument,
et antud andmed, kohaneb see

296
00:16:05,460 --> 00:16:07,900
ja seda kujutab.

297
00:16:07,900 --> 00:16:11,330
>> Mida me põhimõtteliselt vaja on, me
on see vahemikus numbrid 10.

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

299
00:16:12,640 --> 00:16:17,630
Ja me tahame kaarti, et läbi koridori
laius, kogu laiust siin.

300
00:16:17,630 --> 00:16:20,620
Nii et meil on valikut
numbrid lähevad 0-100.

301
00:16:20,620 --> 00:16:24,980
Ja meil on see campus I läheb
20-700, antud juhul.

302
00:16:24,980 --> 00:16:26,515
>> Meil sellist soovi kaarti, et edasi.

303
00:16:26,515 --> 00:16:30,002
Me tahame, et skaala, et üles ja
siis selle maha natuke.

304
00:16:30,002 --> 00:16:33,165
Selgub, et D3 on need.

305
00:16:33,165 --> 00:16:34,220
Seda nimetatakse skaalal.

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

307
00:16:37,410 --> 00:16:38,250
Nii saab seda kasutada.

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

309
00:16:46,300 --> 00:16:49,670
>> Nii, et works-- ma lähen
kirjuta see üles ja siis seda seletada.

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

311
00:17:01,530 --> 00:17:02,450
See on skaala.

312
00:17:02,450 --> 00:17:08,670
Mida ta teeb on see kaardistada
väärtusi 1-200 edasi 20-600.

313
00:17:08,670 --> 00:17:10,990
Saame näha, et.

314
00:17:10,990 --> 00:17:13,329
Me näeme, et siin.

315
00:17:13,329 --> 00:17:21,704
>> Nii et kui ma söödan 1-- üks hetk.

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

317
00:17:47,764 --> 00:17:48,555
Anna mulle üks sekund.

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

319
00:17:53,680 --> 00:17:55,080
Ma pean on valesti seda.

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

321
00:18:15,320 --> 00:18:15,990
Seal sa lähed.

322
00:18:15,990 --> 00:18:17,930
Mul on kahju sellest.

323
00:18:17,930 --> 00:18:22,050
>> Mis skaalal teeme
on, et see võtab raha

324
00:18:22,050 --> 00:18:24,930
ja seejärel teisendada, et
laiendada läbi, nii et see

325
00:18:24,930 --> 00:18:27,320
täidab kõiki sa küsivad.

326
00:18:27,320 --> 00:18:32,910
Nii sel juhul, kui me anname talle ühe,
see saab kaardistada, et läbi koridori 20.

327
00:18:32,910 --> 00:18:37,750
Ja kui me anname seda 200, see on
läheb kaarti, et 600.

328
00:18:37,750 --> 00:18:40,460
Ja kusagil vahepeal,
kui saame 100, see on

329
00:18:40,460 --> 00:18:44,610
saab olema kuskil
vahel 20 ja 600.

330
00:18:44,610 --> 00:18:51,480
>> Ja muidugi, nüüd on see, mida
Meil on vaja kõrvaldada need kõva kodeeritud

331
00:18:51,480 --> 00:18:53,402
asjad on meil seal.

332
00:18:53,402 --> 00:18:55,950
Nii et me tahame teha, on
võtta andmeid, et me oleme

333
00:18:55,950 --> 00:19:00,950
arvestades, et üksikud andmed
element, ja andke seda mõõtkavas esimene.

334
00:19:00,950 --> 00:19:02,635
Nii skaala mõõtkavas see üles.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, meil on väike viga siin.

337
00:19:48,880 --> 00:19:50,120
Me puuduvad andmed.

338
00:19:50,120 --> 00:19:51,290
Seal sa lähed.

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

340
00:19:58,550 --> 00:19:59,550
Ja mis laiendab seda.

341
00:19:59,550 --> 00:20:01,383
>> See annab meile sama
Tulemuseks oli enne,

342
00:20:01,383 --> 00:20:04,030
kuid selle asemel neid
kõva kodeeritud piirangud.

343
00:20:04,030 --> 00:20:07,790
Ja kui suurus meie
presendist muutusi, näiteks

344
00:20:07,790 --> 00:20:11,790
Kui me tahame seda üle
400 pikslit ja see squishes välja

345
00:20:11,790 --> 00:20:15,440
meil on see over--
me seda laiendada või me

346
00:20:15,440 --> 00:20:21,890
saab vähendada seda vasakule marginaali
midagi vähem või rohkem kui 20.

347
00:20:21,890 --> 00:20:25,470
Need numbrid on need kõva kodeeritud
numbrid nüüd mõtet meile.

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

349
00:20:28,110 --> 00:20:30,520
>> Ja me võiksime teha palju rohkem
huvitavaid asju ka.

350
00:20:30,520 --> 00:20:35,990
Nii et selle asemel, millel on lineaarne
Skaala tahetakse sisse skaalal.

351
00:20:35,990 --> 00:20:37,840
Ja see annab meile logaritmilist skaalat.

352
00:20:37,840 --> 00:20:41,269
>> Nüüd meie skaala asemel
lihtsalt laienemas, et range,

353
00:20:41,269 --> 00:20:42,810
ta teeb keerulisemaid asju.

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

355
00:20:48,790 --> 00:20:53,790
Selle asemel, et seda valikut raske
kodeeritud, ja selle asemel, et 600,

356
00:20:53,790 --> 00:20:58,465
tahetakse lihtsalt kasutada laius,
nii 20 laiusele -40

357
00:20:58,465 --> 00:21:02,392
2 korda marginaal teisel pool.

358
00:21:02,392 --> 00:21:05,350
Ja see teeb palju mõttekam
keegi, kes võiks vaadata koodi.

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

360
00:21:08,080 --> 00:21:11,850
>> Huvitav, kaalud saada
väga, väga võimekas samuti.

361
00:21:11,850 --> 00:21:13,350
Nad teevad palju huvitavaid asju.

362
00:21:13,350 --> 00:21:17,620
Nii kaalud ei pea
tegutseda ainult numbrid.

363
00:21:17,620 --> 00:21:18,955
Teeme värvigammat.

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

365
00:21:23,120 --> 00:21:26,120
>> Nii et meie valikut võiks olema--
Meie domeen on 1-200.

366
00:21:26,120 --> 00:21:28,220
See on sisend asi.

367
00:21:28,220 --> 00:21:33,793
Aga me võime soovida kaarti
rohelisest punaseks, näiteks.

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

369
00:21:39,710 --> 00:21:42,910
Ja nüüd, kui võtame seda 1
me ei kavatse saada roheline.

370
00:21:42,910 --> 00:21:45,110
Kui me anname seda 200, me võtame punane.

371
00:21:45,110 --> 00:21:49,480
Ja kui võtame seda tõde kusagil vahepeal
see saab olema mingi segu, et

372
00:21:49,480 --> 00:21:52,520
kusagil gradient
vahel roheline ja punane.

373
00:21:52,520 --> 00:21:55,210
>> Ja selle asemel,
selline kohmakad loogika

374
00:21:55,210 --> 00:21:58,550
meil siin
tingimisi seal,

375
00:21:58,550 --> 00:22:03,250
meil oleks midagi--
lineaarskaalale nende vahel.

376
00:22:03,250 --> 00:22:07,100
Nii et me tahaks kasutada skaalal me lihtsalt
loodud, milles kutsusime värvi.

377
00:22:07,100 --> 00:22:09,060
Ja me tahaks anda see d, mis
Meie andmete element.

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

379
00:22:14,250 --> 00:22:15,060
Ja seal me läheme.

380
00:22:15,060 --> 00:22:18,070
Meil on värvigammat.

381
00:22:18,070 --> 00:22:18,940
>> Nii et see on kaardistada.

382
00:22:18,940 --> 00:22:20,960
Nii kaugele jäänud on täiesti rohelised.

383
00:22:20,960 --> 00:22:22,560
Paremäärmuslased on täiesti punane.

384
00:22:22,560 --> 00:22:24,828
Ja kõik vahel
on funktsioon d.

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

386
00:22:33,369 --> 00:22:35,160
Meil on huvitav
visualiseerimine siin.

387
00:22:35,160 --> 00:22:36,952
Aga meie andmeid oli selline igav.

388
00:22:36,952 --> 00:22:39,410
Vaatame, mida me võiksime teha, kui
meil oli rohkem huvitavaid andmeid.

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

390
00:22:44,420 --> 00:22:50,500
>> Seaduse IV, Töö
Data-- esimene asi

391
00:22:50,500 --> 00:22:53,560
me tahame teha, et meie
visualiseerimine huvitavamaks

392
00:22:53,560 --> 00:22:56,140
on liigutada andmeid kusagil mujal.

393
00:22:56,140 --> 00:22:58,310
See on väga kohmakad olema
andmed kõva kodeeritud siin.

394
00:22:58,310 --> 00:23:01,220
Ja üldiselt, saadame paludes
kellegi teise jaoks andmeid.

395
00:23:01,220 --> 00:23:05,400
Uurime äkki küsib valitsus,
Census Bureau, mis su andmed

396
00:23:05,400 --> 00:23:10,170
ja siis joonestamist, et ega küsib
mõne kolmanda osapoole üksus mõningaid andmeid

397
00:23:10,170 --> 00:23:13,330
ja siis hoone
visualiseerimine selle kohta.

398
00:23:13,330 --> 00:23:17,170
>> Nii et esimene asi, mida me tahame teha
liigutada, et kusagil mujal.

399
00:23:17,170 --> 00:23:24,130
Ma lähen, et luua
fail siit nimetatakse data.json.

400
00:23:24,130 --> 00:23:25,600
JSON on andmete esitusviis.

401
00:23:25,600 --> 00:23:29,210
Sa ei pea teadma, palju sellest.

402
00:23:29,210 --> 00:23:33,210
Ja me ei kavatse kopeerida
vähe andmeid on meil olemas,

403
00:23:33,210 --> 00:23:40,330
kleepige see on sõna-sõnalt, minna
tagasi meie visualiseerimine koodi

404
00:23:40,330 --> 00:23:45,362
siin, ja kasutada seda funktsiooni siin.

405
00:23:45,362 --> 00:23:46,820
Sul ei ole teada üksikasju.

406
00:23:46,820 --> 00:23:49,800
Aga mida see teha on,
see leiavad, et fail,

407
00:23:49,800 --> 00:23:51,780
tõmmata, ja tagastab selle meile.

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

409
00:24:11,660 --> 00:24:15,220
Nii et mida see teeb, on, et see läheb
ja saada data.json faili.

410
00:24:15,220 --> 00:24:18,570
Ja siis kõik kood, mis on
liigestatud inside-- sisuliselt

411
00:24:18,570 --> 00:24:21,800
kõik koodi meil there-- hakkab
käivitada ainult siis, kui saame andmed tagasi.

412
00:24:21,800 --> 00:24:25,760
Ja siis see saab joosta, et
kood andmed meil.

413
00:24:25,760 --> 00:24:28,870
Hea, et meil on
visualiseerimine, et päringuid

414
00:24:28,870 --> 00:24:31,390
mõned koodi kuskil
muud, mis on tavaliselt

415
00:24:31,390 --> 00:24:36,110
kus see päringud mõned andmed
kusagil mujal, mis on tavaliselt

416
00:24:36,110 --> 00:24:38,656
kuidas visualiseerimine tööta.

417
00:24:38,656 --> 00:24:41,400
>> Aga ma tahan minna tagasi andmetega.

418
00:24:41,400 --> 00:24:48,030
Nii andmete põhimõtteliselt sisse D3-- D3
tarbib andmeid, mis on nimekiri asjadest.

419
00:24:48,030 --> 00:24:53,000
D3 ootab andmed lihtsalt nimekirja
asju, hulga asju.

420
00:24:53,000 --> 00:24:58,780
See ei ole tähtis, mis asjad need
on, nii kaua kui see on massiivi neist.

421
00:24:58,780 --> 00:25:02,460
>> Nii et siin, näiteks võiksime kohta
Muidugi on ujuva väärtused.

422
00:25:02,460 --> 00:25:04,830
Meil võiks olla negatiivsed.

423
00:25:04,830 --> 00:25:09,400
D3 ei hooli, nii kaua,
kui see on nimekiri asjadest.

424
00:25:09,400 --> 00:25:13,270
>> Nagu huvitavaid asju, mida me
võib olla, me võiks ka

425
00:25:13,270 --> 00:25:19,410
on stringide nimekirja niimoodi.

426
00:25:19,410 --> 00:25:25,440
Nii et need on Crimson pealkirju
Võtsin paar päeva tagasi.

427
00:25:25,440 --> 00:25:29,220
Ja võib-olla leiad mõned huvitavad
asju nende pealkirjad.

428
00:25:29,220 --> 00:25:30,970
>> Nii jälle, see on nimekiri asjadest.

429
00:25:30,970 --> 00:25:32,360
D3 ei hooli.

430
00:25:32,360 --> 00:25:35,572
Need juhtuvad olema string.

431
00:25:35,572 --> 00:25:36,530
Muutsime meie andmeid.

432
00:25:36,530 --> 00:25:38,210
>> Lähme tagasi meie visualiseerimine.

433
00:25:38,210 --> 00:25:42,495
Nüüd on meie visualiseerimine eeldab
input olema numbrid.

434
00:25:42,495 --> 00:25:44,370
Nii et me lähed on
teha mõned muudatused.

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

436
00:25:47,180 --> 00:25:52,180
Nii näiteks, esiteks, võibolla
tahame panna need ringid mööda

437
00:25:52,180 --> 00:25:56,870
pikkusena pealkiri,
tähemärkide arv pealkiri.

438
00:25:56,870 --> 00:26:03,600
>> Mida me teeme on-- iga kord, kui meie
funktsiooni nimetatakse koos haaknõela,

439
00:26:03,600 --> 00:26:09,095
me leiame see on pikk ja
siis liigu, et skaala.

440
00:26:09,095 --> 00:26:11,550
Värvi, ma tagasi
et terashall.

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

442
00:26:19,060 --> 00:26:20,420
Ja seal me läheme.

443
00:26:20,420 --> 00:26:23,190
Meil on visualiseerimine
of Crimson pealkirju.

444
00:26:23,190 --> 00:26:25,500
>> Meie skaala on natuke välja.

445
00:26:25,500 --> 00:26:29,680
Oletame, et pikim
pealkiri on 100 tähemärki,

446
00:26:29,680 --> 00:26:32,244
nii span et välja natuke.

447
00:26:32,244 --> 00:26:33,410
Ja meil on visualiseerimine.

448
00:26:33,410 --> 00:26:36,710
Seega tundub, et kõige pealkirju
on üsna lähestikku,

449
00:26:36,710 --> 00:26:38,750
nii iseloomu joon.

450
00:26:38,750 --> 00:26:41,200
Aga üks on tõesti paistab.

451
00:26:41,200 --> 00:26:46,660
>> Võiksime ehitada mõned tööriistad
uurida, et rohkem.

452
00:26:46,660 --> 00:26:50,710
Aga kui ma töötasin selle, olin
uudishimulik, kas see andmekogum,

453
00:26:50,710 --> 00:26:53,880
pealkirju koolon
neid oleks pikem.

454
00:26:53,880 --> 00:26:55,770
Ma eeldab, et ta oleks.

455
00:26:55,770 --> 00:26:56,660
>> Nii saab teada.

456
00:26:56,660 --> 00:27:00,650
Kasutame värvi
kanal nagu me tegime enne,

457
00:27:00,650 --> 00:27:04,540
kodeerida mõned umbes kas
seal on jämesoole või ei.

458
00:27:04,540 --> 00:27:07,220
Nii me kasutame tingimisi uuesti.

459
00:27:07,220 --> 00:27:09,350
Sa ei pea teadma
üksikasjad käesoleva,

460
00:27:09,350 --> 00:27:14,260
kuid see, kuidas me vaadata
string teatava omaduse

461
00:27:14,260 --> 00:27:16,355
JavaScript jällegi ei ole asjakohane.

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

463
00:27:18,910 --> 00:27:23,270
>> Aga kui me ei leia
käärsoole-, me naasta roheline.

464
00:27:23,270 --> 00:27:26,100
Ja kui me seda teeme, siis me tagasi punane.

465
00:27:26,100 --> 00:27:29,010
Nii jälle pealkirjadest
on koolon on punased.

466
00:27:29,010 --> 00:27:34,980
See on see, mida see means-- kena.

467
00:27:34,980 --> 00:27:38,040
>> Seega tundub, et minu
Hüpoteesi lõin.

468
00:27:38,040 --> 00:27:39,360
Seal on ainult kaks.

469
00:27:39,360 --> 00:27:42,380
Meil on ainult kuus andmepunkti
Vaid kahel kooloniga.

470
00:27:42,380 --> 00:27:45,510
Kuid tundub natuke rohkem
madala hinnaga, tegelikult.

471
00:27:45,510 --> 00:27:47,830
Pealkirjad koolonite tunduda
üldiselt lühemad,

472
00:27:47,830 --> 00:27:52,370
vähemalt meie andmeid set-- huvitav.

473
00:27:52,370 --> 00:27:55,830
>> Pöördugem tagasi, et
terashall ja siis vaata

474
00:27:55,830 --> 00:28:00,601
mida me saame teha veelgi
rohkem huvitavaid andmeid.

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

476
00:28:04,370 --> 00:28:09,070
Nii jälle, ma mainisin, et
andmed D3 on nimekiri asjadest.

477
00:28:09,070 --> 00:28:11,080
Me oleme näinud numbreid mitut liiki.

478
00:28:11,080 --> 00:28:12,810
Me oleme näinud stringe.

479
00:28:12,810 --> 00:28:15,700
Aga asjad võivad olla ka objekte.

480
00:28:15,700 --> 00:28:20,080
>> Nad võivad olla keerulised asjad
mis sisaldavad palju asju.

481
00:28:20,080 --> 00:28:24,510
Öelda, et selgemalt,
Enamasti me

482
00:28:24,510 --> 00:28:28,384
tahad ehitada iga andmepunkti
keerulisem kui lihtsalt üks väärtus.

483
00:28:28,384 --> 00:28:30,175
Kui soovite ette kujutada
Andmebaasi umbes üliõpilased,

484
00:28:30,175 --> 00:28:32,470
seal võib olla üliõpilane
Nime, üliõpilane ID,

485
00:28:32,470 --> 00:28:36,370
ja palju asju, mis on seotud
pöörates erilist rekord,

486
00:28:36,370 --> 00:28:39,834
mitte ainult string või number.

487
00:28:39,834 --> 00:28:40,750
Vaatame seda.

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

489
00:28:55,180 --> 00:28:56,760
>> See on üks selline andmekogum.

490
00:28:56,760 --> 00:28:59,090
See on andmekogum umbes maavärinad.

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

492
00:29:01,910 --> 00:29:08,430
Nii et kõik siin meie nimekirjas või massiivi
asju on palju asju ise.

493
00:29:08,430 --> 00:29:11,380
Nii et iga andmepunkti on
ulatust ja koordineerida.

494
00:29:11,380 --> 00:29:13,425
Ja koordinaadid ise
sisaldab kahte asja.

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

496
00:29:15,960 --> 00:29:20,450
>> Nii et iga päev on nüüd palju rohkem
keeruline ja palju muud huvitavat

497
00:29:20,450 --> 00:29:22,700
ja sisaldab palju
huvitavat teavet.

498
00:29:22,700 --> 00:29:26,730
Vaatame, me võiks ehitada välja, et.

499
00:29:26,730 --> 00:29:36,130
Tagasiteel siin jällegi kasutades
Meie histogrammi ringi visualiseerimine

500
00:29:36,130 --> 00:29:42,110
oleme loonud, vaatame, kas me saame ehitada
visualiseerimine heledusjaotus

501
00:29:42,110 --> 00:29:43,305
Meie andmete kogum.

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

503
00:29:45,850 --> 00:29:48,660
>> Nii et siin, see on sama mõiste.

504
00:29:48,660 --> 00:29:51,920
Aga nüüd, d sisaldab rohkem asju.

505
00:29:51,920 --> 00:29:54,780
d sisaldab palju andmeid elemente.

506
00:29:54,780 --> 00:29:57,946
Nii saame päeva tagasi.

507
00:29:57,946 --> 00:29:59,670
D3 annab meile d.

508
00:29:59,670 --> 00:30:06,080
Ja me vastame leides suurusjärku
d ja siis möödaminnes, et skaala.

509
00:30:06,080 --> 00:30:08,490
>> Ja siis me peame muutma
Meie skaalal muidugi.

510
00:30:08,490 --> 00:30:12,980
Nii suuruste lihtsalt ei
minna palju rohkem kui 10.

511
00:30:12,980 --> 00:30:15,485
Tegelikult on pole kunagi olnud
10 suurusjärgu maavärin.

512
00:30:15,485 --> 00:30:19,360
Aga see on omamoodi meie ülemine
Lõpuks meie ülemine spektrit.

513
00:30:19,360 --> 00:30:20,240
>> Olgem värskendada.

514
00:30:20,240 --> 00:30:22,990
Nice, on meil visualiseerimine.

515
00:30:22,990 --> 00:30:25,490
On huvitav note-- nii
on kahed andmed, et

516
00:30:25,490 --> 00:30:29,010
on peaaegu täpselt üksteise
muu, mahu.

517
00:30:29,010 --> 00:30:31,350
Sa näed seda läbipaistmatus me kasutame.

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

519
00:30:40,810 --> 00:30:42,690
>> Meil on geograafilised andmed nüüd.

520
00:30:42,690 --> 00:30:44,710
Meil on laiuskraadidel ja pikkusega.

521
00:30:44,710 --> 00:30:47,549
Võib-olla võiks teha midagi
palju muud huvitavat sellega.

522
00:30:47,549 --> 00:30:49,590
Vaatame mõned rohkem
Huvitav, kuidas visualiseerida

523
00:30:49,590 --> 00:30:53,500
Käesoleva keerulisem
andmete meil on juurdepääs.

524
00:30:53,500 --> 00:31:04,950
>> Seaduse V, Mapping-- põhjalikult,
tahame panna need kaardil.

525
00:31:04,950 --> 00:31:07,690
Ma mõtlen, et see on koht, kus see läheb.

526
00:31:07,690 --> 00:31:13,130
Me tahame, et kodeerida teavet
positsiooni nende maavärin näidud,

527
00:31:13,130 --> 00:31:16,350
samuti nende intensiivsus,
sest meil on seda nüüd.

528
00:31:16,350 --> 00:31:21,310
Me mõistame, kuidas tarbida
keerulisem andmeid.

529
00:31:21,310 --> 00:31:26,200
>> Esimene asi, mida me teeme on
Looge kaart, tausta kaart.

530
00:31:26,200 --> 00:31:29,360
Ma lähen läbi
see väga kiiresti.

531
00:31:29,360 --> 00:31:30,560
See on keeruline koodi.

532
00:31:30,560 --> 00:31:33,110
See on veel üks neist
retsepte sa tõesti ei

533
00:31:33,110 --> 00:31:35,690
on täielikult mõista teid kasutada.

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

535
00:31:38,510 --> 00:31:39,740
Aga see on kood.

536
00:31:39,740 --> 00:31:43,580
See kood siinsamas loob kaardil.

537
00:31:43,580 --> 00:31:45,730
>> Me ei kavatse minna üksikasjalikult.

538
00:31:45,730 --> 00:31:54,210
Aga pealiskaudselt, mida ta teeb, on,
samas kahtlusi selle us.json faili, mis

539
00:31:54,210 --> 00:31:57,150
on andmefaili nagu
oli meil varem.

540
00:31:57,150 --> 00:31:59,150
See on keerulisem, muidugi.

541
00:31:59,150 --> 00:32:02,920
Aga sel juhul, kõike,
Iga andmepunkti on see seisund

542
00:32:02,920 --> 00:32:05,420
ja on nimekiri
laius- ja pikkuskraad

543
00:32:05,420 --> 00:32:10,500
mis määratlevad polügooni,
sellisel kujul, et riik.

544
00:32:10,500 --> 00:32:13,280
>> Mis D3 teeme on sarnane
mida me varem.

545
00:32:13,280 --> 00:32:18,140
See taotleda ja
seonduda et element.

546
00:32:18,140 --> 00:32:20,890
Ja seal on funktsioon, mis
kaardistab et element läbi,

547
00:32:20,890 --> 00:32:23,410
põhineb laiuskraadidel ja pikkusega.

548
00:32:23,410 --> 00:32:24,580
Te saate lugeda rohkem sellest.

549
00:32:24,580 --> 00:32:27,385
Ja ma soovitan seda.

550
00:32:27,385 --> 00:32:30,090
>> On linke
lõpuks see kood postitatud.

551
00:32:30,090 --> 00:32:31,570
Ja koodi kommenteerinud.

552
00:32:31,570 --> 00:32:34,050
Seal on lingid edasiseks selle kohta.

553
00:32:34,050 --> 00:32:36,590
Ma soovitan teil otsida see üles.

554
00:32:36,590 --> 00:32:39,460
Aga mida me hoolime on
Prognoos funktsiooni.

555
00:32:39,460 --> 00:32:41,210
Ma tahan minna läbi selle.

556
00:32:41,210 --> 00:32:43,522
>> Esiteks, las ma näitan
sa, et jah, meil on kaardil.

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

558
00:32:47,300 --> 00:32:49,970
Kaardid on lahedad.

559
00:32:49,970 --> 00:32:52,330
Nii vaatame seda
tootmisfunktsioon.

560
00:32:52,330 --> 00:32:56,481
>> Projektsioon on väga palju
nagu skaala, kaalud uuesti.

561
00:32:56,481 --> 00:32:59,210
Mis tootmine
Prognoos funktsiooni

562
00:32:59,210 --> 00:33:06,610
ei ei, me ei liigu see pool
ja latitudes-- sel juhul,

563
00:33:06,610 --> 00:33:09,590
need väärtused siin on
lat-igatseb hoone

564
00:33:09,590 --> 00:33:13,990
istume õiges
now-- projektsioon.

565
00:33:13,990 --> 00:33:20,560
Ja projektsioon konverteerib
That Into x ja y piksliväärtuse.

566
00:33:20,560 --> 00:33:23,300
>> Mis siis projektsioon teeb
on väga sarnane meie skaalal.

567
00:33:23,300 --> 00:33:27,270
See võtab meie laiuskraadidel ja
pikkuskraad mis esindab kogu maailmas

568
00:33:27,270 --> 00:33:31,390
ja kahanemine ja suurus, et
alla väljakule et me tahame,

569
00:33:31,390 --> 00:33:33,510
et me juba rääkisime sellest.

570
00:33:33,510 --> 00:33:35,220
Sel juhul me
kulgeb neid väärtusi.

571
00:33:35,220 --> 00:33:41,370
Ja see annab meile, noh, et
ekraanil tähendab 640 pikslit.

572
00:33:41,370 --> 00:33:46,250
Kogu see ekraan on 700 pikslit
lai, et teeb meile siin,

573
00:33:46,250 --> 00:33:53,310
ja 154 pikslit alla, mida ma ei
hinnang on päris palju siin.

574
00:33:53,310 --> 00:33:57,250
>> Nii võttes neid lat-igatseb, mis
midagi kujutada kogu maailmast

575
00:33:57,250 --> 00:34:02,850
ja squishing ja liigub, et umbes
anda meile x ja y piksliväärtuse,

576
00:34:02,850 --> 00:34:05,450
see on esimene asi, mis on
teha seda kaardistamine koodi.

577
00:34:05,450 --> 00:34:07,920
Ja siis ülejäänud
kood tarbib andmeid

578
00:34:07,920 --> 00:34:14,310
ja siis kaardistab need lat-longs
peale midagi ekraanile.

579
00:34:14,310 --> 00:34:18,380
>> Aga me ei kavatse kasutada seda projektsioon
funktsioone, sest selgub,

580
00:34:18,380 --> 00:34:20,270
meil lat-igatseb igatseb samuti.

581
00:34:20,270 --> 00:34:24,509
Vaadates tagasi meie andmetel oleme
pikkus- ja laiuskraadid

582
00:34:24,509 --> 00:34:25,425
iga tähelepanek.

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

584
00:34:28,131 --> 00:34:29,130
Nii saab kasutada projektsioon.

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

586
00:34:33,250 --> 00:34:37,639
>> Nii vaadates meie ekspositsiooni
Me tahame, et meie exposition--

587
00:34:37,639 --> 00:34:39,590
meil laius- ja pikkuskraadid.

588
00:34:39,590 --> 00:34:40,770
Aga me tahame piksliväärtuse.

589
00:34:40,770 --> 00:34:43,510
Ja selgub, meil on täpselt
mida me want-- projektsioon.

590
00:34:43,510 --> 00:34:46,239
Väga palju nagu me olime
kasutades skaalal siinsamas,

591
00:34:46,239 --> 00:34:52,075
me nüüd kasutada projektsioon
ja andke seda koordineerib.

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

593
00:34:55,241 --> 00:34:56,949
Nii et esimene asi
me doing-- nii et me oleme

594
00:34:56,949 --> 00:35:01,520
saada d, mis on üksikute andmete
element individuaalne maavärin

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

596
00:35:02,370 --> 00:35:04,640
Esimene asi, mida me teeme
on saada koordinaadid.

597
00:35:04,640 --> 00:35:06,150
Hea küll, me peame koordinaadid.

598
00:35:06,150 --> 00:35:09,160
>> Teine asi, mida me teeme on
selle edasi projektsioon.

599
00:35:09,160 --> 00:35:13,440
Projektsioon teisendab need koordinaadid
arvesse piksliväärtuse, x ja y.

600
00:35:13,440 --> 00:35:16,680
Ja siis viimane asi, mida me
tahan teha, on lihtsalt saada x,

601
00:35:16,680 --> 00:35:19,342
mis antud juhul on esimene.

602
00:35:19,342 --> 00:35:22,050
See on esimene kahe asju
mis on tagastatud projektsiooni abil.

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

604
00:35:27,840 --> 00:35:29,630
>> Me teeme sama y.

605
00:35:29,630 --> 00:35:34,960
Kuid selle asemel, me naasta
Teine element, y.

606
00:35:34,960 --> 00:35:35,980
Ole valmis, et värskendada.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, extra iseloomu
siin-- kena, meil on

609
00:35:46,450 --> 00:35:51,730
Data Driven dokument, mis on
varjates seda JSON faili objektid,

610
00:35:51,730 --> 00:35:57,560
tegemisel kaardil ja muutuvad
atribuut seoses andmete

611
00:35:57,560 --> 00:35:59,600
projekti seda kaardil.

612
00:35:59,600 --> 00:36:00,840
See on tõesti huvitav.

613
00:36:00,840 --> 00:36:03,770
See on lahe.

614
00:36:03,770 --> 00:36:05,640
>> Võtame selle põhja.

615
00:36:05,640 --> 00:36:08,795
Ma mõtlen, et meil on kaks tükki
teave iga andmepunkti.

616
00:36:08,795 --> 00:36:10,000
Ma mõtlen, et kolm.

617
00:36:10,000 --> 00:36:12,540
Meil on koordinaadid,
mis on x ja y.

618
00:36:12,540 --> 00:36:15,700
Ja meil on suurusjärgus.

619
00:36:15,700 --> 00:36:17,420
>> Meil on vaja kodeerida suurusjärku kuidagi.

620
00:36:17,420 --> 00:36:18,920
Meil on palju kanaleid.

621
00:36:18,920 --> 00:36:20,370
Me saame kasutada värvi.

622
00:36:20,370 --> 00:36:21,890
Me saame kasutada raadiuses.

623
00:36:21,890 --> 00:36:23,040
Me võiksime kasutada läbipaistmatus.

624
00:36:23,040 --> 00:36:25,540
Me võiksime kasutada palju asju kood.

625
00:36:25,540 --> 00:36:29,180
Mõni neist atribuudid ja paljud
seda enam, et ei ole seal loetletud,

626
00:36:29,180 --> 00:36:33,065
sest nad on vabatahtlik, võiksime
kasutada kodeerida käesoleva andmeid, insuldi

627
00:36:33,065 --> 00:36:35,670
ja kõik need asjad, mida ma olen mainitud.

628
00:36:35,670 --> 00:36:36,690
>> Teeme raadiuses.

629
00:36:36,690 --> 00:36:38,830
Ma arvan, et raadius on kõige intuitiivne.

630
00:36:38,830 --> 00:36:46,210
Nii jälle, me asendada see kodeeritud
40 ja teha mõned arvutused.

631
00:36:46,210 --> 00:36:48,810
Me kasutame oma lemmik skaalal uuesti.

632
00:36:48,810 --> 00:36:50,290
Ja me oleme varem d.

633
00:36:50,290 --> 00:36:55,850
Aga mitte päeva, sest me tahame suurusjärku
d. d on lihtsalt andmepunkti.

634
00:36:55,850 --> 00:36:57,430
Me läbida suurusjärgu skaalal.

635
00:36:57,430 --> 00:36:58,470
>> Proovime seda uuesti.

636
00:36:58,470 --> 00:37:00,230
Ooh, see ei tööta.

637
00:37:00,230 --> 00:37:02,940
Miks see ei tööta?

638
00:37:02,940 --> 00:37:04,387
>> Seega pidage meeles, millise suurusega teeb.

639
00:37:04,387 --> 00:37:05,470
Vaatame skaalal uuesti.

640
00:37:05,470 --> 00:37:10,800
Scale kaardid 1-10 kohta
kuni 22-600, vähem või rohkem.

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

642
00:37:12,030 --> 00:37:14,730
See on põhjus, miks me saada see.

643
00:37:14,730 --> 00:37:18,420
>> Nii me tahame muuta meie skaalal
midagi muud mõistlikku.

644
00:37:18,420 --> 00:37:22,610
Oletame, et tahame 0-60.

645
00:37:22,610 --> 00:37:25,340
60 on suur, kuid 10 maavärinad
on uskumatult harva.

646
00:37:25,340 --> 00:37:27,880
Tegelikult nad pole kunagi juhtunud.

647
00:37:27,880 --> 00:37:31,830
>> Nii et mida see teha on, siis võtan
Meie suur, et läheb 1-10

648
00:37:31,830 --> 00:37:34,490
ja kaardistada seda laiendada seda.

649
00:37:34,490 --> 00:37:37,370
Ja map seda kellelegi 0-60.

650
00:37:37,370 --> 00:37:38,840
Olgem värskendada.

651
00:37:38,840 --> 00:37:41,850
>> Nice, on meil visualiseerimine.

652
00:37:41,850 --> 00:37:42,500
See on suurepärane.

653
00:37:42,500 --> 00:37:43,736
See on tegelikud andmed.

654
00:37:43,736 --> 00:37:46,360
Märkad, minu väike mänguasi
Näiteks suurim maavärin

655
00:37:46,360 --> 00:37:49,417
on õige peal meid.

656
00:37:49,417 --> 00:37:50,000
Aga see on kõik.

657
00:37:50,000 --> 00:37:54,422
Meil on kuupäev sõidetakse visualiseerimine
mis tarbib andmeid

658
00:37:54,422 --> 00:37:56,255
ja annab meile tõesti
huvitavat teavet.

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

660
00:38:02,600 --> 00:38:06,420
Jah, lisame mõned
interaktiivsust ta.

661
00:38:06,420 --> 00:38:08,675
Mainisin, et oli
tugev jõud D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Nii et siin, iga element, me oleme
kirjeldades kamp atribuute.

664
00:38:15,060 --> 00:38:20,230
Aga me ei saa ka kirjeldada seda, mida me tahame
juhtuda interaktiivsust elemente.

665
00:38:20,230 --> 00:38:26,190
Näiteks me võiks kirjeldada
Mis juhtub, kui me hiirega üle.

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

667
00:38:28,740 --> 00:38:33,640
Ja väga sarnased, et
et võtan funktsiooni

668
00:38:33,640 --> 00:38:36,700
väga sarnane
atribuudid meil oli enne,

669
00:38:36,700 --> 00:38:44,650
kus me midagi teha
element kui me tiirutama üle.

670
00:38:44,650 --> 00:38:47,100
>> Nii et esimene asi, mida me peame
tegema, on valida, et element,

671
00:38:47,100 --> 00:38:49,435
seda leida põhiliselt brauseris.

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

673
00:38:57,090 --> 00:39:00,920
ja siis me võiks seada
atribuut ta.

674
00:39:00,920 --> 00:39:06,870
Mida ma teen siin, kui me tiirutama
üle midagi, me võtame selle elemendi

675
00:39:06,870 --> 00:39:11,197
ja siis pane oma läbipaistmatuse tagasi
1, täiesti läbipaistmatu.

676
00:39:11,197 --> 00:39:12,488
Vaatame, mis see välja näeb.

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

678
00:39:29,430 --> 00:39:39,080
>> Tundub, et meil on
Täiendava semikooloniga siin.

679
00:39:39,080 --> 00:39:42,420
Nii et kui me hover üle siin, see saab täis.

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

681
00:39:46,530 --> 00:39:48,960
Kuid nüüd, muidugi, see
jääb täis, sest me

682
00:39:48,960 --> 00:39:53,240
kirjeldama, mis juhtub
kui eemaldada meie kursor.

683
00:39:53,240 --> 00:39:59,990
Nii teeme täpselt, et
mouseout, mitte mouse.

684
00:39:59,990 --> 00:40:06,399
>> Ja me lähtestada see
mis meil oli before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
Ja nüüd, iga kord kui me
hover, saame ring täis.

686
00:40:10,260 --> 00:40:13,468
See aitab meil näha, mida me
me valides sisuliselt.

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

688
00:40:19,210 --> 00:40:22,860
>> Ja nüüd teeme seda tõesti suur.

689
00:40:22,860 --> 00:40:26,210
Olgem ühendada see tegelikke andmeid.

690
00:40:26,210 --> 00:40:30,890
Nii saab küsida võiks
USGS oma andmed.

691
00:40:30,890 --> 00:40:35,630
Nii US Geological Survey
on andmeid maavärinad.

692
00:40:35,630 --> 00:40:41,460
Nad on avaliku API, mis on võimeline
tuleb tarbida JSON formaadis.

693
00:40:41,460 --> 00:40:42,548
Nii teemegi.

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

695
00:40:49,730 --> 00:40:55,900
>> Nii et see on natuke koodi
ühendub USGS API.

696
00:40:55,900 --> 00:40:57,990
Ja seal on natuke töötlemine ta.

697
00:40:57,990 --> 00:41:02,200
See ei ole oluline, kuid lihtsustab
lihtsa andmete formaati nagu üks

698
00:41:02,200 --> 00:41:03,800
meil oli enne.

699
00:41:03,800 --> 00:41:08,140
Nii et ma vabaneda oma kõne
Meie võlts data.json faili.

700
00:41:08,140 --> 00:41:13,110
Ja selle asemel, ma helistan
USGS sisuliselt.

701
00:41:13,110 --> 00:41:16,700
>> Olgem värskendada, kena.

702
00:41:16,700 --> 00:41:21,260
See on tegelik, reaalse elu andmeid
alates sel nädalal maavärina.

703
00:41:21,260 --> 00:41:23,217
See on tõesti huvitav.

704
00:41:23,217 --> 00:41:25,050
See ei ole üllatav
Meie jaoks, kuid on olemas

705
00:41:25,050 --> 00:41:27,909
palju maavärinate
West Coast Californias.

706
00:41:27,909 --> 00:41:30,950
Aga ma arvasin, et see oli väga huvitav
et seal oli nii palju maavärinaid

707
00:41:30,950 --> 00:41:34,350
Alaska ja ilmselt
siin Midwest.

708
00:41:34,350 --> 00:41:37,630
Ma mõtlen, et huvitav, ja me oleme head.

709
00:41:37,630 --> 00:41:40,410
See järeldus.

710
00:41:40,410 --> 00:41:43,760
>> Aga põhimõtteliselt on see
on see, mida D3 aitab meil teha.

711
00:41:43,760 --> 00:41:48,030
See aitab meil võtta andmeid, seovad
seda elementi DOM,

712
00:41:48,030 --> 00:41:51,620
ja on neid elemente muuta
funktsioonina andmete

713
00:41:51,620 --> 00:41:54,780
on need tunnused, mis on kõik
palju atribuute elementide,

714
00:41:54,780 --> 00:41:57,393
kõik kasulikud kanalid
edastada teavet.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 on uskumatult võimas
raamatukogu ja hämmastavalt hästi juhitud.

717
00:42:09,290 --> 00:42:12,260
See on mõned võimsad kraami.

718
00:42:12,260 --> 00:42:15,960
Andmete visualiseerimine on
uskumatult võimas vahend

719
00:42:15,960 --> 00:42:21,530
edasitoimetamiseks inimestele sügavale
teadmisi, mis jõuab oma põhitegevusele

720
00:42:21,530 --> 00:42:25,430
ning aitab neil mõista, in
see sügav ja intuitiivne viisil,

721
00:42:25,430 --> 00:42:29,760
kuidas andmeid toimib ja kuidas
andmed muudab meie elu.

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