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

2
00:00:00,780 --> 00:00:11,880
>> [Música tocando]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Eu son David
Chouinard, e este é D3.

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

5
00:00:17,700 --> 00:00:21,270
Imos aprender sobre D3 hoxe.

6
00:00:21,270 --> 00:00:25,020
D3 é un framework JavaScript
para a construción dunha alta calidade

7
00:00:25,020 --> 00:00:28,110
Vistas interactivas para a web.

8
00:00:28,110 --> 00:00:30,870
Cousas como o que estamos
vendo ao redor de min,

9
00:00:30,870 --> 00:00:34,230
imos aprender a facer os
cousas, tipo de os fundamentos da mesma.

10
00:00:34,230 --> 00:00:36,452
Pero vai ser legal.

11
00:00:36,452 --> 00:00:38,160
Comecemos
facer fotos bonitas.

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

13
00:00:41,108 --> 00:00:44,350
Temos máis demos
de perspectivas dispoñibles.

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

15
00:00:48,040 --> 00:00:50,760
Imos facelo.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- imos
para comezar inmediatamente facer cousas legais.

17
00:00:58,700 --> 00:01:01,240
Primeiro de todo, á esquerda, que ten o código.

18
00:01:01,240 --> 00:01:03,470
Á dereita, temos
o resultado do noso código.

19
00:01:03,470 --> 00:01:04,900
Imos pasar por iso.

20
00:01:04,900 --> 00:01:05,780
>> Imos facer un círculo.

21
00:01:05,780 --> 00:01:08,570
Que pensas disto?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
nós só fixemos un círculo.

23
00:01:14,934 --> 00:01:16,100
Non cre en min, non?

24
00:01:16,100 --> 00:01:18,190
Non está alí.

25
00:01:18,190 --> 00:01:21,830
>> Entón, o que nós fixemos aquí é,
SVG é gráficos vectoriais escalabades.

26
00:01:21,830 --> 00:01:27,530
Esta é a nosa forma de dicir ao navegador para
facer gráficos vectoriais no navegador.

27
00:01:27,530 --> 00:01:30,740
O que nós fixemos agora
engádese un círculo para navegar.

28
00:01:30,740 --> 00:01:34,790
>> A promesa é que o círculo
require un pouco de atributos básicos

29
00:01:34,790 --> 00:01:36,850
antes de que poidamos realmente velo.

30
00:01:36,850 --> 00:01:40,045
Necesitamos dicir que a súa posición x,
súa posición y, o seu radio.

31
00:01:40,045 --> 00:01:43,310
Non dicir que nada diso,
polo que non estamos a ver iso agora.

32
00:01:43,310 --> 00:01:46,210
Pero imos dicir que cousas.

33
00:01:46,210 --> 00:01:49,510
>> Entón, primeiro de todo, ten
para dar o noso círculo dun nome.

34
00:01:49,510 --> 00:01:53,070
Entón, imos chamalo de círculo.

35
00:01:53,070 --> 00:01:54,406
Noso círculo ten un nome agora.

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

37
00:01:57,230 --> 00:01:59,490
E imos dar-lle algúns atributos.

38
00:01:59,490 --> 00:02:03,690
Como uns cx ía centrarse x, de xeito
o centro da posición x.

39
00:02:03,690 --> 00:02:06,730
Digamos que, de 200 a 200 píxeles.

40
00:02:06,730 --> 00:02:10,220
>> Imos darlle un y 200 píxeles tamén.

41
00:02:10,220 --> 00:02:16,032
E un r, un raio, de preto de 40 píxeles.

42
00:02:16,032 --> 00:02:16,950
Agora imos ver.

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

44
00:02:21,740 --> 00:02:23,440
Eu non podo soletrar.

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

46
00:02:30,430 --> 00:02:31,520
>> Alí vai vostede.

47
00:02:31,520 --> 00:02:37,330
Temos un círculo na posición 200
píxeles, 200 píxeles, radio de 40 píxeles.

48
00:02:37,330 --> 00:02:38,280
Kind of legal, non?

49
00:02:38,280 --> 00:02:38,988
Temos un círculo.

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

51
00:02:40,880 --> 00:02:42,670
>> Entón non hai necesidade de seguir adiante.

52
00:02:42,670 --> 00:02:45,790
Todos estes exemplos, todas
o código que estou facendo hoxe

53
00:02:45,790 --> 00:02:51,300
será proporcionada en liña no extremo
baixo a forma de exemplos interactivos

54
00:02:51,300 --> 00:02:54,010
con postos de control na
cada acto, e así por diante.

55
00:02:54,010 --> 00:02:55,160
>> Imos facer máis cousas.

56
00:02:55,160 --> 00:02:58,901
Este círculo negro é realmente feo.

57
00:02:58,901 --> 00:03:01,541
Sinto moito por este erro
mensaxes logo alí.

58
00:03:01,541 --> 00:03:05,340
Alí imos nós.

59
00:03:05,340 --> 00:03:06,350
>> Imos darlle unha cor.

60
00:03:06,350 --> 00:03:07,170
Como é isto?

61
00:03:07,170 --> 00:03:08,340
Eu gusto de azul aceiro.

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

63
00:03:13,280 --> 00:03:16,030
Ben, o noso círculo cambiou de cor.

64
00:03:16,030 --> 00:03:17,320
Isto é óptimo.

65
00:03:17,320 --> 00:03:31,330
Imos facelo semitransparente
demasiado-- semitransparente.

66
00:03:31,330 --> 00:03:33,670
>> Entón, eses son atributos
estamos definindo no círculo.

67
00:03:33,670 --> 00:03:36,774
O primeiro que fixemos é
poñemos un círculo na páxina.

68
00:03:36,774 --> 00:03:38,690
E entón estamos definindo
unha morea de atributos.

69
00:03:38,690 --> 00:03:41,610
Algunhas destas son requiridas,
como CX, CY, e Radius.

70
00:03:41,610 --> 00:03:42,680
E outros son opcionais.

71
00:03:42,680 --> 00:03:44,730
>> Hai unha morea máis atributos.

72
00:03:44,730 --> 00:03:46,760
Hai unha morea deles.

73
00:03:46,760 --> 00:03:53,070
Por exemplo, poderíamos ter un
vertedura, así como, un golpe de vermello.

74
00:03:53,070 --> 00:03:55,630
Pero imos eliminar este.

75
00:03:55,630 --> 00:04:00,450
Estamos de volta a un círculo, un círculo azul.

76
00:04:00,450 --> 00:04:01,600
>> Entón, imos facer máis círculos.

77
00:04:01,600 --> 00:04:02,810
Como é isto?

78
00:04:02,810 --> 00:04:04,665
Imos facer outro círculo.

79
00:04:04,665 --> 00:04:05,985
Iso é emocionante, non é?

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

81
00:04:09,630 --> 00:04:12,300
>> Entón, dicir que eu só Copy-Pegado
o que xa tiñamos.

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

83
00:04:13,570 --> 00:04:15,840
E imos facer exactamente o
mesmo e darlle

84
00:04:15,840 --> 00:04:20,450
atributos, dada unha posición de 300 x.

85
00:04:20,450 --> 00:04:24,140
Yay, temos dous círculos agora.

86
00:04:24,140 --> 00:04:27,240
>> E, por suposto, poderiamos
actualizar eses valores.

87
00:04:27,240 --> 00:04:31,640
Podería poñelas 400, e agora se move.

88
00:04:31,640 --> 00:04:35,470
E xa que é aburrido, imos
eliminar-lo, polo que circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
El xa se foi.

91
00:04:40,730 --> 00:04:43,170
>> Entón, o que estamos facendo e
é só moito, very-- este

92
00:04:43,170 --> 00:04:46,030
é moi semellante ao que
pode facer en jQuery, por exemplo.

93
00:04:46,030 --> 00:04:48,240
Estamos só manipulando
o DOM, é chamado.

94
00:04:48,240 --> 00:04:50,040
Xa que ter oído esa palabra antes.

95
00:04:50,040 --> 00:04:53,255
Estamos creando cousas, establecendo
atributos de material, retirada de material.

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

97
00:04:58,950 --> 00:05:02,360
>> Agora, aquí é onde fica interesante.

98
00:05:02,360 --> 00:05:07,250
Entón, máis tarde no código, poderiamos aínda
refírense ao círculo orixinal aquí.

