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

2
00:00:00,780 --> 00:00:11,880
>> [Jouer de la musique]

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD: Je suis David
Chouinard, et ce est D3.

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

5
00:00:17,700 --> 00:00:21,270
Nous allons en apprendre davantage sur D3 aujourd'hui.

6
00:00:21,270 --> 00:00:25,020
D3 est un framework JavaScript
pour la construction d'une grande qualité

7
00:00:25,020 --> 00:00:28,110
visualisations interactives pour le web.

8
00:00:28,110 --> 00:00:30,870
Des choses comme ce que nous sommes
voir à l'arrière de moi,

9
00:00:30,870 --> 00:00:34,230
nous allons apprendre à faire les
choses, sorte de les bases d'elle.

10
00:00:34,230 --> 00:00:36,452
Mais ça va être cool.

11
00:00:36,452 --> 00:00:38,160
Commençons
faire de jolies images.

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

13
00:00:41,108 --> 00:00:44,350
Nous avons plus de démos
des perspectives disponibles.

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

15
00:00:48,040 --> 00:00:50,760
Faisons-le.

16
00:00:50,760 --> 00:00:58,700
>> Acte I, DOM manipulation-- nous allons
commencer tout de suite faire des choses cool.

17
00:00:58,700 --> 00:01:01,240
Tout d'abord, sur la gauche, nous avons code.

18
00:01:01,240 --> 00:01:03,470
Sur la droite, nous avons
le résultat de notre code.

19
00:01:03,470 --> 00:01:04,900
Allons à travers elle.

20
00:01:04,900 --> 00:01:05,780
>> Faisons un cercle.

21
00:01:05,780 --> 00:01:08,570
Comment ça sonne?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
nous venons de faire un cercle.

23
00:01:14,934 --> 00:01:16,100
Vous ne me croyez pas, non?

24
00:01:16,100 --> 00:01:18,190
Ce ne est pas là.

25
00:01:18,190 --> 00:01:21,830
>> Donc, ce que nous avons ici est,
SVG est scalable vector graphics.

26
00:01:21,830 --> 00:01:27,530
Ce est la façon dont nous disons que le navigateur
faire des graphiques vectoriels dans le navigateur.

27
00:01:27,530 --> 00:01:30,740
Ce que nous venons de le faire en ce moment
est ajouté un cercle à parcourir.

28
00:01:30,740 --> 00:01:34,790
>> La promesse est que le cercle
nécessite un peu d'attributs de base

29
00:01:34,790 --> 00:01:36,850
avant que nous puissions effectivement voir.

30
00:01:36,850 --> 00:01:40,045
Nous devons lui dire sa position x,
sa position y, son rayon.

31
00:01:40,045 --> 00:01:43,310
Nous ne avons pas dire tout cela,
donc nous ne voyons pas en ce moment.

32
00:01:43,310 --> 00:01:46,210
Mais nous allons dire ce genre de choses.

33
00:01:46,210 --> 00:01:49,510
>> Alors tout d'abord, vous avez
de donner notre cercle un nom.

34
00:01:49,510 --> 00:01:53,070
Alors appelons-cercle.

35
00:01:53,070 --> 00:01:54,406
Notre cercle a un nom maintenant.

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

37
00:01:57,230 --> 00:01:59,490
Et nous allons lui donner quelques attributs.

38
00:01:59,490 --> 00:02:03,690
Que diriez-cx serait centrer x, donc
le centre de la position x.

39
00:02:03,690 --> 00:02:06,730
Disons, pour 200 200 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Donnons-lui un an de 200 pixels ainsi.

41
00:02:10,220 --> 00:02:16,032
Et un R, un rayon d'environ 40 pixels.

42
00:02:16,032 --> 00:02:16,950
Voyons maintenant.

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

44
00:02:21,740 --> 00:02:23,440
Je ne peux pas épeler.

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

46
00:02:30,430 --> 00:02:31,520
>> Là vous allez.

47
00:02:31,520 --> 00:02:37,330
Nous avons un cercle à la position 200
pixels, 200 pixels, rayon de 40 pixels.

48
00:02:37,330 --> 00:02:38,280
Plutôt cool, non?

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

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

51
00:02:40,880 --> 00:02:42,670
>> Donc pas besoin de suivre le long.

52
00:02:42,670 --> 00:02:45,790
Tous ces exemples, toutes
le code que je fais aujourd'hui

53
00:02:45,790 --> 00:02:51,300
seront fournis en ligne à la fin
sous la forme d'exemples interactifs

54
00:02:51,300 --> 00:02:54,010
avec points de contrôle à
chaque acte, et ainsi de suite.

55
00:02:54,010 --> 00:02:55,160
>> Faisons plus de choses.

56
00:02:55,160 --> 00:02:58,901
Ce cercle noir est vraiment moche.

57
00:02:58,901 --> 00:03:01,541
Je suis désolé pour cette erreur
messages là.

58
00:03:01,541 --> 00:03:05,340
Nous y voilà.

59
00:03:05,340 --> 00:03:06,350
>> Donnons-lui une couleur.

60
00:03:06,350 --> 00:03:07,170
Comment ça?

61
00:03:07,170 --> 00:03:08,340
Je aime bleu acier.

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

63
00:03:13,280 --> 00:03:16,030
Eh bien, notre cercle a changé de couleur.

64
00:03:16,030 --> 00:03:17,320
C'est génial.

65
00:03:17,320 --> 00:03:31,330
Faisons semi-transparent
too-- semi-transparent.

66
00:03:31,330 --> 00:03:33,670
>> Donc, ce sont des attributs
nous définissons sur le cercle.

67
00:03:33,670 --> 00:03:36,774
La première chose que nous avons fait est
nous mettons un cercle sur la page.

68
00:03:36,774 --> 00:03:38,690
Et puis nous définissons
un tas d'attributs.

69
00:03:38,690 --> 00:03:41,610
Certaines d'entre elles sont nécessaires,
comme CX, CY, et Radius.

70
00:03:41,610 --> 00:03:42,680
Et d'autres sont facultatifs.

71
00:03:42,680 --> 00:03:44,730
>> Il ya beaucoup plus d'attributs.

72
00:03:44,730 --> 00:03:46,760
Il ya beaucoup d'entre eux.

73
00:03:46,760 --> 00:03:53,070
Par exemple, nous pourrions avoir un
AVC ainsi, un coup de rouge.

74
00:03:53,070 --> 00:03:55,630
Mais nous allons enlever ce.

75
00:03:55,630 --> 00:04:00,450
Nous sommes de retour à un cercle, un cercle bleu.

76
00:04:00,450 --> 00:04:01,600
>> Faisons donc plusieurs cercles.

77
00:04:01,600 --> 00:04:02,810
Comment ça?

78
00:04:02,810 --> 00:04:04,665
Faisons un autre cercle.

79
00:04:04,665 --> 00:04:05,985
Ce est excitant, non?

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

81
00:04:09,630 --> 00:04:12,300
>> Donc, dire que je ai tout simplement copié-collé
ce que nous avions déjà.

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

83
00:04:13,570 --> 00:04:15,840
Et nous allons faire exactement
même chose et lui donner

84
00:04:15,840 --> 00:04:20,450
attributs, étant donné une position x de 300.

85
00:04:20,450 --> 00:04:24,140
Yay, nous avons maintenant deux cercles.

86
00:04:24,140 --> 00:04:27,240
>> Et bien sûr, nous pourrions
mettre à jour ces valeurs.

87
00:04:27,240 --> 00:04:31,640
Je peux me exprimer à 400, et maintenant il se déplace.

88
00:04:31,640 --> 00:04:35,470
Et puisque ce est ennuyeux, nous allons
retirer, afin circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Il est parti maintenant.

91
00:04:40,730 --> 00:04:43,170
>> Donc ce que nous faisons et
est juste très, cette very--

92
00:04:43,170 --> 00:04:46,030
est très similaire à ce que vous
pourrait faire dans jQuery, par exemple.

93
00:04:46,030 --> 00:04:48,240
Nous sommes en train de manipuler
le DOM, il est appelé.

94
00:04:48,240 --> 00:04:50,040
Vous pourriez avoir entendu ce mot auparavant.

95
00:04:50,040 --> 00:04:53,255
Nous créons des choses, la mise en
attributs sur des choses, le retrait de composants.

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

97
00:04:58,950 --> 00:05:02,360
>> Maintenant, voici où cela devient intéressant.

98
00:05:02,360 --> 00:05:07,250
Donc, plus tard dans le code, nous pourrions encore
désigner le cercle original ici.

99
00:05:07,250 --> 00:05:14,100
Donc, nous allons réinitialiser son attribut cx.

