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

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

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD: Soy David
Chouinard, y esto es D3.

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

5
00:00:17,700 --> 00:00:21,270
Vamos a aprender sobre D3 hoy.

6
00:00:21,270 --> 00:00:25,020
D3 es un marco de JavaScript
para la construcción de una alta calidad

7
00:00:25,020 --> 00:00:28,110
visualizaciones interactivas para la web.

8
00:00:28,110 --> 00:00:30,870
Cosas como lo que somos
ver detrás de mí,

9
00:00:30,870 --> 00:00:34,230
vamos a aprender a hacer los
cosas, clase de los fundamentos de la misma.

10
00:00:34,230 --> 00:00:36,452
Pero va a ser genial.

11
00:00:36,452 --> 00:00:38,160
Vamos a empezar
hacer fotos bonitas.

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

13
00:00:41,108 --> 00:00:44,350
Tenemos más demos
de perspectivas disponibles.

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

15
00:00:48,040 --> 00:00:50,760
Vamos a hacerlo.

16
00:00:50,760 --> 00:00:58,700
>> Acto I, DOM manipulation-- Vamos
para comenzar de inmediato haciendo cosas interesantes.

17
00:00:58,700 --> 00:01:01,240
En primer lugar, a la izquierda, tenemos código.

18
00:01:01,240 --> 00:01:03,470
A la derecha, tenemos
el resultado de nuestro código.

19
00:01:03,470 --> 00:01:04,900
Vamos a ir a través de él.

20
00:01:04,900 --> 00:01:05,780
>> Vamos a hacer un círculo.

21
00:01:05,780 --> 00:01:08,570
¿Qué te parece?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
que acaba de hacer un círculo.

23
00:01:14,934 --> 00:01:16,100
Usted no me cree, ¿verdad?

24
00:01:16,100 --> 00:01:18,190
No está ahí.

25
00:01:18,190 --> 00:01:21,830
>> Así que lo que hicimos aquí es,
SVG es gráficos vectoriales escalables.

26
00:01:21,830 --> 00:01:27,530
Esta es la manera en que decimos que el navegador
hacer gráficos vectoriales del navegador.

27
00:01:27,530 --> 00:01:30,740
Lo que acabamos de hacer en este momento
se añade un círculo para navegar.

28
00:01:30,740 --> 00:01:34,790
>> La promesa es que el círculo
requiere un poco de atributos básicos

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

30
00:01:36,850 --> 00:01:40,045
Tenemos que decirle que su posición x,
su posición y, su radio.

31
00:01:40,045 --> 00:01:43,310
No le dijimos que nada de eso,
por lo que no estamos viendo ahora mismo.

32
00:01:43,310 --> 00:01:46,210
Pero vamos a decirle que eso.

33
00:01:46,210 --> 00:01:49,510
>> Así que en primer lugar, usted tiene
para dar a nuestro círculo un nombre.

34
00:01:49,510 --> 00:01:53,070
Así que vamos a llamarlo círculo.

35
00:01:53,070 --> 00:01:54,406
Nuestro círculo tiene un nombre ahora.

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

37
00:01:57,230 --> 00:01:59,490
Y vamos a darle un par de atributos.

38
00:01:59,490 --> 00:02:03,690
¿Qué hay de cx se centraría x, por lo que
el centro de la posición x.

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

40
00:02:06,730 --> 00:02:10,220
>> Vamos a darle un año de 200 píxeles también.

41
00:02:10,220 --> 00:02:16,032
Y una r, un radio, de unos 40 píxeles.

42
00:02:16,032 --> 00:02:16,950
Ahora vamos a ver.

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

44
00:02:21,740 --> 00:02:23,440
Yo no puedo escribir.

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

46
00:02:30,430 --> 00:02:31,520
>> Hay que ir.

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

48
00:02:37,330 --> 00:02:38,280
Una especie de fresco, ¿no?

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

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

51
00:02:40,880 --> 00:02:42,670
>> Así que no hay necesidad de seguir a lo largo.

52
00:02:42,670 --> 00:02:45,790
Todos estos ejemplos, todas
el código que estoy haciendo hoy

53
00:02:45,790 --> 00:02:51,300
será proporcionado en línea en el extremo
en forma de ejemplos interactivos

54
00:02:51,300 --> 00:02:54,010
con puestos de control en
cada acto, y así sucesivamente.

55
00:02:54,010 --> 00:02:55,160
>> Vamos a hacer más cosas.

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

57
00:02:58,901 --> 00:03:01,541
Lo siento por ese error
mensajes allí mismo.

58
00:03:01,541 --> 00:03:05,340
Hay que ir.

59
00:03:05,340 --> 00:03:06,350
>> Vamos a darle un color.

60
00:03:06,350 --> 00:03:07,170
¿Cómo es eso?

61
00:03:07,170 --> 00:03:08,340
Me gusta azul acero.

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

63
00:03:13,280 --> 00:03:16,030
Bueno, nuestro círculo cambió de color.

64
00:03:16,030 --> 00:03:17,320
Eso es genial.

65
00:03:17,320 --> 00:03:31,330
Vamos a hacer que semitransparente
también-- semitransparente.

66
00:03:31,330 --> 00:03:33,670
>> Así que estos son atributos
estamos definiendo en el círculo.

67
00:03:33,670 --> 00:03:36,774
Lo primero que hicimos es
ponemos un círculo en la página.

68
00:03:36,774 --> 00:03:38,690
Y luego estamos definiendo
un grupo de atributos.

69
00:03:38,690 --> 00:03:41,610
Algunos de éstos están obligados,
como CX, CY, y Radio.

70
00:03:41,610 --> 00:03:42,680
Y otros son opcionales.

71
00:03:42,680 --> 00:03:44,730
>> Hay muchos más atributos.

72
00:03:44,730 --> 00:03:46,760
Hay un montón de ellos.

73
00:03:46,760 --> 00:03:53,070
Por ejemplo, podríamos tener un
accidente cerebrovascular, así, un golpe de rojo.

74
00:03:53,070 --> 00:03:55,630
Pero vamos a quitar eso.

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

76
00:04:00,450 --> 00:04:01,600
>> Así que vamos a hacer más círculos.

77
00:04:01,600 --> 00:04:02,810
¿Cómo es eso?

78
00:04:02,810 --> 00:04:04,665
Vamos a hacer otro círculo.

79
00:04:04,665 --> 00:04:05,985
Esto es emocionante, ¿no?

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

81
00:04:09,630 --> 00:04:12,300
>> Así que decir que me acaba de pegar-Copy
lo que ya teníamos.

82
00:04:12,300 --> 00:04:13,570
Llamémoslo circle2.

83
00:04:13,570 --> 00:04:15,840
Y vamos a hacer la exacta
lo mismo y darle

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

85
00:04:20,450 --> 00:04:24,140
Yay, tenemos dos círculos ahora.

86
00:04:24,140 --> 00:04:27,240
>> Y, por supuesto, podríamos
actualizar estos valores.

87
00:04:27,240 --> 00:04:31,640
Yo podría ponerlo a 400, y ahora se mueve.

88
00:04:31,640 --> 00:04:35,470
Y ya que es molesto, vamos a
y eliminar, por lo circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Ahora se ha ido.

91
00:04:40,730 --> 00:04:43,170
>> Así que lo que estamos haciendo y
es muy, very-- este

92
00:04:43,170 --> 00:04:46,030
es muy similar a lo que
podría hacer en jQuery, por ejemplo.

93
00:04:46,030 --> 00:04:48,240
Sólo estamos manipulando
el DOM, se llama.

94
00:04:48,240 --> 00:04:50,040
Usted puede haber oído esa palabra antes.

95
00:04:50,040 --> 00:04:53,255
Estamos creando cosas, el establecimiento de
atributos en cosas, la eliminación de la materia.

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

97
00:04:58,950 --> 00:05:02,360
>> Ahora, aquí es donde se pone interesante.

98
00:05:02,360 --> 00:05:07,250
Así que más adelante en el código, que todavía podía
consulte el círculo original aquí.

