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 sou David
Chouinard, e este é D3.

4
00:00:16,480 --> 00:00:17,700
Bem-vindo.

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

6
00:00:21,270 --> 00:00:25,020
D3 é um framework JavaScript
para a construção de uma alta qualidade

7
00:00:25,020 --> 00:00:28,110
visualizações interativas para a web.

8
00:00:28,110 --> 00:00:30,870
Coisas como o que estamos
vendo em volta de mim,

9
00:00:30,870 --> 00:00:34,230
vamos aprender a fazer os
coisas, tipo de os fundamentos da mesma.

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

11
00:00:36,452 --> 00:00:38,160
Vamos começar
fazer fotos bonitas.

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

13
00:00:41,108 --> 00:00:44,350
Temos mais demos
de perspectivas disponíveis.

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

15
00:00:48,040 --> 00:00:50,760
Vamos fazê-lo.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- vamos
para começar imediatamente fazer coisas legais.

17
00:00:58,700 --> 00:01:01,240
Primeiro de tudo, à esquerda, que tem o código.

18
00:01:01,240 --> 00:01:03,470
À direita, temos
o resultado do nosso código.

19
00:01:03,470 --> 00:01:04,900
Vamos passar por isso.

20
00:01:04,900 --> 00:01:05,780
>> Vamos fazer um círculo.

21
00:01:05,780 --> 00:01:08,570
O que acha disso?

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

23
00:01:14,934 --> 00:01:16,100
Você não acredita em mim, certo?

24
00:01:16,100 --> 00:01:18,190
Não está lá.

25
00:01:18,190 --> 00:01:21,830
>> Então, o que nós fizemos aqui é,
SVG é gráficos vetoriais escaláveis.

26
00:01:21,830 --> 00:01:27,530
Esta é a nossa forma de dizer ao navegador para
fazer gráficos vetoriais no browser.

27
00:01:27,530 --> 00:01:30,740
O que nós fizemos agora
é adicionado um círculo para navegar.

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

29
00:01:34,790 --> 00:01:36,850
antes que possamos realmente vê-lo.

30
00:01:36,850 --> 00:01:40,045
Nós precisamos dizer que a sua posição x,
sua posição y, o seu raio.

31
00:01:40,045 --> 00:01:43,310
Nós não dizer que nada disso,
por isso não estamos vendo isso agora.

32
00:01:43,310 --> 00:01:46,210
Mas vamos dizer que coisas.

33
00:01:46,210 --> 00:01:49,510
>> Então, primeiro de tudo, você tem
para dar o nosso círculo de um nome.

34
00:01:49,510 --> 00:01:53,070
Então, vamos chamá-lo de círculo.

35
00:01:53,070 --> 00:01:54,406
Nosso círculo tem um nome agora.

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

37
00:01:57,230 --> 00:01:59,490
E vamos dar-lhe alguns atributos.

38
00:01:59,490 --> 00:02:03,690
Como cerca de cx iria centrar x, de modo
o centro da posição x.

39
00:02:03,690 --> 00:02:06,730
Digamos que, de 200 para 200 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Vamos dar-lhe um y de 200 pixels também.

41
00:02:10,220 --> 00:02:16,032
E um r, um raio, de cerca de 40 pixels.

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

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

44
00:02:21,740 --> 00:02:23,440
Eu não posso soletrar.

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

46
00:02:30,430 --> 00:02:31,520
>> Lá vai você.

47
00:02:31,520 --> 00:02:37,330
Nós temos um círculo na posição 200
pixels, 200 pixels, raio de 40 pixels.

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

49
00:02:38,280 --> 00:02:38,988
Nós temos um círculo.

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

51
00:02:40,880 --> 00:02:42,670
>> Então não há necessidade de seguir adiante.

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

53
00:02:45,790 --> 00:02:51,300
será fornecida em linha na extremidade
sob a forma de exemplos interactivos

54
00:02:51,300 --> 00:02:54,010
com postos de controle na
cada ato, e assim por diante.

55
00:02:54,010 --> 00:02:55,160
>> Vamos fazer mais coisas.

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

57
00:02:58,901 --> 00:03:01,541
Sinto muito por esse erro
mensagens logo ali.

58
00:03:01,541 --> 00:03:05,340
Lá vamos nós.

59
00:03:05,340 --> 00:03:06,350
>> Vamos dar-lhe uma cor.

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

61
00:03:07,170 --> 00:03:08,340
Eu gosto de azul aço.

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

63
00:03:13,280 --> 00:03:16,030
Bem, nosso círculo mudou de cor.

64
00:03:16,030 --> 00:03:17,320
Isso é ótimo.

65
00:03:17,320 --> 00:03:31,330
Vamos torná-lo semi-transparente
demasiado-- semi-transparente.

66
00:03:31,330 --> 00:03:33,670
>> Então, esses são atributos
estamos definindo no círculo.

67
00:03:33,670 --> 00:03:36,774
A primeira coisa que fizemos é
nós colocamos um círculo na página.

68
00:03:36,774 --> 00:03:38,690
E então estamos definindo
um monte de atributos.

69
00:03:38,690 --> 00:03:41,610
Algumas destas são requeridas,
como CX, CY, e Radius.

70
00:03:41,610 --> 00:03:42,680
E outros são opcionais.

71
00:03:42,680 --> 00:03:44,730
>> Há um monte mais atributos.

72
00:03:44,730 --> 00:03:46,760
Há um monte deles.

73
00:03:46,760 --> 00:03:53,070
Por exemplo, poderíamos ter um
acidente vascular cerebral, bem como, um golpe de vermelho.

74
00:03:53,070 --> 00:03:55,630
Mas vamos remover esse.

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

76
00:04:00,450 --> 00:04:01,600
>> Então, vamos fazer mais círculos.

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

78
00:04:02,810 --> 00:04:04,665
Vamos fazer um outro círculo.

79
00:04:04,665 --> 00:04:05,985
Isso é emocionante, não é?

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

81
00:04:09,630 --> 00:04:12,300
>> Então, dizer que eu apenas Copy-Colado
o que já tínhamos.

82
00:04:12,300 --> 00:04:13,570
Vamos chamá-lo circle2.

83
00:04:13,570 --> 00:04:15,840
E vamos fazer exatamente o
mesma coisa e dar-lhe

84
00:04:15,840 --> 00:04:20,450
atributos, dada uma posição de 300 x.

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

86
00:04:24,140 --> 00:04:27,240
>> E, claro, nós poderíamos
atualizar esses valores.

87
00:04:27,240 --> 00:04:31,640
Eu poderia colocá-lo em 400, e agora ele se move.

88
00:04:31,640 --> 00:04:35,470
E já que é chato, vamos
removê-lo, por isso circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Ele já se foi.

91
00:04:40,730 --> 00:04:43,170
>> Então, o que estamos fazendo e
é apenas muito, very-- este

92
00:04:43,170 --> 00:04:46,030
é muito semelhante ao que você
pode fazer em jQuery, por exemplo.

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

94
00:04:48,240 --> 00:04:50,040
Você já deve ter ouvido essa palavra antes.

95
00:04:50,040 --> 00:04:53,255
Estamos criando coisas, estabelecendo
atributos de material, remoção de material.

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

97
00:04:58,950 --> 00:05:02,360
>> Agora, aqui é onde fica interessante.

