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

2
00:00:00,780 --> 00:00:11,880
>> [GIOCO MUSIC]

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD: Sono David
Chouinard, e questo è D3.

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

5
00:00:17,700 --> 00:00:21,270
Stiamo andando a conoscere D3 oggi.

6
00:00:21,270 --> 00:00:25,020
D3 è un framework JavaScript
per costruire una alta qualità

7
00:00:25,020 --> 00:00:28,110
visualizzazioni interattive per il web.

8
00:00:28,110 --> 00:00:30,870
Cose come ciò che siamo
vedere dietro di me,

9
00:00:30,870 --> 00:00:34,230
stiamo andando a imparare a fare quelle
cose, tipo le basi di esso.

10
00:00:34,230 --> 00:00:36,452
Ma sta andando essere cool.

11
00:00:36,452 --> 00:00:38,160
Cominciamo
fare belle immagini.

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

13
00:00:41,108 --> 00:00:44,350
Abbiamo più demo
di prospettive disponibili.

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

15
00:00:48,040 --> 00:00:50,760
Facciamolo.

16
00:00:50,760 --> 00:00:58,700
>> Atto I, DOM manipulation-- stiamo andando
per iniziare subito fare cose interessanti.

17
00:00:58,700 --> 00:01:01,240
Prima di tutto, a sinistra, abbiamo codice.

18
00:01:01,240 --> 00:01:03,470
A destra, abbiamo
il risultato del nostro codice.

19
00:01:03,470 --> 00:01:04,900
Andiamo attraverso di essa.

20
00:01:04,900 --> 00:01:05,780
>> Facciamo un cerchio.

21
00:01:05,780 --> 00:01:08,570
Come ti sembra?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
abbiamo appena fatto un cerchio.

23
00:01:14,934 --> 00:01:16,100
Tu non mi credi, vero?

24
00:01:16,100 --> 00:01:18,190
Non è lì.

25
00:01:18,190 --> 00:01:21,830
>> Quindi quello che abbiamo fatto qui è,
SVG è Scalable Vector Graphics.

26
00:01:21,830 --> 00:01:27,530
Questo è il nostro modo di dire al browser di
rendere la grafica vettoriale del browser.

27
00:01:27,530 --> 00:01:30,740
Quello che abbiamo appena fatto in questo momento
si aggiunge un cerchio per navigare.

28
00:01:30,740 --> 00:01:34,790
>> La promessa è che il cerchio
richiede un po 'di attributi di base

29
00:01:34,790 --> 00:01:36,850
prima di poter realmente vedere.

30
00:01:36,850 --> 00:01:40,045
Dobbiamo dire che la sua posizione x,
la posizione y, il suo raggio.

31
00:01:40,045 --> 00:01:43,310
Non abbiamo detto che nulla di tutto ciò,
così noi non stiamo vedendo adesso.

32
00:01:43,310 --> 00:01:46,210
Ma andiamo dire che roba.

33
00:01:46,210 --> 00:01:49,510
>> Quindi prima di tutto, hai
per dare il nostro cerchio un nome.

34
00:01:49,510 --> 00:01:53,070
Quindi chiamiamolo cerchio.

35
00:01:53,070 --> 00:01:54,406
Il nostro circolo ha un nome ora.

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

37
00:01:57,230 --> 00:01:59,490
E diamo un paio di attributi.

38
00:01:59,490 --> 00:02:03,690
Che ne dite di cx sarebbe centrare x, così
il centro della posizione x.

39
00:02:03,690 --> 00:02:06,730
Diciamo, 200 per 200 pixel.

40
00:02:06,730 --> 00:02:10,220
>> Diamogli un anno di 200 pixel pure.

41
00:02:10,220 --> 00:02:16,032
Ed una R, un raggio di circa 40 pixel.

42
00:02:16,032 --> 00:02:16,950
Ora vediamo.

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

44
00:02:21,740 --> 00:02:23,440
Non posso incantesimo.

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

46
00:02:30,430 --> 00:02:31,520
>> Ci si va.

47
00:02:31,520 --> 00:02:37,330
Abbiamo un cerchio alla posizione 200
pixel, 200 pixel, raggio di 40 pixel.

48
00:02:37,330 --> 00:02:38,280
Genere di freddo, giusto?

49
00:02:38,280 --> 00:02:38,988
Abbiamo un cerchio.

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

51
00:02:40,880 --> 00:02:42,670
>> Quindi non c'è bisogno di seguire.

52
00:02:42,670 --> 00:02:45,790
Tutti questi esempi, tutte
il codice che sto facendo oggi

53
00:02:45,790 --> 00:02:51,300
saranno fornite on line alla fine
sotto forma di esempi interattivi

54
00:02:51,300 --> 00:02:54,010
con posti di blocco a
ogni atto, e così via.

55
00:02:54,010 --> 00:02:55,160
>> Facciamo più cose.

56
00:02:55,160 --> 00:02:58,901
Questo cerchio nero è davvero brutto.

57
00:02:58,901 --> 00:03:01,541
Mi dispiace per quell'errore
Messaggi proprio lì.

58
00:03:01,541 --> 00:03:05,340
Ci andiamo.

59
00:03:05,340 --> 00:03:06,350
>> Diamogli un colore.

60
00:03:06,350 --> 00:03:07,170
Come sarebbe?

61
00:03:07,170 --> 00:03:08,340
Mi piace blu acciaio.

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

63
00:03:13,280 --> 00:03:16,030
Beh, il nostro cerchio cambiò colore.

64
00:03:16,030 --> 00:03:17,320
È fantastico.

65
00:03:17,320 --> 00:03:31,330
Facciamo che semi-trasparente
too-- semi-trasparente.

66
00:03:31,330 --> 00:03:33,670
>> Quindi questi sono attributi
stiamo definendo sul cerchio.

67
00:03:33,670 --> 00:03:36,774
La prima cosa che abbiamo fatto è
abbiamo messo un cerchio sulla pagina.

68
00:03:36,774 --> 00:03:38,690
E poi stiamo definendo
un gruppo di attributi.

69
00:03:38,690 --> 00:03:41,610
Alcuni di questi sono necessari,
come CX, CY, e Radius.

70
00:03:41,610 --> 00:03:42,680
E altri sono opzionali.

71
00:03:42,680 --> 00:03:44,730
>> Ci sono molti più attributi.

72
00:03:44,730 --> 00:03:46,760
C'è un sacco di loro.

73
00:03:46,760 --> 00:03:53,070
Ad esempio, potremmo avere un
corsa così, un colpo di rosso.

74
00:03:53,070 --> 00:03:55,630
Ma andiamo rimuovere tale.

75
00:03:55,630 --> 00:04:00,450
Siamo di nuovo ad un cerchio, un cerchio blu.

76
00:04:00,450 --> 00:04:01,600
>> Quindi cerchiamo di fare più cerchi.

77
00:04:01,600 --> 00:04:02,810
Come sarebbe?

78
00:04:02,810 --> 00:04:04,665
Facciamo un altro cerchio.

79
00:04:04,665 --> 00:04:05,985
Questo è emozionante, giusto?

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

81
00:04:09,630 --> 00:04:12,300
>> Quindi dire che solo copia-incolla
quello che avevamo già.

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

83
00:04:13,570 --> 00:04:15,840
E facciamo l'esatto
stessa cosa e dare

84
00:04:15,840 --> 00:04:20,450
attributi, in una posizione x di 300.

85
00:04:20,450 --> 00:04:24,140
Yay, abbiamo due cerchi ora.

86
00:04:24,140 --> 00:04:27,240
>> E, naturalmente, potremmo
aggiornare questi valori.

87
00:04:27,240 --> 00:04:31,640
Potrei metterlo a 400, e ora si muove.

88
00:04:31,640 --> 00:04:35,470
E dal momento che è fastidioso, andiamo
rimuoverla, così circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
E 'andato ora.

91
00:04:40,730 --> 00:04:43,170
>> Quindi quello che stiamo facendo e
è solo molto, very-- questo

92
00:04:43,170 --> 00:04:46,030
è molto simile a quello che si
potrebbe fare in jQuery, per esempio.

93
00:04:46,030 --> 00:04:48,240
Stiamo solo manipolando
il DOM, si chiama.

94
00:04:48,240 --> 00:04:50,040
Potreste aver sentito quella parola prima.

95
00:04:50,040 --> 00:04:53,255
Stiamo creando roba, impostazione
attributi su roba, togliendo roba.

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

97
00:04:58,950 --> 00:05:02,360
>> Ora, qui è dove si fa interessante.

