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

2
00:00:00,780 --> 00:00:11,880
>> [REPRODUCCIÓ DE MÚSICA]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Sóc David
Chouinard, i això és D3.

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

5
00:00:17,700 --> 00:00:21,270
Anem a aprendre sobre D3 avui.

6
00:00:21,270 --> 00:00:25,020
D3 és un marc de JavaScript
per a la construcció d'una alta qualitat

7
00:00:25,020 --> 00:00:28,110
visualitzacions interactives per a la web.

8
00:00:28,110 --> 00:00:30,870
Coses com el que som
veure darrere meu,

9
00:00:30,870 --> 00:00:34,230
anem a aprendre a fer els
coses, classe dels fonaments de la mateixa.

10
00:00:34,230 --> 00:00:36,452
Però serà genial.

11
00:00:36,452 --> 00:00:38,160
Anem a començar
fer fotos boniques.

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

13
00:00:41,108 --> 00:00:44,350
Tenim més donem
de perspectives disponibles.

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

15
00:00:48,040 --> 00:00:50,760
Anem a fer-ho.

16
00:00:50,760 --> 00:00:58,700
>> Acte I, DOM manipulation-- Anem
per començar immediatament fent coses interessants.

17
00:00:58,700 --> 00:01:01,240
En primer lloc, a l'esquerra, tenim codi.

18
00:01:01,240 --> 00:01:03,470
A la dreta, tenim
el resultat del nostre codi.

19
00:01:03,470 --> 00:01:04,900
Anem a anar a través d'ell.

20
00:01:04,900 --> 00:01:05,780
>> Anem a fer un cercle.

21
00:01:05,780 --> 00:01:08,570
Què et sembla?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
que acaba de fer un cercle.

23
00:01:14,934 --> 00:01:16,100
No em creu, oi?

24
00:01:16,100 --> 00:01:18,190
No hi és.

25
00:01:18,190 --> 00:01:21,830
>> Així que el que vam fer aquí és,
SVG és gràfics vectorials escalables.

26
00:01:21,830 --> 00:01:27,530
Aquesta és la manera en què diem que el navegador
fer gràfics vectorials del navegador.

27
00:01:27,530 --> 00:01:30,740
El que acabem de fer en aquest moment
s'afegeix un cercle per navegar.

28
00:01:30,740 --> 00:01:34,790
>> La promesa és que el cercle
requereix una mica d'atributs bàsics

29
00:01:34,790 --> 00:01:36,850
abans que realment podem veure-ho.

30
00:01:36,850 --> 00:01:40,045
Hem de dir-li que la seva posició x,
la seva posició i, el seu radi.

31
00:01:40,045 --> 00:01:43,310
No li vam dir que res d'això,
pel que no estem veient ara mateix.

32
00:01:43,310 --> 00:01:46,210
Però anem a dir-li que això.

33
00:01:46,210 --> 00:01:49,510
>> Així que en primer lloc, vostè ha
per donar al nostre cercle un nom.

34
00:01:49,510 --> 00:01:53,070
Així que anem a cridar cercle.

35
00:01:53,070 --> 00:01:54,406
El nostre cercle té un nom ara.

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

37
00:01:57,230 --> 00:01:59,490
I anem a donar-li un parell d'atributs.

38
00:01:59,490 --> 00:02:03,690
Què hi ha de cx es centraria x, de manera que
el centre de la posició x.

39
00:02:03,690 --> 00:02:06,730
Diguem, de 200 per 200 píxels.

40
00:02:06,730 --> 00:02:10,220
>> Anem a donar-li un any de 200 píxels també.

41
00:02:10,220 --> 00:02:16,032
I un r, un radi, d'uns 40 píxels.

42
00:02:16,032 --> 00:02:16,950
Ara anem a veure.

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

44
00:02:21,740 --> 00:02:23,440
Jo no puc escriure.

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

46
00:02:30,430 --> 00:02:31,520
>> Cal anar.

47
00:02:31,520 --> 00:02:37,330
Comptem amb un cercle a la posició 200
píxels, 200 píxels, radi de 40 píxels.

48
00:02:37,330 --> 00:02:38,280
Una mena de fresc, no?

49
00:02:38,280 --> 00:02:38,988
Tenim un cercle.

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

51
00:02:40,880 --> 00:02:42,670
>> Així que no hi ha necessitat de seguir al llarg.

52
00:02:42,670 --> 00:02:45,790
Tots aquests exemples, totes
el codi que estic fent avui

53
00:02:45,790 --> 00:02:51,300
serà proporcionat en línia a l'extrem
en forma d'exemples interactius

54
00:02:51,300 --> 00:02:54,010
amb llocs de control a
cada acte, i així successivament.

55
00:02:54,010 --> 00:02:55,160
>> Anem a fer més coses.

56
00:02:55,160 --> 00:02:58,901
Aquest cercle negre és realment lleig.

57
00:02:58,901 --> 00:03:01,541
Ho sento per aquest error
missatges allà mateix.

58
00:03:01,541 --> 00:03:05,340
Cal anar.

59
00:03:05,340 --> 00:03:06,350
>> Anem a donar-li un color.

60
00:03:06,350 --> 00:03:07,170
Com és això?

61
00:03:07,170 --> 00:03:08,340
M'agrada blau acer.

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

63
00:03:13,280 --> 00:03:16,030
Bé, el nostre cercle canviar de color.

64
00:03:16,030 --> 00:03:17,320
Això és genial.

65
00:03:17,320 --> 00:03:31,330
Farem que semitransparent
també-- semitransparent.

66
00:03:31,330 --> 00:03:33,670
>> Així que aquests són atributs
estem definint en el cercle.

67
00:03:33,670 --> 00:03:36,774
El primer que vam fer és
posem un cercle a la pàgina.

68
00:03:36,774 --> 00:03:38,690
I després estem definint
un grup d'atributs.

69
00:03:38,690 --> 00:03:41,610
Alguns d'aquests estan obligats,
com CX, CY, i Ràdio.

70
00:03:41,610 --> 00:03:42,680
I altres són opcionals.

71
00:03:42,680 --> 00:03:44,730
>> Hi ha molts més atributs.

72
00:03:44,730 --> 00:03:46,760
Hi ha un munt d'ells.

73
00:03:46,760 --> 00:03:53,070
Per exemple, podríem tenir un
accident cerebrovascular, així, un cop de vermell.

74
00:03:53,070 --> 00:03:55,630
Però anem a treure això.

75
00:03:55,630 --> 00:04:00,450
Estem de tornada a un cercle, un cercle blau.

76
00:04:00,450 --> 00:04:01,600
>> Així que farem més cercles.

77
00:04:01,600 --> 00:04:02,810
Com és això?

78
00:04:02,810 --> 00:04:04,665
Anem a fer un altre cercle.

79
00:04:04,665 --> 00:04:05,985
Això és emocionant, no?

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

81
00:04:09,630 --> 00:04:12,300
>> Així que dir que m'acaba d'enganxar-Copy
el que ja teníem.

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

83
00:04:13,570 --> 00:04:15,840
I farem l'exacta
el mateix i donar-li

84
00:04:15,840 --> 00:04:20,450
atributs, donada una posició x del 300.

85
00:04:20,450 --> 00:04:24,140
Yay, tenim dos cercles ara.

86
00:04:24,140 --> 00:04:27,240
>> I, per descomptat, podríem
actualitzar aquests valors.

87
00:04:27,240 --> 00:04:31,640
Jo podria posar a 400, i ara es mou.

88
00:04:31,640 --> 00:04:35,470
I ja que és molest, anem a
i eliminar, per circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Ara s'ha anat.

91
00:04:40,730 --> 00:04:43,170
>> Així que el que estem fent i
és molt, very-- aquest

92
00:04:43,170 --> 00:04:46,030
és molt similar al que
podria fer en jQuery, per exemple.

93
00:04:46,030 --> 00:04:48,240
Només estem manipulant
DOM, es diu.

94
00:04:48,240 --> 00:04:50,040
Vostè pot haver sentit aquesta paraula abans.

95
00:04:50,040 --> 00:04:53,255
Estem creant coses, l'establiment de
atributs en coses, l'eliminació de la matèria.

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

97
00:04:58,950 --> 00:05:02,360
>> Ara, aquí és on es posa interessant.

98
00:05:02,360 --> 00:05:07,250
Així que més endavant en el codi, que encara podia
consulteu el cercle original aquí.