100
00:05:14,100 --> 00:05:18,260
Disons, sa position x 400.

101
00:05:18,260 --> 00:05:22,406
Et je vais faire la transition
que, donc ce est évident.

102
00:05:22,406 --> 00:05:23,360
Nous y voilà.

103
00:05:23,360 --> 00:05:24,780
>> Nous avons donc ajouté un cercle.

104
00:05:24,780 --> 00:05:26,440
Nous avons mis certains attributs.

105
00:05:26,440 --> 00:05:28,210
Nous avons ajouté un autre cercle, enlevé.

106
00:05:28,210 --> 00:05:31,650
Et puis nous allons modifier
le cercle d'origine.

107
00:05:31,650 --> 00:05:35,400
>> Mais voici où il obtient
beaucoup plus intéressant.

108
00:05:35,400 --> 00:05:39,070
Non seulement nous pouvons définir les attributs
comme des valeurs juste, nous pouvons dire,

109
00:05:39,070 --> 00:05:41,610
hey, cercle, aller à la position 200.

110
00:05:41,610 --> 00:05:44,540
Nous pouvons également les définir comme fonctions.

111
00:05:44,540 --> 00:05:48,850
>> Ainsi, au lieu de donner 400 ici,
nous pouvons faire des calculs

112
00:05:48,850 --> 00:05:53,950
à la volée pour ce que nous
veulent cet attribut soit.

113
00:05:53,950 --> 00:05:56,580
Donc, ce est comment vous exprimez cela.

114
00:05:56,580 --> 00:06:00,660
Nous disons, au lieu de 400, laissez-moi
vous donner une fonction à la place.

115
00:06:00,660 --> 00:06:04,180
Et ici, à l'intérieur de cette fonction,
nous pouvons faire tout calcul fou.

116
00:06:04,180 --> 00:06:06,820
>> Nous pourrions prendre le temps et
regarder quelque chose d'autre

117
00:06:06,820 --> 00:06:11,230
et décider de façon dynamique pour
le cercle la valeur que nous voulons.

118
00:06:11,230 --> 00:06:15,266
Que diriez-vous nous donnons simplement
un x position aléatoire?

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

120
00:06:20,360 --> 00:06:21,120
Donc, ce est cela.

121
00:06:21,120 --> 00:06:25,490
>> Alors qu'est-ce qui dit est, pour
tous les x, exécutez cette fonction.

122
00:06:25,490 --> 00:06:29,340
Et ce que nous faisons est le calcul
certaines choses, une fois aléatoires la largeur

123
00:06:29,340 --> 00:06:30,410
et que le retour.

124
00:06:30,410 --> 00:06:34,765
Ainsi, chaque fois que nous courons, nous obtenons une
cercle qui va à un endroit aléatoire.

125
00:06:34,765 --> 00:06:36,394
Ce est plutôt cool.

126
00:06:36,394 --> 00:06:38,310
Je me sens comme je pourrais regarder
à ce pour un peu.

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

128
00:06:44,274 --> 00:06:46,440
Nous commençons à rendre à
quelque chose d'intéressant ici.

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

130
00:06:49,120 --> 00:06:51,390
Faisons de cette entreprise guidée par les données.

131
00:06:51,390 --> 00:06:53,420
Il n'y a pas de données ici.

132
00:06:53,420 --> 00:06:54,482
Nous allons changer cela.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- Acte II, Data Driven
Revenons donc ici.

135
00:07:12,140 --> 00:07:15,340
Et nous allons simplement se débarrasser de circle2,
parce que nous sommes juste ajout et la suppression

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

137
00:07:15,840 --> 00:07:17,382
Donc, nous ne avons pas vraiment besoin.

138
00:07:17,382 --> 00:07:21,421
Nous devons être beaucoup plus intelligent ici.

139
00:07:21,421 --> 00:07:23,170
Disons, nous avons
certaines données de quelque sorte.

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

141
00:07:31,540 --> 00:07:40,020
Un moment-- disons,
nous avions des données de ce formulaire.

142
00:07:40,020 --> 00:07:41,800
Nous avions un tableau, juste
une série de chiffres.

143
00:07:41,800 --> 00:07:45,750
Nous avons sept chiffres ici,
quelles qu'elles montant représente:

144
00:07:45,750 --> 00:07:48,810
dans le compte bancaire de gens, comment
combien ils pèsent, Dieu sait quoi.

145
00:07:48,810 --> 00:07:51,310
>> Ce sont des chiffres, et nous
vouloir utiliser nos cercles

146
00:07:51,310 --> 00:07:53,240
pour représenter ces chiffres en quelque sorte.

147
00:07:53,240 --> 00:07:55,515
Nous voulons lier notre
cercles à ces chiffres.

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

149
00:07:58,750 --> 00:07:59,626
Donc, ce que nous faisons.

150
00:07:59,626 --> 00:08:01,500
Disons, nous voulons une
cercle pour chaque numéro.

151
00:08:01,500 --> 00:08:03,590
Nous pourrions faire le vieux
chose que nous étions doing--

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

153
00:08:06,020 --> 00:08:10,020
Mais cela sort de la main, et
il ya beaucoup de répéter logique.

154
00:08:10,020 --> 00:08:12,760
>> Alors soyons plus intelligent avec ça.

155
00:08:12,760 --> 00:08:17,810
Au lieu d'utiliser le cercle var
svg.append que nous utilisons seulement,

156
00:08:17,810 --> 00:08:21,580
nous allons utiliser
ce petit bloc ici.

157
00:08:21,580 --> 00:08:24,510
Je ne veux pas aller en profondeur
dans ce que toutes ces parties font.

158
00:08:24,510 --> 00:08:26,020
Et ce est un peu un sujet avancé.

159
00:08:26,020 --> 00:08:27,830
Et je souhaite que je pourrais.

160
00:08:27,830 --> 00:08:31,370
>> Mais la chose principale à recognize-- et
vous verrez est très souvent dans le code D3.

161
00:08:31,370 --> 00:08:36,840
Ce bloc de texte de base
crée autant de cercles

162
00:08:36,840 --> 00:08:41,360
comme il existe des éléments de données
dans ce tableau ici.

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

164
00:08:53,420 --> 00:08:55,780
Donc, cela crée autant
cercles comme il ya des éléments.

165
00:08:55,780 --> 00:08:58,520
Il va nous créer des sept cercles.

166
00:08:58,520 --> 00:09:01,710
Et il fait une chose vraiment, vraiment la clé.

167
00:09:01,710 --> 00:09:02,460
Alors disons que courent.

168
00:09:02,460 --> 00:09:05,460
Enlevons notre autre cercle.

169
00:09:05,460 --> 00:09:09,565
Disons simplement commenter cette
séparer sortir et courir ce message.

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

171
00:09:13,840 --> 00:09:15,260
>> Nous y voilà.

172
00:09:15,260 --> 00:09:18,030
Donc notre cercle voici une
beaucoup plus sombre, parce que nous

173
00:09:18,030 --> 00:09:20,720
avoir sept cercles, une
au-dessus de l'autre.

174
00:09:20,720 --> 00:09:25,425
Nous venons de créer sept cercles, une
chacun pour chacun de ces éléments de données.

175
00:09:25,425 --> 00:09:28,860
Mais il ya une chose qui se est passé clé
avec ce bout ici.

176
00:09:28,860 --> 00:09:31,030
>> Ce est ce que les données ont été tenus.

177
00:09:31,030 --> 00:09:33,440
Donc, chacun de
ces éléments de données,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, était liée
à un cercle particulier.

179
00:09:38,830 --> 00:09:40,960
Il se agit donc non seulement créés
un tas de cercles

180
00:09:40,960 --> 00:09:43,420
mais lie ces deux choses ensemble.

181
00:09:43,420 --> 00:09:48,740
>> Et à l'avenir, parce que nous avons créé
ces cercles avec cette fonction, D3

182
00:09:48,740 --> 00:09:52,430
si je vous donne un cercle, vous pouvez
me donner les données qui lui sont associés.

183
00:09:52,430 --> 00:09:53,280
Donc, nous pouvons demander à D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, je ai ce cercle.

185
00:09:54,840 --> 00:09:57,350
Quel est le données que le cercle a?

186
00:09:57,350 --> 00:10:01,290
Et D3 serait nous dire 10 ou 45 ou 105.

187
00:10:01,290 --> 00:10:02,380
>> Ces choses sont liées.

188
00:10:02,380 --> 00:10:04,490
Ce est un concept très, très fondamentale.

189
00:10:04,490 --> 00:10:06,070
Voyons cela.