98
00:05:02,360 --> 00:05:07,250
Quindi, più avanti nel codice, potremmo ancora
fare riferimento al cerchio originale qui.

99
00:05:07,250 --> 00:05:14,100
Quindi cerchiamo di ripristinare l'attributo di cx.

100
00:05:14,100 --> 00:05:18,260
Diciamo che, per la sua posizione x 400.

101
00:05:18,260 --> 00:05:22,406
E ho intenzione di transizione
che, quindi è ovvio.

102
00:05:22,406 --> 00:05:23,360
Ci andiamo.

103
00:05:23,360 --> 00:05:24,780
>> Così abbiamo aggiunto un cerchio.

104
00:05:24,780 --> 00:05:26,440
Abbiamo impostato alcuni attributi.

105
00:05:26,440 --> 00:05:28,210
Abbiamo aggiunto un altro cerchio, rimosso.

106
00:05:28,210 --> 00:05:31,650
E poi stiamo modificando
il cerchio originale.

107
00:05:31,650 --> 00:05:35,400
>> Ma qui è dove si arriva
molto più interessante.

108
00:05:35,400 --> 00:05:39,070
Non solo siamo in grado di impostare gli attributi
come valori solo, si può dire,

109
00:05:39,070 --> 00:05:41,610
hey, cerchio, andare a posizionare 200.

110
00:05:41,610 --> 00:05:44,540
Possiamo anche impostarli come funzioni.

111
00:05:44,540 --> 00:05:48,850
>> Così, invece di dare 400 qui,
siamo in grado di fare qualche calcolo

112
00:05:48,850 --> 00:05:53,950
al volo per quello che abbiamo
vuole che l'attributo di essere.

113
00:05:53,950 --> 00:05:56,580
Quindi questo è il modo che ci esprimete quella.

114
00:05:56,580 --> 00:06:00,660
Noi diciamo, invece di 400, lasciatemi
dare invece una funzione.

115
00:06:00,660 --> 00:06:04,180
E qui, all'interno di questa funzione,
possiamo fare qualsiasi calcolo impazzire.

116
00:06:04,180 --> 00:06:06,820
>> Potremmo prendere il tempo e
guardare qualche altra cosa

117
00:06:06,820 --> 00:06:11,230
e decidere in modo dinamico per
il cerchio che valore che vogliamo.

118
00:06:11,230 --> 00:06:15,266
Come circa ci limitiamo a dare
una posizione x casuale?

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

120
00:06:20,360 --> 00:06:21,120
Ecco, questo è quello.

121
00:06:21,120 --> 00:06:25,490
>> Allora, cosa che dice è, per
ogni x, eseguire questa funzione.

122
00:06:25,490 --> 00:06:29,340
E quello che stiamo facendo è il calcolo
alcune cose, a volte casuale la larghezza

123
00:06:29,340 --> 00:06:30,410
e restituendo tale.

124
00:06:30,410 --> 00:06:34,765
Così ogni volta che si corre, si ottiene un
cerchio che va ad un posto a caso.

125
00:06:34,765 --> 00:06:36,394
È un po 'freddo.

126
00:06:36,394 --> 00:06:38,310
Mi sento come se potessi guardare
questo per un po '.

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

128
00:06:44,274 --> 00:06:46,440
Stiamo iniziando a raggiungere
qualcosa di interessante.

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

130
00:06:49,120 --> 00:06:51,390
Facciamo questo dati guidata ora.

131
00:06:51,390 --> 00:06:53,420
Non c'è dati qui.

132
00:06:53,420 --> 00:06:54,482
Cambiamo questo.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- Act II, data-driven
Quindi cerchiamo di tornare qui.

135
00:07:12,140 --> 00:07:15,340
E facciamo solo sbarazzarsi di circle2,
perché siamo solo aggiungere e rimuovere

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

137
00:07:15,840 --> 00:07:17,382
Quindi non abbiamo veramente bisogno.

138
00:07:17,382 --> 00:07:21,421
Dobbiamo essere molto più intelligente qui.

139
00:07:21,421 --> 00:07:23,170
Diciamo, abbiamo
alcuni dati di qualche tipo.

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

141
00:07:31,540 --> 00:07:40,020
Una moment-- diciamo,
abbiamo avuto i dati di questo modulo.

142
00:07:40,020 --> 00:07:41,800
Abbiamo avuto una matrice, basta
un po 'di numeri.

143
00:07:41,800 --> 00:07:45,750
Abbiamo sette numeri qui,
qualunque ammontano represent--

144
00:07:45,750 --> 00:07:48,810
in conto in banca della gente, come
pesano, Dio sa cosa.

145
00:07:48,810 --> 00:07:51,310
>> Questi sono numeri, e
vuole utilizzare nostri circoli

146
00:07:51,310 --> 00:07:53,240
per rappresentare quei numeri in qualche modo.

147
00:07:53,240 --> 00:07:55,515
Vogliamo legare il nostro
cerchi a quei numeri.

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

149
00:07:58,750 --> 00:07:59,626
Quindi quello che facciamo.

150
00:07:59,626 --> 00:08:01,500
Diciamo, vogliamo un
cerchio per ogni numero.

151
00:08:01,500 --> 00:08:03,590
Potremmo fare il vecchio
cosa stavamo doing--

152
00:08:03,590 --> 00:08:06,020
cerchio append e circle2 e Circle3.

153
00:08:06,020 --> 00:08:10,020
Ma questo sfugge di mano, e
c'è un sacco di ripetere logica.

154
00:08:10,020 --> 00:08:12,760
>> Quindi cerchiamo di ottenere più intelligente con quello.

155
00:08:12,760 --> 00:08:17,810
Invece di utilizzare il cerchio var
svg.append che stavamo usando,

156
00:08:17,810 --> 00:08:21,580
stiamo andando a utilizzare
questo piccolo blocco qui.

157
00:08:21,580 --> 00:08:24,510
Non voglio andare in profondità
in quello che tutte queste parti fanno.

158
00:08:24,510 --> 00:08:26,020
Ed è una specie di un argomento avanzato.

159
00:08:26,020 --> 00:08:27,830
E vorrei poterlo fare.

160
00:08:27,830 --> 00:08:31,370
>> Ma la cosa fondamentale da recognize-- e
vedrete è molto spesso nel codice D3.

161
00:08:31,370 --> 00:08:36,840
Questo blocco di testo base
crea come molti circoli

162
00:08:36,840 --> 00:08:41,360
come ci sono elementi di dati
in questo array qui.

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

164
00:08:53,420 --> 00:08:55,780
Quindi, questo crea come molti
cerchi come ci sono elementi.

165
00:08:55,780 --> 00:08:58,520
E 'intenzione di creare noi sette cerchi.

166
00:08:58,520 --> 00:09:01,710
E lo fa un fatto, davvero fondamentale.

167
00:09:01,710 --> 00:09:02,460
Così corriamo tale.

168
00:09:02,460 --> 00:09:05,460
Rimuoviamo il nostro altro cerchio.

169
00:09:05,460 --> 00:09:09,565
Diciamo solo commentare questo
part out ed eseguire più.

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

171
00:09:13,840 --> 00:09:15,260
>> Ci andiamo.

172
00:09:15,260 --> 00:09:18,030
Così il nostro cerchio ecco un
lot più scuro, perché noi

173
00:09:18,030 --> 00:09:20,720
hanno sette cerchi, uno
sopra l'altra.

174
00:09:20,720 --> 00:09:25,425
Abbiamo appena creato sette cerchi, uno
ciascuno per ciascuno di questi elementi di dati.

175
00:09:25,425 --> 00:09:28,860
Ma c'è una cosa fondamentale che è accaduto
con questo frammento qui.

176
00:09:28,860 --> 00:09:31,030
>> E 'che i dati sono stati legati.

177
00:09:31,030 --> 00:09:33,440
Così ognuno di
questi elementi di dati,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, era legato
ad una categoria particolare.

179
00:09:38,830 --> 00:09:40,960
Quindi questi non solo creati
un mazzo di cerchi

180
00:09:40,960 --> 00:09:43,420
ma lega queste due cose insieme.

181
00:09:43,420 --> 00:09:48,740
>> E in futuro, perché abbiamo creato
i cerchi con questa funzione D3,

182
00:09:48,740 --> 00:09:52,430
se ti do un cerchio, si può
dammi i dati ad esso associati.

183
00:09:52,430 --> 00:09:53,280
Così possiamo chiedere D3.

184
00:09:53,280 --> 00:09:54,840
Ehi, D3, ho questo cerchio.

185
00:09:54,840 --> 00:09:57,350
Qual è il dato che il cerchio ha?