99
00:05:07,250 --> 00:05:14,100
Entón, imos axustar o seu atributo para caixa.

100
00:05:14,100 --> 00:05:18,260
Digamos, a súa posición x 400.

101
00:05:18,260 --> 00:05:22,406
E eu vou facer a transición
que, por iso é obvio.

102
00:05:22,406 --> 00:05:23,360
Alí imos nós.

103
00:05:23,360 --> 00:05:24,780
>> Por iso, engadiu un círculo.

104
00:05:24,780 --> 00:05:26,440
Nós axustar algúns atributos.

105
00:05:26,440 --> 00:05:28,210
Nós engadimos outro círculo, eliminou.

106
00:05:28,210 --> 00:05:31,650
E entón nós estamos modificando
o círculo orixinal.

107
00:05:31,650 --> 00:05:35,400
>> Pero aquí é onde fica
moito máis interesante.

108
00:05:35,400 --> 00:05:39,070
Non só podemos definir atributos
só como valores, podemos dicir,

109
00:05:39,070 --> 00:05:41,610
hey, círculo, ir á posición 200.

110
00:05:41,610 --> 00:05:44,540
Tamén pode configurar-los como funcións.

111
00:05:44,540 --> 00:05:48,850
>> Entón, en vez de dar 400 aquí,
podemos facer un cálculo

112
00:05:48,850 --> 00:05:53,950
on the fly para o que nós
quero ese atributo para ser.

113
00:05:53,950 --> 00:05:56,580
Entón é así que expresalo.

114
00:05:56,580 --> 00:06:00,660
Nós dicimos, en vez de 400, déixeme
darlle unha función no seu sitio.

115
00:06:00,660 --> 00:06:04,180
E aquí, dentro desa función,
podemos facer calquera cálculo tolo.

116
00:06:04,180 --> 00:06:06,820
>> Poderiamos tomar o tempo e
mirar para algunha outra cousa

117
00:06:06,820 --> 00:06:11,230
e decidir de forma dinámica para
o círculo que valor que queremos.

118
00:06:11,230 --> 00:06:15,266
Que tal dar
-lle un x posición aleatoria?

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

120
00:06:20,360 --> 00:06:21,120
Entón é iso.

121
00:06:21,120 --> 00:06:25,490
>> Entón, o que di é, por
cada x, realizar esta función.

122
00:06:25,490 --> 00:06:29,340
E o que estamos facendo é o cálculo
algunhas cousas, unha horarios aleatorios o ancho

123
00:06:29,340 --> 00:06:30,410
e retornando que.

124
00:06:30,410 --> 00:06:34,765
Entón, cada vez que corremos, temos un
círculo que vai a un lugar ao chou.

125
00:06:34,765 --> 00:06:36,394
É ben legal.

126
00:06:36,394 --> 00:06:38,310
Eu sinto como se eu puidese ollar
no presente por pouco.

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

128
00:06:44,274 --> 00:06:46,440
Estamos empezando a chegar
algo interesante aquí.

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

130
00:06:49,120 --> 00:06:51,390
Imos facer eses datos conducido agora.

131
00:06:51,390 --> 00:06:53,420
Non hai datos aquí.

132
00:06:53,420 --> 00:06:54,482
Imos cambiar isto.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- Act II, Fecha Driven
Entón imos voltar a aquí.

135
00:07:12,140 --> 00:07:15,340
E imos só se librar de circle2,
porque estamos só engadindo e eliminando

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

137
00:07:15,840 --> 00:07:17,382
Entón, nós realmente non precisa.

138
00:07:17,382 --> 00:07:21,421
Necesitamos ser moito máis intelixente aquí.

139
00:07:21,421 --> 00:07:23,170
Digamos, temos
algúns datos de calquera tipo.

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

141
00:07:31,540 --> 00:07:40,020
Un moment-- imos dicir,
tivemos datos deste formulario.

142
00:07:40,020 --> 00:07:41,800
Tivemos unha matriz, só
unha morea de números.

143
00:07:41,800 --> 00:07:45,750
Temos sete números,
o que quere que estes cantidade represent--

144
00:07:45,750 --> 00:07:48,810
en conta bancaria da xente, como
como eles pesan, Deus sabe o que.

145
00:07:48,810 --> 00:07:51,310
>> Estes son os números, e nós
quere usar os nosos círculos

146
00:07:51,310 --> 00:07:53,240
para representar os números de algunha maneira.

147
00:07:53,240 --> 00:07:55,515
Queremos amarre nosa
círculos a estas cifras.

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

149
00:07:58,750 --> 00:07:59,626
Entón, o que nós facemos.

150
00:07:59,626 --> 00:08:01,500
Digamos, queremos unha
círculo para cada número.

151
00:08:01,500 --> 00:08:03,590
Poderiamos facer o vello
cousa que foron doing--

152
00:08:03,590 --> 00:08:06,020
círculo de acréscimo e circle2 e Circle3.

153
00:08:06,020 --> 00:08:10,020
Pero iso queda fóra de man, e
hai unha morea de repetir a lóxica.

154
00:08:10,020 --> 00:08:12,760
>> Entón, imos comezar máis intelixente con iso.

155
00:08:12,760 --> 00:08:17,810
En vez de usar o círculo var
svg.append que estabamos usando,

156
00:08:17,810 --> 00:08:21,580
usaremos
este pequeno bloque aquí.

157
00:08:21,580 --> 00:08:24,510
Eu non quero ir en profundidade
en que todas estas pezas fan.

158
00:08:24,510 --> 00:08:26,020
E é unha especie de un tema avanzado.

159
00:08:26,020 --> 00:08:27,830
E gustaríame poder.

160
00:08:27,830 --> 00:08:31,370
>> Pero a principal cousa a recognize-- e
vai ver é moi frecuentemente no código D3.

161
00:08:31,370 --> 00:08:36,840
Este bloque de texto básico
crea tantos círculos

162
00:08:36,840 --> 00:08:41,360
xa que hai elementos de datos
nesa matriz aquí.

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

164
00:08:53,420 --> 00:08:55,780
Entón iso crea tantos
círculos como hai elementos.

165
00:08:55,780 --> 00:08:58,520
Vai crear connosco sete círculos.

166
00:08:58,520 --> 00:09:01,710
E fai unha cousa moi, moi fundamental.

167
00:09:01,710 --> 00:09:02,460
Entón, imos realizar iso.

168
00:09:02,460 --> 00:09:05,460
Imos eliminar o noso outro círculo.

169
00:09:05,460 --> 00:09:09,565
Nós só comentar esta
parcialmente fóra e correr de novo.

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

171
00:09:13,840 --> 00:09:15,260
>> Alí imos nós.

172
00:09:15,260 --> 00:09:18,030
Así, o noso círculo aquí é un
moito máis escuro, porque nós

173
00:09:18,030 --> 00:09:20,720
ten sete círculos, un
enriba do outro.

174
00:09:20,720 --> 00:09:25,425
Nós acabamos de crear sete círculos, un
cada para cada un destes elementos de datos.

175
00:09:25,425 --> 00:09:28,860
Pero hai unha cousa fundamental que pasou
con ese fragmento aquí.

176
00:09:28,860 --> 00:09:31,030
>> É que os datos foron obrigados.

177
00:09:31,030 --> 00:09:33,440
Así, cada un de
estes elementos de datos,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, foi conectado
para un círculo en particular.

179
00:09:38,830 --> 00:09:40,960
Polo tanto, estas non só creou
unha morea de círculos

180
00:09:40,960 --> 00:09:43,420
Pero os lazos estas dúas cousas xuntas.

181
00:09:43,420 --> 00:09:48,740
>> E, no futuro, porque creamos
aqueles círculos con esta función, D3

182
00:09:48,740 --> 00:09:52,430
se eu lle der un círculo, pode
darme os datos asociados.

183
00:09:52,430 --> 00:09:53,280
Así, podemos preguntar D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, eu teño ese círculo.

185
00:09:54,840 --> 00:09:57,350
Cal é a datos que o círculo ten?

186
00:09:57,350 --> 00:10:01,290
E D3 nos diría 10 ou 45 ou 105.

187
00:10:01,290 --> 00:10:02,380
>> Esas cousas están vinculados.

188
00:10:02,380 --> 00:10:04,490
Isto é un concepto moi, moi fundamental.