99
00:05:07,250 --> 00:05:14,100
Así que vamos a restablecer su atributo de cx.

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

101
00:05:18,260 --> 00:05:22,406
Y yo voy a la transición
que, por lo que es obvio.

102
00:05:22,406 --> 00:05:23,360
Hay que ir.

103
00:05:23,360 --> 00:05:24,780
>> Así que añadimos un círculo.

104
00:05:24,780 --> 00:05:26,440
Establecimos algunos atributos.

105
00:05:26,440 --> 00:05:28,210
Agregamos otro círculo, la eliminamos.

106
00:05:28,210 --> 00:05:31,650
Y luego estamos modificando
el círculo original.

107
00:05:31,650 --> 00:05:35,400
>> Pero aquí es donde se pone
mucho más interesante.

108
00:05:35,400 --> 00:05:39,070
No sólo podemos establecer atributos
como se acaba de valores, podemos decir,

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

110
00:05:41,610 --> 00:05:44,540
También podemos establecer como funciones.

111
00:05:44,540 --> 00:05:48,850
>> Así que en lugar de dar 400 aquí,
podemos hacer un poco de cálculo

112
00:05:48,850 --> 00:05:53,950
sobre la marcha por lo que
Quiero ese atributo sea.

113
00:05:53,950 --> 00:05:56,580
Así que esta es la forma en que te expresas eso.

114
00:05:56,580 --> 00:06:00,660
Decimos, en lugar de 400, me dejó
darle una función en lugar.

115
00:06:00,660 --> 00:06:04,180
Y aquí, en el interior de esta función,
podemos hacer cualquier cálculo loco.

116
00:06:04,180 --> 00:06:06,820
>> Podríamos tomar el tiempo y
mirar a otra cosa

117
00:06:06,820 --> 00:06:11,230
y decidir dinámicamente para
el círculo que valor que queremos.

118
00:06:11,230 --> 00:06:15,266
¿Qué tal si sólo damos
una posición aleatoria x?

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

120
00:06:20,360 --> 00:06:21,120
Así que eso es todo.

121
00:06:21,120 --> 00:06:25,490
>> Así que lo que dice es, por
cada x, ejecutan esta función.

122
00:06:25,490 --> 00:06:29,340
Y lo que estamos haciendo es calcular
algunas cosas, unas veces al azar el ancho

123
00:06:29,340 --> 00:06:30,410
y devolver eso.

124
00:06:30,410 --> 00:06:34,765
Así que cada vez que nos encontramos, tenemos una
círculo que va a un lugar al azar.

125
00:06:34,765 --> 00:06:36,394
Es una especie de fresco.

126
00:06:36,394 --> 00:06:38,310
Me siento como si pudiera mirar
en esto por un poco.

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

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

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

130
00:06:49,120 --> 00:06:51,390
Vamos a hacer estos datos impulsada ahora.

131
00:06:51,390 --> 00:06:53,420
No hay datos aquí.

132
00:06:53,420 --> 00:06:54,482
Vamos a cambiar eso.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- acto II, Data Driven
Así que vamos a volver a aquí.

135
00:07:12,140 --> 00:07:15,340
Y vamos a deshacernos de circle2,
porque sólo estamos agregando y quitando

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

137
00:07:15,840 --> 00:07:17,382
Así que realmente no lo necesitamos.

138
00:07:17,382 --> 00:07:21,421
Tenemos que ser mucho más inteligente aquí.

139
00:07:21,421 --> 00:07:23,170
Digamos, tenemos
algunos datos de algún tipo.

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

141
00:07:31,540 --> 00:07:40,020
Uno moment-- digamos,
teníamos los datos de este formulario.

142
00:07:40,020 --> 00:07:41,800
Tuvimos una matriz, sólo
un montón de números.

143
00:07:41,800 --> 00:07:45,750
Tenemos siete números aquí,
cualesquiera que éstas cantidad represent--

144
00:07:45,750 --> 00:07:48,810
en la cuenta bancaria de la gente, cómo
mucho que pesan, dios sabe qué.

145
00:07:48,810 --> 00:07:51,310
>> Estos son los números, y nos
que desee utilizar nuestros círculos

146
00:07:51,310 --> 00:07:53,240
para representar los números de alguna manera.

147
00:07:53,240 --> 00:07:55,515
Queremos vincular nuestra
círculos a esos números.

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

149
00:07:58,750 --> 00:07:59,626
Así que lo que hacemos.

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

151
00:08:01,500 --> 00:08:03,590
Podríamos hacer el viejo
cosa que nos doing--

152
00:08:03,590 --> 00:08:06,020
append círculo y circle2 y circle3.

153
00:08:06,020 --> 00:08:10,020
Pero esto va de las manos, y
hay un montón de repetir la lógica.

154
00:08:10,020 --> 00:08:12,760
>> Así que vayamos más inteligente con eso.

155
00:08:12,760 --> 00:08:17,810
En lugar de utilizar el círculo var
svg.append que estábamos usando,

156
00:08:17,810 --> 00:08:21,580
vamos a utilizar
este pequeño bloque de aquí.

157
00:08:21,580 --> 00:08:24,510
Yo no quiero ir a fondo
en lo que hacen todas estas partes.

158
00:08:24,510 --> 00:08:26,020
Y es algo de un tema avanzado.

159
00:08:26,020 --> 00:08:27,830
Y me gustaría poder hacerlo.

160
00:08:27,830 --> 00:08:31,370
>> Pero la clave para recognize-- y
verás que es muy a menudo en 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
ya que hay elementos de datos
en esta serie aquí.

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

164
00:08:53,420 --> 00:08:55,780
Así como esto crea muchos
círculos, ya que hay elementos.

165
00:08:55,780 --> 00:08:58,520
Se va a crear nosotros siete círculos.

166
00:08:58,520 --> 00:09:01,710
Y lo hace de una cosa muy, muy clave.

167
00:09:01,710 --> 00:09:02,460
Así que vamos a correr eso.

168
00:09:02,460 --> 00:09:05,460
Vamos a quitar nuestro otro círculo.

169
00:09:05,460 --> 00:09:09,565
Vamos a comentar este
separarse y correr de nuevo.

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

171
00:09:13,840 --> 00:09:15,260
>> Hay que ir.

172
00:09:15,260 --> 00:09:18,030
Así que nuestro círculo que aquí hay una
mucho más oscuro, porque

173
00:09:18,030 --> 00:09:20,720
tienen siete círculos, uno
en la parte superior de la otra.

174
00:09:20,720 --> 00:09:25,425
Acabamos de crear siete círculos, uno
cada uno para cada uno de estos elementos de datos.

175
00:09:25,425 --> 00:09:28,860
Pero hay una cosa clave que sucedió
con este fragmento aquí.

176
00:09:28,860 --> 00:09:31,030
>> Es que los datos fueron obligados.

177
00:09:31,030 --> 00:09:33,440
Así que cada uno de
esos elementos de datos,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, estaba obligado
a un círculo particular.

179
00:09:38,830 --> 00:09:40,960
Así que estos no sólo crearon
un montón de círculos

180
00:09:40,960 --> 00:09:43,420
pero corbatas esas dos cosas juntas.

181
00:09:43,420 --> 00:09:48,740
>> Y en el futuro, porque hemos creado
esos círculos con esta función D3,

182
00:09:48,740 --> 00:09:52,430
si te doy un círculo, se puede
dame los datos asociados con él.

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

184
00:09:53,280 --> 00:09:54,840
Hey, D3, tengo este círculo.

185
00:09:54,840 --> 00:09:57,350
¿Cuál es la información que el círculo tiene?

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

187
00:10:01,290 --> 00:10:02,380
>> Estas cosas están limitadas.

188
00:10:02,380 --> 00:10:04,490
Ese es un concepto muy, muy fundamental.

189
00:10:04,490 --> 00:10:06,070
Echemos un vistazo a eso.

190
00:10:06,070 --> 00:10:12,210
>> Así que la forma en que le preguntaría D3-- así
esto es irrelevante para esto,