186
00:09:57,350 --> 00:10:01,290
E D3 ci direbbe di 10 o 45 o 105.

187
00:10:01,290 --> 00:10:02,380
>> Queste cose sono legate.

188
00:10:02,380 --> 00:10:04,490
Questo è un concetto molto, molto essenziale.

189
00:10:04,490 --> 00:10:06,070
Diamo un'occhiata a questo.

190
00:10:06,070 --> 00:10:12,210
>> Quindi il modo in cui avrebbe chiesto D3-- così
questo è irrilevante per questo,

191
00:10:12,210 --> 00:10:16,620
ma semplicemente fidati di me su di esso.

192
00:10:16,620 --> 00:10:17,620
Questo è il modo in cui chiediamo D3.

193
00:10:17,620 --> 00:10:21,312
Ehi, D3, dammi la prima
cerchio che si possono trovare.

194
00:10:21,312 --> 00:10:23,580
Dammi il primo cerchio si possono trovare.

195
00:10:23,580 --> 00:10:29,660
E allora potremmo chiedere D3, che cosa è
i dati su questo, come questo, 10.

196
00:10:29,660 --> 00:10:33,380
>> Quindi noi chiediamo solo D3, trovami
il primo cerchio si possono trovare.

197
00:10:33,380 --> 00:10:34,400
Che cosa è i suoi dati?

198
00:10:34,400 --> 00:10:36,650
10, che è in effetti la nostra
primo elemento di dati.

199
00:10:36,650 --> 00:10:42,150
Potremmo chiederlo, hey, D3,
noi trovare il nostro terzo cerchio.

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

201
00:10:44,450 --> 00:10:45,740
Perché questo è veramente importante?

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

203
00:10:49,790 --> 00:10:52,250
>> Così proprio qui, ho detto
che potremmo usare le funzioni.

204
00:10:52,250 --> 00:10:54,910
E ho detto che era
una cosa molto potente.

205
00:10:54,910 --> 00:11:03,070
Quindi non solo possono fare cose nostre funzioni
come fare un po 'di calcolo, per esempio,

206
00:11:03,070 --> 00:11:09,170
restituire un numero casuale, essa può
anche fare le cose in base ai dati.

207
00:11:09,170 --> 00:11:11,550
Questo è ciò che di dati guidato documenti significano.

208
00:11:11,550 --> 00:11:13,750
Questo è ciò che sta per D3.

209
00:11:13,750 --> 00:11:17,800
>> Quindi questo x postition-- invece
di dire semplicemente, tutti i circoli,

210
00:11:17,800 --> 00:11:21,735
ottenere x posizione 200,
potrebbe dare una funzione.

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

212
00:11:26,140 --> 00:11:30,140
E qui, siamo in grado di fare qualche calcolo.

213
00:11:30,140 --> 00:11:33,710
e d qui sta al posto per i dati.

214
00:11:33,710 --> 00:11:36,120
Così ogni volta che abbiamo
un cerchio, sostanzialmente,

215
00:11:36,120 --> 00:11:37,750
D3 creerà questi sette cerchi.

216
00:11:37,750 --> 00:11:38,500
E allora per ogni

217
00:11:38,500 --> 00:11:41,920
>> cerchio, che sta per andare, hey,
circle1 qual è la vostra posizione x.

218
00:11:41,920 --> 00:11:45,210
In precedenza, siamo stati
sempre rispondendo 200.

219
00:11:45,210 --> 00:11:48,630
Ma ora, ogni volta D3 chiede
noi qual è la vostra posizione x,

220
00:11:48,630 --> 00:11:51,790
sta andando a dare noi-- abbiamo
quel cerchio, così abbiamo i dati.

221
00:11:51,790 --> 00:11:55,290
Sta andando a darci i dati e dire,
cosa vuoi che l'esposizione sia,

222
00:11:55,290 --> 00:11:57,120
sulla base di tali dati.

223
00:11:57,120 --> 00:11:59,590
>> Diciamo solo tornare i dati effettivi.

224
00:11:59,590 --> 00:12:04,910
Quindi, se corriamo questo, questo dà
dati degli Stati Uniti guidato documenti.

225
00:12:04,910 --> 00:12:08,040
Questi cerchi sono basate
in relazione Position--

226
00:12:08,040 --> 00:12:11,120
sono basi in funzione dei dati.

227
00:12:11,120 --> 00:12:13,100
>> Così per il primo cerchio,
D3 mette un cerchio.

228
00:12:13,100 --> 00:12:16,770
E poi D3 ci chiede, che cosa fare
si desidera l'esposizione sia.

229
00:12:16,770 --> 00:12:19,620
E diciamo solo, qualunque sia il dato è.

230
00:12:19,620 --> 00:12:21,185
Rendere l'esposizione 10.

231
00:12:21,185 --> 00:12:26,320
>> Poi si chiede, che cosa si desidera che il
esposizione sia per il secondo cerchio.

232
00:12:26,320 --> 00:12:27,270
E noi rispondiamo, 45.

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

234
00:12:30,000 --> 00:12:32,230
E noi, naturalmente, può
fare qualche calcolo qui.

235
00:12:32,230 --> 00:12:35,510
Trovo che quei circoli
sono specie di schiacciata up.

236
00:12:35,510 --> 00:12:38,965
>> Quindi moltiplicare per 3, moltiplicare i dati del 3.

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

238
00:12:41,870 --> 00:12:43,840
Il nostro cerchio appena stato ampliato.

239
00:12:43,840 --> 00:12:46,730
Il nostro valore è stato triplicato.

240
00:12:46,730 --> 00:12:51,010
>> Il cerchio è davvero al limite,
quindi cerchiamo di forse tipo di compensarla.

241
00:12:51,010 --> 00:12:53,632
Diciamo che, per il 20.

242
00:12:53,632 --> 00:12:56,070
Ecco qui.

243
00:12:56,070 --> 00:12:57,590
>> Questa è una visualizzazione dei dati.

244
00:12:57,590 --> 00:13:01,767
E 'uno molto semplice, ma questo
ci dà una certa comprensione nei nostri dati.

245
00:13:01,767 --> 00:13:04,600
Essa ci dice che, per esempio, abbiamo
avere un piccolo gruppo di elementi.

246
00:13:04,600 --> 00:13:06,340
E abbiamo un grande outlier qui.

247
00:13:06,340 --> 00:13:10,830
Questo ci dà alcune informazioni
sulla distribuzione.

248
00:13:10,830 --> 00:13:20,830
>> Se fossimo, per esempio, per cambiare
i dati a 150 qui e di aggiornamento,

249
00:13:20,830 --> 00:13:22,630
la nostra visualizzazione è cambiato.

250
00:13:22,630 --> 00:13:24,285
Questo documento è guidato dati.

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

252
00:13:32,640 --> 00:13:36,180
>> Così, naturalmente, tutti questi elementi,
tutti questi attributi qui,

253
00:13:36,180 --> 00:13:38,430
possiamo usare una funzione, non
solo i numeri, non solo

254
00:13:38,430 --> 00:13:39,900
le posizioni x e y.

255
00:13:39,900 --> 00:13:42,120
Così possiamo usare una funzione per il colore.

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

257
00:13:45,260 --> 00:13:46,360
Così faremo lo stesso.

258
00:13:46,360 --> 00:13:49,360
Daremo una funzione.

259
00:13:49,360 --> 00:13:52,320
>> E diciamo, potremmo avere
condizionali nella nostra funzione.

260
00:13:52,320 --> 00:13:54,770
Questa funzione può essere
centinaia di linee lunghe.

261
00:13:54,770 --> 00:13:57,150
Si può fare cose molto, molto complicato.

262
00:13:57,150 --> 00:13:59,080
>> Quindi cerchiamo di mettere un'istruzione if qui.

263
00:13:59,080 --> 00:14:03,420
Diciamo che, se i nostri dati sono meno
di 50, che è una certa soglia

264
00:14:03,420 --> 00:14:05,817
che ci interessa
in per qualche ragione.

265
00:14:05,817 --> 00:14:06,650
Facciamo che verde.

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

267
00:14:09,830 --> 00:14:15,320
In caso contrario, facciamo di rosso.

268
00:14:15,320 --> 00:14:16,110
Come sarebbe?

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

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

271
00:14:21,220 --> 00:14:24,860
>> Così la nostra visualizzazione dei dati sta iniziando
per trasmettere informazioni più interessanti

272
00:14:24,860 --> 00:14:26,727
su molti canali.

273
00:14:26,727 --> 00:14:28,560
Così ora sappiamo un po '
sulla distribuzione.