190
00:10:06,070 --> 00:10:12,210
>> Donc, la façon dont nous avait demandé si D3--
ce ne est pas pertinent pour ce,

191
00:10:12,210 --> 00:10:16,620
mais faites-moi confiance là-dessus.

192
00:10:16,620 --> 00:10:17,620
Ce est ainsi que nous demandons D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, donne-moi la première
cercle que vous pouvez trouver.

194
00:10:21,312 --> 00:10:23,580
Donnez-moi le premier cercle que vous pouvez trouver.

195
00:10:23,580 --> 00:10:29,660
Et puis nous pourrions demander D3, ce est
les données à ce sujet, comme celui-ci, 10.

196
00:10:29,660 --> 00:10:33,380
>> Donc, nous demandons simplement D3, trouvez-moi
le premier cercle que vous pouvez trouver.

197
00:10:33,380 --> 00:10:34,400
Quoi de ses données?

198
00:10:34,400 --> 00:10:36,650
10, ce est bien notre
premier élément de données.

199
00:10:36,650 --> 00:10:42,150
Nous pourrions lui demander, hey, D3,
nous trouver notre troisième cercle.

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

201
00:10:44,450 --> 00:10:45,740
Pourquoi est-ce vraiment important?

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

203
00:10:49,790 --> 00:10:52,250
>> Donc ici, je l'ai mentionné
que nous pourrions utiliser les fonctions.

204
00:10:52,250 --> 00:10:54,910
Et je l'ai mentionné que ce était
une chose très puissante.

205
00:10:54,910 --> 00:11:03,070
Ainsi, non seulement nos fonctions peuvent faire des choses
comme faire un peu de calcul, par exemple,

206
00:11:03,070 --> 00:11:09,170
retourner un nombre aléatoire, il peut
aussi faire des choses basées sur les données.

207
00:11:09,170 --> 00:11:11,550
Ce est ce que signifient données entraînés documents.

208
00:11:11,550 --> 00:11:13,750
Ce est ce que signifie D3.

209
00:11:13,750 --> 00:11:17,800
>> Donc, ce x postition-- place
de dire simplement, tous les cercles,

210
00:11:17,800 --> 00:11:21,735
obtenir position x 200, nous
pourrait lui donner une fonction.

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

212
00:11:26,140 --> 00:11:30,140
Et ici, nous pouvons faire quelques calculs.

213
00:11:30,140 --> 00:11:33,710
et d ici tient lieu pour les données.

214
00:11:33,710 --> 00:11:36,120
Donc, chaque fois que nous avons
un cercle, essentiellement,

215
00:11:36,120 --> 00:11:37,750
D3 créera ces sept cercles.

216
00:11:37,750 --> 00:11:38,500
Et puis pour chaque

217
00:11:38,500 --> 00:11:41,920
>> cercle, il va aller, hé,
circle1 quelle est votre position x.

218
00:11:41,920 --> 00:11:45,210
Auparavant, nous étions
toujours répondre 200.

219
00:11:45,210 --> 00:11:48,630
Mais maintenant, chaque fois D3 demande
nous quelle est votre position x,

220
00:11:48,630 --> 00:11:51,790
ça va donner us-- nous avons
ce cercle, si nous avons les données.

221
00:11:51,790 --> 00:11:55,290
Il va nous donner les données et dire,
que voulez-vous l'exposition d'être,

222
00:11:55,290 --> 00:11:57,120
sur la base de ces données.

223
00:11:57,120 --> 00:11:59,590
>> Disons simplement retourner les données réelles.

224
00:11:59,590 --> 00:12:04,910
Donc, si nous courons cela, cela donne
Les données américaines entraînées documents.

225
00:12:04,910 --> 00:12:08,040
Ces cercles sont basés
par rapport Position--

226
00:12:08,040 --> 00:12:11,120
ils sont des bases en fonction des données.

227
00:12:11,120 --> 00:12:13,100
>> Donc, pour le premier cercle,
D3 met un cercle.

228
00:12:13,100 --> 00:12:16,770
Et puis D3 nous demande, qu'est-ce que
vous voulez que l'exposition soit.

229
00:12:16,770 --> 00:12:19,620
Et nous disons juste, tout ce que les données sont.

230
00:12:19,620 --> 00:12:21,185
Faire l'exposition 10.

231
00:12:21,185 --> 00:12:26,320
>> Puis il demande, qu'est-ce que vous voulez que le
exposition soit pour le second cercle.

232
00:12:26,320 --> 00:12:27,270
Et nous répondons, 45.

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

234
00:12:30,000 --> 00:12:32,230
Et nous, bien sûr, peut
faire un peu de calcul ici.

235
00:12:32,230 --> 00:12:35,510
Je trouve que ces cercles
sont sorte de écrasé jusqu'à.

236
00:12:35,510 --> 00:12:38,965
>> Donc multiplier par trois, de multiplier par trois données.

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

238
00:12:41,870 --> 00:12:43,840
Notre cercle vient de se élargir sur.

239
00:12:43,840 --> 00:12:46,730
Notre valeur a été triplé.

240
00:12:46,730 --> 00:12:51,010
>> Le cercle est vraiment sur le bord,
nous allons donc peut-être qu'il sorte de décalage.

241
00:12:51,010 --> 00:12:53,632
Disons, par 20.

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

243
00:12:56,070 --> 00:12:57,590
>> Il se agit d'une visualisation des données.

244
00:12:57,590 --> 00:13:01,767
Ce est un très basique, mais cette
nous donne un aperçu de nos données.

245
00:13:01,767 --> 00:13:04,600
Il nous dit que, par exemple, nous
avoir un petit groupe d'éléments.

246
00:13:04,600 --> 00:13:06,340
Et nous avons une grande valeur aberrante ici.

247
00:13:06,340 --> 00:13:10,830
Cela nous donne quelques informations
sur la distribution.

248
00:13:10,830 --> 00:13:20,830
>> Si nous étions, par exemple, de changer
les données à 150 ici et rafraîchissement,

249
00:13:20,830 --> 00:13:22,630
notre visualisation est modifiée.

250
00:13:22,630 --> 00:13:24,285
Ce document est guidée par les données.

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

252
00:13:32,640 --> 00:13:36,180
>> Alors bien sûr, tous ces éléments,
tous ces attributs ici,

253
00:13:36,180 --> 00:13:38,430
nous pouvons utiliser une fonction, pas
seulement les chiffres, et pas seulement

254
00:13:38,430 --> 00:13:39,900
les positions x et y.

255
00:13:39,900 --> 00:13:42,120
Donc, nous pouvons utiliser une fonction de la couleur.

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

257
00:13:45,260 --> 00:13:46,360
Donc, nous allons faire la même chose.

258
00:13:46,360 --> 00:13:49,360
Nous allons lui donner une fonction.

259
00:13:49,360 --> 00:13:52,320
>> Et disons, nous pourrions avoir
conditionnelles dans notre fonction.

260
00:13:52,320 --> 00:13:54,770
Cette fonction peut être
cent des lignes longues.

261
00:13:54,770 --> 00:13:57,150
Il peut faire des choses très, très compliquées.

262
00:13:57,150 --> 00:13:59,080
>> Mettons donc une instruction if ici.

263
00:13:59,080 --> 00:14:03,420
Disons que, si nos données est moins
de 50, ce est un certain seuil

264
00:14:03,420 --> 00:14:05,817
que nous sommes intéressés
dans pour une raison quelconque.

265
00:14:05,817 --> 00:14:06,650
Faisons vert.

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

267
00:14:09,830 --> 00:14:15,320
Sinon, disons que ce est rouge.

268
00:14:15,320 --> 00:14:16,110
Comment ça?

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
>> Donc notre visualisation de données commence
pour transmettre des informations plus intéressant

272
00:14:24,860 --> 00:14:26,727
sur de nombreux canaux.

273
00:14:26,727 --> 00:14:28,560
Alors maintenant, nous savons un peu
sur la distribution.

274
00:14:28,560 --> 00:14:31,768
Et nous savons qu'il ya une sorte de
coupé à 50 que nous sommes intéressés à.

275
00:14:31,768 --> 00:14:35,630
Nous savons qu'il ya deux points de données
en dessous de ce seuil et la plupart

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

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

278
00:14:41,510 --> 00:14:46,160
>> Donc, comme une étape finale, ces données ici,
il est très rare de voir ce genre.

279
00:14:46,160 --> 00:14:52,610
Alors disons simplement le déplacer vers une variable
parce que ce est plus propre, comme ça.

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

281
00:15:02,980 --> 00:15:05,197
Et puis nous utilisons cette variable ici.

282
00:15:05,197 --> 00:15:06,280
Ce est exactement la même chose.

