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

2
00:00:00,780 --> 00:00:11,880
>> [Speel van musiek]

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD: Ek is David
Chouinard, en dit is D3.

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

5
00:00:17,700 --> 00:00:21,270
Ons gaan om te leer oor D3 vandag.

6
00:00:21,270 --> 00:00:25,020
D3 is 'n JavaScript raamwerk
vir die bou van 'n hoë gehalte

7
00:00:25,020 --> 00:00:28,110
interaktiewe visualisaties vir die web.

8
00:00:28,110 --> 00:00:30,870
Dinge soos wat ons is
sien in die rug van my,

9
00:00:30,870 --> 00:00:34,230
ons gaan om te leer wat om te maak
dinge, soort van die basiese beginsels van dit.

10
00:00:34,230 --> 00:00:36,452
Maar dit gaan om koel te wees.

11
00:00:36,452 --> 00:00:38,160
Kom ons begin
maak mooi foto's.

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

13
00:00:41,108 --> 00:00:44,350
Ons het meer demos
vooruitsigte beskikbaar.

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

15
00:00:48,040 --> 00:00:50,760
Kom ons doen dit.

16
00:00:50,760 --> 00:00:58,700
>> Wet ek, DOM manipulation-- ons gaan
dadelik begin om koel dinge.

17
00:00:58,700 --> 00:01:01,240
Eerste van alles, aan die linkerkant, ons het kode.

18
00:01:01,240 --> 00:01:03,470
Aan die regterkant, ons het
die gevolg van ons kode.

19
00:01:03,470 --> 00:01:04,900
Kom ons gaan deur dit.

20
00:01:04,900 --> 00:01:05,780
>> Kom ons maak 'n sirkel.

21
00:01:05,780 --> 00:01:08,570
Hoe klink dit vir?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
Ons het net 'n sirkel.

23
00:01:14,934 --> 00:01:16,100
Jy my nie glo nie, reg?

24
00:01:16,100 --> 00:01:18,190
Dit is nie daar nie.

25
00:01:18,190 --> 00:01:21,830
>> So wat ons gedoen het reg hier is,
SVG is skaalbare vektorgrafika.

26
00:01:21,830 --> 00:01:27,530
Dit is die manier waarop ons vertel die leser te
maak vektorgrafika in die leser.

27
00:01:27,530 --> 00:01:30,740
Wat ons nou net gedoen het nou
bygevoeg 'n sirkel te blaai.

28
00:01:30,740 --> 00:01:34,790
>> Die belofte is dat die sirkel
vereis 'n bietjie van die basiese eienskappe

29
00:01:34,790 --> 00:01:36,850
voordat ons werklik kan sien nie.

30
00:01:36,850 --> 00:01:40,045
Ons het dit nodig om te vertel sy x posisie,
sy y posisie, sy radius.

31
00:01:40,045 --> 00:01:43,310
Ons het nie vertel dit enige van daardie,
sodat ons nie sien nie dit nou.

32
00:01:43,310 --> 00:01:46,210
Maar laat ons vertel dit goed.

33
00:01:46,210 --> 00:01:49,510
>> So die eerste van alles, het jy
ons kring te gee 'n naam.

34
00:01:49,510 --> 00:01:53,070
So kom ons noem dit sirkel.

35
00:01:53,070 --> 00:01:54,406
Ons sirkel het 'n naam nou.

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

37
00:01:57,230 --> 00:01:59,490
En laat ons gee dit 'n paar eienskappe.

38
00:01:59,490 --> 00:02:03,690
Hoe gaan cx sou sentrum x, so
die middel van die x posisie.

39
00:02:03,690 --> 00:02:06,730
Kom ons sê, 200 200 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Kom ons gee dit 'n y van 200 pixels as well.

41
00:02:10,220 --> 00:02:16,032
En 'n r, 'n radius van ongeveer 40 pixels.

42
00:02:16,032 --> 00:02:16,950
Kom ons kyk nou.

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

44
00:02:21,740 --> 00:02:23,440
Ek kan nie spel.

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

46
00:02:30,430 --> 00:02:31,520
>> Daar gaan jy.

47
00:02:31,520 --> 00:02:37,330
Ons het 'n sirkel by posisie 200
pixels, 200 pixels, radius van 40 pixels.

48
00:02:37,330 --> 00:02:38,280
Gaaf, reg?

49
00:02:38,280 --> 00:02:38,988
Ons het 'n sirkel.

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

51
00:02:40,880 --> 00:02:42,670
>> So nie nodig om saam te volg.

52
00:02:42,670 --> 00:02:45,790
Al hierdie voorbeelde, al
die kode wat ek vandag is besig

53
00:02:45,790 --> 00:02:51,300
sal aanlyn beskikbaar wees aan die einde
in die vorm van 'n interaktiewe voorbeelde

54
00:02:51,300 --> 00:02:54,010
met besoekpunte by
elke daad, en so aan.

55
00:02:54,010 --> 00:02:55,160
>> Kom ons doen meer dinge.

56
00:02:55,160 --> 00:02:58,901
Hierdie swart sirkel is regtig lelik.

57
00:02:58,901 --> 00:03:01,541
Ek is jammer vir die fout
boodskappe reg daar.

58
00:03:01,541 --> 00:03:05,340
Daar gaan ons.

59
00:03:05,340 --> 00:03:06,350
>> Kom ons gee dit 'n kleur.

60
00:03:06,350 --> 00:03:07,170
Hoe is dit?

61
00:03:07,170 --> 00:03:08,340
Ek hou van staal blou.

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

63
00:03:13,280 --> 00:03:16,030
Wel, ons kring van kleur verander.

64
00:03:16,030 --> 00:03:17,320
Dit is 'n groot.

65
00:03:17,320 --> 00:03:31,330
Kom ons maak dit semi-deursigtige
too-- semi-deursigtige.

66
00:03:31,330 --> 00:03:33,670
>> So dit is eienskappe
ons definieer op die sirkel.

67
00:03:33,670 --> 00:03:36,774
Die eerste ding wat ons gedoen het, is
ons het 'n kring afgetrek het op die bladsy.

68
00:03:36,774 --> 00:03:38,690
En dan is ons die definisie
'n klomp van die eienskappe.

69
00:03:38,690 --> 00:03:41,610
Sommige van hierdie vereis word,
soos CX, CY en radius.

70
00:03:41,610 --> 00:03:42,680
En die ander is opsioneel.

71
00:03:42,680 --> 00:03:44,730
>> Daar is 'n baie meer spesifieke eienskappe.

72
00:03:44,730 --> 00:03:46,760
Daar is 'n baie van hulle.

73
00:03:46,760 --> 00:03:53,070
Byvoorbeeld, kan ons 'n het
beroerte sowel, 'n slag van rooi.

74
00:03:53,070 --> 00:03:55,630
Maar laat ons verwyder dit.

75
00:03:55,630 --> 00:04:00,450
Ons is terug na 'n sirkel, 'n blou sirkel.

76
00:04:00,450 --> 00:04:01,600
>> So laat ons meer sirkels.

77
00:04:01,600 --> 00:04:02,810
Hoe is dit?

78
00:04:02,810 --> 00:04:04,665
Kom ons maak 'n ander sirkel.

79
00:04:04,665 --> 00:04:05,985
Dit is opwindend, reg?

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

81
00:04:09,630 --> 00:04:12,300
>> So sê Ek net kopieer-Geplak
wat ons reeds.

82
00:04:12,300 --> 00:04:13,570
Kom ons noem dit circle2.

83
00:04:13,570 --> 00:04:15,840
En laat ons doen om die presiese
dieselfde ding en gee dit

84
00:04:15,840 --> 00:04:20,450
eienskappe, gegewe 'n x posisie van 300.

85
00:04:20,450 --> 00:04:24,140
Yay, het ons twee sirkels nou.

86
00:04:24,140 --> 00:04:27,240
>> En natuurlik, ons kon
werk hierdie waardes.

87
00:04:27,240 --> 00:04:31,640
Ek kon dit sit op 400, en nou is dit beweeg.

88
00:04:31,640 --> 00:04:35,470
En aangesien dit irriterende, laat ons
verwyder dit, so circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Dit is nou weg.

91
00:04:40,730 --> 00:04:43,170
>> So wat ons doen en
is net baie, very-- hierdie

92
00:04:43,170 --> 00:04:46,030
is baie soortgelyk aan wat jy
kan doen in jQuery, byvoorbeeld.

93
00:04:46,030 --> 00:04:48,240
Ons is net te manipuleer
die DOM, is dit genoem.

94
00:04:48,240 --> 00:04:50,040
Jy kan die woord gehoor het nie.

95
00:04:50,040 --> 00:04:53,255
Ons is die skep van dinge, die opstel
eienskappe op dinge, die verwydering van dinge.

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