274
00:14:28,560 --> 00:14:31,768
E noi sappiamo che c'è una sorta di
tagliare a 50 che ci interessa.

275
00:14:31,768 --> 00:14:35,630
Sappiamo che ci sono due punti di dati
sotto di tale soglia e la maggior parte di essi

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

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

278
00:14:41,510 --> 00:14:46,160
>> Così come un passo finale, questi dati qui,
è molto raro vedere questo genere.

279
00:14:46,160 --> 00:14:52,610
Così facciamo solo spostare fuori per una variabile
perché è più pulito, come questo.

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

281
00:15:02,980 --> 00:15:05,197
E allora usiamo quella variabile qui.

282
00:15:05,197 --> 00:15:06,280
E 'la stessa identica cosa.

283
00:15:06,280 --> 00:15:07,280
E 'solo un po' più pulito.

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

285
00:15:25,300 --> 00:15:35,300
>> Next up, Atto III, Scales--
Quindi un problema di destra

286
00:15:35,300 --> 00:15:38,920
ecco, se cambiamo il nostro
i dati in questo 200 value--

287
00:15:38,920 --> 00:15:41,685
se cambiamo a 400
o qualcosa e di aggiornamento,

288
00:15:41,685 --> 00:15:44,540
questo valore appena andato fuori campo.

289
00:15:44,540 --> 00:15:49,040
Così la nostra logica qui
di come facciamo le volte 3

290
00:15:49,040 --> 00:15:52,570
e 20, per diffondere fuori e poi
compensato un po 'è davvero goffo.

291
00:15:52,570 --> 00:15:54,150
>> Cosa significano questi numeri?

292
00:15:54,150 --> 00:15:55,400
Stanno solo duro codificati lì.

293
00:15:55,400 --> 00:15:58,830
E sono molto legati ai dati.

294
00:15:58,830 --> 00:16:00,550
Vogliamo un documento di dati guidata.

295
00:16:00,550 --> 00:16:05,460
Vogliamo un documento molto flessibile,
che dati forniti, si adatta ad esso

296
00:16:05,460 --> 00:16:07,900
e rappresenta esso.

297
00:16:07,900 --> 00:16:11,330
>> Ciò di cui abbiamo bisogno è fondamentalmente, abbiamo
avere questo intervallo di numeri 10.

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

299
00:16:12,640 --> 00:16:17,630
E vogliamo mappare che affacciano su
la larghezza, la larghezza completa qui.

300
00:16:17,630 --> 00:16:20,620
Così abbiamo la gamma di
numeri che vanno da 0 a 100.

301
00:16:20,620 --> 00:16:24,980
E noi abbiamo questo campus mi va
20-700, in questo caso.

302
00:16:24,980 --> 00:16:26,515
>> Noi vogliamo tipo di mappare quella su.

303
00:16:26,515 --> 00:16:30,002
Vogliamo scalare che e
poi compensato un po '.

304
00:16:30,002 --> 00:16:33,165
Si scopre che la D3 ha questi.

305
00:16:33,165 --> 00:16:34,220
Si chiama una scala.

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

307
00:16:37,410 --> 00:16:38,250
Quindi cerchiamo di usarlo.

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

309
00:16:46,300 --> 00:16:49,670
>> Il modo in cui giochi idraulici ho intenzione di
tipo questo e poi spiegarlo.

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

311
00:17:01,530 --> 00:17:02,450
Questa è una scala.

312
00:17:02,450 --> 00:17:08,670
Quello che farà è, sarà tracciare
valori da 1 a 200 su di 20 a 600.

313
00:17:08,670 --> 00:17:10,990
Possiamo verificare.

314
00:17:10,990 --> 00:17:13,329
Possiamo vedere che qui.

315
00:17:13,329 --> 00:17:21,704
>> Quindi, se io nutro 1-- un momento.

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

317
00:17:47,764 --> 00:17:48,555
Dammi un secondo.

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

319
00:17:53,680 --> 00:17:55,080
Devo aver inserito correttamente.

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

321
00:18:15,320 --> 00:18:15,990
Ci si va.

322
00:18:15,990 --> 00:18:17,930
Mi dispiace per questo.

323
00:18:17,930 --> 00:18:22,050
>> Così che cosa farà una scala
è, ci vorrà un valore

324
00:18:22,050 --> 00:18:24,930
e poi convertire tale,
espandere che fuori, in modo da

325
00:18:24,930 --> 00:18:27,320
riempie l'intera gamma che stai chiedendo.

326
00:18:27,320 --> 00:18:32,910
Quindi, in questo caso, se diamo uno,
sta andando a mappare che affacciano su 20.

327
00:18:32,910 --> 00:18:37,750
E se diamo 200, è
andando a mappare che a 600.

328
00:18:37,750 --> 00:18:40,460
E da qualche parte nel mezzo,
se otteniamo 100, è

329
00:18:40,460 --> 00:18:44,610
sta per essere da qualche parte
tra 20 e 600.

330
00:18:44,610 --> 00:18:51,480
>> E, naturalmente, ora questo è ciò che
abbiamo bisogno di rimuovere quelli codificati duri

331
00:18:51,480 --> 00:18:53,402
cose che hanno lì.

332
00:18:53,402 --> 00:18:55,950
Quindi quello che vogliamo fare è
prendere i dati che siamo

333
00:18:55,950 --> 00:19:00,950
dato che i dati individuali
elemento, e passarlo in scala prima.

334
00:19:00,950 --> 00:19:02,635
Così scala si scala fino.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, abbiamo un piccolo errore qui.

337
00:19:48,880 --> 00:19:50,120
Stiamo dati mancanti.

338
00:19:50,120 --> 00:19:51,290
Ci si va.

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

340
00:19:58,550 --> 00:19:59,550
E che si espande fuori.

341
00:19:59,550 --> 00:20:01,383
>> Questo ci dà la stessa
risultato che avevamo prima,

342
00:20:01,383 --> 00:20:04,030
ma invece di avere quelli
hardcoded vincoli.

343
00:20:04,030 --> 00:20:07,790
E se la dimensione della nostra
cambiamenti di tela, ad esempio,

344
00:20:07,790 --> 00:20:11,790
se vogliamo avere questo corso
400 pixel ed è squishes fuori,

345
00:20:11,790 --> 00:20:15,440
possiamo avere over--
possiamo espandere, o facciamo

346
00:20:15,440 --> 00:20:21,890
può ridurre questo margine sinistra a
qualcosa di meno o più di 20.

347
00:20:21,890 --> 00:20:25,470
Questi numeri, queste hardcoded
numeri ora senso per noi.

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

349
00:20:28,110 --> 00:20:30,520
>> E potremmo fare molto di più
cose interessanti pure.

350
00:20:30,520 --> 00:20:35,990
Così, invece di avere lineare
scala, si potrebbe desiderare di accedere una scala.

351
00:20:35,990 --> 00:20:37,840
E che ci darà una scala logaritmica.

352
00:20:37,840 --> 00:20:41,269
>> Così ora la nostra scala, invece di
appena espansione fuori di tale intervallo,

353
00:20:41,269 --> 00:20:42,810
che sta facendo le cose più sofisticate.

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

355
00:20:48,790 --> 00:20:53,790
Invece di avere questa gamma duro
codificato, e invece di avere tale 600,

356
00:20:53,790 --> 00:20:58,465
potremmo voler utilizzare solo la larghezza,
così da 20 a larghezza meno 40,

357
00:20:58,465 --> 00:21:02,392
2 volte il margine sul lato opposto.

358
00:21:02,392 --> 00:21:05,350
E questo rende molto più senso
qualcuno che potrebbe guardare il codice.

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

360
00:21:08,080 --> 00:21:11,850
>> È interessante notare che le scale diventano
molto, molto sofisticato e.

361
00:21:11,850 --> 00:21:13,350
Fanno un sacco di cose interessanti.

362
00:21:13,350 --> 00:21:17,620
Quindi le scale non hanno necessariamente
di operare solo con i numeri.

363
00:21:17,620 --> 00:21:18,955
Facciamo una scala di colori.

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

365
00:21:23,120 --> 00:21:26,120
>> Così la nostra gamma può essere--
nostro dominio è 1 a 200.

366
00:21:26,120 --> 00:21:28,220
Questa è la cosa di ingresso.

367
00:21:28,220 --> 00:21:33,793
Ma si potrebbe desiderare di mappare
verde al rosso, per esempio.

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

369
00:21:39,710 --> 00:21:42,910
E ora, se passiamo 1,
stiamo andando a ottenere verde.

370
00:21:42,910 --> 00:21:45,110
Se diamo 200, otterremo rosso.