99
00:05:07,250 --> 00:05:14,100
Així que anem a restablir la seva atribut de cx.

100
00:05:14,100 --> 00:05:18,260
Diguem, la seva posició x 400.

101
00:05:18,260 --> 00:05:22,406
I jo vaig a la transició
que, pel que és obvi.

102
00:05:22,406 --> 00:05:23,360
Cal anar.

103
00:05:23,360 --> 00:05:24,780
>> Així que afegim un cercle.

104
00:05:24,780 --> 00:05:26,440
Vam establir alguns atributs.

105
00:05:26,440 --> 00:05:28,210
Afegim un altre cercle, l'eliminem.

106
00:05:28,210 --> 00:05:31,650
I després estem modificant
el cercle original.

107
00:05:31,650 --> 00:05:35,400
>> Però aquí és on es posa
molt més interessant.

108
00:05:35,400 --> 00:05:39,070
No només podem establir atributs
com s'acaba de valors, podem dir,

109
00:05:39,070 --> 00:05:41,610
bo, cercle, anar a la posició 200.

110
00:05:41,610 --> 00:05:44,540
També podem establir com a funcions.

111
00:05:44,540 --> 00:05:48,850
>> Així que en lloc de donar 400 aquí,
podem fer una mica de càlcul

112
00:05:48,850 --> 00:05:53,950
sobre la marxa de manera que
Vull aquest atribut sigui.

113
00:05:53,950 --> 00:05:56,580
Així que aquesta és la forma en què t'expresses això.

114
00:05:56,580 --> 00:06:00,660
Diem, en lloc de 400, em va deixar
donar-li una funció en lloc.

115
00:06:00,660 --> 00:06:04,180
I aquí, a l'interior d'aquesta funció,
podem fer qualsevol càlcul boig.

116
00:06:04,180 --> 00:06:06,820
>> Podríem prendre el temps i
mirar a una altra cosa

117
00:06:06,820 --> 00:06:11,230
i decidir dinàmicament per
el cercle que valor que volem.

118
00:06:11,230 --> 00:06:15,266
Què tal si només donem
una posició aleatòria x?

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

120
00:06:20,360 --> 00:06:21,120
Així que això és tot.

121
00:06:21,120 --> 00:06:25,490
>> Així que el que diu és, per
cada x, executen aquesta funció.

122
00:06:25,490 --> 00:06:29,340
I el que estem fent és calcular
algunes coses, unes vegades a l'atzar l'ample

123
00:06:29,340 --> 00:06:30,410
i tornar això.

124
00:06:30,410 --> 00:06:34,765
Així que cada vegada que ens trobem, tenim una
cercle que va a un lloc a l'atzar.

125
00:06:34,765 --> 00:06:36,394
És una mena de fresc.

126
00:06:36,394 --> 00:06:38,310
Em sento com si pogués mirar
en això per una mica.

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

128
00:06:44,274 --> 00:06:46,440
Estem començant a arribar a
alguna cosa interessant aquí.

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

130
00:06:49,120 --> 00:06:51,390
Farem aquestes dades impulsada ara.

131
00:06:51,390 --> 00:06:53,420
No hi ha dades aquí.

132
00:06:53,420 --> 00:06:54,482
Anem a canviar això.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- acte II, Data Driven
Així que anem a tornar a aquí.

135
00:07:12,140 --> 00:07:15,340
I anem a desfer-nos de circle2,
perquè només estem afegint i traient

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

137
00:07:15,840 --> 00:07:17,382
Així que realment no ho necessitem.

138
00:07:17,382 --> 00:07:21,421
Hem de ser molt més intel·ligent aquí.

139
00:07:21,421 --> 00:07:23,170
Diguem, tenim
algunes dades d'algun tipus.

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

141
00:07:31,540 --> 00:07:40,020
Un moment-- diguem,
teníem les dades d'aquest formulari.

142
00:07:40,020 --> 00:07:41,800
Vam tenir una matriu, només
un munt de nombres.

143
00:07:41,800 --> 00:07:45,750
Tenim set nombres aquí,
qualssevol que aquestes quantitat represent--

144
00:07:45,750 --> 00:07:48,810
en el compte bancari de la gent, com
molt que pesen, déu sap què.

145
00:07:48,810 --> 00:07:51,310
>> Aquests són els números, i ens
que desitgi utilitzar els nostres cercles

146
00:07:51,310 --> 00:07:53,240
per representar els nombres d'alguna manera.

147
00:07:53,240 --> 00:07:55,515
Volem vincular la nostra
cercles a aquests nombres.

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

149
00:07:58,750 --> 00:07:59,626
Així que el que fem.

150
00:07:59,626 --> 00:08:01,500
Diguem, volem un
cercle per a cada número.

151
00:08:01,500 --> 00:08:03,590
Podríem fer el vell
cosa que ens doing--

152
00:08:03,590 --> 00:08:06,020
append cercle i circle2 i circle3.

153
00:08:06,020 --> 00:08:10,020
Però això va de les mans, i
hi ha un munt de repetir la lògica.

154
00:08:10,020 --> 00:08:12,760
>> Així que anem més intel·ligent amb això.

155
00:08:12,760 --> 00:08:17,810
En lloc d'utilitzar el cercle var
svg.append que estàvem fent servir,

156
00:08:17,810 --> 00:08:21,580
utilitzarem
aquest petit bloc d'aquí.

157
00:08:21,580 --> 00:08:24,510
Jo no vull anar a fons
en el que fan totes aquestes parts.

158
00:08:24,510 --> 00:08:26,020
I és una cosa d'un tema avançat.

159
00:08:26,020 --> 00:08:27,830
I m'agradaria poder fer-ho.

160
00:08:27,830 --> 00:08:31,370
>> Però la clau per recognize-- i
veuràs que és molt sovint en codi D3.

161
00:08:31,370 --> 00:08:36,840
Aquest bloc de text bàsic
crea tants cercles

162
00:08:36,840 --> 00:08:41,360
ja que hi ha elements de dades
en aquesta sèrie aquí.

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

164
00:08:53,420 --> 00:08:55,780
Així com això crea molts
cercles, ja que hi ha elements.

165
00:08:55,780 --> 00:08:58,520
Es crearà nosaltres set cercles.

166
00:08:58,520 --> 00:09:01,710
I ho fa d'una cosa molt, molt clau.

167
00:09:01,710 --> 00:09:02,460
Així que anem a córrer això.

168
00:09:02,460 --> 00:09:05,460
Anem a treure el nostre altre cercle.

169
00:09:05,460 --> 00:09:09,565
Anem a comentar aquest
separar-se i córrer de nou.

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

171
00:09:13,840 --> 00:09:15,260
>> Cal anar.

172
00:09:15,260 --> 00:09:18,030
Així que el nostre cercle que aquí hi ha una
molt més fosc, perquè

173
00:09:18,030 --> 00:09:20,720
tenen 7 cercles, un
a la part superior de l'altra.

174
00:09:20,720 --> 00:09:25,425
Acabem de crear set cercles, un
cada un per a cada un d'aquests elements de dades.

175
00:09:25,425 --> 00:09:28,860
Però hi ha una cosa clau que va succeir
amb aquest fragment aquí.

176
00:09:28,860 --> 00:09:31,030
>> És que les dades van ser obligats.

177
00:09:31,030 --> 00:09:33,440
Així que cada un
aquests elements de dades,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, estava obligat
a un cercle particular.

179
00:09:38,830 --> 00:09:40,960
Així que aquests no només van crear
un munt de cercles

180
00:09:40,960 --> 00:09:43,420
però corbates aquestes dues coses juntes.

181
00:09:43,420 --> 00:09:48,740
>> I en el futur, perquè hem creat
aquests cercles amb aquesta funció D3,

182
00:09:48,740 --> 00:09:52,430
si et dono un cercle, es pot
dóna'm les dades associades amb ell.

183
00:09:52,430 --> 00:09:53,280
Així que podem demanar D3.

184
00:09:53,280 --> 00:09:54,840
Ei, D3, tinc aquest cercle.

185
00:09:54,840 --> 00:09:57,350
Quina és la informació que el cercle té?

186
00:09:57,350 --> 00:10:01,290
I D3 ens diria a 10 o 45 o 105.

187
00:10:01,290 --> 00:10:02,380
>> Aquestes coses estan limitades.