191
00:10:12,210 --> 00:10:16,620
pero sólo confía en mí en él.

192
00:10:16,620 --> 00:10:17,620
Así es como nos preguntamos D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, dame la primera
círculo que se puede encontrar.

194
00:10:21,312 --> 00:10:23,580
Dame el primer círculo que puedes encontrar.

195
00:10:23,580 --> 00:10:29,660
Y entonces podríamos preguntar D3, lo que es
los datos en que, de esta manera, 10.

196
00:10:29,660 --> 00:10:33,380
>> Así que sólo pedimos D3, encontrarme
el primer círculo que puedes encontrar.

197
00:10:33,380 --> 00:10:34,400
¿Qué es sus datos?

198
00:10:34,400 --> 00:10:36,650
10, que es de hecho nuestra
primer elemento de datos.

199
00:10:36,650 --> 00:10:42,150
Podríamos pedirle que, hey, D3,
nosotros encontrar nuestro tercer círculo.

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

201
00:10:44,450 --> 00:10:45,740
¿Por qué es realmente importante?

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

203
00:10:49,790 --> 00:10:52,250
>> Así que aquí, he mencionado
que podíamos usar las funciones.

204
00:10:52,250 --> 00:10:54,910
Y mencioné que era
una cosa muy poderosa.

205
00:10:54,910 --> 00:11:03,070
Así que no sólo pueden hacer nuestras funciones cosas
como hacer algún cálculo, por ejemplo,

206
00:11:03,070 --> 00:11:09,170
devolver un número aleatorio, puede
también hacer cosas basadas en los datos.

207
00:11:09,170 --> 00:11:11,550
Esto es lo que significan los documentos de datos impulsadas.

208
00:11:11,550 --> 00:11:13,750
Eso es lo D3 representa.

209
00:11:13,750 --> 00:11:17,800
>> Así que esta vez x postition--
de simplemente decir, todos los círculos,

210
00:11:17,800 --> 00:11:21,735
obtener la posición x 200,
podría darle una función.

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

212
00:11:26,140 --> 00:11:30,140
Y aquí, podemos hacer algunos cálculos.

213
00:11:30,140 --> 00:11:33,710
y d aquí se encuentra en su lugar para los datos.

214
00:11:33,710 --> 00:11:36,120
Así que cada vez que tenemos
un círculo, en el fondo,

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

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

217
00:11:38,500 --> 00:11:41,920
>> círculo, se va a ir, hey,
circle1 ¿cuál es tu posición x.

218
00:11:41,920 --> 00:11:45,210
Anteriormente, estábamos
siempre contestando 200.

219
00:11:45,210 --> 00:11:48,630
Pero ahora, cada vez que pide D3
nosotros cuál es tu posición x,

220
00:11:48,630 --> 00:11:51,790
que va a dar a nosotros-- tenemos
ese círculo, lo que tenemos los datos.

221
00:11:51,790 --> 00:11:55,290
Se va a darnos los datos y decir:
¿qué quieres que la exposición sea,

222
00:11:55,290 --> 00:11:57,120
sobre la base de esos datos.

223
00:11:57,120 --> 00:11:59,590
>> Vamos a volver a los datos reales.

224
00:11:59,590 --> 00:12:04,910
Así que si corremos esto, esto da
datos nos impulsados ​​documentos.

225
00:12:04,910 --> 00:12:08,040
Estos círculos se basan
en relación Position--

226
00:12:08,040 --> 00:12:11,120
son bases como una función de los datos.

227
00:12:11,120 --> 00:12:13,100
>> Así que para el primer círculo,
D3 pone un círculo.

228
00:12:13,100 --> 00:12:16,770
Y entonces D3 nos pregunta, ¿qué hacer
desea que la exposición sea.

229
00:12:16,770 --> 00:12:19,620
Y acabamos de decir, lo que será la información.

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

231
00:12:21,185 --> 00:12:26,320
>> Entonces se pregunta, ¿qué es lo que desea que el
exposición sea para el segundo círculo.

232
00:12:26,320 --> 00:12:27,270
Y nosotros respondemos: 45.

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

234
00:12:30,000 --> 00:12:32,230
Y, por supuesto, puede
hacer algún cálculo aquí.

235
00:12:32,230 --> 00:12:35,510
Me parece que esos círculos
son un poco aplastado hacia arriba.

236
00:12:35,510 --> 00:12:38,965
>> Así se multiplica por 3, multiplicar por 3 los datos.

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

238
00:12:41,870 --> 00:12:43,840
Nuestro círculo acaba de ampliarse a cabo.

239
00:12:43,840 --> 00:12:46,730
Nuestro valor se triplicó.

240
00:12:46,730 --> 00:12:51,010
>> El círculo es realmente en el borde,
así que vamos a tal tipo de compensarlo.

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

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

243
00:12:56,070 --> 00:12:57,590
>> Esta es una visualización de datos.

244
00:12:57,590 --> 00:13:01,767
Es una pregunta muy básica, pero esto
nos da una idea de nuestros datos.

245
00:13:01,767 --> 00:13:04,600
Nos dice que, por ejemplo, que
tener un pequeño grupo de elementos.

246
00:13:04,600 --> 00:13:06,340
Y tenemos un gran valor atípico aquí.

247
00:13:06,340 --> 00:13:10,830
Esto nos da un poco de información
acerca de la distribución.

248
00:13:10,830 --> 00:13:20,830
>> Si tuviéramos que, por ejemplo, para cambiar
los datos a 150 aquí y actualización,

249
00:13:20,830 --> 00:13:22,630
se cambia nuestra visualización.

250
00:13:22,630 --> 00:13:24,285
En este documento se utiliza la información.

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

252
00:13:32,640 --> 00:13:36,180
>> Así que por supuesto, todos estos elementos,
todos estos atributos aquí,

253
00:13:36,180 --> 00:13:38,430
podemos utilizar una función, no
sólo los números, no sólo

254
00:13:38,430 --> 00:13:39,900
las posiciones x e y.

255
00:13:39,900 --> 00:13:42,120
Así que podemos utilizar una función para el color.

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

257
00:13:45,260 --> 00:13:46,360
Así que vamos a hacer lo mismo.

258
00:13:46,360 --> 00:13:49,360
Vamos a darle una función.

259
00:13:49,360 --> 00:13:52,320
>> Y digamos, podríamos tener
condicionales en nuestra función.

260
00:13:52,320 --> 00:13:54,770
Esta función puede ser
cientos de líneas largas.

261
00:13:54,770 --> 00:13:57,150
Se puede hacer cosas muy, muy complicados.

262
00:13:57,150 --> 00:13:59,080
>> Así que vamos a poner una sentencia if aquí.

263
00:13:59,080 --> 00:14:03,420
Digamos, si nuestros datos son menos
de 50, eso es cierto umbral

264
00:14:03,420 --> 00:14:05,817
que nos interesa
en por alguna razón.

265
00:14:05,817 --> 00:14:06,650
Hagámoslo verde.

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

267
00:14:09,830 --> 00:14:15,320
De lo contrario, vamos a hacer que el rojo.

268
00:14:15,320 --> 00:14:16,110
¿Cómo es eso?

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

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

271
00:14:21,220 --> 00:14:24,860
>> Así que nuestra visualización de datos está comenzando
para transmitir la información más interesante

272
00:14:24,860 --> 00:14:26,727
en muchos canales.

273
00:14:26,727 --> 00:14:28,560
Así que ahora sabemos un poco
acerca de la distribución.

274
00:14:28,560 --> 00:14:31,768
Y sabemos que hay algún tipo de
cortado a 50 que nos interesa.

275
00:14:31,768 --> 00:14:35,630
Sabemos que hay dos puntos de datos
por debajo de ese umbral y la mayoría de ellos

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

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

278
00:14:41,510 --> 00:14:46,160
>> Así como un paso final, estos datos aquí,
es muy raro ver este así.

279
00:14:46,160 --> 00:14:52,610
Así que vamos a moverlo a una variable
porque eso es más limpio, como este.

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

281
00:15:02,980 --> 00:15:05,197
Y luego usamos esa variable aquí.