189
00:10:04,490 --> 00:10:06,070
Imos ollar para iso.

190
00:10:06,070 --> 00:10:12,210
>> Así, a forma que pediría D3-- así
iso é irrelevante para este,

191
00:10:12,210 --> 00:10:16,620
pero confía en min mesmo.

192
00:10:16,620 --> 00:10:17,620
Isto é como se require D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, dáme o primeiro
círculo que pode atopar.

194
00:10:21,312 --> 00:10:23,580
Déame o primeiro círculo que pode atopar.

195
00:10:23,580 --> 00:10:29,660
E entón poderíamos preguntarnos D3, o que é
os datos en que, como este, 10.

196
00:10:29,660 --> 00:10:33,380
>> Entón, nós só pedimos D3, atopar-me
o primeiro círculo que pode atopar.

197
00:10:33,380 --> 00:10:34,400
O que hai de seus datos?

198
00:10:34,400 --> 00:10:36,650
10, que é de feito o noso
primeiro elemento de datos.

199
00:10:36,650 --> 00:10:42,150
Poderiamos preguntar-la, hey, D3,
atopar-nos o noso terceiro círculo.

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

201
00:10:44,450 --> 00:10:45,740
Por que iso é realmente importante?

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

203
00:10:49,790 --> 00:10:52,250
>> Entón, aquí, eu mencionen
que poderiamos usar funcións.

204
00:10:52,250 --> 00:10:54,910
E eu mencionen que era
unha cousa moi poderosa.

205
00:10:54,910 --> 00:11:03,070
Así, non só pode facer cousas nosas funcións
como facer algunha computación, por exemplo,

206
00:11:03,070 --> 00:11:09,170
devolver un número aleatorio, que pode
tamén facer as cousas a partir dos datos.

207
00:11:09,170 --> 00:11:11,550
Isto é o que Fecha Driven documentos significan.

208
00:11:11,550 --> 00:11:13,750
Iso é o que D3 representa.

209
00:11:13,750 --> 00:11:17,800
>> Polo tanto, este x postition-- vez
de só dicir, todos os círculos,

210
00:11:17,800 --> 00:11:21,735
obter x posición 200, que
podería darlle unha función.

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

212
00:11:26,140 --> 00:11:30,140
E aquí, podemos facer algúns cálculos.

213
00:11:30,140 --> 00:11:33,710
e d aquí queda no lugar para os datos.

214
00:11:33,710 --> 00:11:36,120
Entón, cada vez que temos
un círculo, basicamente,

215
00:11:36,120 --> 00:11:37,750
D3 creará estes sete círculos.

216
00:11:37,750 --> 00:11:38,500
E, a continuación, para cada

217
00:11:38,500 --> 00:11:41,920
>> círculo, está indo a ir, hey,
circle1 cal é a súa posición x.

218
00:11:41,920 --> 00:11:45,210
Anteriormente, eran
respondendo sempre 200.

219
00:11:45,210 --> 00:11:48,630
Pero agora, cada vez pide D3
-Nos o que é a súa posición x,

220
00:11:48,630 --> 00:11:51,790
que dará US-- temos
ese círculo, por iso temos os datos.

221
00:11:51,790 --> 00:11:55,290
Vai dar os datos e dicir:
o que quere a exposición a ser,

222
00:11:55,290 --> 00:11:57,120
con base neses datos.

223
00:11:57,120 --> 00:11:59,590
>> Nós só devolver os datos reais.

224
00:11:59,590 --> 00:12:04,910
Entón, se nós realizar este, isto dá
datos dos EUA conducido documentos.

225
00:12:04,910 --> 00:12:08,040
Estes medios están baseados
en relación Position--

226
00:12:08,040 --> 00:12:11,120
son bases como unha función dos datos.

227
00:12:11,120 --> 00:12:13,100
>> Así, para o primeiro círculo,
D3 pon un círculo.

228
00:12:13,100 --> 00:12:16,770
E entón D3 nos pide, o que facer
quere que a exposición sexa.

229
00:12:16,770 --> 00:12:19,620
E acabamos de dicir, todo o que os datos son.

230
00:12:19,620 --> 00:12:21,185
Fai a exposición 10.

231
00:12:21,185 --> 00:12:26,320
>> A continuación, el pregunta, o que quere que o
exposición a ser para o segundo círculo.

232
00:12:26,320 --> 00:12:27,270
E nós respondemos, de 45 anos.

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

234
00:12:30,000 --> 00:12:32,230
E nós, por suposto, pode
facer algunha computación aquí.

235
00:12:32,230 --> 00:12:35,510
Creo que eses círculos
son unha especie de esmagado up.

236
00:12:35,510 --> 00:12:38,965
>> Entón multiplique por 3, multiplicar datos por 3.

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

238
00:12:41,870 --> 00:12:43,840
Noso círculo acaba de ser expandido para fóra.

239
00:12:43,840 --> 00:12:46,730
O noso valor foi triplicado.

240
00:12:46,730 --> 00:12:51,010
>> O círculo é realmente no límite,
entón imos quizais tipo de compensalo la.

241
00:12:51,010 --> 00:12:53,632
Digamos que, en 20.

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

243
00:12:56,070 --> 00:12:57,590
>> Isto é a vista de datos.

244
00:12:57,590 --> 00:13:01,767
É unha forma moi básica, pero este
nos dá algúns consellos sobre os nosos datos.

245
00:13:01,767 --> 00:13:04,600
Dinos que, por exemplo, nos
teñen un pequeno grupo de elementos.

246
00:13:04,600 --> 00:13:06,340
E nós temos unha gran outlier aquí.

247
00:13:06,340 --> 00:13:10,830
Isto dános unha información
sobre a distribución.

248
00:13:10,830 --> 00:13:20,830
>> Se nós, por exemplo, para cambiar
os datos a 150 aquí e actualización,

249
00:13:20,830 --> 00:13:22,630
a visualización é alterada.

250
00:13:22,630 --> 00:13:24,285
Este documento é dirixido datos.

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

252
00:13:32,640 --> 00:13:36,180
>> Entón, por suposto, todos estes elementos,
todos estes atributos aquí,

253
00:13:36,180 --> 00:13:38,430
podemos utilizar unha función, non
só os números, e non só

254
00:13:38,430 --> 00:13:39,900
x e y posicións.

255
00:13:39,900 --> 00:13:42,120
Así, podemos utilizar unha función para a cor.

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

257
00:13:45,260 --> 00:13:46,360
Entón, imos facer o mesmo.

258
00:13:46,360 --> 00:13:49,360
Nós imos darlle unha función.

259
00:13:49,360 --> 00:13:52,320
>> E imos dicir, poderiamos
condicións na nosa función.

260
00:13:52,320 --> 00:13:54,770
Esta función pode ser
cen longas colas.

261
00:13:54,770 --> 00:13:57,150
Pode facer cousas moi, moi complicadas.

262
00:13:57,150 --> 00:13:59,080
>> Entón, imos poñer unha declaración aquí.

263
00:13:59,080 --> 00:14:03,420
Digamos que, se os nosos datos é menor
de 50, que é un limiar

264
00:14:03,420 --> 00:14:05,817
que estamos interesados
en por algún motivo.

265
00:14:05,817 --> 00:14:06,650
Imos facelo verde.

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

267
00:14:09,830 --> 00:14:15,320
Se non, imos facelo vermello.

268
00:14:15,320 --> 00:14:16,110
Como é isto?

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
>> Polo tanto, a nosa visualización de datos está comezando
para transmitir información máis interesante

272
00:14:24,860 --> 00:14:26,727
en moitas canles.

273
00:14:26,727 --> 00:14:28,560
Polo tanto, agora sabemos un pouco
sobre a distribución.

274
00:14:28,560 --> 00:14:31,768
E sabemos que hai algún tipo de
cortados en 50 que estamos interesados.

275
00:14:31,768 --> 00:14:35,630
Sabemos que hai dous puntos de datos
debaixo dese limiar e a maioría deles

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

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

278
00:14:41,510 --> 00:14:46,160
>> Así, como un paso final, estes datos aquí,
é moi raro ver este como aquel.

279
00:14:46,160 --> 00:14:52,610
Entón imos só tirala a unha variable
porque é máis limpo, como este.

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

281
00:15:02,980 --> 00:15:05,197
E, entón, usar esta variable aquí.