188
00:10:02,380 --> 00:10:04,490
Aquest és un concepte molt, molt fonamental.

189
00:10:04,490 --> 00:10:06,070
Fem una ullada a això.

190
00:10:06,070 --> 00:10:12,210
>> Així que la forma en què li preguntaria D3-- així
això és irrellevant per això,

191
00:10:12,210 --> 00:10:16,620
però només confia en mi en ell.

192
00:10:16,620 --> 00:10:17,620
Així és com ens preguntem D3.

193
00:10:17,620 --> 00:10:21,312
Ei, D3, dóna'm la primera
cercle que es pot trobar.

194
00:10:21,312 --> 00:10:23,580
Dóna'm el primer cercle que pots trobar.

195
00:10:23,580 --> 00:10:29,660
I llavors podríem preguntar D3, el que és
les dades que, d'aquesta manera, 10.

196
00:10:29,660 --> 00:10:33,380
>> Així que només demanem D3, trobar
el primer cercle que pots trobar.

197
00:10:33,380 --> 00:10:34,400
Què és les seves dades?

198
00:10:34,400 --> 00:10:36,650
10, que és de fet la nostra
primer element de dades.

199
00:10:36,650 --> 00:10:42,150
Podríem demanar-li que, hey, D3,
nosaltres trobar el nostre tercer cercle.

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

201
00:10:44,450 --> 00:10:45,740
Per què és realment important?

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

203
00:10:49,790 --> 00:10:52,250
>> Així que aquí, he esmentat
que podíem utilitzar les funcions.

204
00:10:52,250 --> 00:10:54,910
I vaig esmentar que era
una cosa molt poderosa.

205
00:10:54,910 --> 00:11:03,070
Així que no només poden fer les nostres funcions coses
com fer algun càlcul, per exemple,

206
00:11:03,070 --> 00:11:09,170
retornar un nombre aleatori, pot
també fer coses basades en les dades.

207
00:11:09,170 --> 00:11:11,550
Això és el que signifiquen els documents de dades impulsades.

208
00:11:11,550 --> 00:11:13,750
Això és el D3 representa.

209
00:11:13,750 --> 00:11:17,800
>> Així que aquesta vegada x postition--
de simplement dir, tots els cercles,

210
00:11:17,800 --> 00:11:21,735
obtenir la posició x 200,
podria donar-li una funció.

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

212
00:11:26,140 --> 00:11:30,140
I aquí, podem fer alguns càlculs.

213
00:11:30,140 --> 00:11:33,710
i d aquí es troba en el seu lloc per a les dades.

214
00:11:33,710 --> 00:11:36,120
Així que cada vegada que tenim
un cercle, en el fons,

215
00:11:36,120 --> 00:11:37,750
D3 crearà aquests set cercles.

216
00:11:37,750 --> 00:11:38,500
I a continuació, per a cada

217
00:11:38,500 --> 00:11:41,920
>> cercle, es va a anar, hey,
circle1 quin és la teva posició x.

218
00:11:41,920 --> 00:11:45,210
Anteriorment, estàvem
sempre contestant 200.

219
00:11:45,210 --> 00:11:48,630
Però ara, cada vegada que demana D3
nosaltres quina és la teva posició x,

220
00:11:48,630 --> 00:11:51,790
que donarà a nosaltres-- tenim
aquest cercle, el que tenim les dades.

221
00:11:51,790 --> 00:11:55,290
Es va a donar-nos les dades i dir:
Què vols que l'exposició sigui,

222
00:11:55,290 --> 00:11:57,120
sobre la base d'aquestes dades.

223
00:11:57,120 --> 00:11:59,590
>> Anem a tornar a les dades reals.

224
00:11:59,590 --> 00:12:04,910
Així que si correm això, això dóna
dades ens impulsats documents.

225
00:12:04,910 --> 00:12:08,040
Aquests cercles es basen
en relació Position--

226
00:12:08,040 --> 00:12:11,120
són bases com una funció de les dades.

227
00:12:11,120 --> 00:12:13,100
>> Així que per al primer cercle,
D3 posa un cercle.

228
00:12:13,100 --> 00:12:16,770
I llavors D3 ens pregunta, què fer
desitja que l'exposició sigui.

229
00:12:16,770 --> 00:12:19,620
I acabem de dir, el que serà la informació.

230
00:12:19,620 --> 00:12:21,185
Feu l'exposició 10.

231
00:12:21,185 --> 00:12:26,320
>> Llavors es pregunta, què és el que desitja que el
exposició sigui per al segon cercle.

232
00:12:26,320 --> 00:12:27,270
I nosaltres responem: 45.

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

234
00:12:30,000 --> 00:12:32,230
I, per descomptat, pot
fer algun càlcul aquí.

235
00:12:32,230 --> 00:12:35,510
Em sembla que aquests cercles
són una mica aixafat cap amunt.

236
00:12:35,510 --> 00:12:38,965
>> Així es multiplica per 3, multiplicar per 3 les dades.

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

238
00:12:41,870 --> 00:12:43,840
El nostre cercle acaba d'ampliar a terme.

239
00:12:43,840 --> 00:12:46,730
El nostre valor es va triplicar.

240
00:12:46,730 --> 00:12:51,010
>> El cercle és realment a la vora,
així que anem a aquest tipus de compensar-ho.

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

242
00:12:53,632 --> 00:12:56,070
Aquí tens.

243
00:12:56,070 --> 00:12:57,590
>> Aquesta és una visualització de dades.

244
00:12:57,590 --> 00:13:01,767
És una pregunta molt bàsica, però això
ens dóna una idea de les nostres dades.

245
00:13:01,767 --> 00:13:04,600
Ens diu que, per exemple, que
tenir un petit grup d'elements.

246
00:13:04,600 --> 00:13:06,340
I tenim un gran valor atípic aquí.

247
00:13:06,340 --> 00:13:10,830
Això ens dóna una mica d'informació
sobre la distribució.

248
00:13:10,830 --> 00:13:20,830
>> Si haguéssim de, per exemple, per canviar
les dades a 150 aquí i actualització,

249
00:13:20,830 --> 00:13:22,630
es canvia la nostra visualització.

250
00:13:22,630 --> 00:13:24,285
En aquest document es fa servir la informació.

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

252
00:13:32,640 --> 00:13:36,180
>> Així que per descomptat, tots aquests elements,
tots aquests atributs aquí,

253
00:13:36,180 --> 00:13:38,430
podem utilitzar una funció, no
només els números, no només

254
00:13:38,430 --> 00:13:39,900
les posicions x i y.

255
00:13:39,900 --> 00:13:42,120
Així que podem utilitzar una funció per al color.

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

257
00:13:45,260 --> 00:13:46,360
Així que anem a fer el mateix.

258
00:13:46,360 --> 00:13:49,360
Anem a donar-li una funció.

259
00:13:49,360 --> 00:13:52,320
>> I diguem, podríem tenir
condicionals en la nostra funció.

260
00:13:52,320 --> 00:13:54,770
Aquesta funció pot ser
centenars de línies llargues.

261
00:13:54,770 --> 00:13:57,150
Es pot fer coses molt, molt complicats.

262
00:13:57,150 --> 00:13:59,080
>> Així que anem a posar una sentència if aquí.

263
00:13:59,080 --> 00:14:03,420
Diguem, si els nostres dades són menys
de 50, això és cert llindar

264
00:14:03,420 --> 00:14:05,817
que ens interessa
en per alguna raó.

265
00:14:05,817 --> 00:14:06,650
Fem-ho verd.

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

267
00:14:09,830 --> 00:14:15,320
En cas contrari, farem que el vermell.

268
00:14:15,320 --> 00:14:16,110
Com és això?

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

270
00:14:19,630 --> 00:14:21,220
Niça.

271
00:14:21,220 --> 00:14:24,860
>> Així que la nostra visualització de dades està començant
per transmetre la informació més interessant

272
00:14:24,860 --> 00:14:26,727
en molts canals.

273
00:14:26,727 --> 00:14:28,560
Així que ara sabem una mica
sobre la distribució.

274
00:14:28,560 --> 00:14:31,768
I sabem que hi ha algun tipus de
tallat a 50 que ens interessa.

275
00:14:31,768 --> 00:14:35,630
Sabem que hi ha dos punts de dades
per sota d'aquest llindar i la majoria d'ells

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

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

278
00:14:41,510 --> 00:14:46,160
>> Així com un pas final, aquestes dades aquí,
és molt rar veure aquest així.