98
00:05:02,360 --> 00:05:07,250
Então, mais tarde no código, poderíamos ainda
referem-se ao círculo original aqui.

99
00:05:07,250 --> 00:05:14,100
Então, vamos redefinir seu atributo para cx.

100
00:05:14,100 --> 00:05:18,260
Vamos dizer, a sua posição x 400.

101
00:05:18,260 --> 00:05:22,406
E eu vou fazer a transição
que, por isso é óbvio.

102
00:05:22,406 --> 00:05:23,360
Lá vamos nós.

103
00:05:23,360 --> 00:05:24,780
>> Por isso, acrescentou um círculo.

104
00:05:24,780 --> 00:05:26,440
Nós definir alguns atributos.

105
00:05:26,440 --> 00:05:28,210
Nós adicionamos um outro círculo, removeu.

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

107
00:05:31,650 --> 00:05:35,400
>> Mas aqui é onde fica
muito mais interessante.

108
00:05:35,400 --> 00:05:39,070
Não só podemos definir atributos
apenas como valores, podemos dizer,

109
00:05:39,070 --> 00:05:41,610
hey, círculo, ir para a posição 200.

110
00:05:41,610 --> 00:05:44,540
Nós também pode configurá-los como funções.

111
00:05:44,540 --> 00:05:48,850
>> Então, ao invés de dar 400 aqui,
nós podemos fazer algum cálculo

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

113
00:05:53,950 --> 00:05:56,580
Então é assim que você expressar isso.

114
00:05:56,580 --> 00:06:00,660
Nós dizemos, em vez de 400, deixe-me
dar-lhe uma função em seu lugar.

115
00:06:00,660 --> 00:06:04,180
E aqui, dentro dessa função,
nós podemos fazer qualquer cálculo louco.

116
00:06:04,180 --> 00:06:06,820
>> Poderíamos tomar o tempo e
olhar para alguma outra coisa

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
-lhe um x posição aleatória?

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

120
00:06:20,360 --> 00:06:21,120
Então é isso.

121
00:06:21,120 --> 00:06:25,490
>> Então, o que diz é, por
a cada x, executar esta função.

122
00:06:25,490 --> 00:06:29,340
E o que estamos fazendo é o cálculo
algumas coisas, uma horários aleatórios a largura

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

124
00:06:30,410 --> 00:06:34,765
Então, toda vez que corremos, temos um
círculo que vai para um lugar aleatório.

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

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

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

128
00:06:44,274 --> 00:06:46,440
Estamos começando a chegar
algo interessante aqui.

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

130
00:06:49,120 --> 00:06:51,390
Vamos fazer esses dados conduzido agora.

131
00:06:51,390 --> 00:06:53,420
Não há dados aqui.

132
00:06:53,420 --> 00:06:54,482
Vamos mudar isso.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- Act II, Data Driven
Então vamos voltar para aqui.

135
00:07:12,140 --> 00:07:15,340
E vamos apenas se livrar de circle2,
porque nós estamos apenas adicionando e removendo

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

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

138
00:07:17,382 --> 00:07:21,421
Precisamos ser muito mais inteligente aqui.

139
00:07:21,421 --> 00:07:23,170
Vamos dizer, temos
alguns dados de algum tipo.

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

141
00:07:31,540 --> 00:07:40,020
Um moment-- vamos dizer,
tivemos dados deste formulário.

142
00:07:40,020 --> 00:07:41,800
Tivemos uma matriz, apenas
um monte de números.

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

144
00:07:45,750 --> 00:07:48,810
em conta bancária das pessoas, como
quanto eles pesam, Deus sabe o que.

145
00:07:48,810 --> 00:07:51,310
>> Estes são os números, e nós
quer usar nossos círculos

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

147
00:07:53,240 --> 00:07:55,515
Queremos amarrar nossa
círculos a esses números.

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

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

150
00:07:59,626 --> 00:08:01,500
Vamos dizer, nós queremos uma
círculo para cada número.

151
00:08:01,500 --> 00:08:03,590
Nós poderíamos fazer o velho
coisa que foram 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
Mas isso fica fora de mão, e
há um monte de repetir a lógica.

154
00:08:10,020 --> 00:08:12,760
>> Então, vamos começar mais esperto com isso.

155
00:08:12,760 --> 00:08:17,810
Em vez de usar o círculo var
svg.append que nós estávamos usando,

156
00:08:17,810 --> 00:08:21,580
vamos usar
este pequeno bloco aqui.

157
00:08:21,580 --> 00:08:24,510
Eu não quero ir em profundidade
em que todas estas peças fazem.

158
00:08:24,510 --> 00:08:26,020
E é uma espécie de um tópico avançado.

159
00:08:26,020 --> 00:08:27,830
E eu gostaria de poder.

160
00:08:27,830 --> 00:08:31,370
>> Mas a principal coisa a recognize-- e
você vai ver é muito frequentemente no código D3.

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

162
00:08:36,840 --> 00:08:41,360
uma vez que existem elementos de dados
nessa matriz aqui.

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

164
00:08:53,420 --> 00:08:55,780
Então isso cria tantos
círculos como há elementos.

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

166
00:08:58,520 --> 00:09:01,710
E ele faz uma coisa muito, muito fundamental.

167
00:09:01,710 --> 00:09:02,460
Então, vamos executar isso.

168
00:09:02,460 --> 00:09:05,460
Vamos remover o nosso outro círculo.

169
00:09:05,460 --> 00:09:09,565
Vamos apenas comentar esta
parcialmente para fora e correr novamente.

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

171
00:09:13,840 --> 00:09:15,260
>> Lá vamos nós.

172
00:09:15,260 --> 00:09:18,030
Assim, o nosso círculo aqui é um
muito mais escuro, porque nós

173
00:09:18,030 --> 00:09:20,720
tem sete círculos, um
em cima do outro.

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

175
00:09:25,425 --> 00:09:28,860
Mas há uma coisa fundamental que aconteceu
com esse trecho aqui.

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

177
00:09:31,030 --> 00:09:33,440
Assim, cada um de
esses elementos de dados,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, foi ligado
para um círculo em particular.

179
00:09:38,830 --> 00:09:40,960
Portanto, estas não só criou
um monte de círculos

180
00:09:40,960 --> 00:09:43,420
Mas os laços essas duas coisas juntas.

181
00:09:43,420 --> 00:09:48,740
>> E, no futuro, porque nós criamos
aqueles círculos com esta função, D3

182
00:09:48,740 --> 00:09:52,430
se eu lhe der um círculo, você pode
dar-me os dados associados.

183
00:09:52,430 --> 00:09:53,280
Assim, podemos perguntar D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, eu tenho esse círculo.

185
00:09:54,840 --> 00:09:57,350
Qual é a dados que o círculo tem?

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

187
00:10:01,290 --> 00:10:02,380
>> Essas coisas estão vinculados.

188
00:10:02,380 --> 00:10:04,490
Isso é um conceito muito, muito fundamental.

189
00:10:04,490 --> 00:10:06,070
Vamos olhar para isso.

190
00:10:06,070 --> 00:10:12,210
>> Assim, a maneira que pediria D3-- assim
isso é irrelevante para este,

191
00:10:12,210 --> 00:10:16,620
mas confia em mim nele.