282
00:15:05,197 --> 00:15:06,280
É exactamente o mesmo.

283
00:15:06,280 --> 00:15:07,280
É só un pouco de.

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

285
00:15:25,300 --> 00:15:35,300
>> Logo Acto III, Scales--
Entón, un problema de dereito

286
00:15:35,300 --> 00:15:38,920
aquí é que, se non mudarmos a nosa
datos deste 200 value--

287
00:15:38,920 --> 00:15:41,685
se cambia-lo para 400
ou algo así e de actualización,

288
00:15:41,685 --> 00:15:44,540
entón este valor só fun fóra de campo.

289
00:15:44,540 --> 00:15:49,040
Polo tanto, a nosa lóxica aquí
de como facemos as veces 3

290
00:15:49,040 --> 00:15:52,570
e 20, para espallalas-lo para fóra, e, a continuación,
compensa-la un pouco é realmente pesado.

291
00:15:52,570 --> 00:15:54,150
>> O que significan eses números?

292
00:15:54,150 --> 00:15:55,400
Están só codificado alí.

293
00:15:55,400 --> 00:15:58,830
E eles están moi ligados aos datos.

294
00:15:58,830 --> 00:16:00,550
Queremos un documento de datos conducido.

295
00:16:00,550 --> 00:16:05,460
Queremos un documento moi flexible,
dado que os datos, se adapta a iso

296
00:16:05,460 --> 00:16:07,900
e representa-lo.

297
00:16:07,900 --> 00:16:11,330
>> O que necesitamos é, basicamente, nós
ter ese intervalo de números 10.

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

299
00:16:12,640 --> 00:16:17,630
E nós queremos mapear que saíu
o ancho, o ancho total aquí.

300
00:16:17,630 --> 00:16:20,620
Polo tanto, temos a gama de
números que van de 0 a 100.

301
00:16:20,620 --> 00:16:24,980
E nós temos este campus I vai
20-700, neste caso.

302
00:16:24,980 --> 00:16:26,515
>> Nós medio que quere mapear que diante.

303
00:16:26,515 --> 00:16:30,002
Queremos que escalar para arriba e
entón compensa-la un pouco.

304
00:16:30,002 --> 00:16:33,165
Acontece que o D3 ten estes.

305
00:16:33,165 --> 00:16:34,220
Chama-se unha escala.

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

307
00:16:37,410 --> 00:16:38,250
Entón, imos usalo.

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

309
00:16:46,300 --> 00:16:49,670
>> O xeito que works-- vou
escriba isto e, a continuación, explicar.

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

311
00:17:01,530 --> 00:17:02,450
Esta é unha escala.

312
00:17:02,450 --> 00:17:08,670
O que vai facer é, que vai mapear
valores de 1 a 200 en 20 a 600.

313
00:17:08,670 --> 00:17:10,990
Podemos comprobar iso.

314
00:17:10,990 --> 00:17:13,329
Podemos ver iso aquí.

315
00:17:13,329 --> 00:17:21,704
>> Entón, se eu alimento-lo 1-- un momento.

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

317
00:17:47,764 --> 00:17:48,555
Dáme un segundo.

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

319
00:17:53,680 --> 00:17:55,080
Debo escribir mal-lo.

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

321
00:18:15,320 --> 00:18:15,990
Alí vai vostede.

322
00:18:15,990 --> 00:18:17,930
Eu sinto moito por iso.

323
00:18:17,930 --> 00:18:22,050
>> Entón, o que a escala vai facer
é, vai levar un valor

324
00:18:22,050 --> 00:18:24,930
e, a continuación, converter que,
ampliar ese fóra, por iso

325
00:18:24,930 --> 00:18:27,320
enche toda a gama que está pedindo.

326
00:18:27,320 --> 00:18:32,910
Polo tanto, neste caso, se derme a el un,
que vai mapear que saíu 20.

327
00:18:32,910 --> 00:18:37,750
E se nós lle damos 200, é
vai mapear en que a 600.

328
00:18:37,750 --> 00:18:40,460
E nalgún lugar no medio,
se logramos 100, é

329
00:18:40,460 --> 00:18:44,610
vai estar nalgún lugar
entre 20 e 600.

330
00:18:44,610 --> 00:18:51,480
>> E, por suposto, agora iso é o que
necesitamos eliminar eses codificado

331
00:18:51,480 --> 00:18:53,402
cousas que temos alí.

332
00:18:53,402 --> 00:18:55,950
Entón, o que queremos facer é
ter os datos que estamos

333
00:18:55,950 --> 00:19:00,950
dada, que os datos individuais
elemento, e pasalo a escalar por primeira vez.

334
00:19:00,950 --> 00:19:02,635
Entón escala vai escala-lo para arriba.

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

336
00:19:27,020 --> 00:19:48,880
>> Bom-- Oh, temos un pequeno erro aquí.

337
00:19:48,880 --> 00:19:50,120
Estamos perdendo datos.

338
00:19:50,120 --> 00:19:51,290
Alí vai vostede.

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

340
00:19:58,550 --> 00:19:59,550
E que se expande para fóra.

341
00:19:59,550 --> 00:20:01,383
>> Isto nos dá a mesma
resultado que tiñamos antes,

342
00:20:01,383 --> 00:20:04,030
pero no canto de ter os
codificado restricións.

343
00:20:04,030 --> 00:20:07,790
E se o tamaño do noso
cambios de lona, ​​por exemplo,

344
00:20:07,790 --> 00:20:11,790
Se queremos ter iso máis
400 píxeles e que espreme a fóra,

345
00:20:11,790 --> 00:20:15,440
podemos ter over--
podemos expandir-lo, ou nós

346
00:20:15,440 --> 00:20:21,890
pode reducir esta marxe esquerda a
algo máis ou menos que 20.

347
00:20:21,890 --> 00:20:25,470
Estas cifras, estes codificado
números agora ten sentido para nós.

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

349
00:20:28,110 --> 00:20:30,520
>> E nós poderíamos facer moito máis
cousas interesantes tamén.

350
00:20:30,520 --> 00:20:35,990
Entón, en vez de ter un lineal
escala, podemos querer rexistrar unha escala.

351
00:20:35,990 --> 00:20:37,840
E iso daranos unha escala logarítmica.

352
00:20:37,840 --> 00:20:41,269
>> Entón, agora a nosa escala, no canto de
só mellore a fóra do intervalo,

353
00:20:41,269 --> 00:20:42,810
está facendo cousas máis sofisticadas.

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

355
00:20:48,790 --> 00:20:53,790
En vez de ter esta gama duro
codificada, e en vez de ter que 600,

356
00:20:53,790 --> 00:20:58,465
podemos querer usar só o ancho,
así segundo o ancho 20 menos 40,

357
00:20:58,465 --> 00:21:02,392
2 veces a marxe do outro lado.

358
00:21:02,392 --> 00:21:05,350
E iso fai moito máis sentido
alguén que se pode ollar o código.

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

360
00:21:08,080 --> 00:21:11,850
>> Curiosamente, as escalas de obter
moi, moi sofisticado.

361
00:21:11,850 --> 00:21:13,350
Eles fan unha chea de cousas interesantes.

362
00:21:13,350 --> 00:21:17,620
Así, as escalas non teñen necesariamente
para operar só con números.

363
00:21:17,620 --> 00:21:18,955
Imos facer unha escala de cores.

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

365
00:21:23,120 --> 00:21:26,120
>> Polo tanto, a nosa gama podería ser--
noso dominio é de 1 a 200.

366
00:21:26,120 --> 00:21:28,220
Esa é a cousa entrada.

367
00:21:28,220 --> 00:21:33,793
Pero podemos querer mapear
verde a vermello, por exemplo.

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

369
00:21:39,710 --> 00:21:42,910
E agora, se pasar 1,
imos obter verde.

370
00:21:42,910 --> 00:21:45,110
Se derme 200, nós imos chegar vermello.

371
00:21:45,110 --> 00:21:49,480
E se pasar algo entre os dous,
que vai haber algún mix de que,

372
00:21:49,480 --> 00:21:52,520
nalgún lugar no gradiente
entre o verde eo vermello.

373
00:21:52,520 --> 00:21:55,210
>> E, en vez de ter
este tipo de lóxica torpe

374
00:21:55,210 --> 00:21:58,550
temos aquí coa
condicional alí mesmo,