371
00:21:45,110 --> 00:21:49,480
E se passiamo una via di mezzo,
che sta per essere una miscela di questo,

372
00:21:49,480 --> 00:21:52,520
da qualche parte sul gradiente
tra il verde e il rosso.

373
00:21:52,520 --> 00:21:55,210
>> E invece di avere
questo tipo di logica goffo

374
00:21:55,210 --> 00:21:58,550
abbiamo qui con il
condizionale proprio lì,

375
00:21:58,550 --> 00:22:03,250
potremmo avere un something--
scala lineare tra quelli.

376
00:22:03,250 --> 00:22:07,100
Così avremmo usato la scala che abbiamo appena
creato, che abbiamo chiamato il colore.

377
00:22:07,100 --> 00:22:09,060
E darei d, che
è il nostro elemento di dati.

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

379
00:22:14,250 --> 00:22:15,060
E ci andiamo.

380
00:22:15,060 --> 00:22:18,070
Abbiamo una scala di colori.

381
00:22:18,070 --> 00:22:18,940
>> Quindi questa è la mappatura.

382
00:22:18,940 --> 00:22:20,960
Così l'estrema sinistra è completamente verde.

383
00:22:20,960 --> 00:22:22,560
L'estrema destra è completamente rossa.

384
00:22:22,560 --> 00:22:24,828
E tutto il resto
è una funzione di d.

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

386
00:22:33,369 --> 00:22:35,160
Abbiamo un interessante
visualizzazioni qui.

387
00:22:35,160 --> 00:22:36,952
Ma i nostri dati è stato un po 'noioso.

388
00:22:36,952 --> 00:22:39,410
Vediamo cosa potremmo fare se
abbiamo avuto i dati più interessanti.

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

390
00:22:44,420 --> 00:22:50,500
>> Atto IV, con lavoro
Data-- la prima cosa

391
00:22:50,500 --> 00:22:53,560
ci vogliamo fare per rendere il nostro
visualizzazione più interessante

392
00:22:53,560 --> 00:22:56,140
è quello di spostare i dati altrove.

393
00:22:56,140 --> 00:22:58,310
E 'molto goffo avere
i dati codificati duro qui.

394
00:22:58,310 --> 00:23:01,220
E in generale, saremo chiedendo
qualcun altro per i dati.

395
00:23:01,220 --> 00:23:05,400
Saremo forse chiediamo al governo,
il Census Bureau, qual è il tuo dati

396
00:23:05,400 --> 00:23:10,170
e poi tramando che o chiedere
qualche entità terze parti per alcuni dati

397
00:23:10,170 --> 00:23:13,330
e quindi la costruzione di un
visualizzazione su questo.

398
00:23:13,330 --> 00:23:17,170
>> Quindi la prima cosa che vogliamo fare
è mossa che da qualche altra parte.

399
00:23:17,170 --> 00:23:24,130
Quindi ho intenzione di creare una
presentare qui chiamato data.json.

400
00:23:24,130 --> 00:23:25,600
JSON è il formato dei dati.

401
00:23:25,600 --> 00:23:29,210
Non è necessario sapere molto su questo.

402
00:23:29,210 --> 00:23:33,210
E stiamo andando a copiare il
pochi dati che abbiamo lì,

403
00:23:33,210 --> 00:23:40,330
incollarlo in là testualmente, andare
torna al nostro codice di visualizzazione

404
00:23:40,330 --> 00:23:45,362
qui, e utilizzare questa funzione proprio qui.

405
00:23:45,362 --> 00:23:46,820
Non è necessario conoscere i dettagli.

406
00:23:46,820 --> 00:23:49,800
Ma cosa farà è,
troverà quel file,

407
00:23:49,800 --> 00:23:51,780
prenderlo, e tornare a noi.

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

409
00:24:11,660 --> 00:24:15,220
Così che cosa che fa è, va
e ottenere il file data.json.

410
00:24:15,220 --> 00:24:18,570
E poi tutto il codice che è
frastagliata inside-- essenzialmente,

411
00:24:18,570 --> 00:24:21,800
tutto il codice abbiamo there-- sarà
eseguito solo quando avremo i dati indietro.

412
00:24:21,800 --> 00:24:25,760
E poi sta andando a correre che
codice con i dati che abbiamo.

413
00:24:25,760 --> 00:24:28,870
Ottimo, abbiamo un
visualizzazione che interroga

414
00:24:28,870 --> 00:24:31,390
per qualche codice da qualche parte
altro, che è di solito

415
00:24:31,390 --> 00:24:36,110
dove interroga alcuni dati da
altrove, che è di solito

416
00:24:36,110 --> 00:24:38,656
come funzionano visualizzazioni.

417
00:24:38,656 --> 00:24:41,400
>> Ma voglio tornare ai dati.

418
00:24:41,400 --> 00:24:48,030
Così i dati fondamentalmente D3-- D3
consuma dati che è un elenco di cose.

419
00:24:48,030 --> 00:24:53,000
D3 prevede che i dati appena essere una lista
di cose, una serie di cose.

420
00:24:53,000 --> 00:24:58,780
Non importa che cosa quelle cose
sono, fintanto che è un array di loro.

421
00:24:58,780 --> 00:25:02,460
>> Ecco, per esempio, si potrebbe di
Naturalmente hanno valori in virgola mobile.

422
00:25:02,460 --> 00:25:04,830
Potremmo avere negativi.

423
00:25:04,830 --> 00:25:09,400
D3 non importa, così a lungo
come è una lista di cose.

424
00:25:09,400 --> 00:25:13,270
>> Come le cose interessanti noi
potrebbe avere, potremmo anche

425
00:25:13,270 --> 00:25:19,410
avere una lista di stringhe come tale.

426
00:25:19,410 --> 00:25:25,440
Quindi questi sono i titoli Crimson
Ho preso un paio di giorni fa.

427
00:25:25,440 --> 00:25:29,220
E forse si possono trovare alcuni interessanti
cose su questi a titoli.

428
00:25:29,220 --> 00:25:30,970
>> Quindi, di nuovo, questa è una lista di cose.

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

430
00:25:32,360 --> 00:25:35,572
Questi capita di essere una stringa.

431
00:25:35,572 --> 00:25:36,530
Abbiamo cambiato i nostri dati.

432
00:25:36,530 --> 00:25:38,210
>> Torniamo al nostro visualizzazione.

433
00:25:38,210 --> 00:25:42,495
Ora, la nostra visualizzazione aspetta
l'ingresso di essere numeri.

434
00:25:42,495 --> 00:25:44,370
Quindi stiamo andando ad avere
per fare alcuni cambiamenti.

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

436
00:25:47,180 --> 00:25:52,180
Così, per esempio, prima di tutto, forse
vogliamo mettere questi cerchi lungo

437
00:25:52,180 --> 00:25:56,870
dalla lunghezza del titolo, la
numero di caratteri che compongono la parte.

438
00:25:56,870 --> 00:26:03,600
>> Allora cosa faremo è-- ogni volta che il nostro
funzione viene chiamata con una stringa,

439
00:26:03,600 --> 00:26:09,095
troveremo la sua lunghezza e
poi passare che a scala.

440
00:26:09,095 --> 00:26:11,550
Il colore, che tornerà
che al blu acciaio.

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

442
00:26:19,060 --> 00:26:20,420
E ci andiamo.

443
00:26:20,420 --> 00:26:23,190
Abbiamo una visualizzazione
titoli di Crimson.

444
00:26:23,190 --> 00:26:25,500
>> La nostra scala è un po 'spento.

445
00:26:25,500 --> 00:26:29,680
Supponiamo che il più lungo
titolo è lungo 100 caratteri,

446
00:26:29,680 --> 00:26:32,244
così estendersi che un po '.

447
00:26:32,244 --> 00:26:33,410
E abbiamo una visualizzazione.

448
00:26:33,410 --> 00:26:36,710
Così sembra che la maggior parte dei titoli
sono abbastanza vicine tra loro,

449
00:26:36,710 --> 00:26:38,750
in termini di linea di carattere.

450
00:26:38,750 --> 00:26:41,200
Ma uno si erge davvero fuori.

451
00:26:41,200 --> 00:26:46,660
>> Potremmo costruire alcuni strumenti
di esplorare quella più.

452
00:26:46,660 --> 00:26:50,710
Ma quando stavo lavorando su questo, sono stato
curioso di sapere se, in questo insieme di dati,

453
00:26:50,710 --> 00:26:53,880
i titoli con i due punti
in essi sarebbe più lungo.

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

455
00:26:55,770 --> 00:26:56,660
>> Quindi cerchiamo di scoprirlo.