279
00:14:46,160 --> 00:14:52,610
Així que anem a moure a una variable
perquè això és més net, com aquest.

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

281
00:15:02,980 --> 00:15:05,197
I després fem servir aquesta variable aquí.

282
00:15:05,197 --> 00:15:06,280
És exactament el mateix.

283
00:15:06,280 --> 00:15:07,280
És només una mica més neta.

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

285
00:15:25,300 --> 00:15:35,300
>> El següent, acte III, Scales--
Així que un problema de dret

286
00:15:35,300 --> 00:15:38,920
aquí és, si canviem la nostra
dades en aquesta 200 value--

287
00:15:38,920 --> 00:15:41,685
si canviem a 400
o alguna cosa i actualització,

288
00:15:41,685 --> 00:15:44,540
llavors aquest valor només es va anar fora de la pantalla.

289
00:15:44,540 --> 00:15:49,040
Així que la nostra lògica aquí
de la forma en què fem les vegades 3

290
00:15:49,040 --> 00:15:52,570
i 20, per estendre-cap a fora i després
compensar una mica és molt maldestre.

291
00:15:52,570 --> 00:15:54,150
>> Què signifiquen aquests números?

292
00:15:54,150 --> 00:15:55,400
Només estan codificat allà.

293
00:15:55,400 --> 00:15:58,830
I estan molt lligats a les dades.

294
00:15:58,830 --> 00:16:00,550
Volem un document de dades impulsada.

295
00:16:00,550 --> 00:16:05,460
Volem un document molt flexible,
que les dades donades, s'adapta a ella

296
00:16:05,460 --> 00:16:07,900
i el representa.

297
00:16:07,900 --> 00:16:11,330
>> El que bàsicament necessitem és que
tenir aquest rang de nombres 10.

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

299
00:16:12,640 --> 00:16:17,630
I volem mapejar de sortir a
l'ample, l'amplada complet aquí.

300
00:16:17,630 --> 00:16:20,620
Així que tenim la gamma de
nombres que van de 0 a 100.

301
00:16:20,620 --> 00:16:24,980
I nosaltres tenim aquest campus que va
20-700, en aquest cas.

302
00:16:24,980 --> 00:16:26,515
>> És com que volem mapejar que a.

303
00:16:26,515 --> 00:16:30,002
Volem que escalar i
després compensar una mica.

304
00:16:30,002 --> 00:16:33,165
Resulta que D3 té aquests.

305
00:16:33,165 --> 00:16:34,220
Es diu una escala.

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

307
00:16:37,410 --> 00:16:38,250
Així que anem a utilitzar-lo.

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

309
00:16:46,300 --> 00:16:49,670
>> La forma en què works-- vaig a
escriure això i després explicar-ho.

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

311
00:17:01,530 --> 00:17:02,450
Aquesta és una escala.

312
00:17:02,450 --> 00:17:08,670
El que farà és, serà traçar
els valors d'1 a 200 sobre a 20-600.

313
00:17:08,670 --> 00:17:10,990
Podem comprovar que.

314
00:17:10,990 --> 00:17:13,329
Podem veure que aquí.

315
00:17:13,329 --> 00:17:21,704
>> Així que si em aliment que 1-- un moment.

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

317
00:17:47,764 --> 00:17:48,555
Dóna'm un segon.

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

319
00:17:53,680 --> 00:17:55,080
He haver escrit malament ella.

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

321
00:18:15,320 --> 00:18:15,990
Cal anar.

322
00:18:15,990 --> 00:18:17,930
Ho sento per això.

323
00:18:17,930 --> 00:18:22,050
>> Llavors, què va a fer una escala
és, prendrà un valor

324
00:18:22,050 --> 00:18:24,930
i després convertir aquest,
ampliar això, pel que

325
00:18:24,930 --> 00:18:27,320
omple tota la gamma que està demanant.

326
00:18:27,320 --> 00:18:32,910
Així que en aquest cas, si li fem una,
que va a assignar que fos sobre 20.

327
00:18:32,910 --> 00:18:37,750
I si li donem 200, és
va a assignar que a 600.

328
00:18:37,750 --> 00:18:40,460
I en algun lloc en el medi,
si aconseguim 100, és

329
00:18:40,460 --> 00:18:44,610
estarà en algun lloc
entre 20 i 600.

330
00:18:44,610 --> 00:18:51,480
>> I, per descomptat, ara això és el que
hem d'eliminar aquests xifrats durs

331
00:18:51,480 --> 00:18:53,402
coses que tenen allà.

332
00:18:53,402 --> 00:18:55,950
Així que el que volem fer és
prendre les dades que estem

333
00:18:55,950 --> 00:19:00,950
donat, que les dades individu
element, i passar-lo a escala primer.

334
00:19:00,950 --> 00:19:02,635
Així balança ampliar-lo.

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

336
00:19:27,020 --> 00:19:48,880
>> Bueno-- Oh, tenim un petit error aquí.

337
00:19:48,880 --> 00:19:50,120
Ens falten dades.

338
00:19:50,120 --> 00:19:51,290
Cal anar.

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

340
00:19:58,550 --> 00:19:59,550
I que s'expandeix cap a fora.

341
00:19:59,550 --> 00:20:01,383
>> Això ens dóna la mateixa
resultat que teníem abans,

342
00:20:01,383 --> 00:20:04,030
però en lloc de tenir les
codificat limitacions.

343
00:20:04,030 --> 00:20:07,790
I si la mida de la nostra
canvis de lona, ​​per exemple,

344
00:20:07,790 --> 00:20:11,790
si volem tenir això sobre
400 píxels i que aixafa a terme,

345
00:20:11,790 --> 00:20:15,440
podem tenir over--
podem ampliar, o fem

346
00:20:15,440 --> 00:20:21,890
pot reduir aquest marge esquerra a
una mica menys o més de 20.

347
00:20:21,890 --> 00:20:25,470
Aquests números, aquests codificats
números ara tenen sentit per a nosaltres.

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

349
00:20:28,110 --> 00:20:30,520
>> I podríem fer molt més
coses interessants també.

350
00:20:30,520 --> 00:20:35,990
Així que en lloc de tenir un lineal
escala, que pot ser que desitgi registrar una escala.

351
00:20:35,990 --> 00:20:37,840
I això ens donarà una escala logarítmica.

352
00:20:37,840 --> 00:20:41,269
>> Així que ara la nostra escala, en lloc de
només l'expansió fora d'aquest rang,

353
00:20:41,269 --> 00:20:42,810
que està fent les coses més sofisticades.

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

355
00:20:48,790 --> 00:20:53,790
En lloc de tenir aquest rang dur
codificada, i en lloc d'haver de 600,

356
00:20:53,790 --> 00:20:58,465
el que es vol només ha d'utilitzar l'ample,
per la qual cosa des del 20 a l'amplada de menys de 40 anys,

357
00:20:58,465 --> 00:21:02,392
2 vegades el marge a l'altra banda.

358
00:21:02,392 --> 00:21:05,350
I això té molt més sentit
algú que pugui mirar el codi.

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

360
00:21:08,080 --> 00:21:11,850
>> Curiosament, les escales queden
molt, molt sofisticat també.

361
00:21:11,850 --> 00:21:13,350
Ells fan un munt de coses interessants.

362
00:21:13,350 --> 00:21:17,620
Així escales no tenen necessàriament
per operar només amb números.

363
00:21:17,620 --> 00:21:18,955
Anem a fer una escala de colors.

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

365
00:21:23,120 --> 00:21:26,120
>> Així que la nostra gamma podria ser:
nostre domini és d'1 a 200.

366
00:21:26,120 --> 00:21:28,220
Aquesta és la cosa entrada.

367
00:21:28,220 --> 00:21:33,793
Però el que es vol mapejar des
verd a vermell, per exemple.

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

369
00:21:39,710 --> 00:21:42,910
I ara, si ens passem 1,
aconseguirem verd.

370
00:21:42,910 --> 00:21:45,110
Si li donem 200, ens posarem vermell.

371
00:21:45,110 --> 00:21:49,480
I si li passem alguna cosa intermedi,
que serà una mica de barreja d'això,

372
00:21:49,480 --> 00:21:52,520
en algun lloc en el gradient
entre verd i vermell.

373
00:21:52,520 --> 00:21:55,210
>> I en lloc de tenir
aquest tipus de lògica maldestre