97
00:04:58,950 --> 00:05:02,360
>> Nou, hier is waar dit raak interessant.

98
00:05:02,360 --> 00:05:07,250
So later in die kode, kon ons nog
verwys na die oorspronklike sirkel hier.

99
00:05:07,250 --> 00:05:14,100
So laat herstel sy kenmerk te cx.

100
00:05:14,100 --> 00:05:18,260
Kom ons sê, sy x posisie tot 400.

101
00:05:18,260 --> 00:05:22,406
En ek gaan om die oorgang
dat, so dit is voor die hand liggend.

102
00:05:22,406 --> 00:05:23,360
Daar gaan ons.

103
00:05:23,360 --> 00:05:24,780
>> So ons het 'n sirkel.

104
00:05:24,780 --> 00:05:26,440
Ons stel 'n paar eienskappe.

105
00:05:26,440 --> 00:05:28,210
Ons het nog 'n sirkel, verwyder dit.

106
00:05:28,210 --> 00:05:31,650
En dan is ons die wysiging
die oorspronklike sirkel.

107
00:05:31,650 --> 00:05:35,400
>> Maar hier is waar dit raak
'n baie meer interessant.

108
00:05:35,400 --> 00:05:39,070
Nie net kan ons stel eienskappe
as net waardes, kan ons sê,

109
00:05:39,070 --> 00:05:41,610
hey, sirkel, gaan na posisioneer 200.

110
00:05:41,610 --> 00:05:44,540
Ons kan ook hulle as funksies.

111
00:05:44,540 --> 00:05:48,850
>> So in plaas van die gee van 400 hier,
ons kan 'n paar berekening maak

112
00:05:48,850 --> 00:05:53,950
op die vlieg vir dit wat ons
wil hê dat die eienskap te wees.

113
00:05:53,950 --> 00:05:56,580
So dit is hoe jy wil uitspreek nie.

114
00:05:56,580 --> 00:06:00,660
Ons sê, in plaas van 400, laat my
gee jou 'n funksie in plaas.

115
00:06:00,660 --> 00:06:04,180
En hier, binne hierdie funksie,
ons kan enige gek berekening maak.

116
00:06:04,180 --> 00:06:06,820
>> Ons kon die tyd neem en
kyk na 'n paar ander ding

117
00:06:06,820 --> 00:06:11,230
en dinamiese besluit
die sirkel wat die waarde wat ons wil.

118
00:06:11,230 --> 00:06:15,266
Hoe gaan ons net gee
dit 'n ewekansige x posisie?

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

120
00:06:20,360 --> 00:06:21,120
So dit is wat.

121
00:06:21,120 --> 00:06:25,490
>> So wat dit sê, is vir
elke x, hardloop hierdie funksie.

122
00:06:25,490 --> 00:06:29,340
En wat ons doen, is die berekening van
'n paar dinge, 'n ewekansige keer die breedte

123
00:06:29,340 --> 00:06:30,410
en terugkeer nie.

124
00:06:30,410 --> 00:06:34,765
So elke keer as ons hardloop dat ons 'n
sirkel wat gaan na 'n ewekansige plek.

125
00:06:34,765 --> 00:06:36,394
Dit is soort van cool.

126
00:06:36,394 --> 00:06:38,310
Ek voel soos ek kan kyk
op hierdie vir 'n bietjie.

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

128
00:06:44,274 --> 00:06:46,440
Ons is besig om te kry om
iets interessant hier.

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

130
00:06:49,120 --> 00:06:51,390
Kom ons maak hierdie data nou gedryf.

131
00:06:51,390 --> 00:06:53,420
Daar is geen data hier.

132
00:06:53,420 --> 00:06:54,482
Kom ons verander.

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

134
00:06:57,440 --> 00:07:12,140
>> Wet II, data-gedrewe Documents--
So laat ons terugkeer na hier.

135
00:07:12,140 --> 00:07:15,340
En laat ons net ontslae te raak van circle2,
want ons is maar net toe te voeg en die verwydering van

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

137
00:07:15,840 --> 00:07:17,382
Sodat ons nie regtig nodig het nie is dit.

138
00:07:17,382 --> 00:07:21,421
Ons moet 'n baie meer slim hier.

139
00:07:21,421 --> 00:07:23,170
Kom ons sê, ons het
sommige data van 'n soort.

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

141
00:07:31,540 --> 00:07:40,020
Een moment-- kom ons sê,
ons het data van hierdie vorm.

142
00:07:40,020 --> 00:07:41,800
Ons het 'n skikking, net
'n klomp van die nommers.

143
00:07:41,800 --> 00:07:45,750
Ons het sewe nommers hier,
wat hierdie represent-- bedrag

144
00:07:45,750 --> 00:07:48,810
in mense se bankrekening, hoe
veel weeg, god weet wat.

145
00:07:48,810 --> 00:07:51,310
>> Hierdie is getalle, en ons
wil ons sirkels te gebruik

146
00:07:51,310 --> 00:07:53,240
dié nommers te verteenwoordig een of ander manier.

147
00:07:53,240 --> 00:07:55,515
Ons wil om te bind ons
kringe aan diegene getalle.

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

149
00:07:58,750 --> 00:07:59,626
So wat ons doen.

150
00:07:59,626 --> 00:08:01,500
Kom ons sê, ons wil 'n
sirkel vir elke nommer.

151
00:08:01,500 --> 00:08:03,590
Ons kon die ou doen
ding ons doing--

152
00:08:03,590 --> 00:08:06,020
sirkel aanlas en circle2 en circle3.

153
00:08:06,020 --> 00:08:10,020
Maar dit handuit ruk, en
daar is 'n baie van die logika te herhaal.

154
00:08:10,020 --> 00:08:12,760
>> So laat ons kry meer slim met dit.

155
00:08:12,760 --> 00:08:17,810
In plaas van die gebruik van die var sirkel
svg.append dat ons net gebruik het,

156
00:08:17,810 --> 00:08:21,580
ons gaan gebruik
hierdie klein blok hier.

157
00:08:21,580 --> 00:08:24,510
Ek wil nie te gaan in-diepte
in wat al hierdie dele nie.

158
00:08:24,510 --> 00:08:26,020
En dit is soort van 'n gevorderde onderwerp.

159
00:08:26,020 --> 00:08:27,830
En ek wens ek kon.

160
00:08:27,830 --> 00:08:31,370
>> Maar die belangrikste ding om te recognize-- en
jy sal sien is baie dikwels in D3 kode.

161
00:08:31,370 --> 00:08:36,840
Hierdie teks blok basiese
skep as baie kringe

162
00:08:36,840 --> 00:08:41,360
want daar is data-elemente
in hierdie reeks hier.

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

164
00:08:53,420 --> 00:08:55,780
So dit skep soveel
kringe as daar is elemente.

165
00:08:55,780 --> 00:08:58,520
Dit gaan ons sewe sirkels te skep.

166
00:08:58,520 --> 00:09:01,710
En is dit nie 'n baie, baie belangrike ding.

167
00:09:01,710 --> 00:09:02,460
So laat loop nie.

168
00:09:02,460 --> 00:09:05,460
Kom ons verwyder ons ander sirkel.

169
00:09:05,460 --> 00:09:09,565
Laat ons net kommentaar lewer hierdie
deel uit en hardloop dit weer.

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

171
00:09:13,840 --> 00:09:15,260
>> Daar gaan ons.

172
00:09:15,260 --> 00:09:18,030
So ons kring hier is 'n
baie donkerder, want ons

173
00:09:18,030 --> 00:09:20,720
het sewe sirkels, een
op die top van die ander.

174
00:09:20,720 --> 00:09:25,425
Ons het net sewe sirkels, een geskep
elk vir elk van hierdie data-elemente.

175
00:09:25,425 --> 00:09:28,860
Maar daar is 'n belangrike ding wat gebeur het
met hierdie brokkie hier.

176
00:09:28,860 --> 00:09:31,030
>> Dit is dat die data is gebind.

177
00:09:31,030 --> 00:09:33,440
So elke enkele een van
diegene data-elemente,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, was gebonde
aan 'n spesifieke sirkel.

179
00:09:38,830 --> 00:09:40,960
So het hierdie nie net geskep
'n klomp van die sirkels

180
00:09:40,960 --> 00:09:43,420
maar bind die twee dinge saam.

181
00:09:43,420 --> 00:09:48,740
>> En in die toekoms, want ons geskep
daardie kringe met hierdie D3 funksie,

182
00:09:48,740 --> 00:09:52,430
as ek vir jou 'n sirkel, kan jy
gee my die data wat verband hou met dit.

183
00:09:52,430 --> 00:09:53,280
So ons kan vra D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, ek het hierdie sirkel.

185
00:09:54,840 --> 00:09:57,350
Wat is die data wat die sirkel het?