283
00:15:06,280 --> 00:15:07,280
Ce est juste un peu plus propre.

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

285
00:15:25,300 --> 00:15:35,300
>> Ensuite, Acte III, Scales--
Donc seul problème droit

286
00:15:35,300 --> 00:15:38,920
ici, ce est, si nous changeons notre
données dans ce 200 value--

287
00:15:38,920 --> 00:15:41,685
si nous changeons à 400
ou quelque chose et rafraîchissement,

288
00:15:41,685 --> 00:15:44,540
alors cette valeur juste allé hors de l'écran.

289
00:15:44,540 --> 00:15:49,040
Donc, notre logique ici
de la façon dont nous faisons les trois fois

290
00:15:49,040 --> 00:15:52,570
et 20, de l'étaler, puis
compenser un peu est vraiment maladroit.

291
00:15:52,570 --> 00:15:54,150
>> Que veulent dire ces chiffres?

292
00:15:54,150 --> 00:15:55,400
Ils sont juste codées en dur là-bas.

293
00:15:55,400 --> 00:15:58,830
Et ils sont très liés aux données.

294
00:15:58,830 --> 00:16:00,550
Nous voulons un document de données pilotée.

295
00:16:00,550 --> 00:16:05,460
Nous voulons un document très flexible,
que les données fournies, il se adapte à

296
00:16:05,460 --> 00:16:07,900
et la représente.

297
00:16:07,900 --> 00:16:11,330
>> Ce que nous devons fondamentalement est, nous
avoir cette plage de numéros 10.

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

299
00:16:12,640 --> 00:16:17,630
Et nous voulons mapper cette entrée sur
la largeur, la largeur ici.

300
00:16:17,630 --> 00:16:20,620
Nous avons donc la gamme de
nombres allant de 0 à 100.

301
00:16:20,620 --> 00:16:24,980
Et nous avons ce campus I va
de 20 à 700, dans ce cas.

302
00:16:24,980 --> 00:16:26,515
>> Nous voulons type de mapper que sur.

303
00:16:26,515 --> 00:16:30,002
Nous voulons que l'échelle et
puis le compenser un peu.

304
00:16:30,002 --> 00:16:33,165
Il se avère que ces D3 a.

305
00:16:33,165 --> 00:16:34,220
Ce est ce qu'on appelle une échelle.

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

307
00:16:37,410 --> 00:16:38,250
Donc, nous allons l'utiliser.

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

309
00:16:46,300 --> 00:16:49,670
>> La façon dont works-- je vais
tapez ceci et puis expliquer.

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

311
00:17:01,530 --> 00:17:02,450
Ce est une échelle.

312
00:17:02,450 --> 00:17:08,670
Qu'est-ce qu'il va faire, ce est, il sera sur la carte
les valeurs de 1 à 200 sur 20 à 600.

313
00:17:08,670 --> 00:17:10,990
Nous pouvons vérifier cela.

314
00:17:10,990 --> 00:17:13,329
Nous pouvons voir ici.

315
00:17:13,329 --> 00:17:21,704
>> Donc, si je le nourris 1-- un moment.

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

317
00:17:47,764 --> 00:17:48,555
Donnez-moi une seconde.

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

319
00:17:53,680 --> 00:17:55,080
Je dois avoir mal tapé il.

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

321
00:18:15,320 --> 00:18:15,990
Là vous allez.

322
00:18:15,990 --> 00:18:17,930
Je suis désolé.

323
00:18:17,930 --> 00:18:22,050
>> Alors, que va faire une échelle
est, il faudra une valeur

324
00:18:22,050 --> 00:18:24,930
et puis le convertir que,
étendre ce, de sorte qu'il

325
00:18:24,930 --> 00:18:27,320
remplit toute la gamme que vous demandez.

326
00:18:27,320 --> 00:18:32,910
Donc dans ce cas, si nous lui donnons une,
ça va mapper cette entrée sur 20.

327
00:18:32,910 --> 00:18:37,750
Et si nous lui donnons 200, ce est
aller à la carte que sur 600.

328
00:18:37,750 --> 00:18:40,460
Et quelque part entre les deux,
si nous obtenons 100, ce est

329
00:18:40,460 --> 00:18:44,610
va être quelque part
entre 20 et 600.

330
00:18:44,610 --> 00:18:51,480
>> Et bien sûr, maintenant ce est ce
nous devons supprimer ces disques codés

331
00:18:51,480 --> 00:18:53,402
choses que nous avons là.

332
00:18:53,402 --> 00:18:55,950
Donc, ce que nous voulons faire, ce est
prendre les données que nous sommes

333
00:18:55,950 --> 00:19:00,950
étant donné que les données individuelles
élément, et de passer à l'échelle en premier.

334
00:19:00,950 --> 00:19:02,635
Donc balance agrandissez-le.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, nous avons une petite erreur ici.

337
00:19:48,880 --> 00:19:50,120
Il nous manque des données.

338
00:19:50,120 --> 00:19:51,290
Là vous allez.

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

340
00:19:58,550 --> 00:19:59,550
Et qui étend dehors.

341
00:19:59,550 --> 00:20:01,383
>> Cela nous donne le même
résultat que nous avions avant,

342
00:20:01,383 --> 00:20:04,030
mais au lieu d'avoir celles
codé en dur contraintes.

343
00:20:04,030 --> 00:20:07,790
Et si la taille de notre
changements de toile, par exemple,

344
00:20:07,790 --> 00:20:11,790
si nous voulons avoir cette plus
400 pixels et il écrase sur,

345
00:20:11,790 --> 00:20:15,440
nous pouvons avoir over--
nous pouvons le développer, ou nous

346
00:20:15,440 --> 00:20:21,890
peut réduire cette marge gauche à
un peu moins ou plus de 20.

347
00:20:21,890 --> 00:20:25,470
Ces chiffres, ceux-ci codés en dur
chiffres font désormais sens pour nous.

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

349
00:20:28,110 --> 00:20:30,520
>> Et nous pourrions faire beaucoup plus
choses intéressantes ainsi.

350
00:20:30,520 --> 00:20:35,990
Ainsi, au lieu d'avoir un linéaire
échelle, nous pourrait vouloir connecter une échelle.

351
00:20:35,990 --> 00:20:37,840
Et cela nous donnera une échelle logarithmique.

352
00:20:37,840 --> 00:20:41,269
>> Alors maintenant, notre échelle, au lieu de
élargir simplement sur cette plage,

353
00:20:41,269 --> 00:20:42,810
ce est faire des choses plus sophistiquées.

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

355
00:20:48,790 --> 00:20:53,790
Au lieu d'avoir cette gamme dur
codé, et qui au lieu d'avoir 600,

356
00:20:53,790 --> 00:20:58,465
nous pourrions simplement utiliser la largeur,
afin de 20 à la largeur de moins 40,

357
00:20:58,465 --> 00:21:02,392
Deux fois la marge de l'autre côté.

358
00:21:02,392 --> 00:21:05,350
Et cela fait beaucoup plus de sens pour
quelqu'un qui pourrait regarder le code.

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

360
00:21:08,080 --> 00:21:11,850
>> Fait intéressant, les écailles deviennent
très, très sophistiqués ainsi.

361
00:21:11,850 --> 00:21:13,350
Ils font beaucoup de choses intéressantes.

362
00:21:13,350 --> 00:21:17,620
Donc, les échelles ne ont pas nécessairement
pour fonctionner seulement avec les numéros.

363
00:21:17,620 --> 00:21:18,955
Faisons une échelle de couleurs.

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

365
00:21:23,120 --> 00:21:26,120
>> Donc, notre gamme pourrait être--
notre domaine est de 1 à 200.

366
00:21:26,120 --> 00:21:28,220
Ce est la chose d'entrée.

367
00:21:28,220 --> 00:21:33,793
Mais nous pourrions mapper de
vert au rouge, par exemple.

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

369
00:21:39,710 --> 00:21:42,910
Et maintenant, si nous adoptons une,
nous allons obtenir vert.

370
00:21:42,910 --> 00:21:45,110
Si nous lui donnons 200, nous aurons rouge.

371
00:21:45,110 --> 00:21:49,480
Et si nous passons ce quelque chose entre les deux,
il va y avoir une combinaison de cela,

372
00:21:49,480 --> 00:21:52,520
quelque part sur le gradient
entre le vert et le rouge.

373
00:21:52,520 --> 00:21:55,210
>> Et au lieu d'avoir
ce genre de logique maladroit

374
00:21:55,210 --> 00:21:58,550
nous avons ici avec le
conditionnelle là,

375
00:21:58,550 --> 00:22:03,250
nous pourrions avoir quelque chose-- une
échelle linéaire entre les deux.