375
00:21:58,550 --> 00:22:03,250
poderiamos ter un something--
escala lineal entre eses.

376
00:22:03,250 --> 00:22:07,100
Por iso, usaría a escala que acabamos
creado, que chamamos cor.

377
00:22:07,100 --> 00:22:09,060
E nós queremos darlle D, que
é a nosa elemento de datos.

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

379
00:22:14,250 --> 00:22:15,060
E alí imos nós.

380
00:22:15,060 --> 00:22:18,070
Temos unha escala de cores.

381
00:22:18,070 --> 00:22:18,940
>> Polo tanto, este é o mapeamento.

382
00:22:18,940 --> 00:22:20,960
Así, a extrema esquerda é completamente verde.

383
00:22:20,960 --> 00:22:22,560
A extrema dereita é completamente vermello.

384
00:22:22,560 --> 00:22:24,828
E todo no medio
é unha función d.

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

386
00:22:33,369 --> 00:22:35,160
Temos unha interesante
Vistas aquí.

387
00:22:35,160 --> 00:22:36,952
Pero os nosos datos foi medio aburrido.

388
00:22:36,952 --> 00:22:39,410
Veremos que poderiamos facer se
tivemos datos máis interesantes.

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

390
00:22:44,420 --> 00:22:50,500
>> Acto IV, Con Traballo
Data-- o primeiro

391
00:22:50,500 --> 00:22:53,560
imos querer facer para facer a
visualización máis interesante

392
00:22:53,560 --> 00:22:56,140
é mover os datos noutro lugar.

393
00:22:56,140 --> 00:22:58,310
É moi pesado para ter
os datos codificados aquí.

394
00:22:58,310 --> 00:23:01,220
E, xeralmente, nós imos estar se pregunta
outra persoa para os datos.

395
00:23:01,220 --> 00:23:05,400
Estaremos quizais pedindo que o goberno,
o Census Bureau, o que é o seu de datos

396
00:23:05,400 --> 00:23:10,170
e, a continuación, trazando que é pedir
algunha entidade de terceiros para obter algúns datos

397
00:23:10,170 --> 00:23:13,330
e, a continuación, a construción dun
visualización sobre iso.

398
00:23:13,330 --> 00:23:17,170
>> Entón o primeiro que queremos facer
é pasar isto para algún outro lugar.

399
00:23:17,170 --> 00:23:24,130
Entón, eu estou indo a crear unha
arquivar aquí chamado data.json.

400
00:23:24,130 --> 00:23:25,600
JSON é o formato de datos.

401
00:23:25,600 --> 00:23:29,210
Non precisa saber moito sobre iso.

402
00:23:29,210 --> 00:23:33,210
E nós estamos indo a copiar o
poucos datos que temos alí,

403
00:23:33,210 --> 00:23:40,330
pegalo alí na súa totalidade, acceda
de volta ao noso código de visualización

404
00:23:40,330 --> 00:23:45,362
aquí, e empregue esta función aquí.

405
00:23:45,362 --> 00:23:46,820
Non ten que saber os detalles.

406
00:23:46,820 --> 00:23:49,800
Pero o que isto vai facer é,
vai atopar o ficheiro,

407
00:23:49,800 --> 00:23:51,780
buscala, e devolve-lo para nós.

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

409
00:24:11,660 --> 00:24:15,220
Entón, o que iso fai é, que vai
e obter o ficheiro data.json.

410
00:24:15,220 --> 00:24:18,570
E, a continuación, todo o código que é
recuadas dentro-- esencialmente,

411
00:24:18,570 --> 00:24:21,800
todo o código temos há-- vontade
realizar só cando chegamos os datos de volta.

412
00:24:21,800 --> 00:24:25,760
E entón el vai realizar ese
código cos datos que temos.

413
00:24:25,760 --> 00:24:28,870
Grande, temos unha
visualización que consulta

414
00:24:28,870 --> 00:24:31,390
por algún código nalgún lugar
outra, o que adoita

415
00:24:31,390 --> 00:24:36,110
onde consulta de datos a partir dalgúns
noutro lugar, o que é normalmente

416
00:24:36,110 --> 00:24:38,656
como visualizacións traballar.

417
00:24:38,656 --> 00:24:41,400
>> Pero quero volver para os datos.

418
00:24:41,400 --> 00:24:48,030
Así, os datos fundamentalmente D3-- D3
consome datos que é unha lista de cousas.

419
00:24:48,030 --> 00:24:53,000
D3 espera que os datos só ser unha lista
das cousas, unha serie de cousas.

420
00:24:53,000 --> 00:24:58,780
Non importa o que esas cousas
son, por tanto, sempre que sexa unha matriz deles.

421
00:24:58,780 --> 00:25:02,460
>> Entón, aquí, por exemplo, poderiamos de
Claro que teñen valores de punto flotante.

422
00:25:02,460 --> 00:25:04,830
Poderiamos ter negativos.

423
00:25:04,830 --> 00:25:09,400
A D3 non me importa, tal
como é unha lista de cousas.

424
00:25:09,400 --> 00:25:13,270
>> Como as cousas interesantes que
podería, tamén poderiamos

425
00:25:13,270 --> 00:25:19,410
Ten unha lista de cadeas como esta.

426
00:25:19,410 --> 00:25:25,440
Entón, estas son as titulares carmesim
Peguei uns días.

427
00:25:25,440 --> 00:25:29,220
E quizais podes atopar algunhas interesantes
cousas sobre estes un titulares.

428
00:25:29,220 --> 00:25:30,970
>> Entón, de novo, esta é unha lista de cousas.

429
00:25:30,970 --> 00:25:32,360
A D3 non me importa.

430
00:25:32,360 --> 00:25:35,572
Estes ocorrer de ser un string.

431
00:25:35,572 --> 00:25:36,530
Nós cambiamos os nosos datos.

432
00:25:36,530 --> 00:25:38,210
>> Imos volver á nosa vista.

433
00:25:38,210 --> 00:25:42,495
Agora, a nosa vista espera
a entrada a ser números.

434
00:25:42,495 --> 00:25:44,370
Entón, nós imos ter
para facer algúns cambios.

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

436
00:25:47,180 --> 00:25:52,180
Así, por exemplo, en primeiro lugar, quizais
queremos poñer eses círculos ao longo

437
00:25:52,180 --> 00:25:56,870
pola lonxitude do título, o
número de caracteres no título.

438
00:25:56,870 --> 00:26:03,600
>> Entón, o que nós imos facer é-- cada vez que o noso
función é chamada cunha corda,

439
00:26:03,600 --> 00:26:09,095
imos descubrir que é lonxitude E
a continuación, pasar isto para escala.

440
00:26:09,095 --> 00:26:11,550
A cor, eu vou volver
que a Blue Steel.

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

442
00:26:19,060 --> 00:26:20,420
E alí imos nós.

443
00:26:20,420 --> 00:26:23,190
Temos unha visualización
titulares de carmesim.

444
00:26:23,190 --> 00:26:25,500
>> Nosa escala é un pouco fóra.

445
00:26:25,500 --> 00:26:29,680
Supoñamos que o máis longo
Headline é de 100 caracteres,

446
00:26:29,680 --> 00:26:32,244
de xeito que abranguen un pouco.

447
00:26:32,244 --> 00:26:33,410
E nós temos unha visualización.

448
00:26:33,410 --> 00:26:36,710
Así, parece que a maioría dos titulares
son moi próximos uns dos outros,

449
00:26:36,710 --> 00:26:38,750
en termos de liña de carácter.

450
00:26:38,750 --> 00:26:41,200
Pero hai realmente destaca.

451
00:26:41,200 --> 00:26:46,660
>> Poderiamos construír algunhas ferramentas
explotar iso máis.

452
00:26:46,660 --> 00:26:50,710
Pero cando estaba a traballar sobre iso, eu estaba
curioso para saber se, nese conxunto de datos,

453
00:26:50,710 --> 00:26:53,880
titulares con dous puntos
neles sería maior.

454
00:26:53,880 --> 00:26:55,770
I asume o farían.

455
00:26:55,770 --> 00:26:56,660
>> Entón, imos descubrir.

456
00:26:56,660 --> 00:27:00,650
Imos usar a cor
canle, como fixemos antes,

457
00:27:00,650 --> 00:27:04,540
para codificar algunha sobre se
hai un colonos ou non.