456
00:26:56,660 --> 00:27:00,650
Usiamo il colore
canale come abbiamo fatto prima,

457
00:27:00,650 --> 00:27:04,540
codificare alcuni sul fatto
c'è un colon o no.

458
00:27:04,540 --> 00:27:07,220
Così useremo di nuovo un condizionale.

459
00:27:07,220 --> 00:27:09,350
Non dovete sapere
i dettagli di questo,

460
00:27:09,350 --> 00:27:14,260
ma questo è il modo in cui controlliamo un
stringa per un carattere particolare

461
00:27:14,260 --> 00:27:16,355
in JavaScript, ancora una volta, non è rilevante.

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

463
00:27:18,910 --> 00:27:23,270
>> Ma se non troviamo un
colon, torneremo verde.

464
00:27:23,270 --> 00:27:26,100
E se lo facciamo, torneremo rosso.

465
00:27:26,100 --> 00:27:29,010
Così ancora una volta, i titoli che
hanno due punti sarà rosso.

466
00:27:29,010 --> 00:27:34,980
Questo è ciò che questo means-- bello.

467
00:27:34,980 --> 00:27:38,040
>> Così sembra che il mio
ipotesi è urtato.

468
00:27:38,040 --> 00:27:39,360
Ci sono solo due.

469
00:27:39,360 --> 00:27:42,380
Abbiamo solo sei punti di dati
e solo due avevano due punti.

470
00:27:42,380 --> 00:27:45,510
Ma sembra un po 'di più
sull'estremità inferiore, infatti.

471
00:27:45,510 --> 00:27:47,830
Notizie con due punti sembrano
essere generalmente più brevi,

472
00:27:47,830 --> 00:27:52,370
almeno nei nostri dati set-- interessante.

473
00:27:52,370 --> 00:27:55,830
>> Torniamo che a
blu acciaio e poi vedere

474
00:27:55,830 --> 00:28:00,601
quello che possiamo fare con ancora
dati più interessanti.

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

476
00:28:04,370 --> 00:28:09,070
Quindi, di nuovo, ho detto che
dati D3 è un elenco di cose.

477
00:28:09,070 --> 00:28:11,080
Abbiamo visto i numeri di molti tipi.

478
00:28:11,080 --> 00:28:12,810
Abbiamo visto le stringhe.

479
00:28:12,810 --> 00:28:15,700
Ma le cose possono anche essere oggetti.

480
00:28:15,700 --> 00:28:20,080
>> Possono essere cose complicate
che comprendono un sacco di cose.

481
00:28:20,080 --> 00:28:24,510
Dire che più chiaramente,
nella maggior parte dei casi,

482
00:28:24,510 --> 00:28:28,384
vuole costruire ogni punto dati
più complicato di un solo valore.

483
00:28:28,384 --> 00:28:30,175
Se ci si immagina un
banca dati sugli studenti,

484
00:28:30,175 --> 00:28:32,470
ci potrebbe essere uno studente
nome, un ID studente,

485
00:28:32,470 --> 00:28:36,370
e un sacco di cose associato
con un record particolare,

486
00:28:36,370 --> 00:28:39,834
non solo una stringa o un numero.

487
00:28:39,834 --> 00:28:40,750
Quindi diamo un'occhiata a questo.

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

489
00:28:55,180 --> 00:28:56,760
>> Questo è uno di questi set di dati.

490
00:28:56,760 --> 00:28:59,090
Si tratta di un set di dati sui terremoti.

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

492
00:29:01,910 --> 00:29:08,430
Quindi, tutto ciò che qui sulla nostra lista o un array
di cose contiene molte cose si.

493
00:29:08,430 --> 00:29:11,380
Così ogni punto di dati ha una
ampiezza e una coordinata.

494
00:29:11,380 --> 00:29:13,425
E si coordina
contengono due cose.

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

496
00:29:15,960 --> 00:29:20,450
>> Così ogni giorno è oggi molto più
complicato e molto più interessante

497
00:29:20,450 --> 00:29:22,700
e contiene molto di più
informazioni interessanti.

498
00:29:22,700 --> 00:29:26,730
Vediamo potremmo costruire fuori di questo.

499
00:29:26,730 --> 00:29:36,130
Tornando indietro a qui, ancora una volta, utilizzando
la nostra visualizzazione istogramma cerchio

500
00:29:36,130 --> 00:29:42,110
abbiamo costruito, vediamo se siamo in grado di costruire un
visualizzazione della distribuzione grandezza

501
00:29:42,110 --> 00:29:43,305
nel nostro insieme di dati.

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

503
00:29:45,850 --> 00:29:48,660
>> Così qui, è lo stesso concetto.

504
00:29:48,660 --> 00:29:51,920
Ma ora, d contiene più cose.

505
00:29:51,920 --> 00:29:54,780
d contiene molti elementi di dati.

506
00:29:54,780 --> 00:29:57,946
Così otteniamo d indietro.

507
00:29:57,946 --> 00:29:59,670
D3 ci dà d.

508
00:29:59,670 --> 00:30:06,080
E noi rispondiamo trovando la grandezza
di d e poi inciso che in scala.

509
00:30:06,080 --> 00:30:08,490
>> E poi abbiamo bisogno di cambiare
nostra scala, ovviamente.

510
00:30:08,490 --> 00:30:12,980
Quindi grandezze semplicemente non lo fanno
andare molto più di 10.

511
00:30:12,980 --> 00:30:15,485
In realtà, non c'è mai stato
un terremoto di magnitudo 10.

512
00:30:15,485 --> 00:30:19,360
Ma questo è il nostro tipo di superiore
fine, la nostra gamma superiore.

513
00:30:19,360 --> 00:30:20,240
>> Facciamo aggiornamento.

514
00:30:20,240 --> 00:30:22,990
Nizza, abbiamo una visualizzazione.

515
00:30:22,990 --> 00:30:25,490
E 'interessante note-- così
vi sono due punti di dati che

516
00:30:25,490 --> 00:30:29,010
sono quasi esattamente sopra l'
altro, in termini di grandezza.

517
00:30:29,010 --> 00:30:31,350
Si vede questo l'opacità che stiamo usando.

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

519
00:30:40,810 --> 00:30:42,690
>> Abbiamo dati geografici ora.

520
00:30:42,690 --> 00:30:44,710
Abbiamo latitudini e longitudine.

521
00:30:44,710 --> 00:30:47,549
Magari potremmo fare qualcosa di un
molto più interessante con questo.

522
00:30:47,549 --> 00:30:49,590
Troviamo ancora un po '
modo interessante per visualizzare

523
00:30:49,590 --> 00:30:53,500
questo complica
dati che abbiamo accesso.

524
00:30:53,500 --> 00:31:04,950
>> Atto V, Mapping-- fondamentalmente,
vogliamo mettere questi su una mappa.

525
00:31:04,950 --> 00:31:07,690
Voglio dire, questo è dove questo sta andando.

526
00:31:07,690 --> 00:31:13,130
Vogliamo codificare informazioni sulla
posizione di queste letture terremoto,

527
00:31:13,130 --> 00:31:16,350
come pure la loro grandezza,
perché abbiamo adesso.

528
00:31:16,350 --> 00:31:21,310
Capiamo come consumare
dati più complicati.

529
00:31:21,310 --> 00:31:26,200
>> La prima cosa che faremo è
creare una mappa, una mappa di sfondo.

530
00:31:26,200 --> 00:31:29,360
Ho intenzione di passare attraverso
questo molto rapidamente.

531
00:31:29,360 --> 00:31:30,560
Questo è il codice ingannevole.

532
00:31:30,560 --> 00:31:33,110
E 'un altro di quelli
ricette non lo fai davvero

533
00:31:33,110 --> 00:31:35,690
devono comprendere appieno per l'uso.

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

535
00:31:38,510 --> 00:31:39,740
Ma questo è codice.

536
00:31:39,740 --> 00:31:43,580
Questo codice qui crea una mappa.

537
00:31:43,580 --> 00:31:45,730
>> Non abbiamo intenzione di andare nei dettagli.

538
00:31:45,730 --> 00:31:54,210
Ma superficialmente, ciò che fa è,
interroga il file us.json, che

539
00:31:54,210 --> 00:31:57,150
è un file di dati come
quello che avevamo prima.

540
00:31:57,150 --> 00:31:59,150
E 'più complesso, ovviamente.

541
00:31:59,150 --> 00:32:02,920
Ma in questo caso, tutto,
ogni punto dati è questo stato

542
00:32:02,920 --> 00:32:05,420
ed ha una lista di
latitudini e longitudine

543
00:32:05,420 --> 00:32:10,500
che definiscono il poligono,
quella forma, quello stato.