192
00:10:16,620 --> 00:10:17,620
Isto é como nós pedimos D3.

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

194
00:10:21,312 --> 00:10:23,580
Dê-me o primeiro círculo que você pode encontrar.

195
00:10:23,580 --> 00:10:29,660
E então nós poderíamos perguntar D3, o que é
os dados em que, como este, 10.

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

197
00:10:33,380 --> 00:10:34,400
O que há de seus dados?

198
00:10:34,400 --> 00:10:36,650
10, que é de fato nosso
primeiro elemento de dados.

199
00:10:36,650 --> 00:10:42,150
Poderíamos perguntar-la, hey, D3,
encontrar-nos o nosso terceiro círculo.

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

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

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

203
00:10:49,790 --> 00:10:52,250
>> Então, aqui, eu mencionei
que poderíamos usar funções.

204
00:10:52,250 --> 00:10:54,910
E eu mencionei que era
uma coisa muito poderosa.

205
00:10:54,910 --> 00:11:03,070
Assim, não só pode fazer coisas nossas funções
como fazer alguma computação, por exemplo,

206
00:11:03,070 --> 00:11:09,170
devolver um número aleatório, que pode
também fazer as coisas com base nos dados.

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

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

209
00:11:13,750 --> 00:11:17,800
>> Portanto, este x postition-- vez
de apenas dizer, todos os círculos,

210
00:11:17,800 --> 00:11:21,735
obter x posição 200, que
poderia dar-lhe uma função.

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

212
00:11:26,140 --> 00:11:30,140
E aqui, nós podemos fazer alguns cálculos.

213
00:11:30,140 --> 00:11:33,710
e d aqui fica no lugar para os dados.

214
00:11:33,710 --> 00:11:36,120
Então, toda vez que temos
um círculo, basicamente,

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

216
00:11:37,750 --> 00:11:38,500
E, em seguida, para cada

217
00:11:38,500 --> 00:11:41,920
>> círculo, ele está indo para ir, hey,
circle1 qual é a sua posição x.

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

219
00:11:45,210 --> 00:11:48,630
Mas agora, toda vez pede D3
-nos o que é a sua posição x,

220
00:11:48,630 --> 00:11:51,790
que vai dar US-- temos
esse círculo, por isso temos os dados.

221
00:11:51,790 --> 00:11:55,290
Vai nos dar os dados e dizer:
o que você quer a exposição a ser,

222
00:11:55,290 --> 00:11:57,120
com base nesses dados.

223
00:11:57,120 --> 00:11:59,590
>> Vamos apenas devolver os dados reais.

224
00:11:59,590 --> 00:12:04,910
Então, se nós executar este, isto dá
dados dos EUA conduzido documentos.

225
00:12:04,910 --> 00:12:08,040
Estes meios são baseados
em relação Position--

226
00:12:08,040 --> 00:12:11,120
eles são bases como uma função dos dados.

227
00:12:11,120 --> 00:12:13,100
>> Assim, para o primeiro círculo,
D3 coloca um círculo.

228
00:12:13,100 --> 00:12:16,770
E então D3 nos pede, o que fazer
você quer que a exposição seja.

229
00:12:16,770 --> 00:12:19,620
E acabamos de dizer, tudo o que os dados são.

230
00:12:19,620 --> 00:12:21,185
Faça a exposição 10.

231
00:12:21,185 --> 00:12:26,320
>> Em seguida, ele pergunta, o que você deseja que o
exposição 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, é claro, pode
fazer alguma computação aqui.

235
00:12:32,230 --> 00:12:35,510
Acho que esses círculos
são uma espécie de esmagado up.

236
00:12:35,510 --> 00:12:38,965
>> Então multiplique por 3, multiplicar dados por 3.

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

238
00:12:41,870 --> 00:12:43,840
Nosso círculo acabou de ser expandido para fora.

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

240
00:12:46,730 --> 00:12:51,010
>> O círculo é realmente no limite,
então vamos talvez tipo de compensá-la.

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

242
00:12:53,632 --> 00:12:56,070
Aqui você vai.

243
00:12:56,070 --> 00:12:57,590
>> Esta é uma visualização de dados.

244
00:12:57,590 --> 00:13:01,767
É uma forma muito básica, mas este
nos dá algumas dicas sobre os nossos dados.

245
00:13:01,767 --> 00:13:04,600
Diz-nos que, por exemplo, nós
têm um pequeno grupo de elementos.

246
00:13:04,600 --> 00:13:06,340
E nós temos uma grande outlier aqui.

247
00:13:06,340 --> 00:13:10,830
Isto dá-nos algumas informações
sobre a distribuição.

248
00:13:10,830 --> 00:13:20,830
>> Se nós, por exemplo, para alterar
os dados a 150 aqui e atualização,

249
00:13:20,830 --> 00:13:22,630
a visualização é alterada.

250
00:13:22,630 --> 00:13:24,285
Este documento é dirigido dados.

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

252
00:13:32,640 --> 00:13:36,180
>> Então, é claro, todos esses elementos,
todos estes atributos aqui,

253
00:13:36,180 --> 00:13:38,430
podemos usar uma função, não
apenas os números, e não apenas

254
00:13:38,430 --> 00:13:39,900
x e y posições.

255
00:13:39,900 --> 00:13:42,120
Assim, podemos usar uma função para a cor.

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

257
00:13:45,260 --> 00:13:46,360
Então, vamos fazer o mesmo.

258
00:13:46,360 --> 00:13:49,360
Nós vamos dar-lhe uma função.

259
00:13:49,360 --> 00:13:52,320
>> E vamos dizer, poderíamos ter
condições na nossa função.

260
00:13:52,320 --> 00:13:54,770
Esta função pode ser
centena de longas filas.

261
00:13:54,770 --> 00:13:57,150
Ele pode fazer coisas muito, muito complicadas.

262
00:13:57,150 --> 00:13:59,080
>> Então, vamos colocar uma declaração se aqui.

263
00:13:59,080 --> 00:14:03,420
Vamos dizer que, se os nossos dados é menor
de 50, que é um limiar

264
00:14:03,420 --> 00:14:05,817
que nós estamos interessados
em por algum motivo.

265
00:14:05,817 --> 00:14:06,650
Vamos torná-lo verde.

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

267
00:14:09,830 --> 00:14:15,320
Caso contrário, vamos torná-lo vermelho.

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

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
>> Portanto, a nossa visualização de dados está começando
para transmitir informações mais interessante

272
00:14:24,860 --> 00:14:26,727
em muitos canais.

273
00:14:26,727 --> 00:14:28,560
Portanto, agora sabemos um pouco
sobre a distribuição.

274
00:14:28,560 --> 00:14:31,768
E nós sabemos que há algum tipo de
cortados em 50 que nós estamos interessados.

275
00:14:31,768 --> 00:14:35,630
Sabemos que existem dois pontos de dados
abaixo desse limiar e a maioria deles

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

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

278
00:14:41,510 --> 00:14:46,160
>> Assim, como um passo final, estes dados aqui,
é muito raro ver este como aquele.

279
00:14:46,160 --> 00:14:52,610
Então vamos apenas tirá-la a uma variável
porque é mais limpo, como este.

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

281
00:15:02,980 --> 00:15:05,197
E, então, usar essa variável aqui.

282
00:15:05,197 --> 00:15:06,280
É exatamente a mesma coisa.