376
00:22:03,250 --> 00:22:07,100
Nous aimerions donc utiliser l'échelle que nous venons
créé, que nous avons appelé la couleur.

377
00:22:07,100 --> 00:22:09,060
Et avons décidé de D, qui
est notre élément de données.

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

379
00:22:14,250 --> 00:22:15,060
Et là nous allons.

380
00:22:15,060 --> 00:22:18,070
Nous avons une échelle de couleurs.

381
00:22:18,070 --> 00:22:18,940
>> Donc, ce est la cartographie.

382
00:22:18,940 --> 00:22:20,960
Donc, l'extrême gauche est complètement vert.

383
00:22:20,960 --> 00:22:22,560
L'extrême droite est complètement rouge.

384
00:22:22,560 --> 00:22:24,828
Et tout le reste
est une fonction de d.

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

386
00:22:33,369 --> 00:22:35,160
Nous avons une intéressante
visualisations ici.

387
00:22:35,160 --> 00:22:36,952
Mais nos données était un peu ennuyeux.

388
00:22:36,952 --> 00:22:39,410
Voyons voir ce que nous pourrions faire si
nous avions des données les plus intéressantes.

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

390
00:22:44,420 --> 00:22:50,500
>> Acte IV, Avec de travail
Data-- la première chose

391
00:22:50,500 --> 00:22:53,560
nous voulons faire pour rendre notre
visualisation plus intéressant

392
00:22:53,560 --> 00:22:56,140
est de déplacer les données ailleurs.

393
00:22:56,140 --> 00:22:58,310
Ce est très maladroit d'avoir
les données codées en dur ici.

394
00:22:58,310 --> 00:23:01,220
Et généralement, nous serons demandant
quelqu'un d'autre pour les données.

395
00:23:01,220 --> 00:23:05,400
Nous serons peut-être demandons au gouvernement,
le Bureau du recensement, ce est vos données

396
00:23:05,400 --> 00:23:10,170
puis tracer ou de demander que
une entité tierce partie pour certaines données

397
00:23:10,170 --> 00:23:13,330
puis la construction d'un
visualisation sur ce point.

398
00:23:13,330 --> 00:23:17,170
>> Donc la première chose que nous voulons faire
est que déplacer à un autre endroit.

399
00:23:17,170 --> 00:23:24,130
Donc, je vais créer un
déposer ici appelé data.json.

400
00:23:24,130 --> 00:23:25,600
JSON est le format de données.

401
00:23:25,600 --> 00:23:29,210
Vous ne avez pas d'en savoir beaucoup à ce sujet.

402
00:23:29,210 --> 00:23:33,210
Et nous allons copier le
peu de données que nous avons là,

403
00:23:33,210 --> 00:23:40,330
coller dans verbatim il, aller
Retour à notre code de visualisation

404
00:23:40,330 --> 00:23:45,362
ici, et utilisez cette fonction ici.

405
00:23:45,362 --> 00:23:46,820
Vous ne avez pas à connaître les détails.

406
00:23:46,820 --> 00:23:49,800
Mais ce que cela va faire est,
il trouvera ce fichier,

407
00:23:49,800 --> 00:23:51,780
chercher, et nous le retourner.

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

409
00:24:11,660 --> 00:24:15,220
Donc ce que cela fait est, il va
et obtenir le fichier data.json.

410
00:24:15,220 --> 00:24:18,570
Et puis tout le code qui est
retrait inside-- essentiellement,

411
00:24:18,570 --> 00:24:21,800
tout le code nous avons there-- sera
courir que lorsque nous obtenons les données.

412
00:24:21,800 --> 00:24:25,760
Et puis ça va fonctionner que
code avec les données que nous avons.

413
00:24:25,760 --> 00:24:28,870
Grande, nous avons une
visualisation qui interroge

414
00:24:28,870 --> 00:24:31,390
pour un peu de code quelque part
d'autre, ce qui est généralement

415
00:24:31,390 --> 00:24:36,110
où il interroge quelques données
ailleurs, ce qui est habituellement

416
00:24:36,110 --> 00:24:38,656
comment visualisations travaillent.

417
00:24:38,656 --> 00:24:41,400
>> Mais je veux revenir aux données.

418
00:24:41,400 --> 00:24:48,030
Ainsi, les données fondamentalement D3-- D3
consomme données qui est une liste de choses.

419
00:24:48,030 --> 00:24:53,000
D3 attend les données qui viennent d'être une liste
des choses, un ensemble de choses.

420
00:24:53,000 --> 00:24:58,780
Il ne importe pas ce que ces choses
sont, dans la mesure où ce est un tableau d'entre eux.

421
00:24:58,780 --> 00:25:02,460
>> Donc ici, par exemple, nous pourrions de
Bien sûr ont valeurs à virgule flottante.

422
00:25:02,460 --> 00:25:04,830
Nous pourrions avoir négatifs.

423
00:25:04,830 --> 00:25:09,400
D3 ne se soucie pas, si longtemps
car ce est une liste de choses.

424
00:25:09,400 --> 00:25:13,270
>> Comme les choses intéressantes que nous
pourrait avoir, nous pourrions aussi

425
00:25:13,270 --> 00:25:19,410
avoir une liste de chaînes comme ça.

426
00:25:19,410 --> 00:25:25,440
Donc, ce sont les titres Crimson
Je ai ramassé il ya quelques jours.

427
00:25:25,440 --> 00:25:29,220
Et peut-être vous pouvez trouver quelques intéressantes
choses au sujet de ces titres a.

428
00:25:29,220 --> 00:25:30,970
>> Encore une fois, ce est une liste de choses.

429
00:25:30,970 --> 00:25:32,360
D3 ne se soucie pas.

430
00:25:32,360 --> 00:25:35,572
Ces arriver à être une chaîne.

431
00:25:35,572 --> 00:25:36,530
Nous avons changé nos données.

432
00:25:36,530 --> 00:25:38,210
>> Revenons à notre visualisation.

433
00:25:38,210 --> 00:25:42,495
Maintenant, notre visualisation attend
soit l'entrée de chiffres.

434
00:25:42,495 --> 00:25:44,370
Nous allons donc avoir
de faire quelques changements.

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

436
00:25:47,180 --> 00:25:52,180
Ainsi, par exemple, tout d'abord, peut-être
nous voulons mettre ces cercles le long

437
00:25:52,180 --> 00:25:56,870
par la longueur de la manchette, la
nombre de caractères dans le titre.

438
00:25:56,870 --> 00:26:03,600
>> Donc, ce que nous ferons chaque fois que notre est--
fonction est appelée avec une chaîne,

439
00:26:03,600 --> 00:26:09,095
nous trouverons que ce est la longueur et
puis passer cette à l'échelle.

440
00:26:09,095 --> 00:26:11,550
La couleur, je vais revenir
qui au bleu d'acier.

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

442
00:26:19,060 --> 00:26:20,420
Et là nous allons.

443
00:26:20,420 --> 00:26:23,190
Nous avons une visualisation
manchettes de Crimson.

444
00:26:23,190 --> 00:26:25,500
>> Notre échelle est un hors bits.

445
00:26:25,500 --> 00:26:29,680
Supposons que la plus longue
titre est 100 caractères,

446
00:26:29,680 --> 00:26:32,244
de sorte que se étendre un peu.

447
00:26:32,244 --> 00:26:33,410
Et nous avons une visualisation.

448
00:26:33,410 --> 00:26:36,710
Il semble donc que la plupart des gros titres
sont assez rapprochés,

449
00:26:36,710 --> 00:26:38,750
en termes de ligne de caractère.

450
00:26:38,750 --> 00:26:41,200
Mais at-il vraiment une se démarque.

451
00:26:41,200 --> 00:26:46,660
>> Nous pourrions construire des outils
à explorer que plus.

452
00:26:46,660 --> 00:26:50,710
Mais quand je travaillais sur ce, je étais
curieux de savoir si, dans cet ensemble de données,

453
00:26:50,710 --> 00:26:53,880
manchettes avec un colon
en eux serait plus longue.

454
00:26:53,880 --> 00:26:55,770
Je suppose qu'ils le feraient.

455
00:26:55,770 --> 00:26:56,660
>> Donc, nous allons découvrir.

456
00:26:56,660 --> 00:27:00,650
Nous allons utiliser la couleur
chaîne comme nous le faisions avant,

457
00:27:00,650 --> 00:27:04,540
pour coder certains de savoir si
il ya un colon ou pas.

458
00:27:04,540 --> 00:27:07,220
Donc nous utiliserons à nouveau un sursis.

459
00:27:07,220 --> 00:27:09,350
Vous ne avez pas à connaître
les détails de cette,