282
00:15:05,197 --> 00:15:06,280
Es exactamente lo mismo.

283
00:15:06,280 --> 00:15:07,280
Es sólo un poco más limpia.

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

285
00:15:25,300 --> 00:15:35,300
>> El siguiente, acto III, Scales--
Así que un problema de derecho

286
00:15:35,300 --> 00:15:38,920
aquí es, si cambiamos nuestra
datos en esta 200 value--

287
00:15:38,920 --> 00:15:41,685
si cambiamos a 400
o algo y actualización,

288
00:15:41,685 --> 00:15:44,540
entonces este valor sólo se fue fuera de la pantalla.

289
00:15:44,540 --> 00:15:49,040
Así que nuestra lógica aquí
de la forma en que hacemos las veces 3

290
00:15:49,040 --> 00:15:52,570
y 20, para extenderlo hacia fuera y después
compensar un poco es muy torpe.

291
00:15:52,570 --> 00:15:54,150
>> ¿Qué significan esos números?

292
00:15:54,150 --> 00:15:55,400
Sólo están codificado allí.

293
00:15:55,400 --> 00:15:58,830
Y están muy ligados a los datos.

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

295
00:16:00,550 --> 00:16:05,460
Queremos un documento muy flexible,
que los datos dados, se adapta a ella

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

297
00:16:07,900 --> 00:16:11,330
>> Lo que básicamente necesitamos es que
tener este rango de números 10.

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

299
00:16:12,640 --> 00:16:17,630
Y queremos mapear que salir a
el ancho, el ancho completo aquí.

300
00:16:17,630 --> 00:16:20,620
Así que tenemos la gama de
números que van de 0 a 100.

301
00:16:20,620 --> 00:16:24,980
Y nosotros tenemos este campus que va
20 a 700, en este caso.

302
00:16:24,980 --> 00:16:26,515
>> Es como que queremos mapear que en.

303
00:16:26,515 --> 00:16:30,002
Queremos que escalar y
luego compensarlo un poco.

304
00:16:30,002 --> 00:16:33,165
Resulta que D3 tiene estos.

305
00:16:33,165 --> 00:16:34,220
Se llama una escala.

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

307
00:16:37,410 --> 00:16:38,250
Así que vamos a utilizarlo.

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

309
00:16:46,300 --> 00:16:49,670
>> La forma en que works-- voy a
escribir esto y luego explicarlo.

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

311
00:17:01,530 --> 00:17:02,450
Esta es una escala.

312
00:17:02,450 --> 00:17:08,670
Lo que hará es, será trazar
los valores de 1 a 200 sobre a 20 a 600.

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

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

315
00:17:13,329 --> 00:17:21,704
>> Así que si me alimento que 1-- un momento.

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

317
00:17:47,764 --> 00:17:48,555
Dame un segundo.

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

319
00:17:53,680 --> 00:17:55,080
Debo haber escrito mal ella.

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

321
00:18:15,320 --> 00:18:15,990
Hay que ir.

322
00:18:15,990 --> 00:18:17,930
Lo siento por eso.

323
00:18:17,930 --> 00:18:22,050
>> Entonces, ¿qué va a hacer una escala
es, tomará un valor

324
00:18:22,050 --> 00:18:24,930
y luego convertir ese,
ampliar eso, por lo que

325
00:18:24,930 --> 00:18:27,320
llena toda la gama que está pidiendo.

326
00:18:27,320 --> 00:18:32,910
Así que en este caso, si le damos una,
que va a asignar que fuera sobre 20.

327
00:18:32,910 --> 00:18:37,750
Y si le damos 200, es
va a asignar que a 600.

328
00:18:37,750 --> 00:18:40,460
Y en algún lugar en el medio,
si conseguimos 100, es

329
00:18:40,460 --> 00:18:44,610
va a estar en algún lugar
entre 20 y 600.

330
00:18:44,610 --> 00:18:51,480
>> Y, por supuesto, ahora esto es lo que
tenemos que eliminar esos cifrados duros

331
00:18:51,480 --> 00:18:53,402
cosas que tienen allí.

332
00:18:53,402 --> 00:18:55,950
Así que lo que queremos hacer es
tomar los datos que estamos

333
00:18:55,950 --> 00:19:00,950
dado, que los datos individuo
elemento, y pasarlo a escala primero.

334
00:19:00,950 --> 00:19:02,635
Así balanza ampliarlo.

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

336
00:19:27,020 --> 00:19:48,880
>> Bueno-- Oh, tenemos un pequeño error aquí.

337
00:19:48,880 --> 00:19:50,120
Nos faltan datos.

338
00:19:50,120 --> 00:19:51,290
Hay que ir.

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

340
00:19:58,550 --> 00:19:59,550
Y que se expande hacia fuera.

341
00:19:59,550 --> 00:20:01,383
>> Eso nos da la misma
resultado que teníamos antes,

342
00:20:01,383 --> 00:20:04,030
pero en lugar de tener las
codificado limitaciones.

343
00:20:04,030 --> 00:20:07,790
Y si el tamaño de nuestra
cambios de lona, ​​por ejemplo,

344
00:20:07,790 --> 00:20:11,790
si queremos tener esto sobre
400 píxeles y que aplasta a cabo,

345
00:20:11,790 --> 00:20:15,440
podemos tenerlo over--
podemos ampliar, o hacemos

346
00:20:15,440 --> 00:20:21,890
puede reducir este margen izquierda a
algo menos o más de 20.

347
00:20:21,890 --> 00:20:25,470
Estos números, éstos codificados
números ahora tienen sentido para nosotros.

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

349
00:20:28,110 --> 00:20:30,520
>> Y podríamos hacer mucho más
cosas interesantes también.

350
00:20:30,520 --> 00:20:35,990
Así que en lugar de tener un lineal
escala, que puede ser que desee registrar una escala.

351
00:20:35,990 --> 00:20:37,840
Y eso nos dará una escala logarítmica.

352
00:20:37,840 --> 00:20:41,269
>> Así que ahora nuestra escala, en lugar de
sólo la expansión fuera de ese rango,

353
00:20:41,269 --> 00:20:42,810
que está haciendo las cosas más sofisticadas.

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

355
00:20:48,790 --> 00:20:53,790
En lugar de tener este rango duro
codificada, y en lugar de tener que 600,

356
00:20:53,790 --> 00:20:58,465
lo que se quiere sólo tiene que utilizar el ancho,
por lo que desde el 20 a la anchura de menos de 40 años,

357
00:20:58,465 --> 00:21:02,392
2 veces el margen en el otro lado.

358
00:21:02,392 --> 00:21:05,350
Y esto tiene mucho más sentido
alguien que pueda mirar el código.

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

360
00:21:08,080 --> 00:21:11,850
>> Curiosamente, las escalas quedan
muy, muy sofisticado también.

361
00:21:11,850 --> 00:21:13,350
Ellos hacen un montón de cosas interesantes.

362
00:21:13,350 --> 00:21:17,620
Así escalas no tienen necesariamente
para operar sólo con números.

363
00:21:17,620 --> 00:21:18,955
Vamos a hacer una escala de colores.

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

365
00:21:23,120 --> 00:21:26,120
>> Así que nuestra gama podría ser:
nuestro dominio es de 1 a 200.

366
00:21:26,120 --> 00:21:28,220
Esa es la cosa entrada.

367
00:21:28,220 --> 00:21:33,793
Pero lo que se quiere mapear desde
verde a rojo, por ejemplo.

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

369
00:21:39,710 --> 00:21:42,910
Y ahora, si nos pasamos 1,
vamos a conseguir verde.

370
00:21:42,910 --> 00:21:45,110
Si le damos 200, nos pondremos rojo.

371
00:21:45,110 --> 00:21:49,480
Y si le pasamos algo intermedio,
que va a ser un poco de mezcla de eso,

372
00:21:49,480 --> 00:21:52,520
en algún lugar en el gradiente
entre verde y rojo.

373
00:21:52,520 --> 00:21:55,210
>> Y en lugar de tener
este tipo de lógica torpe