374
00:21:55,210 --> 00:21:58,550
tenim aquí amb la
condicional allà mateix,

375
00:21:58,550 --> 00:22:03,250
podríem tenir un alguna cosa--
escala lineal entre aquells.

376
00:22:03,250 --> 00:22:07,100
Així que usaríem l'escala que acabem de
creat, el que anomenem color.

377
00:22:07,100 --> 00:22:09,060
I ens agradaria donar-li D, que
és el nostre element de dades.

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

379
00:22:14,250 --> 00:22:15,060
I aquí anem.

380
00:22:15,060 --> 00:22:18,070
Comptem amb una escala de colors.

381
00:22:18,070 --> 00:22:18,940
>> Així que aquesta és la cartografia.

382
00:22:18,940 --> 00:22:20,960
Així que el 'esquerra és completament verd.

383
00:22:20,960 --> 00:22:22,560
L'extrema dreta és completament vermell.

384
00:22:22,560 --> 00:22:24,828
I tota la resta
és una funció de d.

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

386
00:22:33,369 --> 00:22:35,160
Tenim una interessant
visualitzacions aquí.

387
00:22:35,160 --> 00:22:36,952
Però els nostres dades va ser una mica avorrit.

388
00:22:36,952 --> 00:22:39,410
Anem a veure el que podem fer si
teníem les dades més interessants.

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

390
00:22:44,420 --> 00:22:50,500
>> Acte IV, que treballa amb el
Data-- el primer

391
00:22:50,500 --> 00:22:53,560
voldrem fer perquè la nostra
visualització més interessant

392
00:22:53,560 --> 00:22:56,140
és per moure les dades a un altre lloc.

393
00:22:56,140 --> 00:22:58,310
És molt maldestre per tenir
les dades no modificables aquí.

394
00:22:58,310 --> 00:23:01,220
I, en general, estarem demanant
algú més per a les dades.

395
00:23:01,220 --> 00:23:05,400
Estarem potser demanant al govern,
l'Oficina del Cens, quin és el teu dades

396
00:23:05,400 --> 00:23:10,170
i després el traçat que o demanant
una entitat de tercers per algunes dades

397
00:23:10,170 --> 00:23:13,330
i després la construcció d'una
visualització en això.

398
00:23:13,330 --> 00:23:17,170
>> Així que el primer que volem fer
és traslladar això a un altre lloc.

399
00:23:17,170 --> 00:23:24,130
Així que vaig a crear un
presentar aquí anomenat data.json.

400
00:23:24,130 --> 00:23:25,600
JSON és el format de dades.

401
00:23:25,600 --> 00:23:29,210
No ha de saber molt sobre això.

402
00:23:29,210 --> 00:23:33,210
I anem a copiar el
poques dades que tenim allà,

403
00:23:33,210 --> 00:23:40,330
enganxar-hi textualment, aneu
de nou al nostre codi de visualització

404
00:23:40,330 --> 00:23:45,362
aquí, i utilitzar aquesta funció aquí.

405
00:23:45,362 --> 00:23:46,820
No ha de saber els detalls.

406
00:23:46,820 --> 00:23:49,800
Però el que això va a fer és,
trobarà aquest arxiu,

407
00:23:49,800 --> 00:23:51,780
portar el menjar, i tornar-lo a nosaltres.

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

409
00:24:11,660 --> 00:24:15,220
Així que el que fa és, va
i descarregar el fitxer data.json.

410
00:24:15,220 --> 00:24:18,570
I llavors tot el codi que és
sagnia dins-- essencialment,

411
00:24:18,570 --> 00:24:21,800
tot el codi de tenir allà-- voluntat
executi només quan aconseguim les dades de nou.

412
00:24:21,800 --> 00:24:25,760
I llavors funcionarà que
codi amb les dades que tenim.

413
00:24:25,760 --> 00:24:28,870
Gran, tenim una
visualització que consulta

414
00:24:28,870 --> 00:24:31,390
per algun codi en algun lloc
una altra cosa, que és generalment

415
00:24:31,390 --> 00:24:36,110
on algunes dades de consulta
en un altre lloc, que és generalment

416
00:24:36,110 --> 00:24:38,656
com funcionen les visualitzacions.

417
00:24:38,656 --> 00:24:41,400
>> Però vull tornar a les dades.

418
00:24:41,400 --> 00:24:48,030
Així que les dades fonamentalment en D3-- D3
consumeix dades que hi ha una llista de les coses.

419
00:24:48,030 --> 00:24:53,000
D3 espera que les dades que acaba de ser una llista
de les coses, una sèrie de coses.

420
00:24:53,000 --> 00:24:58,780
No importa quines són aquestes coses
són, en tant que és un conjunt d'ells.

421
00:24:58,780 --> 00:25:02,460
>> Així que aquí, per exemple, podríem de
Per suposat haver valors de punt flotant.

422
00:25:02,460 --> 00:25:04,830
Podríem tenir els negatius.

423
00:25:04,830 --> 00:25:09,400
D3 no li importa, sempre i
ja que és una llista de les coses.

424
00:25:09,400 --> 00:25:13,270
>> Com les coses interessants que
podria tenir, també podria

425
00:25:13,270 --> 00:25:19,410
tenir una llista de cadenes com aquestes.

426
00:25:19,410 --> 00:25:25,440
Així que aquests són els titulars de Crimson
Vaig agafar fa uns dies.

427
00:25:25,440 --> 00:25:29,220
I potser vostè pot trobar alguns interessants
coses d'aquests als titulars.

428
00:25:29,220 --> 00:25:30,970
>> Així que de nou, aquesta és una llista de les coses.

429
00:25:30,970 --> 00:25:32,360
D3 no li importa.

430
00:25:32,360 --> 00:25:35,572
Aquests resulten ser una cadena.

431
00:25:35,572 --> 00:25:36,530
Hem canviat els nostres dades.

432
00:25:36,530 --> 00:25:38,210
>> Tornem a la nostra visualització.

433
00:25:38,210 --> 00:25:42,495
Ara, el nostre visualització espera
l'entrada a ser nombres.

434
00:25:42,495 --> 00:25:44,370
Així que tindrem
fer alguns canvis.

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

436
00:25:47,180 --> 00:25:52,180
Així, per exemple, en primer lloc, potser
volem posar aquests cercles al llarg

437
00:25:52,180 --> 00:25:56,870
per la longitud de la titular, la
nombre de caràcters en el títol.

438
00:25:56,870 --> 00:26:03,600
>> Llavors, què farem és-- cada vegada que el nostre
funció és cridada amb una cadena,

439
00:26:03,600 --> 00:26:09,095
trobarem és la longitud I
després passa que a escala.

440
00:26:09,095 --> 00:26:11,550
El color, vaig a tornar
que a blau acer.

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

442
00:26:19,060 --> 00:26:20,420
I aquí anem.

443
00:26:20,420 --> 00:26:23,190
Tenim una visualització
titulars de carmesí.

444
00:26:23,190 --> 00:26:25,500
>> La nostra escala és una mica apagat.

445
00:26:25,500 --> 00:26:29,680
Anem a suposar que el més llarg
títol és de 100 caràcters,

446
00:26:29,680 --> 00:26:32,244
pel que abasten una mica.

447
00:26:32,244 --> 00:26:33,410
I tenim una visualització.

448
00:26:33,410 --> 00:26:36,710
Així que sembla que la majoria dels titulars
són força propers entre si,

449
00:26:36,710 --> 00:26:38,750
en termes de línia de caràcter.

450
00:26:38,750 --> 00:26:41,200
Però un que realment es destaca.

451
00:26:41,200 --> 00:26:46,660
>> Podríem construir algunes eines
explorar que més.

452
00:26:46,660 --> 00:26:50,710
Però quan jo estava treballant en això, jo estava
curiositat per saber si, en aquest conjunt de dades,

453
00:26:50,710 --> 00:26:53,880
titulars amb dos punts
en ells seria més llarg.

454
00:26:53,880 --> 00:26:55,770
I assumeix que ho farien.

455
00:26:55,770 --> 00:26:56,660
>> Així que anem a esbrinar.

456
00:26:56,660 --> 00:27:00,650
Anem a utilitzar el color
canal com ho vam fer abans,

457
00:27:00,650 --> 00:27:04,540
per codificar alguna sobre si
hi ha dos punts o no.