186
00:09:57,350 --> 00:10:01,290
En D3 sal vertel ons 10 of 45 of 105.

187
00:10:01,290 --> 00:10:02,380
>> Hierdie dinge is gebind.

188
00:10:02,380 --> 00:10:04,490
Dit is 'n baie, baie fundamentele konsep.

189
00:10:04,490 --> 00:10:06,070
Kom ons kyk na dit.

190
00:10:06,070 --> 00:10:12,210
>> So het die manier waarop ons wil vra D3-- so
dit is irrelevant vir hierdie,

191
00:10:12,210 --> 00:10:16,620
maar net vertrou my op dit.

192
00:10:16,620 --> 00:10:17,620
Dit is hoe ons vra D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, gee my die eerste
sirkel wat jy kan vind.

194
00:10:21,312 --> 00:10:23,580
Gee my die eerste sirkel wat jy kan vind.

195
00:10:23,580 --> 00:10:29,660
En dan kan ons D3 vra, wat is
die data op daardie, soos hierdie, 10.

196
00:10:29,660 --> 00:10:33,380
>> So het ons net vra D3, vind my
die eerste sirkel wat jy kan vind.

197
00:10:33,380 --> 00:10:34,400
Wat is die data?

198
00:10:34,400 --> 00:10:36,650
10, dit is inderdaad ons
eerste data element.

199
00:10:36,650 --> 00:10:42,150
Ons kan dit vra, hey, D3,
vind ons die derde sirkel.

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

201
00:10:44,450 --> 00:10:45,740
Hoekom is dit regtig belangrik?

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

203
00:10:49,790 --> 00:10:52,250
>> So reg hier, ek genoem
wat ons kan gebruik funksies.

204
00:10:52,250 --> 00:10:54,910
En ek het gesê dat was
'n baie kragtige ding.

205
00:10:54,910 --> 00:11:03,070
So nie net kan ons funksies doen dinge
soos sommige berekening, byvoorbeeld,

206
00:11:03,070 --> 00:11:09,170
terugkeer om 'n ewekansige getal, kan dit
doen ook dinge wat gebaseer is op die data.

207
00:11:09,170 --> 00:11:11,550
Dit is wat data-gedrewe dokumente beteken.

208
00:11:11,550 --> 00:11:13,750
Dit is wat D3 staan.

209
00:11:13,750 --> 00:11:17,800
>> So hierdie x postition-- plaas
om net te sê, al die sirkels,

210
00:11:17,800 --> 00:11:21,735
kry x posisie 200, ons
kon gee dit 'n funksie.

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

212
00:11:26,140 --> 00:11:30,140
En hier, kan ons 'n paar berekening maak.

213
00:11:30,140 --> 00:11:33,710
en d hier staan ​​in die plek van die data.

214
00:11:33,710 --> 00:11:36,120
So elke keer as ons '
'n sirkel, basies,

215
00:11:36,120 --> 00:11:37,750
D3 sal hierdie sewe sirkels skep.

216
00:11:37,750 --> 00:11:38,500
En dan vir elke

217
00:11:38,500 --> 00:11:41,920
>> sirkel, dit gaan om te gaan, hey,
circle1 wat is jou x posisie.

218
00:11:41,920 --> 00:11:45,210
Voorheen was ons
altyd beantwoord 200.

219
00:11:45,210 --> 00:11:48,630
Maar nou, elke keer D3 vra
ons wat is jou x posisie,

220
00:11:48,630 --> 00:11:51,790
dit gaan om te gee us-- ons
daardie sirkel, so ons het die data.

221
00:11:51,790 --> 00:11:55,290
Dit gaan om ons te gee die data en sê:
wat wil jy die uiteensetting te wees,

222
00:11:55,290 --> 00:11:57,120
gebaseer op die data.

223
00:11:57,120 --> 00:11:59,590
>> Laat ons net die standaard van die werklike data.

224
00:11:59,590 --> 00:12:04,910
So as ons hardloop dit, dit gee
ons data gedrewe dokumente.

225
00:12:04,910 --> 00:12:08,040
Hierdie kringe is gebaseer
in verhouding position--

226
00:12:08,040 --> 00:12:11,120
hulle is basisse as 'n funksie van die data.

227
00:12:11,120 --> 00:12:13,100
>> So vir die eerste sirkel,
D3 sit 'n sirkel.

228
00:12:13,100 --> 00:12:16,770
En dan D3 ons vra, wat doen
jy wil die uiteensetting te wees.

229
00:12:16,770 --> 00:12:19,620
En ons net sê, ongeag die data is.

230
00:12:19,620 --> 00:12:21,185
Maak die uiteensetting 10.

231
00:12:21,185 --> 00:12:26,320
>> Dan vra dit, doen wat jy wil hê dat die
uiteensetting te wees vir die tweede sirkel.

232
00:12:26,320 --> 00:12:27,270
En ons antwoord, 45.

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

234
00:12:30,000 --> 00:12:32,230
En ons, natuurlik, kan
maak 'n paar berekening hier.

235
00:12:32,230 --> 00:12:35,510
Ek vind dat die sirkels
is soort van squished up.

236
00:12:35,510 --> 00:12:38,965
>> So vermenigvuldig dit met 3, data vermenigvuldig met 3.

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

238
00:12:41,870 --> 00:12:43,840
Ons sirkel het net uitgebrei word.

239
00:12:43,840 --> 00:12:46,730
Ons waarde is verdriedubbel.

240
00:12:46,730 --> 00:12:51,010
>> Die sirkel is regtig op die rand,
so laat ons miskien soort verreken nie.

241
00:12:51,010 --> 00:12:53,632
Kom ons sê, met 20.

242
00:12:53,632 --> 00:12:56,070
Hier gaan jy.

243
00:12:56,070 --> 00:12:57,590
>> Dit is 'n data visualisering.

244
00:12:57,590 --> 00:13:01,767
Dit is 'n baie basiese een, maar dit
gee ons 'n insig in ons data.

245
00:13:01,767 --> 00:13:04,600
Dit vertel ons dat, byvoorbeeld, ons
'n bietjie cluster elemente.

246
00:13:04,600 --> 00:13:06,340
En ons het 'n groot uitskieter hier.

247
00:13:06,340 --> 00:13:10,830
Dit gee ons 'n paar inligting
oor die verspreiding.

248
00:13:10,830 --> 00:13:20,830
>> As ons, byvoorbeeld, te verander
die data te 150 hier en verfris,

249
00:13:20,830 --> 00:13:22,630
ons visualisering verander.

250
00:13:22,630 --> 00:13:24,285
Hierdie dokument is data gedrewe.

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

252
00:13:32,640 --> 00:13:36,180
>> So natuurlik, al hierdie elemente,
Al hierdie eienskappe hier,

253
00:13:36,180 --> 00:13:38,430
ons kan 'n funksie te gebruik, nie
net die getalle, nie net

254
00:13:38,430 --> 00:13:39,900
die x en y posisies.

255
00:13:39,900 --> 00:13:42,120
So kan ons 'n funksie gebruik vir die kleur.

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

257
00:13:45,260 --> 00:13:46,360
So sal ons dieselfde doen.

258
00:13:46,360 --> 00:13:49,360
Ons sal dit gee 'n funksie.

259
00:13:49,360 --> 00:13:52,320
>> En laat ons sê, ons kan hê
conditionals in ons funksie.

260
00:13:52,320 --> 00:13:54,770
Hierdie funksie kan wees
honderd lyne lang.

261
00:13:54,770 --> 00:13:57,150
Dit kan doen baie, baie ingewikkelde dinge.

262
00:13:57,150 --> 00:13:59,080
>> Kom ons stel 'n IF-stelling hier.

263
00:13:59,080 --> 00:14:03,420
Kom ons sê, as ons data is minder
as 50, wat is 'n paar drumpel

264
00:14:03,420 --> 00:14:05,817
wat ons interesseer
in een of ander rede.

265
00:14:05,817 --> 00:14:06,650
Kom ons maak dit groen.

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

267
00:14:09,830 --> 00:14:15,320
Anders, kom ons maak dit rooi.

268
00:14:15,320 --> 00:14:16,110
Hoe is dit?

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
>> So ons data visualisering begin
meer interessante inligting oor te dra

272
00:14:24,860 --> 00:14:26,727
op baie kanale.

273
00:14:26,727 --> 00:14:28,560
So nou weet ons 'n bietjie
oor die verspreiding.

274
00:14:28,560 --> 00:14:31,768
En ons weet dat daar is 'n soort van
afgesny teen 50 dat ons belangstel.

275
00:14:31,768 --> 00:14:35,630
Ons weet dat daar twee data punte
hieronder wat drumpel en die meeste van hulle

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

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