460
00:27:09,350 --> 00:27:14,260
mais ce est ainsi, nous vérifions un
chaîne pour un caractère particulier

461
00:27:14,260 --> 00:27:16,355
en JavaScript, encore une fois, pas pertinent.

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

463
00:27:18,910 --> 00:27:23,270
>> Mais si nous ne trouvons pas un
colon, nous reviendrons vert.

464
00:27:23,270 --> 00:27:26,100
Et si nous le faisons, nous reviendrons rouge.

465
00:27:26,100 --> 00:27:29,010
Encore une fois, les titres qui
ont deux points sera rouge.

466
00:27:29,010 --> 00:27:34,980
Ce est ce que cela désigne: agréable.

467
00:27:34,980 --> 00:27:38,040
>> Il semble donc que mon
hypothèse est heurté.

468
00:27:38,040 --> 00:27:39,360
Il ya seulement deux.

469
00:27:39,360 --> 00:27:42,380
Nous ne avons que six points de données
et seulement deux ont eu deux points.

470
00:27:42,380 --> 00:27:45,510
Mais il semble un peu plus
sur l'extrémité inférieure, en fait.

471
00:27:45,510 --> 00:27:47,830
Manchettes avec deux points semblent
être généralement plus courte,

472
00:27:47,830 --> 00:27:52,370
au moins dans nos données set-- intéressant.

473
00:27:52,370 --> 00:27:55,830
>> Revenons à ce que
bleu acier et ensuite voir

474
00:27:55,830 --> 00:28:00,601
ce que nous pouvons faire avec encore
des données plus intéressantes.

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

476
00:28:04,370 --> 00:28:09,070
Encore une fois, je ai mentionné que
données D3 est une liste de choses.

477
00:28:09,070 --> 00:28:11,080
Nous avons vu de nombreux types de numéros.

478
00:28:11,080 --> 00:28:12,810
Nous avons vu cordes.

479
00:28:12,810 --> 00:28:15,700
Mais les choses peuvent également être des objets.

480
00:28:15,700 --> 00:28:20,080
>> Ils peuvent être des choses compliquées
qui comprennent beaucoup de choses.

481
00:28:20,080 --> 00:28:24,510
Pour dire que plus clairement,
dans la plupart des cas, nous

482
00:28:24,510 --> 00:28:28,384
vouloir construire chaque point de données comme
plus compliqué que de simplement une valeur.

483
00:28:28,384 --> 00:28:30,175
Si vous ne l'imaginez une
base de données sur les étudiants,

484
00:28:30,175 --> 00:28:32,470
il pourrait y avoir un étudiant
nom, une carte d'étudiant,

485
00:28:32,470 --> 00:28:36,370
et beaucoup de choses associé
avec un dossier en particulier,

486
00:28:36,370 --> 00:28:39,834
pas seulement une chaîne ou un nombre.

487
00:28:39,834 --> 00:28:40,750
Alors regardons cela.

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

489
00:28:55,180 --> 00:28:56,760
>> Ce est un de ces ensembles de données.

490
00:28:56,760 --> 00:28:59,090
Ce est un ensemble de données sur les séismes.

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

492
00:29:01,910 --> 00:29:08,430
Donc, tout ici sur notre liste ou un tableau
des choses contient beaucoup de choses lui-même.

493
00:29:08,430 --> 00:29:11,380
Ainsi, chaque point de données a une
et une magnitude de coordonnées.

494
00:29:11,380 --> 00:29:13,425
Et se coordonne
contenir deux choses.

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

496
00:29:15,960 --> 00:29:20,450
>> Ainsi, chaque jour est maintenant beaucoup plus
compliqué et beaucoup plus intéressant

497
00:29:20,450 --> 00:29:22,700
et contient beaucoup plus
informations intéressantes.

498
00:29:22,700 --> 00:29:26,730
Voyons nous pourrions construire sur cela.

499
00:29:26,730 --> 00:29:36,130
En revenant ici, encore une fois, à l'aide
notre visualisation du cercle de l'histogramme

500
00:29:36,130 --> 00:29:42,110
nous avons construit, nous allons voir si nous pouvons construire une
la visualisation de la distribution d'amplitude

501
00:29:42,110 --> 00:29:43,305
dans notre ensemble de données.

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

503
00:29:45,850 --> 00:29:48,660
>> Donc, ici, ce est le même concept.

504
00:29:48,660 --> 00:29:51,920
Mais maintenant, d contient plus de choses.

505
00:29:51,920 --> 00:29:54,780
d contient de nombreux éléments de données.

506
00:29:54,780 --> 00:29:57,946
Nous sommes tellement d arrière.

507
00:29:57,946 --> 00:29:59,670
D3 nous donne d.

508
00:29:59,670 --> 00:30:06,080
Et nous répondons en trouvant l'ampleur
de d puis passage que à l'échelle.

509
00:30:06,080 --> 00:30:08,490
>> Et puis nous devons changer
notre échelle, bien sûr.

510
00:30:08,490 --> 00:30:12,980
Donc grandeurs ne ont tout simplement pas
aller beaucoup plus de 10.

511
00:30:12,980 --> 00:30:15,485
En fait, il ne ya jamais eu
un tremblement de terre de magnitude 10.

512
00:30:15,485 --> 00:30:19,360
Mais ce est le genre de notre supérieure
fin, notre gamme supérieure.

513
00:30:19,360 --> 00:30:20,240
>> Rafraîchissons.

514
00:30:20,240 --> 00:30:22,990
Nice, nous avons une visualisation.

515
00:30:22,990 --> 00:30:25,490
Il est intéressant de note-- sorte
il existe deux points de données qui

516
00:30:25,490 --> 00:30:29,010
sont presque exactement les unes sur les
d'autre part, en termes de grandeur.

517
00:30:29,010 --> 00:30:31,350
Vous voyez ce par l'opacité que nous utilisons.

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

519
00:30:40,810 --> 00:30:42,690
>> Nous avons maintenant des données géographiques.

520
00:30:42,690 --> 00:30:44,710
Nous avons latitudes et longitudes.

521
00:30:44,710 --> 00:30:47,549
Nous pourrions peut-être faire quelque chose d'un
beaucoup plus intéressant avec cela.

522
00:30:47,549 --> 00:30:49,590
Voyons un peu plus
façon intéressante de visualiser

523
00:30:49,590 --> 00:30:53,500
cette plus compliqué
données que nous avons accès.

524
00:30:53,500 --> 00:31:04,950
>> Acte V, Mapping-- fondamentalement,
nous voulons les mettre sur une carte.

525
00:31:04,950 --> 00:31:07,690
Je veux dire, ce est là que cela va.

526
00:31:07,690 --> 00:31:13,130
Nous voulons encoder des informations sur le
position de ces lectures du tremblement de terre,

527
00:31:13,130 --> 00:31:16,350
ainsi leur ampleur,
parce que nous avons maintenant.

528
00:31:16,350 --> 00:31:21,310
Nous comprenons comment consommer
des données plus complexes.

529
00:31:21,310 --> 00:31:26,200
>> La première chose que nous ferons est
créer une carte, un fond de carte.

530
00:31:26,200 --> 00:31:29,360
Je vais passer par
très rapidement.

531
00:31:29,360 --> 00:31:30,560
Ce est le code délicate.

532
00:31:30,560 --> 00:31:33,110
Ce est un autre de ces
recettes que vous ne avez pas vraiment

533
00:31:33,110 --> 00:31:35,690
faut bien comprendre que vous pouvez utiliser.

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

535
00:31:38,510 --> 00:31:39,740
Mais ce est le code.

536
00:31:39,740 --> 00:31:43,580
Ce code crée ici une carte.

537
00:31:43,580 --> 00:31:45,730
>> Nous ne allons pas entrer dans le détail.

538
00:31:45,730 --> 00:31:54,210
Mais superficiellement, ce qu'il fait est,
il interroge ce fichier us.json, qui

539
00:31:54,210 --> 00:31:57,150
est un fichier de données comme
celle que nous avions auparavant.

540
00:31:57,150 --> 00:31:59,150
Ce est plus complexe, bien sûr.

541
00:31:59,150 --> 00:32:02,920
Mais dans ce cas, tout,
chaque point de données est cet état

542
00:32:02,920 --> 00:32:05,420
et a une liste des
latitudes et longitude

543
00:32:05,420 --> 00:32:10,500
qui définissent le polygone,
cette forme, cet état.

544
00:32:10,500 --> 00:32:13,280
>> Alors, que fera D3 est similaire
à ce que nous avons fait avant.

545
00:32:13,280 --> 00:32:18,140
Il demandera et
lier à un élément qui.