458
00:27:04,540 --> 00:27:07,220
Així que anem a utilitzar un condicional de nou.

459
00:27:07,220 --> 00:27:09,350
No ha de saber
els detalls d'aquesta,

460
00:27:09,350 --> 00:27:14,260
però així és com vam comprovar 01:00
cadena per a un personatge en particular

461
00:27:14,260 --> 00:27:16,355
en JavaScript, de nou, no és rellevant.

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

463
00:27:18,910 --> 00:27:23,270
>> Però si no trobem un
còlon, tornarem verd.

464
00:27:23,270 --> 00:27:26,100
I si ho fem, anem a tornar vermell.

465
00:27:26,100 --> 00:27:29,010
Així que de nou, titulars que
haver dos punts serà de color vermell.

466
00:27:29,010 --> 00:27:34,980
Això és el que aquest significa: agradable.

467
00:27:34,980 --> 00:27:38,040
>> Així que sembla que la meva
hipòtesi és colpejat.

468
00:27:38,040 --> 00:27:39,360
Només hi ha dos.

469
00:27:39,360 --> 00:27:42,380
Només tenim sis punts de dades
i només dos tenien dos punts.

470
00:27:42,380 --> 00:27:45,510
Però sembla una mica més
al capdavall, de fet.

471
00:27:45,510 --> 00:27:47,830
Titulars amb dos punts semblen
generalment a ser més curt,

472
00:27:47,830 --> 00:27:52,370
almenys en els nostres dades definido-- interessant.

473
00:27:52,370 --> 00:27:55,830
>> Tornem a què
blau acer i després veure

474
00:27:55,830 --> 00:28:00,601
el que podem fer amb encara
les dades més interessants.

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

476
00:28:04,370 --> 00:28:09,070
Així que de nou, he esmentat que
dades en D3 és una llista de les coses.

477
00:28:09,070 --> 00:28:11,080
Hem vist els números de molts tipus.

478
00:28:11,080 --> 00:28:12,810
Hem vist cordes.

479
00:28:12,810 --> 00:28:15,700
Però les coses també poden ser objectes.

480
00:28:15,700 --> 00:28:20,080
>> Poden ser coses complicades
que inclouen un munt de coses.

481
00:28:20,080 --> 00:28:24,510
Dir que amb més claredat,
en la majoria dels casos,

482
00:28:24,510 --> 00:28:28,384
vol construir cada punt de dades com
més complicat que un sol valor.

483
00:28:28,384 --> 00:28:30,175
Si vostè s'imagina un
base de dades sobre els estudiants,

484
00:28:30,175 --> 00:28:32,470
podria ser un estudiant
nom, una identificació d'estudiant,

485
00:28:32,470 --> 00:28:36,370
i un munt de coses associada
amb un registre en particular,

486
00:28:36,370 --> 00:28:39,834
no només una cadena o un nombre.

487
00:28:39,834 --> 00:28:40,750
Així que donem una ullada a això.

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

489
00:28:55,180 --> 00:28:56,760
>> Es tracta d'un conjunt d'aquestes dades.

490
00:28:56,760 --> 00:28:59,090
Es tracta d'un conjunt de dades sobre els terratrèmols.

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

492
00:29:01,910 --> 00:29:08,430
Així que tot el que aquí a la nostra llista o matriu
de les coses en si conté moltes coses.

493
00:29:08,430 --> 00:29:11,380
Així que cada punt de dades té una
magnitud i una coordenada.

494
00:29:11,380 --> 00:29:13,425
I coordina a si mateixos
contenir dues coses.

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

496
00:29:15,960 --> 00:29:20,450
>> Així que cada dia és ara molt més
complicat i molt més interessant

497
00:29:20,450 --> 00:29:22,700
i conté molt més
informació interessant.

498
00:29:22,700 --> 00:29:26,730
Anem a veure que podíem construir fora d'això.

499
00:29:26,730 --> 00:29:36,130
Tornant de nou a aquí, de nou, usant
la nostra visualització cercle histograma

500
00:29:36,130 --> 00:29:42,110
hem construït, anem a veure si podem construir un
la visualització de la distribució de magnitud

501
00:29:42,110 --> 00:29:43,305
en el nostre conjunt de dades.

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

503
00:29:45,850 --> 00:29:48,660
>> Així que aquí, és el mateix concepte.

504
00:29:48,660 --> 00:29:51,920
Però ara, d conté més coses.

505
00:29:51,920 --> 00:29:54,780
d conté molts elements de dades.

506
00:29:54,780 --> 00:29:57,946
Així que vesteixen D esquena.

507
00:29:57,946 --> 00:29:59,670
D3 ens dóna d.

508
00:29:59,670 --> 00:30:06,080
I nosaltres responem en trobar la magnitud
de d i després pas, que a escala.

509
00:30:06,080 --> 00:30:08,490
>> I llavors hem de canviar
la nostra escala, és clar.

510
00:30:08,490 --> 00:30:12,980
Així magnituds simplement no ho fan
anar molt més de 10.

511
00:30:12,980 --> 00:30:15,485
En realitat, no hi ha hagut
un terratrèmol de magnitud 10.

512
00:30:15,485 --> 00:30:19,360
Però això és una cosa de la nostra part superior
final, el nostre espectre superior.

513
00:30:19,360 --> 00:30:20,240
>> Anem a refrescar.

514
00:30:20,240 --> 00:30:22,990
Niça, tenim una visualització.

515
00:30:22,990 --> 00:30:25,490
És interessant el note--
hi ha dos punts de dades que

516
00:30:25,490 --> 00:30:29,010
són gairebé exactament a la part superior de cada
un altre, en termes de magnitud.

517
00:30:29,010 --> 00:30:31,350
Això es veu per l'opacitat que estem usant.

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

519
00:30:40,810 --> 00:30:42,690
>> Tenim dades geogràfiques ara.

520
00:30:42,690 --> 00:30:44,710
Tenim latituds i longitud.

521
00:30:44,710 --> 00:30:47,549
Potser podríem fer alguna cosa una
molt més interessant amb això.

522
00:30:47,549 --> 00:30:49,590
Anem a veure una mica més
interessant forma de visualitzar

523
00:30:49,590 --> 00:30:53,500
aquesta més complicat
dades que tenim accés.

524
00:30:53,500 --> 00:31:04,950
>> Acte V, Mapping-- fonamentalment,
volem posar aquests en un mapa.

525
00:31:04,950 --> 00:31:07,690
Vull dir, aquí és on va això.

526
00:31:07,690 --> 00:31:13,130
Volem per codificar informació sobre el
posició d'aquestes lectures del terratrèmol,

527
00:31:13,130 --> 00:31:16,350
així com la seva magnitud,
perquè hem de ara.

528
00:31:16,350 --> 00:31:21,310
Entenem com consumir
dades més complicats.

529
00:31:21,310 --> 00:31:26,200
>> El primer que farem és
crear un mapa, un mapa de fons.

530
00:31:26,200 --> 00:31:29,360
Vaig a anar a través de
això molt ràpidament.

531
00:31:29,360 --> 00:31:30,560
Aquest és el codi complicat.

532
00:31:30,560 --> 00:31:33,110
És un altre d'aquests
receptes que realment no

533
00:31:33,110 --> 00:31:35,690
ha d'entendre completament perquè utilitzeu.

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

535
00:31:38,510 --> 00:31:39,740
Però això és codi.

536
00:31:39,740 --> 00:31:43,580
Aquest codi aquí crea un mapa.

537
00:31:43,580 --> 00:31:45,730
>> No entrarem en detall.

538
00:31:45,730 --> 00:31:54,210
Però per sobre, el que fa és,
es consulta aquest arxiu us.json, que

539
00:31:54,210 --> 00:31:57,150
és un arxiu de dades com
la que teníem abans.

540
00:31:57,150 --> 00:31:59,150
És més complex, és clar.

541
00:31:59,150 --> 00:32:02,920
Però en aquest cas, tot,
cada punt de dades és aquest estat

542
00:32:02,920 --> 00:32:05,420
i té una llista de
latituds i longitud

543
00:32:05,420 --> 00:32:10,500
que defineixen el polígon,
aquesta forma, aquest estat.

544
00:32:10,500 --> 00:32:13,280
>> Llavors, què va a fer D3 és similar
al que vam fer abans.

545
00:32:13,280 --> 00:32:18,140
Es sol·licitarà que i
obligar que a un element.