278
00:14:41,510 --> 00:14:46,160
>> So as 'n finale stap, hierdie data hier,
dit is baie skaars om te sien soos dit.

279
00:14:46,160 --> 00:14:52,610
So laat ons net beweeg dit uit na 'n veranderlike
want dit is skoner, soos hierdie.

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

281
00:15:02,980 --> 00:15:05,197
En dan gebruik ons ​​dat veranderlike hier.

282
00:15:05,197 --> 00:15:06,280
Dit is presies dieselfde ding.

283
00:15:06,280 --> 00:15:07,280
Dit is net 'n bietjie skoner.

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

285
00:15:25,300 --> 00:15:35,300
>> Volgende op, Wet III, Scales--
So een probleem reg

286
00:15:35,300 --> 00:15:38,920
hier is, as ons verander ons
data in hierdie 200 value--

287
00:15:38,920 --> 00:15:41,685
as ons verander dit na 400
of iets en verfris,

288
00:15:41,685 --> 00:15:44,540
Dan is hierdie waarde net agter skerm het.

289
00:15:44,540 --> 00:15:49,040
So ons logika hier
van hoe ons dit doen die keer 3

290
00:15:49,040 --> 00:15:52,570
en 20, om dit te versprei en dan
verreken dit 'n bietjie is regtig clunky.

291
00:15:52,570 --> 00:15:54,150
>> Wat beteken die getalle nie?

292
00:15:54,150 --> 00:15:55,400
Hulle is maar net hard gekodeer daar.

293
00:15:55,400 --> 00:15:58,830
En hulle is baie wat gekoppel is aan die data.

294
00:15:58,830 --> 00:16:00,550
Ons wil 'n data-gedrewe dokument.

295
00:16:00,550 --> 00:16:05,460
Ons wil 'n baie buigsame dokument,
dat gegewe data, pas dit

296
00:16:05,460 --> 00:16:07,900
en verteenwoordig nie.

297
00:16:07,900 --> 00:16:11,330
>> Wat ons nodig het, is basies, ons
het hierdie reeks van getalle 10.

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

299
00:16:12,640 --> 00:16:17,630
En ons wil dit uit te stippel op
die breedte, die volle wydte hier.

300
00:16:17,630 --> 00:16:20,620
So het ons die reeks
getalle gaan van 0 tot 100.

301
00:16:20,620 --> 00:16:24,980
En ons het hierdie kampus ek gaan
20-700, in hierdie geval.

302
00:16:24,980 --> 00:16:26,515
>> Ons soort van wil dit karteer op.

303
00:16:26,515 --> 00:16:30,002
Ons wil om dit te skaal en
dan geneutraliseer dit 'n bietjie.

304
00:16:30,002 --> 00:16:33,165
Dit blyk dat die D3 het hierdie.

305
00:16:33,165 --> 00:16:34,220
Dit is bekend as 'n skaal.

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

307
00:16:37,410 --> 00:16:38,250
So laat ons dit gebruik.

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

309
00:16:46,300 --> 00:16:49,670
>> Die manier waarop works-- ek gaan
tik en verduidelik dit dan.

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

311
00:17:01,530 --> 00:17:02,450
Dit is 'n skaal.

312
00:17:02,450 --> 00:17:08,670
Wat sal dit doen is nie, sal dit die kaart uit
waarde van 1 tot 200 aan te 20-600.

313
00:17:08,670 --> 00:17:10,990
Ons kan seker maak dat.

314
00:17:10,990 --> 00:17:13,329
Ons kan sien dat hier.

315
00:17:13,329 --> 00:17:21,704
>> So as ek voer dit 1-- een oomblik.

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

317
00:17:47,764 --> 00:17:48,555
Gee my 'n sekonde.

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

319
00:17:53,680 --> 00:17:55,080
Ek moet verkeerd gespel het nie.

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

321
00:18:15,320 --> 00:18:15,990
Daar gaan jy.

322
00:18:15,990 --> 00:18:17,930
Ek is jammer daaroor.

323
00:18:17,930 --> 00:18:22,050
>> So, wat 'n skaal sal doen
word, sal dit 'n waarde aanneem

324
00:18:22,050 --> 00:18:24,930
en dan sit dat,
brei dat uit, so dit

325
00:18:24,930 --> 00:18:27,320
vul die volle omvang jy vra vir.

326
00:18:27,320 --> 00:18:32,910
So in hierdie geval, as ons dit een gee,
dit gaan om dit te karteer op 20.

327
00:18:32,910 --> 00:18:37,750
En as ons dit gee 200, dit is
gaan dit karteer op 600.

328
00:18:37,750 --> 00:18:40,460
En iewers tussen in,
as ons kry 100, dit is

329
00:18:40,460 --> 00:18:44,610
iewers gaan wees
tussen 20 en 600.

330
00:18:44,610 --> 00:18:51,480
>> En natuurlik, dit is nou wat
ons moet die harde gecodeerde te verwyder

331
00:18:51,480 --> 00:18:53,402
dinge wat ons het net daar.

332
00:18:53,402 --> 00:18:55,950
So wat ons wil doen, is
neem die data wat ons is

333
00:18:55,950 --> 00:19:00,950
gegee dat individuele data
element, en gee dit aan die eerste skaal.

334
00:19:00,950 --> 00:19:02,635
So skaal sal skaal dit.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- O, ons het 'n bietjie fout hier.

337
00:19:48,880 --> 00:19:50,120
Ons ontbreek data.

338
00:19:50,120 --> 00:19:51,290
Daar gaan jy.

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

340
00:19:58,550 --> 00:19:59,550
En dat groei dit uit.

341
00:19:59,550 --> 00:20:01,383
>> Dit gee ons dieselfde
resultaat wat ons gehad het voordat,

342
00:20:01,383 --> 00:20:04,030
maar in plaas van om die
hard gekodeer beperkings.

343
00:20:04,030 --> 00:20:07,790
En as die grootte van ons
doek veranderinge, byvoorbeeld,

344
00:20:07,790 --> 00:20:11,790
As ons wil dit oor te hê
400 pixels en dit squishes uit,

345
00:20:11,790 --> 00:20:15,440
ons kan dit over--
ons kan dit uit te brei, of ons

346
00:20:15,440 --> 00:20:21,890
kan hierdie linkerkantlyn verminder
iets meer of minder as 20.

347
00:20:21,890 --> 00:20:25,470
Hierdie getalle is hierdie harde gekodeerde
getalle sin maak nou vir ons.

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

349
00:20:28,110 --> 00:20:30,520
>> En ons kon 'n baie meer te doen
interessante dinge so goed.

350
00:20:30,520 --> 00:20:35,990
So in plaas van 'n lineêre
skaal, kan ons wil 'n skaal aan te meld.

351
00:20:35,990 --> 00:20:37,840
En dit sal vir ons 'n log-skaal.

352
00:20:37,840 --> 00:20:41,269
>> So nou is ons skaal, in plaas van
net uit te brei uit die reeks,

353
00:20:41,269 --> 00:20:42,810
dit doen meer gesofistikeerde dinge.

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

355
00:20:48,790 --> 00:20:53,790
In plaas van om hierdie reeks hard
gekodeerde, en in plaas van om dit 600,

356
00:20:53,790 --> 00:20:58,465
ons wil dalk net gebruik die breedte,
so van 20 tot die breedte minus 40,

357
00:20:58,465 --> 00:21:02,392
2 keer die kantlyn aan die ander kant.

358
00:21:02,392 --> 00:21:05,350
En dit maak 'n baie meer sin om
iemand wat kan kyk na die kode.

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

360
00:21:08,080 --> 00:21:11,850
>> Interessant genoeg, die skale kry
baie, baie gesofistikeerd as well.

361
00:21:11,850 --> 00:21:13,350
Hulle doen 'n baie interessante dinge.

362
00:21:13,350 --> 00:21:17,620
So skale het nie noodwendig
te bedryf net met getalle.

363
00:21:17,620 --> 00:21:18,955
Kom ons maak 'n kleur skaal.

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

365
00:21:23,120 --> 00:21:26,120
>> So ons reeks kon be--
ons domein is 1-200.

366
00:21:26,120 --> 00:21:28,220
Dit is die insette ding.

367
00:21:28,220 --> 00:21:33,793
Maar ons wil dalk te karteer uit
groen na rooi, byvoorbeeld.

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

369
00:21:39,710 --> 00:21:42,910
En nou, as ons dit 1 slaag,
ons gaan groen te kry.

370
00:21:42,910 --> 00:21:45,110
As ons gee dit 200, sal ons kry rooi.

371
00:21:45,110 --> 00:21:49,480
En as ons dit slaag iets tussen,
dit gaan 'n paar mengsel van te wees nie,

372
00:21:49,480 --> 00:21:52,520
iewers op die helling
tussen groen en rooi.