374
00:21:55,210 --> 00:21:58,550
tenemos aquí con la
condicional allí mismo,

375
00:21:58,550 --> 00:22:03,250
podríamos tener un algo--
escala lineal entre aquellos.

376
00:22:03,250 --> 00:22:07,100
Así que usaríamos la escala que acabamos de
creado, lo que llamamos color.

377
00:22:07,100 --> 00:22:09,060
Y nos gustaría darle D, que
es nuestro elemento de datos.

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

379
00:22:14,250 --> 00:22:15,060
Y ahí vamos.

380
00:22:15,060 --> 00:22:18,070
Contamos con una escala de colores.

381
00:22:18,070 --> 00:22:18,940
>> Así que esta es la cartografía.

382
00:22:18,940 --> 00:22:20,960
Así que el extremo izquierdo es completamente verde.

383
00:22:20,960 --> 00:22:22,560
La extrema derecha es completamente rojo.

384
00:22:22,560 --> 00:22:24,828
Y todo lo demás
es una función de d.

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

386
00:22:33,369 --> 00:22:35,160
Tenemos una interesante
visualizaciones aquí.

387
00:22:35,160 --> 00:22:36,952
Pero nuestros datos fue un poco aburrido.

388
00:22:36,952 --> 00:22:39,410
Vamos a ver lo que podemos hacer si
teníamos los datos más interesantes.

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

390
00:22:44,420 --> 00:22:50,500
>> Acto IV, que trabaja con el
Data-- lo primero

391
00:22:50,500 --> 00:22:53,560
vamos a querer hacer para que nuestra
visualización más interesante

392
00:22:53,560 --> 00:22:56,140
es para mover los datos a otro lugar.

393
00:22:56,140 --> 00:22:58,310
Es muy torpe para tener
los datos no modificables aquí.

394
00:22:58,310 --> 00:23:01,220
Y, en general, vamos a estar pidiendo
alguien más para los datos.

395
00:23:01,220 --> 00:23:05,400
Vamos a estar tal vez pidiendo al gobierno,
la Oficina del Censo, ¿cuál es tu datos

396
00:23:05,400 --> 00:23:10,170
y luego el trazado que o pidiendo
una entidad de terceros para algunos datos

397
00:23:10,170 --> 00:23:13,330
y luego la construcción de una
visualización en eso.

398
00:23:13,330 --> 00:23:17,170
>> Así que lo primero que queremos hacer
es trasladar eso a otro lugar.

399
00:23:17,170 --> 00:23:24,130
Así que voy a crear un
presentar aquí llamado data.json.

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

401
00:23:25,600 --> 00:23:29,210
Usted no tiene que saber mucho sobre eso.

402
00:23:29,210 --> 00:23:33,210
Y vamos a copiar el
pocos datos que tenemos allí,

403
00:23:33,210 --> 00:23:40,330
pegarla allí textualmente, vaya
de nuevo a nuestro código de visualización

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

405
00:23:45,362 --> 00:23:46,820
Usted no tiene que saber los detalles.

406
00:23:46,820 --> 00:23:49,800
Pero lo que esto va a hacer es,
encontrará ese archivo,

407
00:23:49,800 --> 00:23:51,780
traérsela, y devolverlo a nosotros.

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

409
00:24:11,660 --> 00:24:15,220
Así que lo que hace es, va
y obtener el archivo data.json.

410
00:24:15,220 --> 00:24:18,570
Y entonces todo el código que es
sangría dentro-- esencialmente,

411
00:24:18,570 --> 00:24:21,800
todo el código que tener allí-- voluntad
ejecute sólo cuando conseguimos los datos de nuevo.

412
00:24:21,800 --> 00:24:25,760
Y entonces va a funcionar que
código con los datos que tenemos.

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

414
00:24:28,870 --> 00:24:31,390
por algún código en algún lugar
otra cosa, que es generalmente

415
00:24:31,390 --> 00:24:36,110
donde algunos datos de consulta
en otro lugar, que es generalmente

416
00:24:36,110 --> 00:24:38,656
cómo funcionan las visualizaciones.

417
00:24:38,656 --> 00:24:41,400
>> Pero quiero volver a los datos.

418
00:24:41,400 --> 00:24:48,030
Así que los datos fundamentalmente en D3-- D3
consume datos que hay una lista de las cosas.

419
00:24:48,030 --> 00:24:53,000
D3 espera que los datos que acaba de ser una lista
de las cosas, una serie de cosas.

420
00:24:53,000 --> 00:24:58,780
No importa cuáles son esas cosas
son, en tanto que es un conjunto de ellos.

421
00:24:58,780 --> 00:25:02,460
>> Así que aquí, por ejemplo, podríamos de
Por supuesto haber valores de punto flotante.

422
00:25:02,460 --> 00:25:04,830
Podríamos tener los negativos.

423
00:25:04,830 --> 00:25:09,400
D3 no le importa, siempre y
ya que es una lista de las cosas.

424
00:25:09,400 --> 00:25:13,270
>> Como las cosas interesantes que
podría tener, también podría

425
00:25:13,270 --> 00:25:19,410
tener una lista de cadenas como esas.

426
00:25:19,410 --> 00:25:25,440
Así que estos son los titulares de Crimson
Cogí hace unos días.

427
00:25:25,440 --> 00:25:29,220
Y tal vez usted puede encontrar algunos interesantes
cosas de estos a los titulares.

428
00:25:29,220 --> 00:25:30,970
>> Así que de nuevo, esta es una lista de las cosas.

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

430
00:25:32,360 --> 00:25:35,572
Estos resultan ser una cadena.

431
00:25:35,572 --> 00:25:36,530
Hemos cambiado nuestros datos.

432
00:25:36,530 --> 00:25:38,210
>> Volvamos a nuestra visualización.

433
00:25:38,210 --> 00:25:42,495
Ahora, nuestro visualización espera
la entrada a ser números.

434
00:25:42,495 --> 00:25:44,370
Así que vamos a tener
hacer algunos cambios.

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

436
00:25:47,180 --> 00:25:52,180
Así, por ejemplo, en primer lugar, tal vez
queremos poner estos círculos a lo largo

437
00:25:52,180 --> 00:25:56,870
por la longitud de la titular, la
número de caracteres en el título.

438
00:25:56,870 --> 00:26:03,600
>> Entonces, ¿qué vamos a hacer es-- cada vez que nuestro
función es llamada con una cadena,

439
00:26:03,600 --> 00:26:09,095
vamos a encontrar es la longitud Y
luego pasa que a escala.

440
00:26:09,095 --> 00:26:11,550
El color, voy a volver
que a azul acero.

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

442
00:26:19,060 --> 00:26:20,420
Y ahí vamos.

443
00:26:20,420 --> 00:26:23,190
Tenemos una visualización
titulares de carmesí.

444
00:26:23,190 --> 00:26:25,500
>> Nuestra escala es un poco apagado.

445
00:26:25,500 --> 00:26:29,680
Vamos a suponer que el más largo
título es de 100 caracteres,

446
00:26:29,680 --> 00:26:32,244
por lo que abarcan un poco.

447
00:26:32,244 --> 00:26:33,410
Y tenemos una visualización.

448
00:26:33,410 --> 00:26:36,710
Así que parece que la mayoría de los titulares
son bastante próximos entre sí,

449
00:26:36,710 --> 00:26:38,750
en términos de línea de carácter.

450
00:26:38,750 --> 00:26:41,200
Pero uno que realmente se destaca.

451
00:26:41,200 --> 00:26:46,660
>> Podríamos construir algunas herramientas
explorar que más.

452
00:26:46,660 --> 00:26:50,710
Pero cuando yo estaba trabajando en esto, yo estaba
curiosidad por saber si, en este conjunto de datos,

453
00:26:50,710 --> 00:26:53,880
titulares con dos puntos
en ellos sería más largo.

454
00:26:53,880 --> 00:26:55,770
I asume que lo harían.

455
00:26:55,770 --> 00:26:56,660
>> Así que vamos a averiguar.