546
00:32:18,140 --> 00:32:20,890
I hi ha una funció que
traçarà un mapa d'aquest element fora,

547
00:32:20,890 --> 00:32:23,410
basat en les latituds i longitud.

548
00:32:23,410 --> 00:32:24,580
Pots llegir més sobre això.

549
00:32:24,580 --> 00:32:27,385
I ho recomano.

550
00:32:27,385 --> 00:32:30,090
>> Hi ha enllaços a la part
final d'aquest codi publicarà.

551
00:32:30,090 --> 00:32:31,570
I es comenta el codi.

552
00:32:31,570 --> 00:32:34,050
En hi ha enllaços per a més endavant això.

553
00:32:34,050 --> 00:32:36,590
Et recomano que miris cap amunt.

554
00:32:36,590 --> 00:32:39,460
Però el que ens importa és
aquesta funció de projecció.

555
00:32:39,460 --> 00:32:41,210
Vull passar per això.

556
00:32:41,210 --> 00:32:43,522
>> En primer lloc, deixa mostrar
que, sí, tenim un mapa.

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

558
00:32:47,300 --> 00:32:49,970
Els mapes són cool.

559
00:32:49,970 --> 00:32:52,330
Així que donem una ullada a aquesta
funció de producció.

560
00:32:52,330 --> 00:32:56,481
>> La projecció és molt
com una balança, escales de nou.

561
00:32:56,481 --> 00:32:59,210
Així que el que la producció de
aquesta funció de projecció

562
00:32:59,210 --> 00:33:06,610
fa és, podríem passar-ho longitud
i latitudes-- en aquest cas,

563
00:33:06,610 --> 00:33:09,590
aquests valors aquí són la
lat-llargs de l'edifici

564
00:33:09,590 --> 00:33:13,990
estem asseguts a la dreta
ara-- a la projecció.

565
00:33:13,990 --> 00:33:20,560
I la projecció convertirà
que en els valors de x i y de píxels.

566
00:33:20,560 --> 00:33:23,300
>> Llavors, què està fent la projecció
és molt similar a la nostra escala.

567
00:33:23,300 --> 00:33:27,270
Es tracta de prendre les nostres latituds i
la longitud que representa tot un globus

568
00:33:27,270 --> 00:33:31,390
i la reducció i dimensionament que
a la plaça que volem,

569
00:33:31,390 --> 00:33:33,510
que li hem donat.

570
00:33:33,510 --> 00:33:35,220
En aquest cas, estem
passant aquests valors.

571
00:33:35,220 --> 00:33:41,370
I ens està donant, així, que
a la pantalla significa 640 píxels.

572
00:33:41,370 --> 00:33:46,250
Tota aquesta pantalla és 700 píxels
d'ample, de manera que ens fa per aquí,

573
00:33:46,250 --> 00:33:53,310
i 154 píxels cap avall, que jo
estimació és més o menys aquí.

574
00:33:53,310 --> 00:33:57,250
>> Així que tenint aquests lat-llargs, que
representar alguna cosa en tot el món

575
00:33:57,250 --> 00:34:02,850
i aixafant i que es mou i tot
ens valors X i Y de píxels donar,

576
00:34:02,850 --> 00:34:05,450
aquesta és la primera cosa que és
fet en aquest codi de correspondència.

577
00:34:05,450 --> 00:34:07,920
I després la resta de la
codi consumeix les dades

578
00:34:07,920 --> 00:34:14,310
i després aquests mapes lat-llargs
amb alguna cosa a la pantalla.

579
00:34:14,310 --> 00:34:18,380
>> Però utilitzarem aquesta projecció
funcions, perquè resulta que

580
00:34:18,380 --> 00:34:20,270
tenim lat-llargs llargs també.

581
00:34:20,270 --> 00:34:24,509
Mirant cap enrere en els nostres dades, tenim
latituds i coordenades de longitud

582
00:34:24,509 --> 00:34:25,425
per a cada observació.

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

584
00:34:28,131 --> 00:34:29,130
Així que anem a utilitzar la projecció.

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

586
00:34:33,250 --> 00:34:37,639
>> Així que buscant en la nostra exposició,
volem que el nostre exposition--

587
00:34:37,639 --> 00:34:39,590
tenim una latitud i una longitud.

588
00:34:39,590 --> 00:34:40,770
Però volem que els valors de píxels.

589
00:34:40,770 --> 00:34:43,510
I resulta que, tenim exactament
el que want-- projecció.

590
00:34:43,510 --> 00:34:46,239
Molt semblant estàvem
utilitzant l'escala d'aquí,

591
00:34:46,239 --> 00:34:52,075
ara utilitzarem projecció
i passar-ho coordina.

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

593
00:34:55,241 --> 00:34:56,949
Així que el primer
estem doing-- així que estem

594
00:34:56,949 --> 00:35:01,520
aconseguir d, que és una de dades individual
element d'un terratrèmol individu

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

596
00:35:02,370 --> 00:35:04,640
El primer que fem
és aconseguir les coordenades.

597
00:35:04,640 --> 00:35:06,150
Molt bé, tenim les coordenades.

598
00:35:06,150 --> 00:35:09,160
>> La segona cosa que fem és
va succeir que a la projecció.

599
00:35:09,160 --> 00:35:13,440
Projecció converteix aquestes coordenades
en valors de píxel, x i y.

600
00:35:13,440 --> 00:35:16,680
I després l'última cosa que
vull fer és obtenir la x,

601
00:35:16,680 --> 00:35:19,342
que aquest cas és el primer.

602
00:35:19,342 --> 00:35:22,050
És la primera de les dues coses
que són retornats per projecció.

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

604
00:35:27,840 --> 00:35:29,630
>> Nosaltres farem el mateix per i.

605
00:35:29,630 --> 00:35:34,960
Però en canvi, anem a tornar
el segon element, la i.

606
00:35:34,960 --> 00:35:35,980
Prepara't per refrescar.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, personatge extra
aquí-- agradable, tenim

609
00:35:46,450 --> 00:35:51,730
un document impulsat dades que és
ocultar aquest arxiu JSON dels objectes,

610
00:35:51,730 --> 00:35:57,560
fer un mapa, i canviant la
atribut en relació a les dades

611
00:35:57,560 --> 00:35:59,600
projectar-la en un mapa.

612
00:35:59,600 --> 00:36:00,840
Això és realment interessant.

613
00:36:00,840 --> 00:36:03,770
Això és genial.

614
00:36:03,770 --> 00:36:05,640
>> Prenguem a un nivell superior.

615
00:36:05,640 --> 00:36:08,795
Vull dir, tenim dues peces de
informació amb cada punt de dades.

616
00:36:08,795 --> 00:36:10,000
Vull dir, tres.

617
00:36:10,000 --> 00:36:12,540
Tenim les coordenades,
que és un x i y.

618
00:36:12,540 --> 00:36:15,700
I tenim la magnitud.

619
00:36:15,700 --> 00:36:17,420
>> Necessitem codificar magnitud d'alguna manera.

620
00:36:17,420 --> 00:36:18,920
Tenim una gran quantitat de canals.

621
00:36:18,920 --> 00:36:20,370
Podem utilitzar el color.

622
00:36:20,370 --> 00:36:21,890
Podem utilitzar el radi.

623
00:36:21,890 --> 00:36:23,040
Podríem utilitzar l'opacitat.

624
00:36:23,040 --> 00:36:25,540
Podríem utilitzar moltes coses en el codi.

625
00:36:25,540 --> 00:36:29,180
Qualsevol d'aquests atributs i molts
més que no són a la llista,

626
00:36:29,180 --> 00:36:33,065
, Perquè són opcionals, podríem
utilitzar per codificar aquestes dades, l'accident cerebrovascular

627
00:36:33,065 --> 00:36:35,670
i totes aquestes coses que he esmentat.

628
00:36:35,670 --> 00:36:36,690
>> Anem a fer ràdio.

629
00:36:36,690 --> 00:36:38,830
Crec ràdio és el més intuïtiu.

630
00:36:38,830 --> 00:36:46,210
Així que de nou, l'hi canviarem que codificamos-
40 i fer alguns càlculs.

631
00:36:46,210 --> 00:36:48,810
Farem servir la nostra escala favorit.

632
00:36:48,810 --> 00:36:50,290
I estem més enllà d.