373
00:21:52,520 --> 00:21:55,210
>> En in plaas van om
hierdie soort van clunky logika

374
00:21:55,210 --> 00:21:58,550
ons het hier met die
voorwaardelike reg daar,

375
00:21:58,550 --> 00:22:03,250
Ons kon something-- n
lineêre skaal tussen diegene.

376
00:22:03,250 --> 00:22:07,100
So ons wil die skaal gebruik ons ​​net
geskep, wat ons geroep kleur.

377
00:22:07,100 --> 00:22:09,060
En ons wil dit gee D, wat
is ons data element.

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

379
00:22:14,250 --> 00:22:15,060
En daar gaan ons.

380
00:22:15,060 --> 00:22:18,070
Ons het 'n kleur skaal.

381
00:22:18,070 --> 00:22:18,940
>> So, dit is kartering.

382
00:22:18,940 --> 00:22:20,960
So het die ver links is heeltemal groen.

383
00:22:20,960 --> 00:22:22,560
Die heel regs is heeltemal rooi.

384
00:22:22,560 --> 00:22:24,828
En alles tussen in
is 'n funksie van d.

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

386
00:22:33,369 --> 00:22:35,160
Ons het 'n interessante
visualisaties hier.

387
00:22:35,160 --> 00:22:36,952
Maar ons data was soort van vervelig.

388
00:22:36,952 --> 00:22:39,410
Kom ons kyk wat ons kan doen as
ons het meer interessant data.

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

390
00:22:44,420 --> 00:22:50,500
>> Wet IV, in samewerking met
Data-- die eerste ding

391
00:22:50,500 --> 00:22:53,560
ons sal wil doen om ons
visualisering meer interessant

392
00:22:53,560 --> 00:22:56,140
is om die data te iewers anders te beweeg.

393
00:22:56,140 --> 00:22:58,310
Dit is baie clunky te hê
die data hard hier gekodeer.

394
00:22:58,310 --> 00:23:01,220
En in die algemeen, sal ons wees vra
iemand anders vir die data.

395
00:23:01,220 --> 00:23:05,400
Ons sal miskien vra die regering,
die Census Bureau, wat is jou data

396
00:23:05,400 --> 00:23:10,170
en dan die plot wat of vra
sommige derde party entiteit vir sommige data

397
00:23:10,170 --> 00:23:13,330
en dan die bou van 'n
visualisering op daardie.

398
00:23:13,330 --> 00:23:17,170
>> So die eerste ding wat ons wil doen,
is beweeg dat iewers anders.

399
00:23:17,170 --> 00:23:24,130
So ek gaan 'n te skep
lêer hier genoem data.json.

400
00:23:24,130 --> 00:23:25,600
Into is die data-formaat.

401
00:23:25,600 --> 00:23:29,210
Jy het nie veel oor wat om te weet.

402
00:23:29,210 --> 00:23:33,210
En ons gaan die te kopieer
min data wat ons het daar,

403
00:23:33,210 --> 00:23:40,330
plak dit in daar woordeliks, gaan
terug na ons visualisering kode

404
00:23:40,330 --> 00:23:45,362
hier, en gebruik hierdie funksie reg hier.

405
00:23:45,362 --> 00:23:46,820
Jy het nie die besonderhede te ken.

406
00:23:46,820 --> 00:23:49,800
Maar wat dit sal doen, is,
dit sal vind dat lêer,

407
00:23:49,800 --> 00:23:51,780
haal dit, en stuur dit aan ons.

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

409
00:24:11,660 --> 00:24:15,220
So, wat dit beteken is, gaan dit
en kry die data.json lêer.

410
00:24:15,220 --> 00:24:18,570
En dan sal al die kode wat
ingekeep inside-- wese,

411
00:24:18,570 --> 00:24:21,800
al die kode wat ons het there-- sal
hardloop net wanneer ons die data terug.

412
00:24:21,800 --> 00:24:25,760
En dan gaan dit wat om te hardloop
kode met die data wat ons het.

413
00:24:25,760 --> 00:24:28,870
Groot, ons het 'n
visualisering dat navrae

414
00:24:28,870 --> 00:24:31,390
vir 'n paar kode iewers
anders, wat gewoonlik

415
00:24:31,390 --> 00:24:36,110
waar dit bevraagteken sommige data van
iewers anders, wat gewoonlik

416
00:24:36,110 --> 00:24:38,656
hoe visualisaties werk.

417
00:24:38,656 --> 00:24:41,400
>> Maar ek wil om terug te gaan na die data.

418
00:24:41,400 --> 00:24:48,030
So die data fundamenteel in D3-- D3
verbruik data dit is 'n lys van die dinge.

419
00:24:48,030 --> 00:24:53,000
D3 verwag dat die data net 'n lys
van dinge, 'n verskeidenheid van dinge.

420
00:24:53,000 --> 00:24:58,780
Dit maak nie saak wat die dinge
is, so lank as wat dit is 'n verskeidenheid van hulle.

421
00:24:58,780 --> 00:25:02,460
>> So hier, byvoorbeeld, kon ons van
Natuurlik het drywende punt waardes.

422
00:25:02,460 --> 00:25:04,830
Ons kon negatiewe.

423
00:25:04,830 --> 00:25:09,400
D3 nie sorg nie, so lank
as dit is 'n lys van dinge.

424
00:25:09,400 --> 00:25:13,270
>> As interessante dinge wat ons
kan hê, kan ons ook

425
00:25:13,270 --> 00:25:19,410
'n lys van stringe soos dit.

426
00:25:19,410 --> 00:25:25,440
So dit is die Crimson nuus
Ek opgetel het 'n paar dae gelede.

427
00:25:25,440 --> 00:25:29,220
En miskien kan jy 'n paar interessante vind
dinge oor hierdie 'n nuus.

428
00:25:29,220 --> 00:25:30,970
>> So weer, dit is 'n lys van die dinge.

429
00:25:30,970 --> 00:25:32,360
D3 nie omgee nie.

430
00:25:32,360 --> 00:25:35,572
Hierdie toevallig 'n string te wees.

431
00:25:35,572 --> 00:25:36,530
Ons het ons data verander.

432
00:25:36,530 --> 00:25:38,210
>> Kom ons keer terug na ons visualisering.

433
00:25:38,210 --> 00:25:42,495
Nou, ons visualisering verwag
die insette getalle te wees.

434
00:25:42,495 --> 00:25:44,370
So ons gaan te hê
'n paar veranderinge aan te bring.

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

436
00:25:47,180 --> 00:25:52,180
So byvoorbeeld, die eerste van alles, miskien
ons wil hierdie sirkels om saam te sit

437
00:25:52,180 --> 00:25:56,870
deur die lengte van die kop, die
aantal karakters in die kop.

438
00:25:56,870 --> 00:26:03,600
>> So, wat ons sal doen is-- elke keer ons
funksie geroep met 'n string,

439
00:26:03,600 --> 00:26:09,095
ons sal vind dit is die lengte en
dan slaag om te skaal.

440
00:26:09,095 --> 00:26:11,550
Die kleur is, sal ek terug
wat aan staal blou.

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

442
00:26:19,060 --> 00:26:20,420
En daar gaan ons.

443
00:26:20,420 --> 00:26:23,190
Ons het 'n visualisering
van Crimson nuus.

444
00:26:23,190 --> 00:26:25,500
>> Ons skaal is 'n bietjie af.

445
00:26:25,500 --> 00:26:29,680
Kom ons veronderstel dat die langste
kop is 100 karakters lank,

446
00:26:29,680 --> 00:26:32,244
so span wat uit 'n bietjie.

447
00:26:32,244 --> 00:26:33,410
En ons het 'n visualisering.

448
00:26:33,410 --> 00:26:36,710
Dus blyk dit dat die meeste nuus
is redelik naby aan mekaar,

449
00:26:36,710 --> 00:26:38,750
in terme van karakter lyn.

450
00:26:38,750 --> 00:26:41,200
Maar 'n mens daar staan ​​regtig uit.

451
00:26:41,200 --> 00:26:46,660
>> Ons kon bou sommige gereedskap
te verken dat meer.

452
00:26:46,660 --> 00:26:50,710
Maar toe ek besig was op hierdie, ek was
nuuskierig of, in hierdie datastel,

453
00:26:50,710 --> 00:26:53,880
nuus met 'n kolon
in hulle sal langer wees.

454
00:26:53,880 --> 00:26:55,770
Ek aanvaar hulle wou hê.

455
00:26:55,770 --> 00:26:56,660
>> So laat ons uit te vind.

456
00:26:56,660 --> 00:27:00,650
Kom ons gebruik die kleur
kanaal soos ons gedoen het voor,

457
00:27:00,650 --> 00:27:04,540
sommige oor of te enkodeer
daar is 'n kolon of geen.