456
00:26:56,660 --> 00:27:00,650
Vamos a usar el color
canal como lo hicimos antes,

457
00:27:00,650 --> 00:27:04,540
para codificar alguna acerca de si
hay dos puntos o no.

458
00:27:04,540 --> 00:27:07,220
Así que vamos a utilizar un condicional de nuevo.

459
00:27:07,220 --> 00:27:09,350
Usted no tiene que saber
los detalles de esta,

460
00:27:09,350 --> 00:27:14,260
pero así es como comprobamos una
cadena para un personaje en particular

461
00:27:14,260 --> 00:27:16,355
en JavaScript, de nuevo, no es relevante.

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

463
00:27:18,910 --> 00:27:23,270
>> Pero si no encontramos un
colon, volveremos verde.

464
00:27:23,270 --> 00:27:26,100
Y si lo hacemos, vamos a regresar rojo.

465
00:27:26,100 --> 00:27:29,010
Así que de nuevo, titulares que
haber dos puntos será de color rojo.

466
00:27:29,010 --> 00:27:34,980
Esto es lo que este significa: agradable.

467
00:27:34,980 --> 00:27:38,040
>> Así que parece que mi
hipótesis es golpeado.

468
00:27:38,040 --> 00:27:39,360
Sólo hay dos.

469
00:27:39,360 --> 00:27:42,380
Sólo tenemos seis puntos de datos
y sólo dos tenían dos puntos.

470
00:27:42,380 --> 00:27:45,510
Pero parece un poco más
en el extremo inferior, de hecho.

471
00:27:45,510 --> 00:27:47,830
Titulares con dos puntos parecen
generalmente a ser más corto,

472
00:27:47,830 --> 00:27:52,370
al menos en nuestros datos definido-- interesante.

473
00:27:52,370 --> 00:27:55,830
>> Volvamos a que
azul acero y luego ver

474
00:27:55,830 --> 00:28:00,601
lo que podemos hacer con aún
los datos más interesantes.

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

476
00:28:04,370 --> 00:28:09,070
Así que de nuevo, he mencionado que
datos en D3 es una lista de las cosas.

477
00:28:09,070 --> 00:28:11,080
Hemos visto los números de muchos tipos.

478
00:28:11,080 --> 00:28:12,810
Hemos visto cuerdas.

479
00:28:12,810 --> 00:28:15,700
Pero las cosas también pueden ser objetos.

480
00:28:15,700 --> 00:28:20,080
>> Pueden ser cosas complicadas
que incluyen un montón de cosas.

481
00:28:20,080 --> 00:28:24,510
Decir que con mayor claridad,
en la mayoría de los casos,

482
00:28:24,510 --> 00:28:28,384
quiere construir cada punto de datos como
más complicado que un solo valor.

483
00:28:28,384 --> 00:28:30,175
Si usted se imagina un
base de datos sobre los estudiantes,

484
00:28:30,175 --> 00:28:32,470
podría ser un estudiante
nombre, una identificación de estudiante,

485
00:28:32,470 --> 00:28:36,370
y un montón de cosas asociada
con un registro en particular,

486
00:28:36,370 --> 00:28:39,834
no sólo una cadena o un número.

487
00:28:39,834 --> 00:28:40,750
Así que echemos un vistazo a eso.

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

489
00:28:55,180 --> 00:28:56,760
>> Se trata de un conjunto de tales datos.

490
00:28:56,760 --> 00:28:59,090
Se trata de un conjunto de datos sobre los terremotos.

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

492
00:29:01,910 --> 00:29:08,430
Así que todo lo que aquí en nuestra lista o matriz
de las cosas en sí contiene muchas cosas.

493
00:29:08,430 --> 00:29:11,380
Así que cada punto de datos tiene una
magnitud y una coordenada.

494
00:29:11,380 --> 00:29:13,425
Y coordina a sí mismos
contener dos cosas.

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

496
00:29:15,960 --> 00:29:20,450
>> Así que cada día es ahora mucho más
complicado y mucho más interesante

497
00:29:20,450 --> 00:29:22,700
y contiene mucho más
información interesante.

498
00:29:22,700 --> 00:29:26,730
Vamos a ver que podíamos construir fuera de eso.

499
00:29:26,730 --> 00:29:36,130
Volviendo de nuevo a aquí, de nuevo, usando
nuestra visualización círculo histograma

500
00:29:36,130 --> 00:29:42,110
hemos construido, vamos a ver si podemos construir un
la visualización de la distribución de magnitud

501
00:29:42,110 --> 00:29:43,305
en nuestro conjunto de datos.

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

503
00:29:45,850 --> 00:29:48,660
>> Así que aquí, es el mismo concepto.

504
00:29:48,660 --> 00:29:51,920
Pero ahora, d contiene más cosas.

505
00:29:51,920 --> 00:29:54,780
d contiene muchos elementos de datos.

506
00:29:54,780 --> 00:29:57,946
Así que visten D espalda.

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

508
00:29:59,670 --> 00:30:06,080
Y nosotros respondemos al encontrar la magnitud
de d y luego paso, que a escala.

509
00:30:06,080 --> 00:30:08,490
>> Y entonces tenemos que cambiar
nuestra escala, por supuesto.

510
00:30:08,490 --> 00:30:12,980
Así magnitudes simplemente no lo hacen
ir mucho más de 10.

511
00:30:12,980 --> 00:30:15,485
En realidad, nunca ha habido
un terremoto de magnitud 10.

512
00:30:15,485 --> 00:30:19,360
Pero eso es algo de nuestra parte superior
final, nuestro espectro superior.

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

514
00:30:20,240 --> 00:30:22,990
Niza, tenemos una visualización.

515
00:30:22,990 --> 00:30:25,490
Es interesante lo note--
hay dos puntos de datos que

516
00:30:25,490 --> 00:30:29,010
son casi exactamente en la parte superior de cada
otro, en términos de magnitud.

517
00:30:29,010 --> 00:30:31,350
Esto se ve por la opacidad que estamos usando.

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

519
00:30:40,810 --> 00:30:42,690
>> Tenemos datos geográficos ahora.

520
00:30:42,690 --> 00:30:44,710
Tenemos latitudes y longitud.

521
00:30:44,710 --> 00:30:47,549
Tal vez podríamos hacer algo un
mucho más interesante con eso.

522
00:30:47,549 --> 00:30:49,590
Vamos a ver un poco más
interesante forma de visualizar

523
00:30:49,590 --> 00:30:53,500
esta más complicado
datos que tenemos acceso.

524
00:30:53,500 --> 00:31:04,950
>> Acto V, Mapping-- fundamentalmente,
queremos poner éstos en un mapa.

525
00:31:04,950 --> 00:31:07,690
Quiero decir, aquí es donde va esto.

526
00:31:07,690 --> 00:31:13,130
Queremos para codificar información sobre el
posición de estas lecturas del terremoto,

527
00:31:13,130 --> 00:31:16,350
así como su magnitud,
porque tenemos que ahora.

528
00:31:16,350 --> 00:31:21,310
Entendemos cómo consumir
datos más complicados.

529
00:31:21,310 --> 00:31:26,200
>> Lo primero que vamos a hacer es
crear un mapa, un mapa de fondo.

530
00:31:26,200 --> 00:31:29,360
Voy a ir a través de
esto muy rápidamente.

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

532
00:31:30,560 --> 00:31:33,110
Es otro de esos
recetas que realmente no

533
00:31:33,110 --> 00:31:35,690
tiene que entender completamente para que usted utilice.

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

535
00:31:38,510 --> 00:31:39,740
Pero esto es 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
>> No vamos a entrar en detalle.

538
00:31:45,730 --> 00:31:54,210
Pero por encima, lo que hace es,
se consulta este archivo us.json, que

539
00:31:54,210 --> 00:31:57,150
es un archivo de datos como
la que teníamos antes.

540
00:31:57,150 --> 00:31:59,150
Es más complejo, por supuesto.

541
00:31:59,150 --> 00:32:02,920
Pero en este caso, todo,
cada punto de datos es este estado