283
00:15:06,280 --> 00:15:07,280
É apenas um pouco de.

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

285
00:15:25,300 --> 00:15:35,300
>> Em seguida, Ato III, Scales--
Então, um problema de direito

286
00:15:35,300 --> 00:15:38,920
aqui é que, se não mudarmos a nossa
dados deste 200 value--

287
00:15:38,920 --> 00:15:41,685
se alterá-lo para 400
ou algo assim e de atualização,

288
00:15:41,685 --> 00:15:44,540
então este valor só fui fora de campo.

289
00:15:44,540 --> 00:15:49,040
Portanto, a nossa lógica aqui
da forma como fazemos as vezes 3

290
00:15:49,040 --> 00:15:52,570
e 20, para espalhá-lo para fora e, em seguida,
compensá-la um pouco é realmente pesado.

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

292
00:15:54,150 --> 00:15:55,400
Eles estão apenas codificado lá.

293
00:15:55,400 --> 00:15:58,830
E eles estão muito ligados aos dados.

294
00:15:58,830 --> 00:16:00,550
Queremos um documento de dados conduzido.

295
00:16:00,550 --> 00:16:05,460
Queremos um documento muito flexível,
dado que os dados, se adapta a isso

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

297
00:16:07,900 --> 00:16:11,330
>> O que nós precisamos é, basicamente, nós
ter esse 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 saiu
a largura, a largura total aqui.

300
00:16:17,630 --> 00:16:20,620
Portanto, temos a gama de
números que vão 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 meio que deseja mapear que diante.

303
00:16:26,515 --> 00:16:30,002
Queremos que escalar para cima e
então compensá-la um pouco.

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

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

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

307
00:16:37,410 --> 00:16:38,250
Então, vamos usá-lo.

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

309
00:16:46,300 --> 00:16:49,670
>> A maneira que works-- eu vou
escreva isso e, em seguida, explicar.

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

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

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

313
00:17:08,670 --> 00:17:10,990
Podemos verificar isso.

314
00:17:10,990 --> 00:17:13,329
Podemos ver isso aqui.

315
00:17:13,329 --> 00:17:21,704
>> Então, se eu alimentá-lo 1-- um momento.

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

317
00:17:47,764 --> 00:17:48,555
Dê-me um segundo.

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

319
00:17:53,680 --> 00:17:55,080
Devo ter escrito mal-lo.

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

321
00:18:15,320 --> 00:18:15,990
Lá vai você.

322
00:18:15,990 --> 00:18:17,930
Eu sinto muito por isso.

323
00:18:17,930 --> 00:18:22,050
>> Então, o que a escala vai fazer
é, vai demorar um valor

324
00:18:22,050 --> 00:18:24,930
e, em seguida, converter que,
expandir esse fora, por isso

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

326
00:18:27,320 --> 00:18:32,910
Portanto, neste caso, se dermos a ele um,
que vai mapear que saiu 20.

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

328
00:18:37,750 --> 00:18:40,460
E em algum lugar no meio,
se conseguirmos 100, é

329
00:18:40,460 --> 00:18:44,610
vai estar em algum lugar
entre 20 e 600.

330
00:18:44,610 --> 00:18:51,480
>> E, claro, agora isso é o que
precisamos remover esses codificado

331
00:18:51,480 --> 00:18:53,402
coisas que temos lá.

332
00:18:53,402 --> 00:18:55,950
Então, o que nós queremos fazer é
ter os dados que estamos

333
00:18:55,950 --> 00:19:00,950
dada, que os dados individuais
elemento, e passá-lo para escalar pela primeira vez.

334
00:19:00,950 --> 00:19:02,635
Então escala vai escalá-lo para cima.

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

336
00:19:27,020 --> 00:19:48,880
>> Bom-- Oh, temos um pequeno erro aqui.

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

338
00:19:50,120 --> 00:19:51,290
Lá vai você.

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

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

341
00:19:59,550 --> 00:20:01,383
>> Isso nos dá a mesma
resultado que tínhamos antes,

342
00:20:01,383 --> 00:20:04,030
mas em vez de ter os
codificado restrições.

343
00:20:04,030 --> 00:20:07,790
E se o tamanho do nosso
mudanças de lona, ​​por exemplo,

344
00:20:07,790 --> 00:20:11,790
Se queremos ter isso mais
400 pixels e que espreme para fora,

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

346
00:20:15,440 --> 00:20:21,890
pode reduzir esta margem esquerda para a
algo mais ou menos do que 20.

347
00:20:21,890 --> 00:20:25,470
Estes números, estes codificado
números agora faz 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 fazer muito mais
coisas interessantes também.

350
00:20:30,520 --> 00:20:35,990
Então, ao invés de ter um linear
escala, podemos querer registrar uma escala.

351
00:20:35,990 --> 00:20:37,840
E isso nos dará uma escala logarítmica.

352
00:20:37,840 --> 00:20:41,269
>> Então, agora a nossa escala, em vez de
apenas expandindo para fora desse intervalo,

353
00:20:41,269 --> 00:20:42,810
ele está fazendo coisas mais sofisticadas.

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

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

356
00:20:53,790 --> 00:20:58,465
podemos querer usar apenas a largura,
assim de acordo com a largura 20 menos 40,

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

358
00:21:02,392 --> 00:21:05,350
E isso faz muito mais sentido
alguém que pode olhar 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
muito, muito sofisticado.

361
00:21:11,850 --> 00:21:13,350
Eles fazem um monte de coisas interessantes.

362
00:21:13,350 --> 00:21:17,620
Assim, as escalas não têm necessariamente
para operar apenas com números.

363
00:21:17,620 --> 00:21:18,955
Vamos fazer uma escala de cores.

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

365
00:21:23,120 --> 00:21:26,120
>> Portanto, a nossa gama poderia ser--
nosso domínio é de 1 a 200.

366
00:21:26,120 --> 00:21:28,220
Essa é a coisa entrada.

367
00:21:28,220 --> 00:21:33,793
Mas podemos querer mapear
verde para vermelho, por exemplo.

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

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

370
00:21:42,910 --> 00:21:45,110
Se dermos 200, nós vamos chegar vermelho.

371
00:21:45,110 --> 00:21:49,480
E se passar algo entre os dois,
que vai haver algum mix de que,

372
00:21:49,480 --> 00:21:52,520
em algum lugar no gradiente
entre o verde eo vermelho.

373
00:21:52,520 --> 00:21:55,210
>> E, em vez de ter
esse tipo de lógica desajeitado

374
00:21:55,210 --> 00:21:58,550
temos aqui com a
condicional ali mesmo,

375
00:21:58,550 --> 00:22:03,250
poderíamos ter um something--
escala linear entre esses.

376
00:22:03,250 --> 00:22:07,100
Por isso, usaria a escala que acabamos
criado, que chamamos de cor.

377
00:22:07,100 --> 00:22:09,060
E nós gostaríamos de lhe dar D, que
é nossa elemento de dados.

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

379
00:22:14,250 --> 00:22:15,060
E lá vamos nós.

380
00:22:15,060 --> 00:22:18,070
Nós temos uma escala de cores.

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

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

383
00:22:20,960 --> 00:22:22,560
A extrema-direita é completamente vermelho.