458
00:27:04,540 --> 00:27:07,220
Entón, imos empregar unha condicional novo.

459
00:27:07,220 --> 00:27:09,350
Non ten que saber
os pormenores deste,

460
00:27:09,350 --> 00:27:14,260
pero é así que comprobar un
cadea para un personaxe en particular

461
00:27:14,260 --> 00:27:16,355
en JavaScript, de novo, non é relevante.

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

463
00:27:18,910 --> 00:27:23,270
>> Pero, se non atopar un
colon, imos voltar verde.

464
00:27:23,270 --> 00:27:26,100
E se o facemos, imos voltar vermello.

465
00:27:26,100 --> 00:27:29,010
Entón, de novo, titulares que
teñen dous puntos será vermello.

466
00:27:29,010 --> 00:27:34,980
Isto é o que esta means-- nice.

467
00:27:34,980 --> 00:27:38,040
>> Así, parece que o meu
hipótese é batido.

468
00:27:38,040 --> 00:27:39,360
Hai só dous.

469
00:27:39,360 --> 00:27:42,380
Nós só temos seis puntos de datos
e só dous tiveron dous puntos.

470
00:27:42,380 --> 00:27:45,510
Pero parece un pouco máis
no extremo inferior, en realidade.

471
00:27:45,510 --> 00:27:47,830
Headlines con dous puntos parecen
ser xeralmente máis curto,

472
00:27:47,830 --> 00:27:52,370
polo menos nos nosos datos set-- interesante.

473
00:27:52,370 --> 00:27:55,830
>> Imos volver ao que
aceiro azul e, a continuación, ver

474
00:27:55,830 --> 00:28:00,601
o que podemos facer co mesmo
datos máis interesantes.

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

476
00:28:04,370 --> 00:28:09,070
Entón, de novo, eu mencionen que
datos en D3 é unha lista de cousas.

477
00:28:09,070 --> 00:28:11,080
Vimos números de moitos tipos.

478
00:28:11,080 --> 00:28:12,810
Vimos cadeas.

479
00:28:12,810 --> 00:28:15,700
Pero as cousas poden ser obxectos.

480
00:28:15,700 --> 00:28:20,080
>> Poden ser cousas complicadas
que inclúen unha morea de cousas.

481
00:28:20,080 --> 00:28:24,510
Para dicir que de forma máis clara,
na maioría dos casos, nós

482
00:28:24,510 --> 00:28:28,384
quere construír todos os puntos de datos como
máis complicado do que só un valor.

483
00:28:28,384 --> 00:28:30,175
Se imaxina unha
base de datos sobre alumnos,

484
00:28:30,175 --> 00:28:32,470
pode haber un estudante
nome, unha carteira de estudante,

485
00:28:32,470 --> 00:28:36,370
e unha morea de cousas asociadas
cun rexistro particular,

486
00:28:36,370 --> 00:28:39,834
non só unha secuencia ou un número.

487
00:28:39,834 --> 00:28:40,750
Entón, imos ollar para iso.

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

489
00:28:55,180 --> 00:28:56,760
>> Este é un conxunto destes datos.

490
00:28:56,760 --> 00:28:59,090
Este é un conxunto de datos de terremotos.

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

492
00:29:01,910 --> 00:29:08,430
Entón, todo aquí na nosa lista ou matriz
de cousas contén en si moitas cousas.

493
00:29:08,430 --> 00:29:11,380
Así, cada punto de datos ten un
magnitude e unha coordenada.

494
00:29:11,380 --> 00:29:13,425
E coordina-se
conter dúas cousas.

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

496
00:29:15,960 --> 00:29:20,450
>> Así, cada día é agora moito máis
complicado e moito máis interesante

497
00:29:20,450 --> 00:29:22,700
e contén moito máis
información interesantes.

498
00:29:22,700 --> 00:29:26,730
Veremos que poderiamos construír a partir diso.

499
00:29:26,730 --> 00:29:36,130
Retornando ao aquí, unha vez máis, usando
nosa vista círculo histograma

500
00:29:36,130 --> 00:29:42,110
nós construímos, imos ver se podemos construír unha
ver a distribución magnitude

501
00:29:42,110 --> 00:29:43,305
no noso conxunto de datos.

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

503
00:29:45,850 --> 00:29:48,660
>> Entón, aquí, é o mesmo concepto.

504
00:29:48,660 --> 00:29:51,920
Pero agora, d contén máis cousas.

505
00:29:51,920 --> 00:29:54,780
d contén moitos elementos de datos.

506
00:29:54,780 --> 00:29:57,946
Entón, nós temos d volta.

507
00:29:57,946 --> 00:29:59,670
D3 dános d.

508
00:29:59,670 --> 00:30:06,080
E nós respondemos por atopar a magnitude
d e, a continuación, de paso, que a escala.

509
00:30:06,080 --> 00:30:08,490
>> E entón debemos cambiar
nosa escala, por suposto.

510
00:30:08,490 --> 00:30:12,980
Entón magnitudes simplemente non facer
ir moito máis do que 10.

511
00:30:12,980 --> 00:30:15,485
De feito, nunca houbo
un terremoto de magnitude 10.

512
00:30:15,485 --> 00:30:19,360
Pero ese é o tipo do noso superior
final, a parte superior do espectro.

513
00:30:19,360 --> 00:30:20,240
>> Imos actualizar.

514
00:30:20,240 --> 00:30:22,990
Bo, temos unha visualización.

515
00:30:22,990 --> 00:30:25,490
É interesante note-- así
hai dous puntos de datos que

516
00:30:25,490 --> 00:30:29,010
son case exactamente por riba de cada
outro, en termos de magnitude.

517
00:30:29,010 --> 00:30:31,350
Ve iso pola opacidade que estamos a usar.

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

519
00:30:40,810 --> 00:30:42,690
>> Temos datos xeográficos agora.

520
00:30:42,690 --> 00:30:44,710
Temos latitudes e lonxitude.

521
00:30:44,710 --> 00:30:47,549
Quizá poderiamos facer algo un
moito máis interesante con iso.

522
00:30:47,549 --> 00:30:49,590
Imos descubrir un pouco máis
xeito interesante para ver

523
00:30:49,590 --> 00:30:53,500
este máis complicado
datos que temos acceso.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- fundamentalmente,
queremos poñer estes nun mapa.

525
00:31:04,950 --> 00:31:07,690
Quero dicir, este é o lugar onde isto vai dar.

526
00:31:07,690 --> 00:31:13,130
Queremos codificar información sobre o
posición destas lecturas do terremoto,

527
00:31:13,130 --> 00:31:16,350
así como a súa magnitude,
porque temos iso agora.

528
00:31:16,350 --> 00:31:21,310
Entendemos como consumir
datos máis complicadas.

529
00:31:21,310 --> 00:31:26,200
>> O primeiro que imos facer é
crear un mapa, un mapa de fondo.

530
00:31:26,200 --> 00:31:29,360
Vou pasar por
isto moi rapidamente.

531
00:31:29,360 --> 00:31:30,560
Este é o código complicado.

532
00:31:30,560 --> 00:31:33,110
É máis un deses
ingresos que realmente non

533
00:31:33,110 --> 00:31:35,690
Ten que entender completamente a usa.

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

535
00:31:38,510 --> 00:31:39,740
Pero este é o código.

536
00:31:39,740 --> 00:31:43,580
Este código aquí crea un mapa.

537
00:31:43,580 --> 00:31:45,730
>> Non imos entrar en detalles.

538
00:31:45,730 --> 00:31:54,210
Pero superficialmente, o que fai é,
el consulta o arquivo us.json, que

539
00:31:54,210 --> 00:31:57,150
é un ficheiro de datos como
a que tivemos antes.

540
00:31:57,150 --> 00:31:59,150
É máis complexo, por suposto.

541
00:31:59,150 --> 00:32:02,920
Pero, neste caso, todo,
todos os puntos de datos é este estado

542
00:32:02,920 --> 00:32:05,420
e ten unha lista de
latitudes e lonxitude

543
00:32:05,420 --> 00:32:10,500
que definen o polígono,
esa forma, ese estado.

544
00:32:10,500 --> 00:32:13,280
>> Entón, o que vai facer D3 é semellante
ao que fixemos antes.