542
00:32:02,920 --> 00:32:05,420
y tiene una lista de
latitudes y longitud

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

544
00:32:10,500 --> 00:32:13,280
>> Entonces, ¿qué va a hacer D3 es similar
a lo que hicimos antes.

545
00:32:13,280 --> 00:32:18,140
Se solicitará que y
obligar a que a un elemento.

546
00:32:18,140 --> 00:32:20,890
Y hay una función que
trazará un mapa de ese elemento fuera,

547
00:32:20,890 --> 00:32:23,410
basado en las latitudes y longitud.

548
00:32:23,410 --> 00:32:24,580
Puedes leer más sobre esto.

549
00:32:24,580 --> 00:32:27,385
Y lo recomiendo.

550
00:32:27,385 --> 00:32:30,090
>> Hay enlaces en la parte
final de este código publicada.

551
00:32:30,090 --> 00:32:31,570
Y se comenta el código.

552
00:32:31,570 --> 00:32:34,050
En hay enlaces para más adelante esto.

553
00:32:34,050 --> 00:32:36,590
Te recomiendo que mires para arriba.

554
00:32:36,590 --> 00:32:39,460
Pero lo que nos importa es
esta función de proyección.

555
00:32:39,460 --> 00:32:41,210
Quiero pasar por eso.

556
00:32:41,210 --> 00:32:43,522
>> En primer lugar, déjame mostrarte
que, sí, tenemos un mapa.

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

558
00:32:47,300 --> 00:32:49,970
Los mapas son cool.

559
00:32:49,970 --> 00:32:52,330
Así que echemos un vistazo a esta
función de producción.

560
00:32:52,330 --> 00:32:56,481
>> La proyección es mucho
como una balanza, escalas de nuevo.

561
00:32:56,481 --> 00:32:59,210
Así que lo que la producción de
esta función de proyección

562
00:32:59,210 --> 00:33:06,610
hace es, podríamos pasarlo longitud
y latitudes-- en este caso,

563
00:33:06,610 --> 00:33:09,590
estos valores aquí son la
lat-longs del edificio

564
00:33:09,590 --> 00:33:13,990
estamos sentados en la derecha
ahora-- a la proyección.

565
00:33:13,990 --> 00:33:20,560
Y la proyección convertirá
que en los valores de x e y de píxeles.

566
00:33:20,560 --> 00:33:23,300
>> Entonces, ¿qué está haciendo la proyección
es muy similar a nuestra escala.

567
00:33:23,300 --> 00:33:27,270
Se trata de tomar nuestras latitudes y
la longitud que representa todo un globo

568
00:33:27,270 --> 00:33:31,390
y la reducción y dimensionamiento que
a la plaza que queremos,

569
00:33:31,390 --> 00:33:33,510
que le hemos dado.

570
00:33:33,510 --> 00:33:35,220
En este caso, estamos
pasando estos valores.

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

572
00:33:41,370 --> 00:33:46,250
Toda esta pantalla es 700 píxeles
de ancho, por lo que nos hace por aquí,

573
00:33:46,250 --> 00:33:53,310
y 154 píxeles hacia abajo, que yo
estimación es más o menos aquí.

574
00:33:53,310 --> 00:33:57,250
>> Así que teniendo esos lat-longs, que
representar algo en todo el mundo

575
00:33:57,250 --> 00:34:02,850
y aplastando y que se mueve y todo
nos valores X e Y de píxeles dar,

576
00:34:02,850 --> 00:34:05,450
esta es la primera cosa que es
hecho en este código de correspondencia.

577
00:34:05,450 --> 00:34:07,920
Y luego el resto de la
código consume los datos

578
00:34:07,920 --> 00:34:14,310
y luego esos mapas lat-longs
con algo en su pantalla.

579
00:34:14,310 --> 00:34:18,380
>> Pero vamos a utilizar esta proyección
funciones, porque resulta que

580
00:34:18,380 --> 00:34:20,270
tenemos lat-largos largos también.

581
00:34:20,270 --> 00:34:24,509
Mirando hacia atrás en nuestros datos, tenemos
latitudes y coordenadas de longitud

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
Así que vamos a utilizar la proyección.

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

586
00:34:33,250 --> 00:34:37,639
>> Así que buscando en nuestra exposición,
queremos que nuestro exposition--

587
00:34:37,639 --> 00:34:39,590
tenemos una latitud y una longitud.

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

589
00:34:40,770 --> 00:34:43,510
Y resulta que, tenemos exactamente
lo que want-- proyección.

590
00:34:43,510 --> 00:34:46,239
Muy parecido estábamos
utilizando la escala de aquí,

591
00:34:46,239 --> 00:34:52,075
ahora vamos a utilizar proyección
y pasarlo coordina.

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

593
00:34:55,241 --> 00:34:56,949
Así que lo primero
estamos doing-- así que estamos

594
00:34:56,949 --> 00:35:01,520
conseguir d, que es una de datos individual
elemento de un terremoto individuo

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

596
00:35:02,370 --> 00:35:04,640
Lo primero que hacemos
es conseguir las coordenadas.

597
00:35:04,640 --> 00:35:06,150
Muy bien, tenemos las coordenadas.

598
00:35:06,150 --> 00:35:09,160
>> La segunda cosa que hacemos es
sucedió que a la proyección.

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

600
00:35:13,440 --> 00:35:16,680
Y luego la última cosa que
quiero hacer es obtener la x,

601
00:35:16,680 --> 00:35:19,342
que este caso es el primero.

602
00:35:19,342 --> 00:35:22,050
Es la primera de las dos cosas
que son devueltos por proyección.

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

604
00:35:27,840 --> 00:35:29,630
>> Nosotros haremos lo mismo para y.

605
00:35:29,630 --> 00:35:34,960
Pero en cambio, vamos a regresar
el segundo elemento, la y.

606
00:35:34,960 --> 00:35:35,980
¡Prepárate para refrescar.

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

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

609
00:35:46,450 --> 00:35:51,730
un documento impulsado datos que es
ocultar este archivo JSON de los objetos,

610
00:35:51,730 --> 00:35:57,560
hacer un mapa, y cambiando la
atributo en relación a los datos

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

612
00:35:59,600 --> 00:36:00,840
Esto es realmente interesante.

613
00:36:00,840 --> 00:36:03,770
Esto es genial.

614
00:36:03,770 --> 00:36:05,640
>> Tomemos a un nivel superior.

615
00:36:05,640 --> 00:36:08,795
Quiero decir, tenemos dos piezas de
información con cada punto de datos.

616
00:36:08,795 --> 00:36:10,000
Quiero decir, tres.

617
00:36:10,000 --> 00:36:12,540
Tenemos las coordenadas,
que es un x e y.

618
00:36:12,540 --> 00:36:15,700
Y tenemos la magnitud.

619
00:36:15,700 --> 00:36:17,420
>> Necesitamos codificar magnitud de alguna manera.

620
00:36:17,420 --> 00:36:18,920
Tenemos una gran cantidad de canales.

621
00:36:18,920 --> 00:36:20,370
Podemos utilizar el color.

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

623
00:36:21,890 --> 00:36:23,040
Podríamos utilizar la opacidad.

624
00:36:23,040 --> 00:36:25,540
Podríamos usar muchas cosas en el código.

625
00:36:25,540 --> 00:36:29,180
Cualquiera de estos atributos y muchos
más que no están en la lista,

626
00:36:29,180 --> 00:36:33,065
, porque son opcionales, podríamos
utilizar para codificar estos datos, el accidente cerebrovascular

627
00:36:33,065 --> 00:36:35,670
y todas estas cosas que he mencionado.

628
00:36:35,670 --> 00:36:36,690
>> Vamos a hacer radio.

629
00:36:36,690 --> 00:36:38,830
Creo radio es el más intuitivo.

630
00:36:38,830 --> 00:36:46,210
Así que de nuevo, se lo cambiaremos que codificamos-
40 y hacer algunos cálculos.

631
00:36:46,210 --> 00:36:48,810
Usaremos nuestra escala favorito.