384
00:22:22,560 --> 00:22:24,828
E tudo no meio
é uma função de d.

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

386
00:22:33,369 --> 00:22:35,160
Nós temos uma interessante
visualizações aqui.

387
00:22:35,160 --> 00:22:36,952
Mas nossos dados foi meio chato.

388
00:22:36,952 --> 00:22:39,410
Vamos ver o que poderíamos fazer se
tivemos dados mais interessantes.

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

390
00:22:44,420 --> 00:22:50,500
>> Ato IV, Com Trabalho
Data-- a primeira coisa

391
00:22:50,500 --> 00:22:53,560
vamos querer fazer para tornar a
visualização mais interessante

392
00:22:53,560 --> 00:22:56,140
é mover os dados em outro lugar.

393
00:22:56,140 --> 00:22:58,310
É muito pesado para ter
os dados codificados aqui.

394
00:22:58,310 --> 00:23:01,220
E, geralmente, nós vamos estar se perguntando
outra pessoa para os dados.

395
00:23:01,220 --> 00:23:05,400
Estaremos talvez pedindo que o governo,
o Census Bureau, o que é seu de dados

396
00:23:05,400 --> 00:23:10,170
e, em seguida, traçando que ou pedir
alguma entidade de terceiros para obter alguns dados

397
00:23:10,170 --> 00:23:13,330
e, em seguida, a construção de um
visualização sobre isso.

398
00:23:13,330 --> 00:23:17,170
>> Então a primeira coisa que queremos fazer
é passar isso para algum outro lugar.

399
00:23:17,170 --> 00:23:24,130
Então, eu estou indo para criar uma
arquivar aqui chamado data.json.

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

401
00:23:25,600 --> 00:23:29,210
Você não precisa saber muito sobre isso.

402
00:23:29,210 --> 00:23:33,210
E nós estamos indo para copiar o
poucos dados que temos lá,

403
00:23:33,210 --> 00:23:40,330
colá-lo lá na íntegra, acesse
de volta para o nosso código de visualização

404
00:23:40,330 --> 00:23:45,362
aqui, e use esta função aqui.

405
00:23:45,362 --> 00:23:46,820
Você não tem que saber os detalhes.

406
00:23:46,820 --> 00:23:49,800
Mas o que isto vai fazer é,
ele vai encontrar esse arquivo,

407
00:23:49,800 --> 00:23:51,780
buscá-la, e devolvê-lo para nós.

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

409
00:24:11,660 --> 00:24:15,220
Então, o que isso faz é, ele vai
e obter o arquivo data.json.

410
00:24:15,220 --> 00:24:18,570
E, em seguida, todo o código que é
recuadas dentro-- essencialmente,

411
00:24:18,570 --> 00:24:21,800
todo o código temos há-- vontade
executar somente quando chegarmos os dados de volta.

412
00:24:21,800 --> 00:24:25,760
E então ele vai executar esse
código com os dados que temos.

413
00:24:25,760 --> 00:24:28,870
Grande, temos uma
visualização que consulta

414
00:24:28,870 --> 00:24:31,390
por algum código em algum lugar
outra, o que é geralmente

415
00:24:31,390 --> 00:24:36,110
onde ele consulta de dados a partir de alguns
em outro lugar, o que é normalmente

416
00:24:36,110 --> 00:24:38,656
como visualizações trabalhar.

417
00:24:38,656 --> 00:24:41,400
>> Mas eu quero voltar para os dados.

418
00:24:41,400 --> 00:24:48,030
Assim, os dados fundamentalmente D3-- D3
consome dados que é uma lista de coisas.

419
00:24:48,030 --> 00:24:53,000
D3 espera que os dados apenas ser uma lista
das coisas, uma série de coisas.

420
00:24:53,000 --> 00:24:58,780
Não importa o que essas coisas
são, por isso, desde que seja uma matriz deles.

421
00:24:58,780 --> 00:25:02,460
>> Então, aqui, por exemplo, poderíamos de
Claro que têm valores de ponto flutuante.

422
00:25:02,460 --> 00:25:04,830
Poderíamos ter negativos.

423
00:25:04,830 --> 00:25:09,400
A D3 não me importo, contanto
como é uma lista de coisas.

424
00:25:09,400 --> 00:25:13,270
>> Como as coisas interessantes que
poderia ter, também poderíamos

425
00:25:13,270 --> 00:25:19,410
tem uma lista de strings como essa.

426
00:25:19,410 --> 00:25:25,440
Então, essas são as manchetes carmesim
Peguei alguns dias atrás.

427
00:25:25,440 --> 00:25:29,220
E talvez você pode encontrar algumas interessantes
coisas sobre estes um manchetes.

428
00:25:29,220 --> 00:25:30,970
>> Então, novamente, esta é uma lista de coisas.

429
00:25:30,970 --> 00:25:32,360
A D3 não me importo.

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

431
00:25:35,572 --> 00:25:36,530
Nós mudamos os nossos dados.

432
00:25:36,530 --> 00:25:38,210
>> Vamos voltar à nossa visualização.

433
00:25:38,210 --> 00:25:42,495
Agora, nossa visualização espera
a entrada a ser números.

434
00:25:42,495 --> 00:25:44,370
Então, nós vamos ter
para fazer algumas mudanças.

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

436
00:25:47,180 --> 00:25:52,180
Assim, por exemplo, em primeiro lugar, talvez
queremos colocar esses círculos ao longo

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

438
00:25:56,870 --> 00:26:03,600
>> Então, o que nós vamos fazer é-- toda vez que o nosso
função é chamada com uma corda,

439
00:26:03,600 --> 00:26:09,095
vamos descobrir que é comprimento E
em seguida, passar isso para escala.

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

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

442
00:26:19,060 --> 00:26:20,420
E lá vamos nós.

443
00:26:20,420 --> 00:26:23,190
Nós temos uma visualização
manchetes de carmesim.

444
00:26:23,190 --> 00:26:25,500
>> Nossa escala é um pouco fora.

445
00:26:25,500 --> 00:26:29,680
Vamos supor que o mais longo
headline é de 100 caracteres,

446
00:26:29,680 --> 00:26:32,244
de modo que abrangem um pouco.

447
00:26:32,244 --> 00:26:33,410
E nós temos uma visualização.

448
00:26:33,410 --> 00:26:36,710
Assim, parece que a maioria das manchetes
são muito próximos uns dos outros,

449
00:26:36,710 --> 00:26:38,750
em termos de linha de caráter.

450
00:26:38,750 --> 00:26:41,200
Mas há realmente se destaca.

451
00:26:41,200 --> 00:26:46,660
>> Poderíamos construir algumas ferramentas
explorar isso mais.

452
00:26:46,660 --> 00:26:50,710
Mas quando eu estava trabalhando sobre isso, eu estava
curioso para saber se, nesse conjunto de dados,

453
00:26:50,710 --> 00:26:53,880
manchetes com dois pontos
neles seria maior.

454
00:26:53,880 --> 00:26:55,770
I assume o fariam.

455
00:26:55,770 --> 00:26:56,660
>> Então, vamos descobrir.

456
00:26:56,660 --> 00:27:00,650
Vamos usar a cor
canal, como fizemos antes,

457
00:27:00,650 --> 00:27:04,540
para codificar alguma sobre se
há um cólon ou não.