545
00:32:13,280 --> 00:32:18,140
Vai pedir que e
que se ligan a un elemento.

546
00:32:18,140 --> 00:32:20,890
E non hai unha función que
mapeará este elemento para fóra,

547
00:32:20,890 --> 00:32:23,410
con base nas latitudes e lonxitude.

548
00:32:23,410 --> 00:32:24,580
Pode ler máis sobre iso.

549
00:32:24,580 --> 00:32:27,385
E eu recomendo.

550
00:32:27,385 --> 00:32:30,090
>> Hai enlaces no
final deste código posta.

551
00:32:30,090 --> 00:32:31,570
E o código é comentado.

552
00:32:31,570 --> 00:32:34,050
En hai enlaces a máis sobre este asunto.

553
00:32:34,050 --> 00:32:36,590
Eu recomendo que buscalo.

554
00:32:36,590 --> 00:32:39,460
Pero o que nos interesa é
esta función de proxección.

555
00:32:39,460 --> 00:32:41,210
Quero pasar por iso.

556
00:32:41,210 --> 00:32:43,522
>> Primeiro de todo, deixe-me amosar
vostede que, si, temos un mapa.

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

558
00:32:47,300 --> 00:32:49,970
Mapas son legais.

559
00:32:49,970 --> 00:32:52,330
Entón, imos ollar para este
función de produción.

560
00:32:52,330 --> 00:32:56,481
>> A proxección é moi
como unha balanza, balanza de novo.

561
00:32:56,481 --> 00:32:59,210
Entón, o que a produción de
esta función de proxección

562
00:32:59,210 --> 00:33:06,610
non é, poderiamos pasalo lonxitude
e latitudes-- neste caso,

563
00:33:06,610 --> 00:33:09,590
estes valores aquí son o
LAT-Longs do edificio

564
00:33:09,590 --> 00:33:13,990
estamos sentados dereito
agora-- para proxección.

565
00:33:13,990 --> 00:33:20,560
E proxección converterá
que en xey valores de píxeles.

566
00:33:20,560 --> 00:33:23,300
>> Entón, o que está facendo proxección
é moi semellante á nosa escala.

567
00:33:23,300 --> 00:33:27,270
É tomar nosas latitudes e
lonxitude que representa todo un globo

568
00:33:27,270 --> 00:33:31,390
e encollendo e dimensionamento que
ata a praza que queremos,

569
00:33:31,390 --> 00:33:33,510
que demos a el.

570
00:33:33,510 --> 00:33:35,220
Neste caso, estamos
pasando eses valores.

571
00:33:35,220 --> 00:33:41,370
E iso está nos dando, así, que
na pantalla significa 640 píxeles.

572
00:33:41,370 --> 00:33:46,250
Esta pantalla enteira é de 700 píxeles
ampla, de xeito que nos fai por aquí,

573
00:33:46,250 --> 00:33:53,310
e 154 píxeles abaixo, que eu
estimación é moi fermoso aquí.

574
00:33:53,310 --> 00:33:57,250
>> Así, tendo estas-Longs lat, que
representar algo en todo o mundo

575
00:33:57,250 --> 00:34:02,850
e espremer e movendo-se que uns
nos valores X e Y de píxeles dar,

576
00:34:02,850 --> 00:34:05,450
esta é a primeira cousa que é
feito neste código de cartografía.

577
00:34:05,450 --> 00:34:07,920
E, a continuación, o resto do
codificar os datos consome

578
00:34:07,920 --> 00:34:14,310
e, a continuación, mapea eses LAT-Longs
en algo na súa pantalla.

579
00:34:14,310 --> 00:34:18,380
>> Pero imos usar esa proxección
funcións, pois verifícase se

580
00:34:18,380 --> 00:34:20,270
temos lat-Longs Longs tamén.

581
00:34:20,270 --> 00:34:24,509
Mirando cara atrás, os nosos datos, temos
latitudes e lonxitude

582
00:34:24,509 --> 00:34:25,425
para cada observación.

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

584
00:34:28,131 --> 00:34:29,130
Entón, imos usar proxección.

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

586
00:34:33,250 --> 00:34:37,639
>> Entón, ollando para a nosa exposición,
queremos que o noso exposition--

587
00:34:37,639 --> 00:34:39,590
temos unha latitude e unha lonxitude.

588
00:34:39,590 --> 00:34:40,770
Pero queremos que os valores de píxeles.

589
00:34:40,770 --> 00:34:43,510
E ao parecer, temos exactamente
o que want-- proxección.

590
00:34:43,510 --> 00:34:46,239
Moi parecido nós
usando a escala aquí,

591
00:34:46,239 --> 00:34:52,075
agora estamos indo a usar a proxección
e pasalo coordina.

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

593
00:34:55,241 --> 00:34:56,949
Entón o primeiro
estamos doing-- entón estamos

594
00:34:56,949 --> 00:35:01,520
quedando d, que é un individuo datos
elemento dun terremoto individuo

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

596
00:35:02,370 --> 00:35:04,640
O primeiro que facemos
é obter as coordenadas.

597
00:35:04,640 --> 00:35:06,150
Todo ben, nós temos as coordenadas.

598
00:35:06,150 --> 00:35:09,160
>> A segunda cousa que facemos é
pasar isto para a proxección.

599
00:35:09,160 --> 00:35:13,440
Proxección converte esas coordenadas
en valores de píxeles, x e y.

600
00:35:13,440 --> 00:35:16,680
E entón o último que
quero facer é só incorporarse o x,

601
00:35:16,680 --> 00:35:19,342
que neste caso é o primeiro.

602
00:35:19,342 --> 00:35:22,050
É a primeira das dúas cousas
que son devoltos por proxección.

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

604
00:35:27,840 --> 00:35:29,630
>> Nós imos facer o mesmo para y.

605
00:35:29,630 --> 00:35:34,960
Mais en vez diso, imos volver
o segundo elemento, o y.

606
00:35:34,960 --> 00:35:35,980
Prepare-se para actualizar.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, carácter extra
aqui-- agradable, temos

609
00:35:46,450 --> 00:35:51,730
un documento dirixido datos que é
ocultando o ficheiro JSON de obxectos,

610
00:35:51,730 --> 00:35:57,560
facendo un mapa, e cambiando o
atribúen, en relación aos datos

611
00:35:57,560 --> 00:35:59,600
proxecto-lo no mapa.

612
00:35:59,600 --> 00:36:00,840
Isto é realmente interesante.

613
00:36:00,840 --> 00:36:03,770
Iso é legal.

614
00:36:03,770 --> 00:36:05,640
>> Imos levalo ata un entalhe.

615
00:36:05,640 --> 00:36:08,795
Quero dicir, nós temos dúas pezas de
información con todos os puntos de datos.

616
00:36:08,795 --> 00:36:10,000
Quero dicir, tres.

617
00:36:10,000 --> 00:36:12,540
Temos as coordenadas,
que é un x e y.

618
00:36:12,540 --> 00:36:15,700
E nós temos a magnitude.

619
00:36:15,700 --> 00:36:17,420
>> Necesitamos codificar magnitude de algunha maneira.

620
00:36:17,420 --> 00:36:18,920
Temos unha morea de canles.

621
00:36:18,920 --> 00:36:20,370
Podemos utilizar a cor.

622
00:36:20,370 --> 00:36:21,890
Podemos usar raio.

623
00:36:21,890 --> 00:36:23,040
Poderíamos usar opacidade.

624
00:36:23,040 --> 00:36:25,540
Poderíamos usar moitas cousas no código.

625
00:36:25,540 --> 00:36:29,180
Calquera destes atributos e moitos
máis que non están listados aquí,

626
00:36:29,180 --> 00:36:33,065
porque son opcionais, nós puidemos
utilizado para codificar os datos, o accidente vascular cerebral

627
00:36:33,065 --> 00:36:35,670
e todas esas cousas que eu xa mencionen.

628
00:36:35,670 --> 00:36:36,690
>> Imos facer raio.

629
00:36:36,690 --> 00:36:38,830
Creo que raio é o máis intuitivo.

630
00:36:38,830 --> 00:36:46,210
Entón, de novo, imos substituír o hard-coded
40 e facer algúns cálculos.

631
00:36:46,210 --> 00:36:48,810
Imos usar a nosa escala favorito de novo.

632
00:36:48,810 --> 00:36:50,290
E nós estamos pasado d.