546
00:32:18,140 --> 00:32:20,890
Et il ya une fonction qui
permettra de cartographier cet élément sur,

547
00:32:20,890 --> 00:32:23,410
sur la base des latitudes et longitudes.

548
00:32:23,410 --> 00:32:24,580
Vous pouvez en lire plus à ce sujet.

549
00:32:24,580 --> 00:32:27,385
Et je le recommande.

550
00:32:27,385 --> 00:32:30,090
>> Il ya des liens à la
fin de ce code affiché.

551
00:32:30,090 --> 00:32:31,570
Et le code est commenté.

552
00:32:31,570 --> 00:32:34,050
Dans il existe des liens pour plus à ce sujet.

553
00:32:34,050 --> 00:32:36,590
Je vous recommande de regarder vers le haut.

554
00:32:36,590 --> 00:32:39,460
Mais ce qui nous préoccupe est
cette fonction de projection.

555
00:32:39,460 --> 00:32:41,210
Je veux passer par là.

556
00:32:41,210 --> 00:32:43,522
>> Tout d'abord, permettez-moi de vous montrer
vous que, oui, nous avons une carte.

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

558
00:32:47,300 --> 00:32:49,970
Les cartes sont cool.

559
00:32:49,970 --> 00:32:52,330
Alors regardons à ce
fonction de production.

560
00:32:52,330 --> 00:32:56,481
>> Projection est très
comme une échelle, échelles à nouveau.

561
00:32:56,481 --> 00:32:59,210
Alors, que la production pour
cette fonction de projection

562
00:32:59,210 --> 00:33:06,610
ne est, nous pourrions passer la longitude
latitudes-- et dans ce cas,

563
00:33:06,610 --> 00:33:09,590
ces valeurs sont ici le
lat-longs du bâtiment

564
00:33:09,590 --> 00:33:13,990
nous sommes assis dans le droit
maintenant-- de projection.

565
00:33:13,990 --> 00:33:20,560
Et la projection se convertir
en ce que les valeurs de pixel x et y.

566
00:33:20,560 --> 00:33:23,300
>> Donc, ce est faire la projection
est très similaire à notre échelle.

567
00:33:23,300 --> 00:33:27,270
Ce est en prenant nos latitudes et
longitude qui représente un ensemble de globe

568
00:33:27,270 --> 00:33:31,390
et le rétrécissement et que le dimensionnement
jusqu'à la place que nous voulons,

569
00:33:31,390 --> 00:33:33,510
que nous lui avons donné.

570
00:33:33,510 --> 00:33:35,220
Dans ce cas, nous sommes
passer ces valeurs.

571
00:33:35,220 --> 00:33:41,370
Et ce est de nous donner, ainsi que
sur votre écran signifie 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Toute Cet écran est de 700 pixels
de large, ce qui nous fait question ici,

573
00:33:46,250 --> 00:33:53,310
et 154 pixels vers le bas, que je
estimation est à peu près ici.

574
00:33:53,310 --> 00:33:57,250
>> Donc, en prenant ces lat-longs, qui
représenter quelque chose sur l'ensemble du globe

575
00:33:57,250 --> 00:34:02,850
et écrasant et se déplaçant qu'environ
nous valeurs X et Y de pixels donner,

576
00:34:02,850 --> 00:34:05,450
ce est la première chose qui est
fait dans ce code de la cartographie.

577
00:34:05,450 --> 00:34:07,920
Puis le reste de la
Code consomme les données

578
00:34:07,920 --> 00:34:14,310
puis mappe ces lat-longs
sur quelque chose sur votre écran.

579
00:34:14,310 --> 00:34:18,380
>> Mais nous allons utiliser cette projection
fonctions, car il se avère

580
00:34:18,380 --> 00:34:20,270
nous avons lat-Longs aspire ainsi.

581
00:34:20,270 --> 00:34:24,509
En regardant nos données, nous avons
latitudes et les coordonnées de longitude

582
00:34:24,509 --> 00:34:25,425
pour chaque observation.

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

584
00:34:28,131 --> 00:34:29,130
Donc, nous allons utiliser la projection.

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

586
00:34:33,250 --> 00:34:37,639
>> Donc regarder notre exposition,
nous voulons que notre exposition--

587
00:34:37,639 --> 00:34:39,590
nous avons une latitude et une longitude.

588
00:34:39,590 --> 00:34:40,770
Mais nous voulons valeurs de pixels.

589
00:34:40,770 --> 00:34:43,510
Et il se avère, nous avons exactement
ce que l'on want-- projection.

590
00:34:43,510 --> 00:34:46,239
Très bien comme nous étions
utilisant l'échelle ici,

591
00:34:46,239 --> 00:34:52,075
nous allons maintenant utiliser la projection
et il coordonne passer.

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

593
00:34:55,241 --> 00:34:56,949
Donc la première chose
nous nous sommes donc doing--

594
00:34:56,949 --> 00:35:01,520
obtention d, qui est une donnée individuelle
élément d'un tremblement de terre individuelle

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

596
00:35:02,370 --> 00:35:04,640
La première chose que nous faisons
est d'obtenir les coordonnées.

597
00:35:04,640 --> 00:35:06,150
Très bien, nous avons les coordonnées.

598
00:35:06,150 --> 00:35:09,160
>> La deuxième chose que nous faisons est
transmettre cela à la projection.

599
00:35:09,160 --> 00:35:13,440
Projection convertit ces coordonnées
dans des valeurs de pixel, x et y.

600
00:35:13,440 --> 00:35:16,680
Et puis la dernière chose que nous
vouloir faire est de simplement obtenir le x,

601
00:35:16,680 --> 00:35:19,342
qui ce cas est le premier.

602
00:35:19,342 --> 00:35:22,050
Ce est la première des deux choses
qui sont renvoyés par projection.

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

604
00:35:27,840 --> 00:35:29,630
>> Nous ferons la même chose pour y.

605
00:35:29,630 --> 00:35:34,960
Mais à la place, nous reviendrons
le second élément, le y.

606
00:35:34,960 --> 00:35:35,980
Préparez-vous à rafraîchir.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, caractère supplémentaire
ici-- agréable, nous avons

609
00:35:46,450 --> 00:35:51,730
un document des services de données qui est
dissimuler ce fichier JSON d'objets,

610
00:35:51,730 --> 00:35:57,560
faire une carte, et en changeant la
attribuer par rapport aux données

611
00:35:57,560 --> 00:35:59,600
à projeter sur un plan.

612
00:35:59,600 --> 00:36:00,840
Ce est vraiment intéressant.

613
00:36:00,840 --> 00:36:03,770
Ce est cool.

614
00:36:03,770 --> 00:36:05,640
>> Prenons un cran.

615
00:36:05,640 --> 00:36:08,795
Je veux dire, nous avons deux morceaux de
informations avec chaque point de données.

616
00:36:08,795 --> 00:36:10,000
Je veux dire, trois.

617
00:36:10,000 --> 00:36:12,540
Nous avons les coordonnées,
qui est un x et y.

618
00:36:12,540 --> 00:36:15,700
Et nous avons l'ampleur.

619
00:36:15,700 --> 00:36:17,420
>> Nous avons besoin d'encoder ampleur en quelque sorte.

620
00:36:17,420 --> 00:36:18,920
Nous avons beaucoup de canaux.

621
00:36:18,920 --> 00:36:20,370
Nous pouvons utiliser la couleur.

622
00:36:20,370 --> 00:36:21,890
Nous pouvons utiliser rayon.

623
00:36:21,890 --> 00:36:23,040
Nous pourrions utiliser l'opacité.

624
00:36:23,040 --> 00:36:25,540
Nous pourrions utiliser beaucoup de choses dans le code.

625
00:36:25,540 --> 00:36:29,180
Chacune de ces attributs et beaucoup
plus qui ne figurent pas là,

626
00:36:29,180 --> 00:36:33,065
parce qu'ils sont en option, on pourrait
utiliser pour encoder ces données, la course

627
00:36:33,065 --> 00:36:35,670
et toutes ces choses que je ai mentionnés.

628
00:36:35,670 --> 00:36:36,690
>> Faisons rayon.

629
00:36:36,690 --> 00:36:38,830
Je pense que le rayon est le plus intuitif.

630
00:36:38,830 --> 00:36:46,210
Encore une fois, nous le remplacerons que codées en dur
40 et faire quelques calculs.

631
00:36:46,210 --> 00:36:48,810
Nous allons utiliser à nouveau notre échelle favori.

632
00:36:48,810 --> 00:36:50,290
Et nous sommes passés d.

633
00:36:50,290 --> 00:36:55,850
Mais pas d parce que nous voulons l'ampleur
de d. d ne est que le point de données.