458
00:27:04,540 --> 00:27:07,220
Então, vamos usar uma condicional novamente.

459
00:27:07,220 --> 00:27:09,350
Você não tem que saber
os pormenores deste,

460
00:27:09,350 --> 00:27:14,260
mas é assim que verificar um
string para um personagem em particular

461
00:27:14,260 --> 00:27:16,355
em JavaScript, novamente, não é relevante.

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

463
00:27:18,910 --> 00:27:23,270
>> Mas, se não encontrar um
cólon, vamos voltar verde.

464
00:27:23,270 --> 00:27:26,100
E se o fizermos, vamos voltar vermelho.

465
00:27:26,100 --> 00:27:29,010
Então, novamente, manchetes que
têm dois pontos será vermelho.

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

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

468
00:27:38,040 --> 00:27:39,360
Há apenas dois.

469
00:27:39,360 --> 00:27:42,380
Nós só temos seis pontos de dados
e apenas dois tiveram dois pontos.

470
00:27:42,380 --> 00:27:45,510
Mas parece um pouco mais
na extremidade inferior, na verdade.

471
00:27:45,510 --> 00:27:47,830
Headlines com dois pontos parecem
ser geralmente mais curto,

472
00:27:47,830 --> 00:27:52,370
pelo menos em nossos dados set-- interessante.

473
00:27:52,370 --> 00:27:55,830
>> Vamos voltar ao que
aço azul e, em seguida, ver

474
00:27:55,830 --> 00:28:00,601
o que podemos fazer com o mesmo
dados mais interessantes.

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

476
00:28:04,370 --> 00:28:09,070
Então, novamente, eu mencionei que
dados em D3 é uma lista de coisas.

477
00:28:09,070 --> 00:28:11,080
Temos visto números de muitos tipos.

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

479
00:28:12,810 --> 00:28:15,700
Mas as coisas também podem ser objectos.

480
00:28:15,700 --> 00:28:20,080
>> Podem ser coisas complicadas
que incluem um monte de coisas.

481
00:28:20,080 --> 00:28:24,510
Para dizer que de forma mais clara,
na maioria dos casos, nós

482
00:28:24,510 --> 00:28:28,384
quer construir todos os pontos de dados como
mais complicado do que apenas um valor.

483
00:28:28,384 --> 00:28:30,175
Se você imagina uma
banco de dados sobre alunos,

484
00:28:30,175 --> 00:28:32,470
pode haver um estudante
nome, uma carteira de estudante,

485
00:28:32,470 --> 00:28:36,370
e um monte de coisas associadas
com um registro particular,

486
00:28:36,370 --> 00:28:39,834
não apenas uma seqüência ou um número.

487
00:28:39,834 --> 00:28:40,750
Então, vamos olhar para isso.

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

489
00:28:55,180 --> 00:28:56,760
>> Este é um conjunto desses dados.

490
00:28:56,760 --> 00:28:59,090
Este é um conjunto de dados sobre terremotos.

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

492
00:29:01,910 --> 00:29:08,430
Então, tudo aqui na nossa lista ou matriz
de coisas contém em si muitas coisas.

493
00:29:08,430 --> 00:29:11,380
Assim, cada ponto de dados tem um
magnitude e uma coordenada.

494
00:29:11,380 --> 00:29:13,425
E coordena-se
conter duas coisas.

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

496
00:29:15,960 --> 00:29:20,450
>> Assim, a cada dia é agora muito mais
complicado e muito mais interessante

497
00:29:20,450 --> 00:29:22,700
e contém muito mais
informações interessantes.

498
00:29:22,700 --> 00:29:26,730
Vamos ver o que nós poderíamos construir a partir disso.

499
00:29:26,730 --> 00:29:36,130
Retornando de volta para aqui, mais uma vez, usando
nossa visualização círculo histograma

500
00:29:36,130 --> 00:29:42,110
nós construímos, vamos ver se podemos construir uma
visualizar a distribuição magnitude

501
00:29:42,110 --> 00:29:43,305
em nosso conjunto de dados.

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

503
00:29:45,850 --> 00:29:48,660
>> Então, aqui, é o mesmo conceito.

504
00:29:48,660 --> 00:29:51,920
Mas agora, d contém mais coisas.

505
00:29:51,920 --> 00:29:54,780
d contém muitos elementos de dados.

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

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

508
00:29:59,670 --> 00:30:06,080
E nós respondemos por encontrar a magnitude
de d e, em seguida, de passagem, que a escala.

509
00:30:06,080 --> 00:30:08,490
>> E então temos de mudar
nossa escala, é claro.

510
00:30:08,490 --> 00:30:12,980
Então magnitudes simplesmente não fazer
ir muito mais do que 10.

511
00:30:12,980 --> 00:30:15,485
Na verdade, nunca houve
um terremoto de magnitude 10.

512
00:30:15,485 --> 00:30:19,360
Mas esse é o tipo do nosso superior
final, a parte superior do espectro.

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

514
00:30:20,240 --> 00:30:22,990
Bom, temos uma visualização.

515
00:30:22,990 --> 00:30:25,490
É interessante note-- assim
há dois pontos de dados que

516
00:30:25,490 --> 00:30:29,010
são quase exactamente por cima de cada
outro, em termos de magnitude.

517
00:30:29,010 --> 00:30:31,350
Você vê isso pela opacidade que estamos usando.

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

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

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

521
00:30:44,710 --> 00:30:47,549
Talvez pudéssemos fazer algo um
muito mais interessante com isso.

522
00:30:47,549 --> 00:30:49,590
Vamos descobrir um pouco mais
maneira interessante para visualizar

523
00:30:49,590 --> 00:30:53,500
este mais complicado
dados que temos acesso.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- fundamentalmente,
queremos colocar estes em um mapa.

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

526
00:31:07,690 --> 00:31:13,130
Queremos codificar informações sobre o
posição dessas leituras do terremoto,

527
00:31:13,130 --> 00:31:16,350
bem como a sua magnitude,
porque nós temos isso agora.

528
00:31:16,350 --> 00:31:21,310
Entendemos como consumir
dados mais complicadas.

529
00:31:21,310 --> 00:31:26,200
>> A primeira coisa que vamos fazer é
criar um mapa, um mapa de fundo.

530
00:31:26,200 --> 00:31:29,360
Eu vou passar por
isto muito rapidamente.

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

532
00:31:30,560 --> 00:31:33,110
É mais um daqueles
receitas que você realmente não

533
00:31:33,110 --> 00:31:35,690
tem que entender completamente para você usar.

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

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

536
00:31:39,740 --> 00:31:43,580
Este código aqui cria um mapa.

537
00:31:43,580 --> 00:31:45,730
>> Nós não vamos entrar em detalhes.

538
00:31:45,730 --> 00:31:54,210
Mas superficialmente, o que ele faz é,
ele consulta o arquivo us.json, que

539
00:31:54,210 --> 00:31:57,150
é um arquivo de dados como
a que tivemos antes.

540
00:31:57,150 --> 00:31:59,150
É mais complexo, é claro.

541
00:31:59,150 --> 00:32:02,920
Mas, neste caso, tudo,
todos os pontos de dados é este estado

542
00:32:02,920 --> 00:32:05,420
e tem uma lista de
latitudes e longitude

543
00:32:05,420 --> 00:32:10,500
que definem o polígono,
essa forma, esse estado.