458
00:27:04,540 --> 00:27:07,220
So sal ons 'n voorwaardelike gebruik weer.

459
00:27:07,220 --> 00:27:09,350
Jy hoef nie te weet
die besonderhede van hierdie,

460
00:27:09,350 --> 00:27:14,260
maar dit is hoe ons dit gaan 'n
string vir 'n spesifieke karakter

461
00:27:14,260 --> 00:27:16,355
in JavaScript, weer, nie relevant.

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

463
00:27:18,910 --> 00:27:23,270
>> Maar as ons nie vind nie 'n
kolon, sal ons terugkeer groen.

464
00:27:23,270 --> 00:27:26,100
En as ons dit doen, sal ons terugkeer rooi.

465
00:27:26,100 --> 00:27:29,010
So weer, hoofde wat
het 'n kolon sal rooi wees.

466
00:27:29,010 --> 00:27:34,980
Dit is wat hierdie means-- nice.

467
00:27:34,980 --> 00:27:38,040
>> Dus blyk dit dat my
hipotese word gestamp.

468
00:27:38,040 --> 00:27:39,360
Daar is slegs twee.

469
00:27:39,360 --> 00:27:42,380
Ons het net ses datapunte
en slegs twee dubbelpunte het.

470
00:27:42,380 --> 00:27:45,510
Maar dit lyk 'n bietjie meer
op die onderste end, in werklikheid.

471
00:27:45,510 --> 00:27:47,830
Nuus met dubbelpunte lyk
om oor die algemeen korter,

472
00:27:47,830 --> 00:27:52,370
ten minste in ons data set-- interessant.

473
00:27:52,370 --> 00:27:55,830
>> Kom ons keer terug wat aan
staal blou en dan sien

474
00:27:55,830 --> 00:28:00,601
wat ons kan maak met selfs
meer interessant data.

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

476
00:28:04,370 --> 00:28:09,070
So weer, ek het genoem dat
data in D3 is 'n lys van die dinge.

477
00:28:09,070 --> 00:28:11,080
Ons het gesien hoe getalle van baie tipes.

478
00:28:11,080 --> 00:28:12,810
Ons het gesien hoe snare.

479
00:28:12,810 --> 00:28:15,700
Maar die dinge kan ook voorwerpe.

480
00:28:15,700 --> 00:28:20,080
>> Hulle kan ingewikkeld dinge
wat insluit 'n baie van die dinge.

481
00:28:20,080 --> 00:28:24,510
Om te sê dat meer duidelik,
in die meeste gevalle, ons

482
00:28:24,510 --> 00:28:28,384
wil elke data punt te bou as
meer ingewikkeld as net een waarde.

483
00:28:28,384 --> 00:28:30,175
As jy dink 'n
databasis oor studente,

484
00:28:30,175 --> 00:28:32,470
daar dalk 'n student
noem, 'n student ID,

485
00:28:32,470 --> 00:28:36,370
en 'n baie van die dinge wat verband hou
met 'n bepaalde rekord,

486
00:28:36,370 --> 00:28:39,834
nie net 'n tou of 'n nommer.

487
00:28:39,834 --> 00:28:40,750
So laat ons kyk na dit.

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

489
00:28:55,180 --> 00:28:56,760
>> Dit is een so 'n stel data.

490
00:28:56,760 --> 00:28:59,090
Dit is 'n stel data oor aardbewings.

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

492
00:29:01,910 --> 00:29:08,430
So alles hier op ons lys of skikking
van die dinge wat bevat baie dinge self.

493
00:29:08,430 --> 00:29:11,380
So elke data punt het 'n
grootte en 'n koördineer.

494
00:29:11,380 --> 00:29:13,425
En koördineer hulself
bevat twee dinge.

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

496
00:29:15,960 --> 00:29:20,450
>> So elke dag is nou 'n baie meer
ingewikkeld en 'n baie meer interessant

497
00:29:20,450 --> 00:29:22,700
en bevat baie meer
interessante inligting.

498
00:29:22,700 --> 00:29:26,730
Kom ons kyk wat ons kan bou uit daardie.

499
00:29:26,730 --> 00:29:36,130
Terugkeer om hier, weer, met behulp van
ons histogram sirkel visualisering

500
00:29:36,130 --> 00:29:42,110
ons gebou het, laat ons kyk of ons kan bou 'n
visualisering van grootte verspreiding

501
00:29:42,110 --> 00:29:43,305
in ons datastel.

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

503
00:29:45,850 --> 00:29:48,660
>> So hier, dit is dieselfde konsep.

504
00:29:48,660 --> 00:29:51,920
Maar nou, d bevat meer dinge.

505
00:29:51,920 --> 00:29:54,780
d bevat baie data-elemente.

506
00:29:54,780 --> 00:29:57,946
So kry ons terug d.

507
00:29:57,946 --> 00:29:59,670
D3 gee ons d.

508
00:29:59,670 --> 00:30:06,080
En ons reageer deur die vind van die grootte
van d en dan verby dat skaal.

509
00:30:06,080 --> 00:30:08,490
>> En dan het ons nodig het om te verander
ons skaal, natuurlik.

510
00:30:08,490 --> 00:30:12,980
So groottes doen eenvoudig nie
gaan baie meer as 10.

511
00:30:12,980 --> 00:30:15,485
Eintlik is daar nog nooit
'n 10 aardbewing.

512
00:30:15,485 --> 00:30:19,360
Maar dit is soort van ons bo-
einde, ons bo spektrum.

513
00:30:19,360 --> 00:30:20,240
>> Kom ons verfris.

514
00:30:20,240 --> 00:30:22,990
Nice, ons het 'n visualisering.

515
00:30:22,990 --> 00:30:25,490
Dit is interessant om dit te note--
is daar twee data punte wat

516
00:30:25,490 --> 00:30:29,010
is byna presies op die top van elke
ander, in terme van grootte.

517
00:30:29,010 --> 00:30:31,350
Jy sien dit deur die ondeursigtigheid ons gebruik.

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

519
00:30:40,810 --> 00:30:42,690
>> Ons het geografiese data nou.

520
00:30:42,690 --> 00:30:44,710
Ons het breedtegrade en lengtegrade.

521
00:30:44,710 --> 00:30:47,549
Miskien kan ons iets wat 'n doen
baie meer interessant met dit.

522
00:30:47,549 --> 00:30:49,590
Kom ons 'n paar meer vind
interessante manier om te visualiseer

523
00:30:49,590 --> 00:30:53,500
dit meer ingewikkeld
data wat ons het toegang tot.

524
00:30:53,500 --> 00:31:04,950
>> Wet V, Mapping-- fundamenteel,
ons wil om dit te sit op 'n kaart.

525
00:31:04,950 --> 00:31:07,690
Ek bedoel, dit is waar dit gaan.

526
00:31:07,690 --> 00:31:13,130
Ons wil inligting oor die te enkodeer
posisie van hierdie aardbewing lesings,

527
00:31:13,130 --> 00:31:16,350
sowel hul omvang,
want ons het dit nou.

528
00:31:16,350 --> 00:31:21,310
Ons verstaan ​​hoe om te verteer
meer ingewikkeld data.

529
00:31:21,310 --> 00:31:26,200
>> Die eerste ding wat ons sal doen, is om
skep 'n kaart, 'n agtergrond kaart.

530
00:31:26,200 --> 00:31:29,360
Ek gaan om te gaan deur
hierdie baie vinnig.

531
00:31:29,360 --> 00:31:30,560
Dit is moeilik kode.

532
00:31:30,560 --> 00:31:33,110
Dit is 'n ander een van daardie
resepte wat jy nie regtig

533
00:31:33,110 --> 00:31:35,690
moet ten volle begryp vir jou om te gebruik.

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

535
00:31:38,510 --> 00:31:39,740
Maar dit is die kode.

536
00:31:39,740 --> 00:31:43,580
Hierdie kode hier skep 'n kaart.

537
00:31:43,580 --> 00:31:45,730
>> Ons gaan nie om te gaan in detail.

538
00:31:45,730 --> 00:31:54,210
Maar oppervlakkig, wat dit doen, is,
dit bevraagteken hierdie us.json lêer, wat

539
00:31:54,210 --> 00:31:57,150
is 'n data lêer soos
die een wat ons voorheen gehad het.

540
00:31:57,150 --> 00:31:59,150
Dit is meer kompleks, natuurlik.

541
00:31:59,150 --> 00:32:02,920
Maar in hierdie geval, alles,
elke data punt is hierdie toestand

542
00:32:02,920 --> 00:32:05,420
en het 'n lys van
breedtegrade en lengtegrade

543
00:32:05,420 --> 00:32:10,500
wat definieer die veelhoek,
daardie vorm, dat die staat.