544
00:32:10,500 --> 00:32:13,280
>> Quindi cosa D3 farà è simile
per quello che abbiamo fatto prima.

545
00:32:13,280 --> 00:32:18,140
Si chiederà che e
legarsi che ad un elemento.

546
00:32:18,140 --> 00:32:20,890
E c'è una funzione che
mapperà quell'elemento fuori,

547
00:32:20,890 --> 00:32:23,410
sulla base delle latitudini e longitudine.

548
00:32:23,410 --> 00:32:24,580
Potete leggere di più su questo.

549
00:32:24,580 --> 00:32:27,385
E mi raccomando.

550
00:32:27,385 --> 00:32:30,090
>> Ci sono collegamenti a
fine di questo codice postato.

551
00:32:30,090 --> 00:32:31,570
E il codice è commentato.

552
00:32:31,570 --> 00:32:34,050
In ci sono link di approfondimento su questo.

553
00:32:34,050 --> 00:32:36,590
Vi consiglio di guardare in su.

554
00:32:36,590 --> 00:32:39,460
Ma ciò che ci preoccupa è
questa funzione di proiezione.

555
00:32:39,460 --> 00:32:41,210
Voglio passare attraverso questo.

556
00:32:41,210 --> 00:32:43,522
>> Prima di tutto, mi permetta di mostrare
che, sì, abbiamo una mappa.

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

558
00:32:47,300 --> 00:32:49,970
Le mappe sono cool.

559
00:32:49,970 --> 00:32:52,330
Quindi diamo un'occhiata a questo
funzione di produzione.

560
00:32:52,330 --> 00:32:56,481
>> La proiezione è molto
come una scala, scale di nuovo.

561
00:32:56,481 --> 00:32:59,210
Così che cosa produzione
questa funzione di proiezione

562
00:32:59,210 --> 00:33:06,610
fa è, potremmo passare longitudine
e latitudes-- in questo caso,

563
00:33:06,610 --> 00:33:09,590
questi valori qui sono il
lat-long dell'edificio

564
00:33:09,590 --> 00:33:13,990
siamo seduti a destra
now-- alla proiezione.

565
00:33:13,990 --> 00:33:20,560
E la proiezione convertirà
che in X e Y valori dei pixel.

566
00:33:20,560 --> 00:33:23,300
>> Allora, cosa sta facendo di proiezione
è molto simile alla nostra scala.

567
00:33:23,300 --> 00:33:27,270
Sta prendendo nostre latitudini e
longitudine che rappresenta un intero globo

568
00:33:27,270 --> 00:33:31,390
e si riduce e dimensionamento che
fino alla piazza che vogliamo,

569
00:33:31,390 --> 00:33:33,510
che abbiamo dato.

570
00:33:33,510 --> 00:33:35,220
In questo caso, siamo
passando questi valori.

571
00:33:35,220 --> 00:33:41,370
E ci sta dando, beh, che
sullo schermo significa 640 pixel.

572
00:33:41,370 --> 00:33:46,250
L'intero schermo è di 700 pixel
ampio, in modo che ci fa qui su,

573
00:33:46,250 --> 00:33:53,310
e 154 pixel in verticale, che vorrei
stima è praticamente qui.

574
00:33:53,310 --> 00:33:57,250
>> Quindi prendere quelle lat-long, che
rappresentare qualcosa su tutto il globo

575
00:33:57,250 --> 00:34:02,850
e squishing e commovente che circa
a darci valori xey pixel,

576
00:34:02,850 --> 00:34:05,450
questa è la prima cosa che è
fatto in questo codice di mappatura.

577
00:34:05,450 --> 00:34:07,920
E poi il resto
Codice consuma i dati

578
00:34:07,920 --> 00:34:14,310
e poi quelle mappe lat-long
a qualcosa sullo schermo.

579
00:34:14,310 --> 00:34:18,380
>> Ma stiamo andando ad utilizzare questa proiezione
funzioni, perché si scopre

580
00:34:18,380 --> 00:34:20,270
abbiamo lat-long long pure.

581
00:34:20,270 --> 00:34:24,509
Guardando ai nostri dati, abbiamo
latitudini e longitudine

582
00:34:24,509 --> 00:34:25,425
per ogni osservazione.

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

584
00:34:28,131 --> 00:34:29,130
Quindi cerchiamo di usare la proiezione.

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

586
00:34:33,250 --> 00:34:37,639
>> Così guardando la nostra esposizione,
vogliamo che la nostra exposition--

587
00:34:37,639 --> 00:34:39,590
abbiamo una latitudine e longitudine.

588
00:34:39,590 --> 00:34:40,770
Ma noi vogliamo i valori dei pixel.

589
00:34:40,770 --> 00:34:43,510
E si scopre, abbiamo esattamente
quello che want-- proiezione.

590
00:34:43,510 --> 00:34:46,239
Molto come eravamo
utilizzando la scala proprio qui,

591
00:34:46,239 --> 00:34:52,075
ora stiamo andando a utilizzare la proiezione
e passare coordina.

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

593
00:34:55,241 --> 00:34:56,949
Quindi la prima cosa
stiamo doing-- così siamo

594
00:34:56,949 --> 00:35:01,520
ottenendo d, che è un dato individuo
Elemento di un individuo terremoto

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

596
00:35:02,370 --> 00:35:04,640
La prima cosa che facciamo
è ottenere le coordinate.

597
00:35:04,640 --> 00:35:06,150
Va bene, abbiamo le coordinate.

598
00:35:06,150 --> 00:35:09,160
>> La seconda cosa che facciamo è
passare che a proiezione.

599
00:35:09,160 --> 00:35:13,440
Proiezione converte quelle coordinate
in valori di pixel, x ed y.

600
00:35:13,440 --> 00:35:16,680
E poi l'ultima cosa che
voglia di fare è solo ottenere il x,

601
00:35:16,680 --> 00:35:19,342
che questo caso è il primo.

602
00:35:19,342 --> 00:35:22,050
E 'la prima delle due cose
restituiti da proiezione.

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

604
00:35:27,840 --> 00:35:29,630
>> Faremo lo stesso per y.

605
00:35:29,630 --> 00:35:34,960
Ma invece, torneremo
il secondo elemento, y.

606
00:35:34,960 --> 00:35:35,980
Preparatevi per aggiornare.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, carattere aggiuntivo
qui-- bello, abbiamo

609
00:35:46,450 --> 00:35:51,730
un documento guidato dati che è
celando questo file JSON di oggetti,

610
00:35:51,730 --> 00:35:57,560
fare una mappa, e cambiando il
attribuire in relazione ai dati

611
00:35:57,560 --> 00:35:59,600
proiettare su una mappa.

612
00:35:59,600 --> 00:36:00,840
Questo è davvero interessante.

613
00:36:00,840 --> 00:36:03,770
Questo è cool.

614
00:36:03,770 --> 00:36:05,640
>> Diamo una tacca.

615
00:36:05,640 --> 00:36:08,795
Voglio dire, abbiamo due pezzi di
informazioni con ogni punto di dati.

616
00:36:08,795 --> 00:36:10,000
Voglio dire, a tre.

617
00:36:10,000 --> 00:36:12,540
Abbiamo le coordinate,
che è un xe y.

618
00:36:12,540 --> 00:36:15,700
E abbiamo la grandezza.

619
00:36:15,700 --> 00:36:17,420
>> Abbiamo bisogno di codificare grandezza in qualche modo.

620
00:36:17,420 --> 00:36:18,920
Abbiamo un sacco di canali.

621
00:36:18,920 --> 00:36:20,370
Possiamo usare il colore.

622
00:36:20,370 --> 00:36:21,890
Possiamo usare raggio.

623
00:36:21,890 --> 00:36:23,040
Potremmo usare l'opacità.

624
00:36:23,040 --> 00:36:25,540
Potremmo usare molte cose nel codice.

625
00:36:25,540 --> 00:36:29,180
Ognuno di questi attributi e molti
più che non sono elencati qui,

626
00:36:29,180 --> 00:36:33,065
perché sono opzionali, potremmo
utilizzare per codificare questi dati, la corsa

627
00:36:33,065 --> 00:36:35,670
e tutte queste cose che ho menzionato.

628
00:36:35,670 --> 00:36:36,690
>> Facciamo raggio.

629
00:36:36,690 --> 00:36:38,830
Credo raggio è il più intuitivo.

630
00:36:38,830 --> 00:36:46,210
Quindi, di nuovo, ci sostituiremo che hard-coded
40 e fare alcuni calcoli.