634
00:36:55,850 --> 00:36:57,430
Nous passerons l'ampleur à l'échelle.

635
00:36:57,430 --> 00:36:58,470
>> Essayons encore une fois.

636
00:36:58,470 --> 00:37:00,230
Ooh, il ne fonctionne pas.

637
00:37:00,230 --> 00:37:02,940
Pourquoi ne pas travailler?

638
00:37:02,940 --> 00:37:04,387
>> Alors ne oubliez pas quelle échelle.

639
00:37:04,387 --> 00:37:05,470
Regardons à l'échelle à nouveau.

640
00:37:05,470 --> 00:37:10,800
cartes à l'échelle de 1 à 10 sur
à 22 à 600, plus ou moins.

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

642
00:37:12,030 --> 00:37:14,730
Ce est pourquoi nous obtenons cela.

643
00:37:14,730 --> 00:37:18,420
>> Donc, nous voulons changer notre échelle
à quelque chose de plus raisonnable.

644
00:37:18,420 --> 00:37:22,610
Disons, nous voulons 0-60.

645
00:37:22,610 --> 00:37:25,340
60 est grand, mais 10 tremblements de terre
sont extrêmement rares.

646
00:37:25,340 --> 00:37:27,880
En fait, ils ne ont jamais eu lieu.

647
00:37:27,880 --> 00:37:31,830
>> Donc ce que cela va faire, ce est, il va prendre
notre grandeur qui va de 1 à 10

648
00:37:31,830 --> 00:37:34,490
et la carte sur l'étendre sur.

649
00:37:34,490 --> 00:37:37,370
Et le mapper à 0-60.

650
00:37:37,370 --> 00:37:38,840
Rafraîchissons.

651
00:37:38,840 --> 00:37:41,850
>> Nice, nous avons une visualisation.

652
00:37:41,850 --> 00:37:42,500
Ce est génial.

653
00:37:42,500 --> 00:37:43,736
Ce sont des données réelles.

654
00:37:43,736 --> 00:37:46,360
Vous remarquerez, dans mon petit jouet
par exemple, le plus grand tremblement de terre

655
00:37:46,360 --> 00:37:49,417
est juste au-dessus de nous.

656
00:37:49,417 --> 00:37:50,000
Mais ce est tout.

657
00:37:50,000 --> 00:37:54,422
Nous avons une date entraîné la visualisation
qui consomme les données

658
00:37:54,422 --> 00:37:56,255
et nous donne vraiment
informations intéressantes.

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

660
00:38:02,600 --> 00:38:06,420
Ouais, ajoutons
interactivité à elle.

661
00:38:06,420 --> 00:38:08,675
Je ai mentionné que ce était
la force forte de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Voici donc, pour chaque élément, nous sommes
décrivant un tas d'attributs.

664
00:38:15,060 --> 00:38:20,230
Mais nous pouvons aussi décrire ce que nous voulons
de se produire avec des éléments d'interactivité.

665
00:38:20,230 --> 00:38:26,190
Par exemple, nous pourrions décrire
ce qui se passe quand on la souris sur.

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

667
00:38:28,740 --> 00:38:33,640
Et très similaire que,
ça va prendre une fonction,

668
00:38:33,640 --> 00:38:36,700
très semblable à la
attributs que nous avions avant,

669
00:38:36,700 --> 00:38:44,650
où nous faisons quelque chose à la
élément lorsque nous survolez.

670
00:38:44,650 --> 00:38:47,100
>> Donc, première chose que nous devons
faire est de sélectionner cet élément,

671
00:38:47,100 --> 00:38:49,435
pour le trouver au fond, dans le navigateur.

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

673
00:38:57,090 --> 00:39:00,920
et alors nous pourrions définir
un attribut à elle.

674
00:39:00,920 --> 00:39:06,870
Donc ce que je fais ici, ce est, quand nous planons
sur quelque chose, nous aurons cet élément

675
00:39:06,870 --> 00:39:11,197
puis définissez son opacité retour
à 1, complètement opaque.

676
00:39:11,197 --> 00:39:12,488
Voyons voir à quoi ça ressemble.

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

678
00:39:29,430 --> 00:39:39,080
>> Il semble que nous avons une
virgule supplémentaire ici.

679
00:39:39,080 --> 00:39:42,420
Donc, si nous survolez ici, il est plein.

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

681
00:39:46,530 --> 00:39:48,960
Mais maintenant, bien sûr, il
reste pleine, parce que nous

682
00:39:48,960 --> 00:39:53,240
avoir pour décrire ce qui se passe
lorsque vous avez retiré de notre curseur.

683
00:39:53,240 --> 00:39:59,990
Donc, nous allons faire exactement cela sur
mouseout, par opposition à mouseover.

684
00:39:59,990 --> 00:40:06,399
>> Et nous allons le remettre à
ce que nous avions before-- 0,5.

685
00:40:06,399 --> 00:40:10,260
Et maintenant, nous tous les temps
stationnaire, on obtient un cercle complet.

686
00:40:10,260 --> 00:40:13,468
Il nous aide à voir ce que nous
nous sélectionnant essentiellement.

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

688
00:40:19,210 --> 00:40:22,860
>> Et maintenant, nous allons faire ce vraiment super.

689
00:40:22,860 --> 00:40:26,210
Disons le connecter à des données réelles.

690
00:40:26,210 --> 00:40:30,890
Donc, nous allons poser pourrait
USGS sur leurs données.

691
00:40:30,890 --> 00:40:35,630
Ainsi, le US Geological Survey
dispose de données sur les tremblements de terre.

692
00:40:35,630 --> 00:40:41,460
Ils ont une API publique qui est capable
à être consommés au format JSON.

693
00:40:41,460 --> 00:40:42,548
Alors, faisons cela.

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

695
00:40:49,730 --> 00:40:55,900
>> Donc, ce est un morceau de code qui
se connecte à l'API USGS.

696
00:40:55,900 --> 00:40:57,990
Et il ya un peu du traitement sur elle.

697
00:40:57,990 --> 00:41:02,200
Ce ne est pas pertinent, mais simplifie
à un format de données simple comme celui

698
00:41:02,200 --> 00:41:03,800
nous avions avant.

699
00:41:03,800 --> 00:41:08,140
Donc je me débarrasser de notre appel à
notre faux data.json au dossier.

700
00:41:08,140 --> 00:41:13,110
Et à la place, je vais appeler
l'USGS essentiellement.

701
00:41:13,110 --> 00:41:16,700
>> Rafraîchissons, agréable.

702
00:41:16,700 --> 00:41:21,260
Ce est, données réelles de la vie réelle
à partir de cette semaine pour les tremblements de terre.

703
00:41:21,260 --> 00:41:23,217
Ce est vraiment intéressant.

704
00:41:23,217 --> 00:41:25,050
Ce ne est pas surprenant
pour nous, mais il ya

705
00:41:25,050 --> 00:41:27,909
beaucoup de tremblements de terre sur le
West Coast en Californie.

706
00:41:27,909 --> 00:41:30,950
Mais je pensais que ce était très intéressant
qu'il y avait tant de tremblements de terre

707
00:41:30,950 --> 00:41:34,350
en Alaska, et apparemment,
ici dans le Midwest.

708
00:41:34,350 --> 00:41:37,630
Je veux dire, intéressant, et nous sommes bons.

709
00:41:37,630 --> 00:41:40,410
Ce est la conclusion.

710
00:41:40,410 --> 00:41:43,760
>> Mais fondamentalement, ce
est ce que D3 nous aide à faire.

711
00:41:43,760 --> 00:41:48,030
Il nous aide à prendre des données, bind
à des éléments dans les DOM,

712
00:41:48,030 --> 00:41:51,620
et ont ces éléments changent
en fonction des données,

713
00:41:51,620 --> 00:41:54,780
avoir ces attributs, tous les
plusieurs des caractéristiques des éléments,

714
00:41:54,780 --> 00:41:57,393
tous être utiles pour les chaînes
pour transmettre des informations.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 est un incroyablement puissant
Bibliothèque et étonnamment bien fonctionner.

717
00:42:09,290 --> 00:42:12,260
Ce est quelque chose de puissant.

718
00:42:12,260 --> 00:42:15,960
La visualisation des données est un
outil incroyablement puissant

719
00:42:15,960 --> 00:42:21,530
pour le transport aux personnes profondes
idées qui obtient à leur base

720
00:42:21,530 --> 00:42:25,430
et les aide à comprendre, dans
cette façon profonde et intuitive,

721
00:42:25,430 --> 00:42:29,760
comment les données des œuvres et comment
données changent notre vie.

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