544
00:32:10,500 --> 00:32:13,280
>> So, wat D3 sal doen, is soortgelyk
wat ons gedoen het voor.

545
00:32:13,280 --> 00:32:18,140
Dit sal vra dat en
bind dit om 'n element.

546
00:32:18,140 --> 00:32:20,890
En daar is 'n funksie wat
sal die kaart daardie element uit,

547
00:32:20,890 --> 00:32:23,410
gebaseer op die breedtegrade en lengtegrade.

548
00:32:23,410 --> 00:32:24,580
Jy kan meer oor dit lees.

549
00:32:24,580 --> 00:32:27,385
En ek beveel dit.

550
00:32:27,385 --> 00:32:30,090
>> Daar is skakels na die
einde van hierdie kode gepos.

551
00:32:30,090 --> 00:32:31,570
En die kode is kommentaar.

552
00:32:31,570 --> 00:32:34,050
Daar is skakels vir verdere op hierdie punt.

553
00:32:34,050 --> 00:32:36,590
Ek beveel aan jy kyk dit.

554
00:32:36,590 --> 00:32:39,460
Maar wat ons omgee is
hierdie projeksie funksie.

555
00:32:39,460 --> 00:32:41,210
Ek wil om te gaan deur dit.

556
00:32:41,210 --> 00:32:43,522
>> Eerste van alles, laat ek jou wys
jy dat, ja, ons het 'n kaart.

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

558
00:32:47,300 --> 00:32:49,970
Kaarte is cool.

559
00:32:49,970 --> 00:32:52,330
So laat ons kyk na hierdie
produksie funksie.

560
00:32:52,330 --> 00:32:56,481
>> Projeksie is baie
soos 'n skaal, skale weer.

561
00:32:56,481 --> 00:32:59,210
So, wat produksie vir
hierdie projeksie funksie

562
00:32:59,210 --> 00:33:06,610
beteken is, kan ons dit Longitude slaag
en latitudes-- in hierdie geval,

563
00:33:06,610 --> 00:33:09,590
hierdie waardes hier is die
lat-verlang van die gebou

564
00:33:09,590 --> 00:33:13,990
ons in die regte sit
now-- te projeksie.

565
00:33:13,990 --> 00:33:20,560
En projeksie sal omskep
wat in x en y pixel waardes.

566
00:33:20,560 --> 00:33:23,300
>> So, wat projeksie doen
is baie soortgelyk aan ons skaal.

567
00:33:23,300 --> 00:33:27,270
Dit is om ons breedtegrade en
lengtelyn wat 'n hele wêreld verteenwoordig

568
00:33:27,270 --> 00:33:31,390
en krimpende en sizing dat
af na die vierkant wat ons wil hê,

569
00:33:31,390 --> 00:33:33,510
dat ons gegee het nie.

570
00:33:33,510 --> 00:33:35,220
In hierdie geval, ons is
verby hierdie waardes.

571
00:33:35,220 --> 00:33:41,370
En dit is wat ons, wel, wat
op jou skerm beteken 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Hierdie hele skerm is 700 pixels
breed, so wat maak dat ons oor hier,

573
00:33:46,250 --> 00:33:53,310
en 154 pixels af, wat ek nie wil
raming is pretty much hier.

574
00:33:53,310 --> 00:33:57,250
>> So neem die lat-verlang, wat
iets op die hele wêreld verteenwoordig

575
00:33:57,250 --> 00:34:02,850
en squishing en beweeg dat sowat
ons x en y pixel waardes te gee,

576
00:34:02,850 --> 00:34:05,450
dit is die eerste ding wat
gedoen in hierdie kartering kode.

577
00:34:05,450 --> 00:34:07,920
En dan is die res van die
kode verorber die data

578
00:34:07,920 --> 00:34:14,310
en dan kaarte diegene lat-verlang
op iets op jou skerm.

579
00:34:14,310 --> 00:34:18,380
>> Maar ons gaan hierdie projeksie te gebruik
funksies, want dit blyk

580
00:34:18,380 --> 00:34:20,270
ons het lat-verlang verlang as well.

581
00:34:20,270 --> 00:34:24,509
Terugblik op ons data, het ons
breedtegrade en lengtegrade koördinate

582
00:34:24,509 --> 00:34:25,425
vir elke waarneming.

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

584
00:34:28,131 --> 00:34:29,130
So laat se gebruik projeksie.

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

586
00:34:33,250 --> 00:34:37,639
>> So kyk na ons uiteensetting,
ons wil ons exposition--

587
00:34:37,639 --> 00:34:39,590
ons het 'n lengte-en 'n lengtegraad.

588
00:34:39,590 --> 00:34:40,770
Maar ons wil pixel waardes.

589
00:34:40,770 --> 00:34:43,510
En dit blyk, ons het presies
wat ons want-- projeksie.

590
00:34:43,510 --> 00:34:46,239
Baie soos ons was
gebruik van skaal reg hier,

591
00:34:46,239 --> 00:34:52,075
ons nou gaan projeksie te gebruik
en dit slaag koördineer.

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

593
00:34:55,241 --> 00:34:56,949
So die eerste ding
ons so doing-- ons

594
00:34:56,949 --> 00:35:01,520
om d, wat 'n individuele data
element van 'n individu aardbewing

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

596
00:35:02,370 --> 00:35:04,640
Die eerste ding wat ons doen
is jy die koördinate.

597
00:35:04,640 --> 00:35:06,150
Alle reg, ons het die koördinate.

598
00:35:06,150 --> 00:35:09,160
>> Die tweede ding wat ons doen, is
gebeur dat op projeksie.

599
00:35:09,160 --> 00:35:13,440
Projeksie vat die koördinate
in pixel waardes, x en y.

600
00:35:13,440 --> 00:35:16,680
En dan is die laaste ding wat ons
wil doen, is net die x,

601
00:35:16,680 --> 00:35:19,342
wat hierdie geval is die eerste een.

602
00:35:19,342 --> 00:35:22,050
Dit is die eerste van die twee dinge
wat deur projeksie teruggekeer word.

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

604
00:35:27,840 --> 00:35:29,630
>> Ons sal dieselfde doen vir y.

605
00:35:29,630 --> 00:35:34,960
Maar in plaas daarvan, sal ons terugkeer
die tweede element, die y.

606
00:35:34,960 --> 00:35:35,980
Maak gereed om te verfris.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, 'n ekstra karakter
here-- mooi, ons het

609
00:35:46,450 --> 00:35:51,730
'n data-gedrewe dokument wat
verdoesel hierdie into lêer van voorwerpe,

610
00:35:51,730 --> 00:35:57,560
'n kaart, en die verandering van die
skryf in verband met die data

611
00:35:57,560 --> 00:35:59,600
om dit te projekteer op 'n kaart.

612
00:35:59,600 --> 00:36:00,840
Dit is baie interessant.

613
00:36:00,840 --> 00:36:03,770
Dit is cool.

614
00:36:03,770 --> 00:36:05,640
>> Kom ons neem dit op 'n kerf.

615
00:36:05,640 --> 00:36:08,795
Ek bedoel, ons het twee stukke
inligting met elke data punt.

616
00:36:08,795 --> 00:36:10,000
Ek bedoel, drie.

617
00:36:10,000 --> 00:36:12,540
Ons het die koördinate,
wat is 'n x en y.

618
00:36:12,540 --> 00:36:15,700
En ons het die grootte.

619
00:36:15,700 --> 00:36:17,420
>> Ons moet die omvang een of ander manier enkodeer.

620
00:36:17,420 --> 00:36:18,920
Ons het 'n baie kanale.

621
00:36:18,920 --> 00:36:20,370
Ons kan gebruik om kleur.

622
00:36:20,370 --> 00:36:21,890
Ons kan gebruik radius.

623
00:36:21,890 --> 00:36:23,040
Ons kan gebruik ondeursigtigheid.

624
00:36:23,040 --> 00:36:25,540
Ons kan baie dinge gebruik in die kode.

625
00:36:25,540 --> 00:36:29,180
Enige van hierdie eienskappe en vele
meer wat nie daar gelys is,

626
00:36:29,180 --> 00:36:33,065
want hulle is opsioneel, ons kon
gebruik om hierdie data te enkodeer, die beroerte

627
00:36:33,065 --> 00:36:35,670
en al hierdie dinge wat ek genoem het.

628
00:36:35,670 --> 00:36:36,690
>> Kom ons doen radius.

629
00:36:36,690 --> 00:36:38,830
Ek dink radius is die mees intuïtief.

630
00:36:38,830 --> 00:36:46,210
So weer, sal ons vervang wat hard-gekodeerde
40 en maak 'n paar berekeninge.

631
00:36:46,210 --> 00:36:48,810
Ons sal ons gunsteling skaal weer te gebruik.