544
00:32:10,500 --> 00:32:13,280
>> Então, o que vai fazer D3 é semelhante
ao que fizemos antes.

545
00:32:13,280 --> 00:32:18,140
Ele vai pedir que e
que se ligam a um elemento.

546
00:32:18,140 --> 00:32:20,890
E não há uma função que
mapeará esse elemento para fora,

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

548
00:32:23,410 --> 00:32:24,580
Você pode ler mais sobre isso.

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

550
00:32:27,385 --> 00:32:30,090
>> Há links no
final deste código postado.

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

552
00:32:31,570 --> 00:32:34,050
Em há links para mais sobre este assunto.

553
00:32:34,050 --> 00:32:36,590
Eu recomendo que você procurá-lo.

554
00:32:36,590 --> 00:32:39,460
Mas o que nos interessa é
esta função de projeção.

555
00:32:39,460 --> 00:32:41,210
Eu quero passar por isso.

556
00:32:41,210 --> 00:32:43,522
>> Primeiro de tudo, deixe-me mostrar
você que, sim, nós temos um mapa.

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

558
00:32:47,300 --> 00:32:49,970
Mapas são legais.

559
00:32:49,970 --> 00:32:52,330
Então, vamos olhar para este
função de produção.

560
00:32:52,330 --> 00:32:56,481
>> A projeção é muito
como uma balança, balança novamente.

561
00:32:56,481 --> 00:32:59,210
Então, o que a produção de
esta função de projeção

562
00:32:59,210 --> 00:33:06,610
não é, poderíamos passá-lo longitude
e latitudes-- neste caso,

563
00:33:06,610 --> 00:33:09,590
estes valores aqui são o
LAT-longs do edifício

564
00:33:09,590 --> 00:33:13,990
estamos sentados em direito
agora-- para projeção.

565
00:33:13,990 --> 00:33:20,560
E projeção converterá
que em xey valores de pixel.

566
00:33:20,560 --> 00:33:23,300
>> Então, o que está fazendo projeção
é muito semelhante à nossa escala.

567
00:33:23,300 --> 00:33:27,270
É tomar nossas latitudes e
longitude que representa todo um globo

568
00:33:27,270 --> 00:33:31,390
e encolhendo e dimensionamento que
até a praça que nós queremos,

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

570
00:33:33,510 --> 00:33:35,220
Neste caso, estamos
passando esses valores.

571
00:33:35,220 --> 00:33:41,370
E isso está nos dando, assim, que
na tela significa 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Esta tela inteira é de 700 pixels
ampla, de modo que nos faz por aqui,

573
00:33:46,250 --> 00:33:53,310
e 154 pixels para baixo, que eu
estimativa é muito bonito aqui.

574
00:33:53,310 --> 00:33:57,250
>> Assim, tendo essas-longs lat, que
representar algo em todo o mundo

575
00:33:57,250 --> 00:34:02,850
e espremendo e movendo-se que cerca de
nos valores X e Y de pixels dar,

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

577
00:34:05,450 --> 00:34:07,920
E, em seguida, o resto do
codificar os dados consome

578
00:34:07,920 --> 00:34:14,310
e, em seguida, mapeia esses LAT-longs
em alguma coisa na sua tela.

579
00:34:14,310 --> 00:34:18,380
>> Mas vamos usar essa projeção
funções, pois verifica-se

580
00:34:18,380 --> 00:34:20,270
temos lat-longs longs também.

581
00:34:20,270 --> 00:34:24,509
Olhando para trás, os nossos dados, temos
latitudes e longitude

582
00:34:24,509 --> 00:34:25,425
para cada observação.

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

584
00:34:28,131 --> 00:34:29,130
Então, vamos usar projeção.

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

586
00:34:33,250 --> 00:34:37,639
>> Então, olhando para nossa exposição,
queremos que o nosso exposition--

587
00:34:37,639 --> 00:34:39,590
temos uma latitude e uma longitude.

588
00:34:39,590 --> 00:34:40,770
Mas queremos que os valores de pixel.

589
00:34:40,770 --> 00:34:43,510
E ao que parece, nós temos exatamente
o que want-- projecção.

590
00:34:43,510 --> 00:34:46,239
Muito parecido com nós
usando a escala aqui,

591
00:34:46,239 --> 00:34:52,075
agora estamos indo para usar a projeção
e passá-lo coordena.

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

593
00:34:55,241 --> 00:34:56,949
Então a primeira coisa
estamos doing-- então estamos

594
00:34:56,949 --> 00:35:01,520
ficando d, que é um indivíduo dados
elemento de um terremoto indivíduo

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

596
00:35:02,370 --> 00:35:04,640
A primeira coisa que fazemos
é obter as coordenadas.

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

598
00:35:06,150 --> 00:35:09,160
>> A segunda coisa que fazemos é
passar isso para a projeção.

599
00:35:09,160 --> 00:35:13,440
Projeção converte essas coordenadas
em valores de pixel, x e y.

600
00:35:13,440 --> 00:35:16,680
E então a última coisa que
quero fazer é só pegar 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 duas coisas
que são devolvidos por projeção.

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

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

605
00:35:29,630 --> 00:35:34,960
Mas em vez disso, vamos voltar
o segundo elemento, o y.

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

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

608
00:35:39,830 --> 00:35:46,450
Ooh, caractere extra
aqui-- agradável, temos

609
00:35:46,450 --> 00:35:51,730
um documento dirigido dados que é
ocultando esse arquivo JSON de objetos,

610
00:35:51,730 --> 00:35:57,560
fazendo um mapa, e mudando o
atribuem, em relação aos dados

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

612
00:35:59,600 --> 00:36:00,840
Isso é realmente interessante.

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

614
00:36:03,770 --> 00:36:05,640
>> Vamos levá-lo até um entalhe.

615
00:36:05,640 --> 00:36:08,795
Quero dizer, nós temos duas peças de
informações com todos os pontos de dados.

616
00:36:08,795 --> 00:36:10,000
Quero dizer, três.

617
00:36:10,000 --> 00:36:12,540
Nós temos as coordenadas,
que é um 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
>> Precisamos codificar magnitude de alguma forma.

620
00:36:17,420 --> 00:36:18,920
Temos um monte de canais.

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

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

623
00:36:21,890 --> 00:36:23,040
Nós poderíamos usar opacidade.

624
00:36:23,040 --> 00:36:25,540
Nós poderíamos usar muitas coisas no código.

625
00:36:25,540 --> 00:36:29,180
Qualquer um desses atributos e muitos
mais que não estão listadas aqui,

626
00:36:29,180 --> 00:36:33,065
porque eles são opcionais, nós pudemos
utilizado para codificar os dados, o acidente vascular cerebral

627
00:36:33,065 --> 00:36:35,670
e todas essas coisas que eu já mencionei.

628
00:36:35,670 --> 00:36:36,690
>> Vamos fazer raio.

629
00:36:36,690 --> 00:36:38,830
Eu acho que raio é o mais intuitivo.

630
00:36:38,830 --> 00:36:46,210
Então, novamente, vamos substituir o hard-coded
40 e fazer alguns cálculos.

631
00:36:46,210 --> 00:36:48,810
Vamos usar nossa escala favorito novamente.

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