632
00:36:48,810 --> 00:36:50,290
Y estamos más allá d.

633
00:36:50,290 --> 00:36:55,850
Pero no d porque queremos que la magnitud
de d. d es sólo el punto de datos.

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

635
00:36:57,430 --> 00:36:58,470
>> Vamos a intentarlo de nuevo.

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

637
00:37:00,230 --> 00:37:02,940
¿Por qué no funciona?

638
00:37:02,940 --> 00:37:04,387
>> Así que recuerda lo que hace escala.

639
00:37:04,387 --> 00:37:05,470
Echemos un vistazo a la escala de nuevo.

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

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

642
00:37:12,030 --> 00:37:14,730
Es por esto que estamos recibiendo este.

643
00:37:14,730 --> 00:37:18,420
>> Así que queremos cambiar nuestra escala
a algo más razonable.

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

645
00:37:22,610 --> 00:37:25,340
60 es grande, pero 10 terremotos
son increíblemente raro.

646
00:37:25,340 --> 00:37:27,880
De hecho, nunca han sucedido.

647
00:37:27,880 --> 00:37:31,830
>> Así que lo que esto va a hacer es, que va a tomar
nuestra magnitud que va de 1 a 10

648
00:37:31,830 --> 00:37:34,490
y asignarla a expandirlo a cabo.

649
00:37:34,490 --> 00:37:37,370
Y asignarla a 0 a 60.

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

651
00:37:38,840 --> 00:37:41,850
>> Niza, tenemos una visualización.

652
00:37:41,850 --> 00:37:42,500
Esto es muy bueno.

653
00:37:42,500 --> 00:37:43,736
Se trata de datos reales.

654
00:37:43,736 --> 00:37:46,360
Se dará cuenta, en mi pequeño juguete
ejemplo, el terremoto más grande

655
00:37:46,360 --> 00:37:49,417
es justo encima de nosotros.

656
00:37:49,417 --> 00:37:50,000
Pero eso es todo.

657
00:37:50,000 --> 00:37:54,422
Tenemos una visualización fecha impulsada
que consume los datos

658
00:37:54,422 --> 00:37:56,255
y nos da realmente
información interesante.

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

660
00:38:02,600 --> 00:38:06,420
Sí, vamos a añadir un poco
interactividad a ella.

661
00:38:06,420 --> 00:38:08,675
Mencioné que era
la fuerza fuerte de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Así que aquí, para cada elemento, estamos
que describe un grupo de atributos.

664
00:38:15,060 --> 00:38:20,230
Pero también podemos describir lo que queremos
a pasar con elementos de interactividad.

665
00:38:20,230 --> 00:38:26,190
Por ejemplo, podríamos describir
lo que sucede cuando el cursor sobre.

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

667
00:38:28,740 --> 00:38:33,640
Y muy similar que,
Eso tomará una función,

668
00:38:33,640 --> 00:38:36,700
muy similar a la
atributos que teníamos antes,

669
00:38:36,700 --> 00:38:44,650
donde hacemos algo al
elemento cuando pasa sobre ella.

670
00:38:44,650 --> 00:38:47,100
>> Así que lo primero que tenemos que
hacer es seleccionar ese elemento,

671
00:38:47,100 --> 00:38:49,435
para encontrarlo, básicamente, en el navegador.

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

673
00:38:57,090 --> 00:39:00,920
y entonces podríamos establecer
un atributo a la misma.

674
00:39:00,920 --> 00:39:06,870
Así que lo que estoy haciendo aquí es, cuando pasemos por
por algo, nos pondremos ese elemento

675
00:39:06,870 --> 00:39:11,197
a continuación, establezca su opacidad espalda
a 1, hasta completamente opaca.

676
00:39:11,197 --> 00:39:12,488
Vamos a ver lo que parece.

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

678
00:39:29,430 --> 00:39:39,080
>> Parece ser que tenemos una
punto y coma adicional aquí.

679
00:39:39,080 --> 00:39:42,420
Así que si pasemos por aquí, que se llena.

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

681
00:39:46,530 --> 00:39:48,960
Pero ahora, por supuesto,
pensión completa, ya que

682
00:39:48,960 --> 00:39:53,240
tiene que describir lo que sucede
Cuando se extrae la nuestra cursor.

683
00:39:53,240 --> 00:39:59,990
Así que vamos a hacer exactamente eso en
mouseout, a diferencia de mouseover.

684
00:39:59,990 --> 00:40:06,399
>> Y vamos a restablecer a
lo que teníamos antes-- 0.5.

685
00:40:06,399 --> 00:40:10,260
Y ahora, cada vez que
vuelo estacionario, obtenemos un círculo completo.

686
00:40:10,260 --> 00:40:13,468
Nos ayuda a ver lo que
estamos seleccionando esencialmente.

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

688
00:40:19,210 --> 00:40:22,860
>> Y ahora vamos a hacer esto realmente genial.

689
00:40:22,860 --> 00:40:26,210
Vamos a conectar este a datos reales.

690
00:40:26,210 --> 00:40:30,890
Preguntemos entonces podría
USGS sobre sus datos.

691
00:40:30,890 --> 00:40:35,630
Así que el Servicio Geológico de EE.UU.
tiene datos sobre terremotos.

692
00:40:35,630 --> 00:40:41,460
Tienen una API pública que es capaz
para ser consumido en formato JSON.

693
00:40:41,460 --> 00:40:42,548
Así que vamos a hacer eso.

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

695
00:40:49,730 --> 00:40:55,900
>> Así que esto es un poco de código que
se conecta a la API de USGS.

696
00:40:55,900 --> 00:40:57,990
Y hay un poco de procesamiento en él.

697
00:40:57,990 --> 00:41:02,200
Esto no es relevante, pero lo simplifica
a un formato de datos simple como la que se

698
00:41:02,200 --> 00:41:03,800
que teníamos antes.

699
00:41:03,800 --> 00:41:08,140
Así que me deshago de nuestro llamado a
nuestra data.json falso en el archivo.

700
00:41:08,140 --> 00:41:13,110
Y en cambio, estoy llamando
el USGS esencialmente.

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

702
00:41:16,700 --> 00:41:21,260
Esto es, los datos reales de la vida real
de esta semana para los terremotos.

703
00:41:21,260 --> 00:41:23,217
Esto es realmente interesante.

704
00:41:23,217 --> 00:41:25,050
Esto no es sorprendente
para nosotros, pero hay

705
00:41:25,050 --> 00:41:27,909
una gran cantidad de terremotos en el
Costa Oeste en California.

706
00:41:27,909 --> 00:41:30,950
Pero pensé que era muy interesante
que había tantos terremotos

707
00:41:30,950 --> 00:41:34,350
en Alaska, y al parecer,
aquí en el Medio Oeste.

708
00:41:34,350 --> 00:41:37,630
Quiero decir, interesante, y estamos bien.

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

710
00:41:40,410 --> 00:41:43,760
>> Pero fundamentalmente, esta
es lo que nos ayuda a hacer D3.

711
00:41:43,760 --> 00:41:48,030
Nos ayuda a dar los datos, se unen
a elementos en el DOM,

712
00:41:48,030 --> 00:41:51,620
y tienen los elementos cambian
como una función de los datos,

713
00:41:51,620 --> 00:41:54,780
tener esos atributos, todos los
muchos atributos de los elementos,

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

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

716
00:42:05,440 --> 00:42:09,290
>> D3 es un increíblemente poderoso
biblioteca y increíblemente bien dirigido.

717
00:42:09,290 --> 00:42:12,260
Esto es un poco de materia de gran alcance.

718
00:42:12,260 --> 00:42:15,960
La visualización de datos es un
herramienta increíblemente poderosa

719
00:42:15,960 --> 00:42:21,530
para transportar a las personas profundas
ideas que llega a su núcleo

720
00:42:21,530 --> 00:42:25,430
y les ayuda a entender, en
de esta manera profunda e intuitiva,

721
00:42:25,430 --> 00:42:29,760
cómo los datos de las obras y cómo
datos cambia nuestra vida.

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