632
00:36:48,810 --> 00:36:50,290
En ons is verlede d.

633
00:36:50,290 --> 00:36:55,850
Maar nie d, want ons wil die grootte
van d. d is net die data punt.

634
00:36:55,850 --> 00:36:57,430
Ons sal slaag om die grootte te skaal.

635
00:36:57,430 --> 00:36:58,470
>> Kom ons probeer dit weer.

636
00:36:58,470 --> 00:37:00,230
Ooh, dit nie werk nie.

637
00:37:00,230 --> 00:37:02,940
Hoekom is dit nie werk nie?

638
00:37:02,940 --> 00:37:04,387
>> So onthou wat skaal nie.

639
00:37:04,387 --> 00:37:05,470
Kom ons kyk na skaal weer.

640
00:37:05,470 --> 00:37:10,800
Skaal kaarte 1-10 op
te 22-600, min of meer.

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

642
00:37:12,030 --> 00:37:14,730
Dit is die rede waarom ons kry nie.

643
00:37:14,730 --> 00:37:18,420
>> So wil ons ons skaal te verander
na iets meer redelik is.

644
00:37:18,420 --> 00:37:22,610
Kom ons sê, ons wil 0-60.

645
00:37:22,610 --> 00:37:25,340
60 is 'n groot, maar 10 aardbewings
is ongelooflik skaars.

646
00:37:25,340 --> 00:37:27,880
In werklikheid, hulle het nooit gebeur nie.

647
00:37:27,880 --> 00:37:31,830
>> So, wat dit sal doen is, sal dit neem
ons omvang wat gaan 1-10

648
00:37:31,830 --> 00:37:34,490
en kaart dit op dit uit te brei uit.

649
00:37:34,490 --> 00:37:37,370
En kaart dit op te 0-60.

650
00:37:37,370 --> 00:37:38,840
Kom ons verfris.

651
00:37:38,840 --> 00:37:41,850
>> Nice, ons het 'n visualisering.

652
00:37:41,850 --> 00:37:42,500
Dit is 'n groot.

653
00:37:42,500 --> 00:37:43,736
Dit is werklike data.

654
00:37:43,736 --> 00:37:46,360
Jy sal sien, in my klein speelgoed
Byvoorbeeld, die grootste aardbewing

655
00:37:46,360 --> 00:37:49,417
reg op die top van ons.

656
00:37:49,417 --> 00:37:50,000
Maar dit is dit.

657
00:37:50,000 --> 00:37:54,422
Ons het 'n datum gedryf visualisering
wat verbruik die data

658
00:37:54,422 --> 00:37:56,255
en gee ons regtig
interessante inligting.

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

660
00:38:02,600 --> 00:38:06,420
Ja, laat ons voeg 'n paar
interaktiwiteit om dit te.

661
00:38:06,420 --> 00:38:08,675
Ek het genoem dat was
die sterk krag van D3.

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

663
00:38:11,490 --> 00:38:15,060
>> So hier, vir elke element, ons is
beskrywing van 'n klomp van die eienskappe.

664
00:38:15,060 --> 00:38:20,230
Maar ons kan ook beskryf wat ons wil
gebeur met interaktiwiteit elemente.

665
00:38:20,230 --> 00:38:26,190
Byvoorbeeld, kan ons beskryf
wat gebeur wanneer ons die muis oor.

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

667
00:38:28,740 --> 00:38:33,640
En baie soortgelyk dat,
wat sal 'n funksie neem,

668
00:38:33,640 --> 00:38:36,700
baie soortgelyk aan die
eienskappe wat ons gehad het voordat,

669
00:38:36,700 --> 00:38:44,650
waar ons iets aan die
element wanneer ons hover oor dit.

670
00:38:44,650 --> 00:38:47,100
>> So die eerste ding wat ons nodig het om te
doen is kies daardie element,

671
00:38:47,100 --> 00:38:49,435
dit basies vind, in die leser.

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

673
00:38:57,090 --> 00:39:00,920
en dan kan ons '
'n kenmerk om dit te.

674
00:39:00,920 --> 00:39:06,870
So wat ek hier doen, is, wanneer ons hover
oor iets, sal ons daardie element kry

675
00:39:06,870 --> 00:39:11,197
en dan stel sy opacity terug
1, heeltemal ondeursigtig.

676
00:39:11,197 --> 00:39:12,488
Kom ons kyk wat dit lyk.

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

678
00:39:29,430 --> 00:39:39,080
>> Dit blyk ons ​​het 'n
ekstra kommapunt hier.

679
00:39:39,080 --> 00:39:42,420
So as ons hover hier, dit raak vol.

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

681
00:39:46,530 --> 00:39:48,960
Maar nou, natuurlik, is dit
bly vol, want ons

682
00:39:48,960 --> 00:39:53,240
te beskryf wat gebeur
wanneer verwyder ons wyser.

683
00:39:53,240 --> 00:39:59,990
So laat ons doen presies wat op
mouseout, in teenstelling met mouse over.

684
00:39:59,990 --> 00:40:06,399
>> En ons sal dit herstel na
wat ons gehad het before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
En nou, elke keer as ons
hover, kry ons 'n volle sirkel.

686
00:40:10,260 --> 00:40:13,468
Dit help ons om te sien wat ons
ons is in wese kies.

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

688
00:40:19,210 --> 00:40:22,860
>> En nou, laat ons maak dit regtig groot.

689
00:40:22,860 --> 00:40:26,210
Kom ons maak dit om werklike data.

690
00:40:26,210 --> 00:40:30,890
So laat ons vra kon
USGS oor hul data.

691
00:40:30,890 --> 00:40:35,630
So het die Amerikaanse Geologiese Opname
het data oor aardbewings.

692
00:40:35,630 --> 00:40:41,460
Hulle het 'n openbare API wat in staat is om
in into formaat te verteer word.

693
00:40:41,460 --> 00:40:42,548
So laat ons dit doen.

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

695
00:40:49,730 --> 00:40:55,900
>> So, dit is 'n bietjie van die kode wat
verbind tot die USGS API.

696
00:40:55,900 --> 00:40:57,990
En daar is 'n bietjie van prosessering op dit.

697
00:40:57,990 --> 00:41:02,200
Dit is nie relevant, maar dit vereenvoudig
'n eenvoudige data-formaat, soos die een

698
00:41:02,200 --> 00:41:03,800
ons het tevore.

699
00:41:03,800 --> 00:41:08,140
So ek ontslae raak van ons oproep om
ons valse data.json op lêer.

700
00:41:08,140 --> 00:41:13,110
En in plaas daarvan, ek roep
die USGS wese.

701
00:41:13,110 --> 00:41:16,700
>> Kom ons verfris, mooi.

702
00:41:16,700 --> 00:41:21,260
Dit is 'n werklike, werklike data
Van hierdie week vir aardbewings.

703
00:41:21,260 --> 00:41:23,217
Dit is baie interessant.

704
00:41:23,217 --> 00:41:25,050
Dit is nie verbasend
vir ons, maar daar is

705
00:41:25,050 --> 00:41:27,909
'n baie aardbewings op die
West Coast in Kalifornië.

706
00:41:27,909 --> 00:41:30,950
Maar ek het gedink dit was baie interessant
dat daar so baie aardbewings

707
00:41:30,950 --> 00:41:34,350
in Alaska, en glo,
hier in die Weste.

708
00:41:34,350 --> 00:41:37,630
Ek bedoel, interessant, en ons is goed.

709
00:41:37,630 --> 00:41:40,410
Dit is die gevolgtrekking.

710
00:41:40,410 --> 00:41:43,760
>> Maar fundamenteel, hierdie
is wat D3 help ons doen.

711
00:41:43,760 --> 00:41:48,030
Dit help ons om data neem, bind
om dit te elemente in die DOM,

712
00:41:48,030 --> 00:41:51,620
en het daardie elemente verander
as 'n funksie van die data,

713
00:41:51,620 --> 00:41:54,780
het daardie eienskappe, al die
baie eienskappe van die elemente,

714
00:41:54,780 --> 00:41:57,393
al nuttig vir kanale wees
inligting oor te dra.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 is 'n ongelooflike kragtige
biblioteek en ongelooflik goed hardloop.

717
00:42:09,290 --> 00:42:12,260
Dit is 'n paar kragtige dinge.

718
00:42:12,260 --> 00:42:15,960
Data visualisering is 'n
ongelooflike kragtige instrument

719
00:42:15,960 --> 00:42:21,530
vir die vervoer van mense diep
insigte wat kry om hul kern

720
00:42:21,530 --> 00:42:25,430
en help hulle om te verstaan, in
hierdie diepgaande en intuïtiewe manier,

721
00:42:25,430 --> 00:42:29,760
hoe data werk en hoe
data verander ons lewe.

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