633
00:36:50,290 --> 00:36:55,850
Mas não d porque queremos a magnitude
de d. d é apenas o ponto de dados.

634
00:36:55,850 --> 00:36:57,430
Nós vamos passar a magnitude em escala.

635
00:36:57,430 --> 00:36:58,470
>> Vamos tentar isso de novo.

636
00:36:58,470 --> 00:37:00,230
Ooh, ele não funciona.

637
00:37:00,230 --> 00:37:02,940
Por que não funciona?

638
00:37:02,940 --> 00:37:04,387
>> Então lembre-se que escala faz.

639
00:37:04,387 --> 00:37:05,470
Vejamos escala novamente.

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

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

642
00:37:12,030 --> 00:37:14,730
É por isso que nós estamos recebendo este.

643
00:37:14,730 --> 00:37:18,420
>> Então, nós queremos mudar a nossa escala
para algo mais razoável.

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

645
00:37:22,610 --> 00:37:25,340
60 é grande, mas 10 terremotos
são incrivelmente raras.

646
00:37:25,340 --> 00:37:27,880
Na verdade, eles nunca aconteceu.

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

648
00:37:31,830 --> 00:37:34,490
e mapeá-la para expandi-lo para fora.

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

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

651
00:37:38,840 --> 00:37:41,850
>> Bom, temos uma visualização.

652
00:37:41,850 --> 00:37:42,500
Isso é ótimo.

653
00:37:42,500 --> 00:37:43,736
Estes são dados reais.

654
00:37:43,736 --> 00:37:46,360
Você vai notar, no meu pequeno brinquedo
exemplo, o maior terremoto

655
00:37:46,360 --> 00:37:49,417
é bem em cima de nós.

656
00:37:49,417 --> 00:37:50,000
Mas é isso.

657
00:37:50,000 --> 00:37:54,422
Nós temos uma visualização data impulsionado
que consome os dados

658
00:37:54,422 --> 00:37:56,255
e dá-nos realmente
informações interessantes.

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

660
00:38:02,600 --> 00:38:06,420
Sim, vamos adicionar um pouco de
interatividade a ele.

661
00:38:06,420 --> 00:38:08,675
Eu mencionei que era
a força forte de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Então, aqui, para cada elemento, nós somos
descrevendo um monte de atributos.

664
00:38:15,060 --> 00:38:20,230
Mas também podemos descrever o que queremos
acontecer com elementos de interatividade.

665
00:38:20,230 --> 00:38:26,190
Por exemplo, poderíamos descrever
o que acontece quando o mouse over.

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

667
00:38:28,740 --> 00:38:33,640
E muito semelhante que,
que vou levar uma função,

668
00:38:33,640 --> 00:38:36,700
muito semelhante ao
atributos que tínhamos antes,

669
00:38:36,700 --> 00:38:44,650
onde nós fazer alguma coisa para o
elemento quando passa o mouse sobre ele.

670
00:38:44,650 --> 00:38:47,100
>> Então a primeira coisa que precisamos
fazer é selecionar esse elemento,

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

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

673
00:38:57,090 --> 00:39:00,920
e então poderíamos definir
um atributo a ele.

674
00:39:00,920 --> 00:39:06,870
Então o que eu estou fazendo aqui é que, quando passamos o mouse
sobre algo, nós vamos chegar esse elemento

675
00:39:06,870 --> 00:39:11,197
e defina sua opacidade de volta
1, completamente opaca.

676
00:39:11,197 --> 00:39:12,488
Vamos 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 um
ponto e vírgula adicional aqui.

679
00:39:39,080 --> 00:39:42,420
Então, se nós passar o mouse sobre aqui, torna-se completo.

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

681
00:39:46,530 --> 00:39:48,960
Mas agora, é claro,
fica cheia, porque nós

682
00:39:48,960 --> 00:39:53,240
tem que descrever o que acontece
quando remover o nosso cursor.

683
00:39:53,240 --> 00:39:59,990
Então, vamos fazer exatamente isso em
mouseout, em oposição a mouseover.

684
00:39:59,990 --> 00:40:06,399
>> E nós vamos redefini-la para
o que tínhamos antes-- 0,5.

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

686
00:40:10,260 --> 00:40:13,468
Ele nos ajuda a ver o que nós
estamos selecionando essencialmente.

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

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

689
00:40:22,860 --> 00:40:26,210
Vamos ligar este a dados reais.

690
00:40:26,210 --> 00:40:30,890
Então, vamos pedir poderia
USGS sobre seus dados.

691
00:40:30,890 --> 00:40:35,630
Assim, o Serviço Geológico dos EUA
tem dados sobre terremotos.

692
00:40:35,630 --> 00:40:41,460
Eles têm uma API pública que é capaz
para ser consumido em formato JSON.

693
00:40:41,460 --> 00:40:42,548
Então, vamos fazer isso.

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

695
00:40:49,730 --> 00:40:55,900
>> Então, isso é um pouco de código que
liga-se a API USGS.

696
00:40:55,900 --> 00:40:57,990
E há um pouco de processamento sobre ele.

697
00:40:57,990 --> 00:41:02,200
Isso não é relevante, mas simplifica-lo
a um formato de dados simples como aquele

698
00:41:02,200 --> 00:41:03,800
que tínhamos antes.

699
00:41:03,800 --> 00:41:08,140
Então, para me livrar da nossa chamada para
nossa data.json falso no arquivo.

700
00:41:08,140 --> 00:41:13,110
E em vez disso, eu estou chamando
o USGS essencialmente.

701
00:41:13,110 --> 00:41:16,700
>> Vamos atualizar, agradável.

702
00:41:16,700 --> 00:41:21,260
Estes são dados reais, da vida real
a partir desta semana para sismos.

703
00:41:21,260 --> 00:41:23,217
Isso é realmente interessante.

704
00:41:23,217 --> 00:41:25,050
Isto não é surpreendente
para nós, mas há

705
00:41:25,050 --> 00:41:27,909
um monte de terremotos no
West Coast, na Califórnia.

706
00:41:27,909 --> 00:41:30,950
Mas eu pensei que era muito interessante
que havia tantos terremotos

707
00:41:30,950 --> 00:41:34,350
no Alasca, e, aparentemente,
aqui no Centro-Oeste.

708
00:41:34,350 --> 00:41:37,630
Quero dizer, interessante, e nós somos bons.

709
00:41:37,630 --> 00:41:40,410
Essa é a conclusão.

710
00:41:40,410 --> 00:41:43,760
>> Mas, fundamentalmente, este
é o que nos ajuda a fazer D3.

711
00:41:43,760 --> 00:41:48,030
Ele nos ajuda a levar os dados, se ligam
para elementos no DOM,

712
00:41:48,030 --> 00:41:51,620
e ter esses elementos mudar
como uma função dos dados,

713
00:41:51,620 --> 00:41:54,780
tem esses atributos, todos os
diversos atributos dos elementos,

714
00:41:54,780 --> 00:41:57,393
tudo ser úteis para canais
para transmitir informações.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 é incrivelmente poderoso
biblioteca e surpreendentemente bem executado.

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

718
00:42:12,260 --> 00:42:15,960
A visualização de dados é uma
ferramenta incrivelmente poderosa

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

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

721
00:42:25,430 --> 00:42:29,760
como os dados funciona e como
dados muda a nossa vida.

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