631
00:36:46,210 --> 00:36:48,810
Useremo ancora la nostra scala preferita.

632
00:36:48,810 --> 00:36:50,290
E siamo passati d.

633
00:36:50,290 --> 00:36:55,850
Ma non d perché vogliamo la grandezza
di d. d è solo il punto di dati.

634
00:36:55,850 --> 00:36:57,430
Passeremo la grandezza di scala.

635
00:36:57,430 --> 00:36:58,470
>> Proviamo di nuovo.

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

637
00:37:00,230 --> 00:37:02,940
Perché non funziona?

638
00:37:02,940 --> 00:37:04,387
>> Quindi ricorda che cosa scala fa.

639
00:37:04,387 --> 00:37:05,470
Diamo un'occhiata a scala di nuovo.

640
00:37:05,470 --> 00:37:10,800
Mappe in scala da 1 a 10 su
a 22 a 600, più o meno.

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

642
00:37:12,030 --> 00:37:14,730
Questo è il motivo per cui stiamo ottenendo questo.

643
00:37:14,730 --> 00:37:18,420
>> Così vogliamo cambiare la nostra scala
a qualcosa di più ragionevole.

644
00:37:18,420 --> 00:37:22,610
Diciamo, che vogliamo da 0 a 60.

645
00:37:22,610 --> 00:37:25,340
60 è grande, ma 10 terremoti
sono incredibilmente raro.

646
00:37:25,340 --> 00:37:27,880
In realtà, non hanno mai accaduto.

647
00:37:27,880 --> 00:37:31,830
>> Che cosa questo farà si, ci vorrà
la grandezza che va da 1 a 10

648
00:37:31,830 --> 00:37:34,490
e la mappa su per espandere fuori.

649
00:37:34,490 --> 00:37:37,370
E la mappa su di 0 a 60.

650
00:37:37,370 --> 00:37:38,840
Facciamo aggiornamento.

651
00:37:38,840 --> 00:37:41,850
>> Nizza, abbiamo una visualizzazione.

652
00:37:41,850 --> 00:37:42,500
Questo è grande.

653
00:37:42,500 --> 00:37:43,736
Si tratta di dati reali.

654
00:37:43,736 --> 00:37:46,360
Noterete, nel mio piccolo giocattolo
ad esempio, la più grande terremoto

655
00:37:46,360 --> 00:37:49,417
è proprio sopra di noi.

656
00:37:49,417 --> 00:37:50,000
Ma questo è tutto.

657
00:37:50,000 --> 00:37:54,422
Abbiamo una visualizzazione data guidata
che consuma i dati

658
00:37:54,422 --> 00:37:56,255
e ci dà davvero
informazioni interessanti.

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

660
00:38:02,600 --> 00:38:06,420
Sì, aggiungiamo alcuni
interattività ad esso.

661
00:38:06,420 --> 00:38:08,675
Ho detto che era
la forte forza di D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Ecco, per ogni elemento, siamo
che descrive una serie di attributi.

664
00:38:15,060 --> 00:38:20,230
Ma possiamo anche descrivere quello che vogliamo
accadere con elementi di interattività.

665
00:38:20,230 --> 00:38:26,190
Ad esempio, potremmo definire
cosa succede quando il mouse sopra.

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

667
00:38:28,740 --> 00:38:33,640
E molto simile che,
che prendo una funzione,

668
00:38:33,640 --> 00:38:36,700
molto simile al
attributi che avevamo prima,

669
00:38:36,700 --> 00:38:44,650
dove facciamo qualcosa al
elemento al passaggio del mouse su di esso.

670
00:38:44,650 --> 00:38:47,100
>> Quindi, prima cosa che dobbiamo
fare è selezionare l'elemento,

671
00:38:47,100 --> 00:38:49,435
trovare fondamentalmente, nel browser.

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

673
00:38:57,090 --> 00:39:00,920
e allora potremmo impostare
un attributo ad essa.

674
00:39:00,920 --> 00:39:06,870
Quindi quello che sto facendo qui è, al passaggio del mouse
su qualcosa, ci arriveremo quell'elemento

675
00:39:06,870 --> 00:39:11,197
e quindi impostare l'opacità indietro
1, completamente opaca.

676
00:39:11,197 --> 00:39:12,488
Vediamo cosa che sembra.

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

678
00:39:29,430 --> 00:39:39,080
>> Sembra che abbiamo un
virgola in più qui.

679
00:39:39,080 --> 00:39:42,420
Quindi, se passaggio del mouse sopra qui, si riempie.

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

681
00:39:46,530 --> 00:39:48,960
Ma ora, naturalmente,
rimane pieno, perché noi

682
00:39:48,960 --> 00:39:53,240
devono descrivere ciò che accade
quando rimuovere il nostro cursore.

683
00:39:53,240 --> 00:39:59,990
Allora, facciamo esattamente questo su
mouseout, al contrario di mouseover.

684
00:39:59,990 --> 00:40:06,399
>> E noi reimpostarlo
quello che avevamo before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
E adesso, ogni volta che
hover, otteniamo un cerchio completo.

686
00:40:10,260 --> 00:40:13,468
Essa ci aiuta a vedere quello che abbiamo
stiamo selezionando essenzialmente.

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

688
00:40:19,210 --> 00:40:22,860
>> E adesso facciamo questa davvero grande.

689
00:40:22,860 --> 00:40:26,210
Facciamo collegare questo a dati reali.

690
00:40:26,210 --> 00:40:30,890
Quindi cerchiamo di chiedere potrebbe
USGS sui loro dati.

691
00:40:30,890 --> 00:40:35,630
Così la US Geological Survey
ha dati sui terremoti.

692
00:40:35,630 --> 00:40:41,460
Hanno una API pubblica che è in grado
per essere consumato in formato JSON.

693
00:40:41,460 --> 00:40:42,548
Allora, facciamo così.

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

695
00:40:49,730 --> 00:40:55,900
>> Quindi questo è un po 'di codice che
collega all'API USGS.

696
00:40:55,900 --> 00:40:57,990
E c'è un po 'di trattamento su di esso.

697
00:40:57,990 --> 00:41:02,200
Questo non è rilevante, ma semplifica
ad un semplice formato di dati come quello

698
00:41:02,200 --> 00:41:03,800
che avevamo prima.

699
00:41:03,800 --> 00:41:08,140
Così mi libero della nostra chiamata a
il nostro data.json falso in archivio.

700
00:41:08,140 --> 00:41:13,110
E invece, sto chiamando
l'USGS essenzialmente.

701
00:41:13,110 --> 00:41:16,700
>> Facciamo rinfrescare, piacevole.

702
00:41:16,700 --> 00:41:21,260
Questo è, dati effettivi reali
questa settimana per i terremoti.

703
00:41:21,260 --> 00:41:23,217
Questo è davvero interessante.

704
00:41:23,217 --> 00:41:25,050
Ciò non è sorprendente
per noi, ma ci sono

705
00:41:25,050 --> 00:41:27,909
un sacco di terremoti sulla
West Coast in California.

706
00:41:27,909 --> 00:41:30,950
Ma ho pensato che fosse molto interessante
che ci fossero così tanti terremoti

707
00:41:30,950 --> 00:41:34,350
in Alaska, e apparentemente,
qui nel Midwest.

708
00:41:34,350 --> 00:41:37,630
Voglio dire, interessante, e siamo a posto.

709
00:41:37,630 --> 00:41:40,410
Questa è la conclusione.

710
00:41:40,410 --> 00:41:43,760
>> Ma fondamentalmente, questo
è ciò che ci aiuta a fare D3.

711
00:41:43,760 --> 00:41:48,030
Ci aiuta a prendere dati, bind
per elementi del DOM,

712
00:41:48,030 --> 00:41:51,620
e hanno questi elementi cambiano
in funzione dei dati,

713
00:41:51,620 --> 00:41:54,780
avere quegli attributi, tutte le
molti attributi degli elementi,

714
00:41:54,780 --> 00:41:57,393
tutti essere utile per canali
per trasmettere informazioni.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 è un incredibilmente potente
biblioteca e incredibilmente ben gestito.

717
00:42:09,290 --> 00:42:12,260
Questo è certo roba potente.

718
00:42:12,260 --> 00:42:15,960
La visualizzazione dei dati è un
strumento incredibilmente potente

719
00:42:15,960 --> 00:42:21,530
per il trasporto di persone profonde
intuizioni che ottiene al loro core

720
00:42:21,530 --> 00:42:25,430
e li aiuta a capire, in
in questo modo profondo e intuitivo,

721
00:42:25,430 --> 00:42:29,760
come i dati e come funziona
dati cambia la nostra vita.

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