633
00:36:50,290 --> 00:36:55,850
Però no d perquè volem que la magnitud
de d. d és només el punt de dades.

634
00:36:55,850 --> 00:36:57,430
Passarem la magnitud a escala.

635
00:36:57,430 --> 00:36:58,470
>> Anem a intentar-ho de nou.

636
00:36:58,470 --> 00:37:00,230
Ooh, que no funciona.

637
00:37:00,230 --> 00:37:02,940
Per què no funciona?

638
00:37:02,940 --> 00:37:04,387
>> Així que recorda el que fa escala.

639
00:37:04,387 --> 00:37:05,470
Fem una ullada a l'escala de nou.

640
00:37:05,470 --> 00:37:10,800
Mapes a escala d'1 a 10 sobre
al 22 de 600, més o menys.

641
00:37:10,800 --> 00:37:12,030
600 és enorme.

642
00:37:12,030 --> 00:37:14,730
És per això que estem rebent aquest.

643
00:37:14,730 --> 00:37:18,420
>> Així que volem canviar la nostra escala
a una mica més raonable.

644
00:37:18,420 --> 00:37:22,610
Diguem, volem 0-60.

645
00:37:22,610 --> 00:37:25,340
60 és gran, però 10 terratrèmols
són increïblement estrany.

646
00:37:25,340 --> 00:37:27,880
De fet, mai han succeït.

647
00:37:27,880 --> 00:37:31,830
>> Així que el que això va a fer és, que prendrà
la nostra magnitud que va d'1 a 10

648
00:37:31,830 --> 00:37:34,490
i assignar-la a expandir a terme.

649
00:37:34,490 --> 00:37:37,370
I assignar-la a 0 a 60.

650
00:37:37,370 --> 00:37:38,840
Anem a refrescar.

651
00:37:38,840 --> 00:37:41,850
>> Niça, tenim una visualització.

652
00:37:41,850 --> 00:37:42,500
Això és molt bo.

653
00:37:42,500 --> 00:37:43,736
Es tracta de dades reals.

654
00:37:43,736 --> 00:37:46,360
Es donarà compte, en el meu petit joguina
exemple, el terratrèmol més gran

655
00:37:46,360 --> 00:37:49,417
és just a sobre de nosaltres.

656
00:37:49,417 --> 00:37:50,000
Però això és tot.

657
00:37:50,000 --> 00:37:54,422
Tenim una visualització data impulsada
que consumeix les dades

658
00:37:54,422 --> 00:37:56,255
i ens dóna realment
informació interessant.

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

660
00:38:02,600 --> 00:38:06,420
Sí, anem a afegir una mica
interactivitat a ella.

661
00:38:06,420 --> 00:38:08,675
Esmentar que era
la força forta de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Així que aquí, per a cada element, estem
que descriu un grup d'atributs.

664
00:38:15,060 --> 00:38:20,230
Però també podem descriure el que volem
passarà amb elements d'interactivitat.

665
00:38:20,230 --> 00:38:26,190
Per exemple, podríem descriure
el que passa quan el cursor sobre.

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

667
00:38:28,740 --> 00:38:33,640
I molt similar que,
Això prendrà una funció,

668
00:38:33,640 --> 00:38:36,700
molt similar a la
atributs que teníem abans,

669
00:38:36,700 --> 00:38:44,650
on fem alguna cosa al
element quan passa sobre ella.

670
00:38:44,650 --> 00:38:47,100
>> Així que el primer que hem de
fer és seleccionar aquest element,

671
00:38:47,100 --> 00:38:49,435
per trobar-lo, bàsicament, al navegador.

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

673
00:38:57,090 --> 00:39:00,920
i llavors podríem establir
un atribut a la mateixa.

674
00:39:00,920 --> 00:39:06,870
Així que el que estic fent aquí és, quan passem per
per alguna cosa, ens posarem aquest element

675
00:39:06,870 --> 00:39:11,197
a continuació, estableixi la seva opacitat esquena
a 1, fins completament opaca.

676
00:39:11,197 --> 00:39:12,488
Anem a veure el que sembla.

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

678
00:39:29,430 --> 00:39:39,080
>> Sembla que tenim una
punt i coma addicional aquí.

679
00:39:39,080 --> 00:39:42,420
Així que si passem per aquí, que s'omple.

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

681
00:39:46,530 --> 00:39:48,960
Però ara, per descomptat,
pensió completa, ja que

682
00:39:48,960 --> 00:39:53,240
ha de descriure el que succeeix
Quan s'extreu la nostra cursor.

683
00:39:53,240 --> 00:39:59,990
Així que farem exactament això en
mouseout, a diferència de mouseover.

684
00:39:59,990 --> 00:40:06,399
>> I anem a restablir a
el que teníem abans-- 0.5.

685
00:40:06,399 --> 00:40:10,260
I ara, cada vegada que
vol estacionari, obtenim un cercle complet.

686
00:40:10,260 --> 00:40:13,468
Ens ajuda a veure el que
estem seleccionant essencialment.

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

688
00:40:19,210 --> 00:40:22,860
>> I ara farem això realment genial.

689
00:40:22,860 --> 00:40:26,210
Anem a connectar aquest a dades reals.

690
00:40:26,210 --> 00:40:30,890
Preguntem llavors podria
USGS sobre les seves dades.

691
00:40:30,890 --> 00:40:35,630
Així que el Servei Geològic dels EUA
té dades sobre terratrèmols.

692
00:40:35,630 --> 00:40:41,460
Tenen una API pública que és capaç
per ser consumit en format JSON.

693
00:40:41,460 --> 00:40:42,548
Així que farem això.

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

695
00:40:49,730 --> 00:40:55,900
>> Així que això és una mica de codi que
es connecta a l'API de USGS.

696
00:40:55,900 --> 00:40:57,990
I hi ha una mica de processament en ell.

697
00:40:57,990 --> 00:41:02,200
Això no és rellevant, però ho simplifica
a un format de dades simple com la que es

698
00:41:02,200 --> 00:41:03,800
que teníem abans.

699
00:41:03,800 --> 00:41:08,140
Així que em desfaig del nostre cridat a
la nostra data.json fals a l'arxiu.

700
00:41:08,140 --> 00:41:13,110
I en canvi, estic trucant
l'USGS essencialment.

701
00:41:13,110 --> 00:41:16,700
>> Anem a refrescar, agradable.

702
00:41:16,700 --> 00:41:21,260
És a dir, les dades reals de la vida real
d'aquesta setmana per als terratrèmols.

703
00:41:21,260 --> 00:41:23,217
Això és realment interessant.

704
00:41:23,217 --> 00:41:25,050
Això no és sorprenent
per a nosaltres, però hi ha

705
00:41:25,050 --> 00:41:27,909
una gran quantitat de terratrèmols al
Costa Oest a Califòrnia.

706
00:41:27,909 --> 00:41:30,950
Però vaig pensar que era molt interessant
que hi havia tants terratrèmols

707
00:41:30,950 --> 00:41:34,350
a Alaska, i pel que sembla,
aquí al Mig Oest.

708
00:41:34,350 --> 00:41:37,630
Vull dir, interessant, i estem bé.

709
00:41:37,630 --> 00:41:40,410
Aquesta és la conclusió.

710
00:41:40,410 --> 00:41:43,760
>> Però fonamentalment, aquesta
és el que ens ajuda a fer D3.

711
00:41:43,760 --> 00:41:48,030
Ens ajuda a donar les dades, s'uneixen
a elements en el DOM,

712
00:41:48,030 --> 00:41:51,620
i tenen els elements canvien
com una funció de les dades,

713
00:41:51,620 --> 00:41:54,780
tenir aquests atributs, tots els
molts atributs dels elements,

714
00:41:54,780 --> 00:41:57,393
tot ésser útil per a canals
per transmetre informació.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 és un increïblement poderós
biblioteca i increïblement ben dirigit.

717
00:42:09,290 --> 00:42:12,260
Això és una mica de matèria de gran abast.

718
00:42:12,260 --> 00:42:15,960
La visualització de dades és un
eina increïblement poderosa

719
00:42:15,960 --> 00:42:21,530
per transportar les persones profundes
idees que arriba al seu nucli

720
00:42:21,530 --> 00:42:25,430
i els ajuda a entendre, en
d'aquesta manera profunda i intuïtiva,

721
00:42:25,430 --> 00:42:29,760
com les dades de les obres i com
dades canvia la nostra vida.

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