633
00:36:50,290 --> 00:36:55,850
Pero non d porque queremos a magnitude
d. d é só o punto de datos.

634
00:36:55,850 --> 00:36:57,430
Nós imos pasar a magnitude na escala.

635
00:36:57,430 --> 00:36:58,470
>> Imos tentar iso de novo.

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

637
00:37:00,230 --> 00:37:02,940
Por que non funciona?

638
00:37:02,940 --> 00:37:04,387
>> Entón recorda que escala fai.

639
00:37:04,387 --> 00:37:05,470
Vexamos escala de novo.

640
00:37:05,470 --> 00:37:10,800
Mapas a escala de 1 a 10 sobre
a 22 a 600, máis ou menos.

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

642
00:37:12,030 --> 00:37:14,730
É por iso que estamos a recibir este.

643
00:37:14,730 --> 00:37:18,420
>> Entón, nós queremos cambiar a nosa escala
para algo máis razoable.

644
00:37:18,420 --> 00:37:22,610
Digamos, queremos 0-60.

645
00:37:22,610 --> 00:37:25,340
60 é grande, pero 10 terremotos
son incriblemente raras.

646
00:37:25,340 --> 00:37:27,880
En realidade, eles nunca aconteceu.

647
00:37:27,880 --> 00:37:31,830
>> Entón, o que isto vai facer é, que vai levá-
a magnitude que vai de 1 a 10

648
00:37:31,830 --> 00:37:34,490
e mapea-la para expandir-lo para fóra.

649
00:37:34,490 --> 00:37:37,370
E mapea-la para 0-60.

650
00:37:37,370 --> 00:37:38,840
Imos actualizar.

651
00:37:38,840 --> 00:37:41,850
>> Bo, temos unha visualización.

652
00:37:41,850 --> 00:37:42,500
Isto é óptimo.

653
00:37:42,500 --> 00:37:43,736
Estes son datos reais.

654
00:37:43,736 --> 00:37:46,360
Vai notar, no meu pequeno xoguete
exemplo, o maior terremoto

655
00:37:46,360 --> 00:37:49,417
é ben encima de nós.

656
00:37:49,417 --> 00:37:50,000
Pero é iso.

657
00:37:50,000 --> 00:37:54,422
Temos unha visualización data impulsado
que consome os datos

658
00:37:54,422 --> 00:37:56,255
e dános realmente
información interesantes.

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

660
00:38:02,600 --> 00:38:06,420
Si, imos engadir un pouco de
interactividade a el.

661
00:38:06,420 --> 00:38:08,675
Eu mencionar que era
a forza forte de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Entón, aquí, para cada elemento, somos
describindo unha morea de atributos.

664
00:38:15,060 --> 00:38:20,230
Pero tamén podemos describir o que queremos
pasar con elementos de interactividade.

665
00:38:20,230 --> 00:38:26,190
Por exemplo, poderiamos describir
o que ocorre cando o rato over.

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

667
00:38:28,740 --> 00:38:33,640
E moi semellante que,
que vou levar unha función,

668
00:38:33,640 --> 00:38:36,700
moi semellante ao
atributos que tiñamos antes,

669
00:38:36,700 --> 00:38:44,650
onde nós facer algo para o
elemento cando pasa o rato sobre el.

670
00:38:44,650 --> 00:38:47,100
>> Entón o primeiro que necesitamos
facer é seleccionar este elemento,

671
00:38:47,100 --> 00:38:49,435
para atopalo, basicamente, no navegador.

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

673
00:38:57,090 --> 00:39:00,920
e entón poderiamos definir
un atributo a el.

674
00:39:00,920 --> 00:39:06,870
Entón o que eu estou facendo aquí é que, cando pasamos o rato
sobre algo, nós imos chegar ese elemento

675
00:39:06,870 --> 00:39:11,197
e axuste súa opacidade de volta
1, completamente opaca.

676
00:39:11,197 --> 00:39:12,488
Imos ver o que parece.

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

678
00:39:29,430 --> 00:39:39,080
>> Parece que temos un
punto e coma adicional aquí.

679
00:39:39,080 --> 00:39:42,420
Entón, se nós pasar o rato sobre aquí, pasa a ser completo.

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

681
00:39:46,530 --> 00:39:48,960
Pero agora, por suposto,
fica chea, porque nós

682
00:39:48,960 --> 00:39:53,240
ten que describir o que pasa
cando eliminar o noso cursor.

683
00:39:53,240 --> 00:39:59,990
Entón, imos facer exactamente isto en
mouseout, en oposición a mouseover.

684
00:39:59,990 --> 00:40:06,399
>> E nós imos axustar-la para
o que tiñamos antes-- 0,5.

685
00:40:06,399 --> 00:40:10,260
E agora, todos nós o tempo
pairo, temos un círculo completo.

686
00:40:10,260 --> 00:40:13,468
El nos axuda a ver o que nos
estamos seleccionando esencialmente.

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

688
00:40:19,210 --> 00:40:22,860
>> E agora imos facer este realmente grande.

689
00:40:22,860 --> 00:40:26,210
Imos chamar este a datos reais.

690
00:40:26,210 --> 00:40:30,890
Entón, imos pedir podería
USGS sobre os seus datos.

691
00:40:30,890 --> 00:40:35,630
Así, o Servizo Xeolóxico de Estados Unidos
ten datos sobre terremotos.

692
00:40:35,630 --> 00:40:41,460
Teñen unha API pública que é capaz
para ser consumido en formato JSON.

693
00:40:41,460 --> 00:40:42,548
Entón, imos facelo.

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

695
00:40:49,730 --> 00:40:55,900
>> Entón, iso é un pouco de código que
lígase a API USGS.

696
00:40:55,900 --> 00:40:57,990
E hai un pouco de procesamento sobre el.

697
00:40:57,990 --> 00:41:02,200
Iso non é relevante, pero simplifica-lo
a un formato de datos simples como aquel

698
00:41:02,200 --> 00:41:03,800
que tiñamos antes.

699
00:41:03,800 --> 00:41:08,140
Entón, para me librar da nosa chamada para
nosa data.json falso no ficheiro.

700
00:41:08,140 --> 00:41:13,110
E en vez diso, eu estou chamando
o USGS esencialmente.

701
00:41:13,110 --> 00:41:16,700
>> Imos actualizar, agradable.

702
00:41:16,700 --> 00:41:21,260
Estes son datos reais, da vida real
dende esta semana para sismos.

703
00:41:21,260 --> 00:41:23,217
Isto é realmente interesante.

704
00:41:23,217 --> 00:41:25,050
Isto non é sorprendente
para nós, pero hai

705
00:41:25,050 --> 00:41:27,909
unha morea de terremotos en
West Coast, en California.

706
00:41:27,909 --> 00:41:30,950
Pero eu penso que era moi interesante
que había tantos terremotos

707
00:41:30,950 --> 00:41:34,350
en Alasca, e, ao parecer,
aquí no Centro-Oeste.

708
00:41:34,350 --> 00:41:37,630
Quero dicir, interesante, e nós somos bos.

709
00:41:37,630 --> 00:41:40,410
Esa é a conclusión.

710
00:41:40,410 --> 00:41:43,760
>> Pero, fundamentalmente, este
é o que nos axuda a facer D3.

711
00:41:43,760 --> 00:41:48,030
El nos axuda a levar os datos, se ligan
para elementos no DOM,

712
00:41:48,030 --> 00:41:51,620
e ter eses elementos cambiar
como unha función dos datos,

713
00:41:51,620 --> 00:41:54,780
ten eses atributos, todo
diversos atributos dos elementos,

714
00:41:54,780 --> 00:41:57,393
todo ser útiles para canles
para transmitir información.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 é incrible poderoso
biblioteca e sorprendentemente ben executado.

717
00:42:09,290 --> 00:42:12,260
Isto é algo poderosa.

718
00:42:12,260 --> 00:42:15,960
A visualización de datos é unha
ferramenta incrible poderosa

719
00:42:15,960 --> 00:42:21,530
para o transporte de persoas profundas
insights que chega ao seu núcleo

720
00:42:21,530 --> 00:42:25,430
e axuda-los a entender, en
Desta forma profunda e intuitiva,

721
00:42:25,430 --> 00:42:29,760
como os datos funciona e como
datos cambia a nosa vida.

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