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

2
00:00:00,780 --> 00:00:11,880
>> [Muziek]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Ik ben David
Chouinard en is D3.

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

5
00:00:17,700 --> 00:00:21,270
We gaan om te leren over D3 vandaag.

6
00:00:21,270 --> 00:00:25,020
D3 is een JavaScript-raamwerk
het bouwen van een hoge kwaliteit

7
00:00:25,020 --> 00:00:28,110
interactieve visualisaties voor het web.

8
00:00:28,110 --> 00:00:30,870
Dingen zoals wat we
zien in de achterkant van mij,

9
00:00:30,870 --> 00:00:34,230
we gaan leren om deze te maken
dingen, een soort van de basisprincipes van het.

10
00:00:34,230 --> 00:00:36,452
Maar het gaat om cool te zijn.

11
00:00:36,452 --> 00:00:38,160
Laten we beginnen
het maken van mooie foto's.

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

13
00:00:41,108 --> 00:00:44,350
We hebben meer demo's kregen
van de vooruitzichten beschikbaar.

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

15
00:00:48,040 --> 00:00:50,760
Laten we het doen.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- we gaan
om te beginnen met het maken van leuke dingen meteen.

17
00:00:58,700 --> 00:01:01,240
Allereerst links wij code.

18
00:01:01,240 --> 00:01:03,470
Aan de rechterkant, hebben we
het resultaat van onze code.

19
00:01:03,470 --> 00:01:04,900
Laten we gaan door het.

20
00:01:04,900 --> 00:01:05,780
>> Laten we een cirkel.

21
00:01:05,780 --> 00:01:08,570
Hoe klinkt dat?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
we net een cirkel.

23
00:01:14,934 --> 00:01:16,100
Je gelooft me niet, toch?

24
00:01:16,100 --> 00:01:18,190
Het is er niet.

25
00:01:18,190 --> 00:01:21,830
>> Dus wat we deden hier is,
SVG is scalable vector graphics.

26
00:01:21,830 --> 00:01:27,530
Dit is de manier waarop we vertellen dat de browser
maken vector graphics in de browser.

27
00:01:27,530 --> 00:01:30,740
Wat we precies goed nu deed
is een cirkel te bladeren toegevoegd.

28
00:01:30,740 --> 00:01:34,790
>> De belofte is dat de cirkel
vereist een beetje basis attributen

29
00:01:34,790 --> 00:01:36,850
voordat we daadwerkelijk kunnen zien.

30
00:01:36,850 --> 00:01:40,045
We moeten het vertellen haar x-positie,
de y-positie, de radius.

31
00:01:40,045 --> 00:01:43,310
We hebben niet een van die vertellen,
zodat we niet zien het nu.

32
00:01:43,310 --> 00:01:46,210
Maar laten we zeggen dat het spul.

33
00:01:46,210 --> 00:01:49,510
>> Dus in de eerste plaats, je hebt
om onze kring een naam te geven.

34
00:01:49,510 --> 00:01:53,070
Dus laten we het noemen cirkel.

35
00:01:53,070 --> 00:01:54,406
Onze kring heeft nu een naam.

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

37
00:01:57,230 --> 00:01:59,490
En laten we het een paar attributen.

38
00:01:59,490 --> 00:02:03,690
Hoe zit het cx zou x centreren, zodat
het middelpunt van de X-positie.

39
00:02:03,690 --> 00:02:06,730
Laten we zeggen, 200 voor 200 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Laten we het een y van 200 pixels ook.

41
00:02:10,220 --> 00:02:16,032
En een R, een straal van 40 pixels.

42
00:02:16,032 --> 00:02:16,950
Laten we nu eens zien.

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

44
00:02:21,740 --> 00:02:23,440
Ik kan niet spellen.

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

46
00:02:30,430 --> 00:02:31,520
>> Daar ga je.

47
00:02:31,520 --> 00:02:37,330
We hebben een cirkel op positie 200
pixels, 200 pixels, straal van 40 pixels.

48
00:02:37,330 --> 00:02:38,280
Wel cool, toch?

49
00:02:38,280 --> 00:02:38,988
We hebben een cirkel.

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

51
00:02:40,880 --> 00:02:42,670
>> Dus geen noodzaak om mee te volgen.

52
00:02:42,670 --> 00:02:45,790
Al deze voorbeelden allemaal
de code die ik vandaag doe

53
00:02:45,790 --> 00:02:51,300
zal online worden aangeboden aan het einde
in de vorm van interactieve voorbeelden

54
00:02:51,300 --> 00:02:54,010
met checkpoints op
elke handeling, enzovoort.

55
00:02:54,010 --> 00:02:55,160
>> Laten we doen meer spullen.

56
00:02:55,160 --> 00:02:58,901
Deze zwarte cirkel is echt lelijk.

57
00:02:58,901 --> 00:03:01,541
Het spijt me voor die fout
boodschappen daar.

58
00:03:01,541 --> 00:03:05,340
Daar gaan we.

59
00:03:05,340 --> 00:03:06,350
>> Laten we het een andere kleur.

60
00:03:06,350 --> 00:03:07,170
Hoe is dat?

61
00:03:07,170 --> 00:03:08,340
Ik wil staalblauw.

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

63
00:03:13,280 --> 00:03:16,030
Nou, onze cirkel van kleur veranderd.

64
00:03:16,030 --> 00:03:17,320
Dat is geweldig.

65
00:03:17,320 --> 00:03:31,330
Laten we het semi-transparante
too-- semi-transparant.

66
00:03:31,330 --> 00:03:33,670
>> Dus dit zijn attributen
we definiëren op de cirkel.

67
00:03:33,670 --> 00:03:36,774
Het eerste wat we deden is
zetten we een cirkel op de pagina.

68
00:03:36,774 --> 00:03:38,690
En dan zijn we het definiëren
een bos van attributen.

69
00:03:38,690 --> 00:03:41,610
Sommige van deze zijn vereist,
zoals CX, CY, en Radius.

70
00:03:41,610 --> 00:03:42,680
En anderen zijn optioneel.

71
00:03:42,680 --> 00:03:44,730
>> Er zijn veel meer attributen.

72
00:03:44,730 --> 00:03:46,760
Er is veel van hen.

73
00:03:46,760 --> 00:03:53,070
Zo zouden we hebben
beroerte als goed, een slag van rood.

74
00:03:53,070 --> 00:03:55,630
Maar laten verwijderen dat.

75
00:03:55,630 --> 00:04:00,450
We zijn terug van een cirkel, een blauwe cirkel.

76
00:04:00,450 --> 00:04:01,600
>> Dus laten we meer cirkels.

77
00:04:01,600 --> 00:04:02,810
Hoe is dat?

78
00:04:02,810 --> 00:04:04,665
Laten we een andere cirkel.

79
00:04:04,665 --> 00:04:05,985
Dit is spannend, toch?

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

81
00:04:09,630 --> 00:04:12,300
>> Dus zeg ik gewoon Copy-geplakt
wat we hadden al.

82
00:04:12,300 --> 00:04:13,570
Laten we het circle2.

83
00:04:13,570 --> 00:04:15,840
En laten we de exacte
hetzelfde en geef het

84
00:04:15,840 --> 00:04:20,450
attributen, aangezien een x positie 300.

85
00:04:20,450 --> 00:04:24,140
Yay, we hebben nu twee cirkels.

86
00:04:24,140 --> 00:04:27,240
>> En natuurlijk, we konden
actualiseert deze waarden.

87
00:04:27,240 --> 00:04:31,640
Ik kon het te zetten bij 400, en nu het beweegt.

88
00:04:31,640 --> 00:04:35,470
En omdat het is vervelend, laten we
verwijderen, zodat circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Het is nu weg.

91
00:04:40,730 --> 00:04:43,170
>> Dus wat we doen en
is gewoon erg, very-- dit

92
00:04:43,170 --> 00:04:46,030
is zeer vergelijkbaar met wat je
zou kunnen doen in jQuery, bijvoorbeeld.

93
00:04:46,030 --> 00:04:48,240
We zijn net manipuleren
de DOM, het heet.

94
00:04:48,240 --> 00:04:50,040
Je zou dat woord eerder gehoord.

95
00:04:50,040 --> 00:04:53,255
Wij creëren spul, het instellen
attributen op dingen, het verwijderen van spullen.

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

97
00:04:58,950 --> 00:05:02,360
>> Nu, hier is waar het interessant wordt.

98
00:05:02,360 --> 00:05:07,250
Dus later in de code, kunnen we nog steeds
verwijzen naar de oorspronkelijke cirkel hier.

99
00:05:07,250 --> 00:05:14,100
Dus laten we haar attribuut teruggezet naar cx.

100
00:05:14,100 --> 00:05:18,260
Laten we zeggen, de x positie 400.

101
00:05:18,260 --> 00:05:22,406
En ik ga om de overgang
dat, dus het is voor de hand liggend.

102
00:05:22,406 --> 00:05:23,360
Daar gaan we.

103
00:05:23,360 --> 00:05:24,780
>> Dus hebben we een cirkel toegevoegd.

104
00:05:24,780 --> 00:05:26,440
We zetten een aantal attributen.

105
00:05:26,440 --> 00:05:28,210
We voegden een andere cirkel, verwijderd.

106
00:05:28,210 --> 00:05:31,650
En dan zijn we modificeren
de oorspronkelijke cirkel.

107
00:05:31,650 --> 00:05:35,400
>> Maar hier is waar het wordt
een stuk interessanter.

108
00:05:35,400 --> 00:05:39,070
Niet alleen kunnen we stellen attributen
als gewoon waarden, kunnen we zeggen,

109
00:05:39,070 --> 00:05:41,610
hey, cirkel, ga naar positie 200.

110
00:05:41,610 --> 00:05:44,540
We kunnen ze ook als functies.

111
00:05:44,540 --> 00:05:48,850
>> Dus in plaats van het geven van 400 hier,
kunnen we een aantal berekeningen maken

112
00:05:48,850 --> 00:05:53,950
op de vlieg voor wat we
wil dat attribuut te zijn.

113
00:05:53,950 --> 00:05:56,580
Dus dit is hoe je zou uitdrukken.

114
00:05:56,580 --> 00:06:00,660
Wij zeggen, in plaats van 400, laat me
geven u een functie in plaats daarvan.

115
00:06:00,660 --> 00:06:04,180
En hier, in deze functie,
kunnen we elke gek berekening te maken.

116
00:06:04,180 --> 00:06:06,820
>> We kunnen de tijd nemen en
kijken naar iets anders

117
00:06:06,820 --> 00:06:11,230
en dynamisch beslissen
de cirkel welke waarde we willen.

118
00:06:11,230 --> 00:06:15,266
Zullen we gewoon opgeven
het een willekeurige x-positie?

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

120
00:06:20,360 --> 00:06:21,120
Dus dat is dat.

121
00:06:21,120 --> 00:06:25,490
>> Dus wat dat zegt is, voor
elke x, lopen deze functie.

122
00:06:25,490 --> 00:06:29,340
En wat we doen is het berekenen
sommige dingen, een willekeurige maal de breedte

123
00:06:29,340 --> 00:06:30,410
en terug te keren dat.

124
00:06:30,410 --> 00:06:34,765
Dus elke keer als we lopen dat, krijgen we een
cirkel die gaat naar een willekeurige plaats.

125
00:06:34,765 --> 00:06:36,394
Het is wel cool.

126
00:06:36,394 --> 00:06:38,310
Ik voel me alsof ik kon kijken
op dit voor een beetje.

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

128
00:06:44,274 --> 00:06:46,440
We beginnen te krijgen
hier iets interessant.

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

130
00:06:49,120 --> 00:06:51,390
Laten we dit nu data driven.

131
00:06:51,390 --> 00:06:53,420
Er is geen data hier.

132
00:06:53,420 --> 00:06:54,482
Laten we dat veranderen.

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

134
00:06:57,440 --> 00:07:12,140
>> Act II, Data Driven Documents--
Dus laten we terugkeren naar hier.

135
00:07:12,140 --> 00:07:15,340
En laten we gewoon ontdoen van circle2,
want we zijn gewoon het toevoegen en verwijderen

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

137
00:07:15,840 --> 00:07:17,382
Zodat we niet echt nodig hebben.

138
00:07:17,382 --> 00:07:21,421
We moeten hier een stuk slimmer zijn.

139
00:07:21,421 --> 00:07:23,170
Laten we zeggen, we hebben
sommige gegevens van een soort.

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

141
00:07:31,540 --> 00:07:40,020
Eén moment-- laten we zeggen,
hadden we gegevens van dit formulier.

142
00:07:40,020 --> 00:07:41,800
We hadden een array, net
een bos van nummers.

143
00:07:41,800 --> 00:07:45,750
We hebben zeven nummers hier,
wat deze represent-- hoeveelheid

144
00:07:45,750 --> 00:07:48,810
bij mensen bankrekening, hoe
veel weegt ze, god weet wat.

145
00:07:48,810 --> 00:07:51,310
>> Deze getallen zijn, en we
willen onze kringen gebruiken

146
00:07:51,310 --> 00:07:53,240
die aantallen andere manier vertegenwoordigen.

147
00:07:53,240 --> 00:07:55,515
We willen binden ons
cirkels die nummers.

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

149
00:07:58,750 --> 00:07:59,626
Dus wat we doen.

150
00:07:59,626 --> 00:08:01,500
Laten we zeggen, we willen een
cirkel voor elk nummer.

151
00:08:01,500 --> 00:08:03,590
We konden de oude doen
ding waren we doing--

152
00:08:03,590 --> 00:08:06,020
cirkel append en circle2 en circle3.

153
00:08:06,020 --> 00:08:10,020
Maar dit uit de hand loopt, en
er is veel van het herhalen van de logica.

154
00:08:10,020 --> 00:08:12,760
>> Dus laten we slimmer met dat.

155
00:08:12,760 --> 00:08:17,810
In plaats van de var cirkel
svg.append dat we gewoon waren gebruikt,

156
00:08:17,810 --> 00:08:21,580
we gaan gebruiken
deze kleine blok hier.

157
00:08:21,580 --> 00:08:24,510
Ik wil niet gaan diepgaande
in wat al deze onderdelen doen.

158
00:08:24,510 --> 00:08:26,020
En het is een soort van een geavanceerd onderwerp.

159
00:08:26,020 --> 00:08:27,830
En ik wou dat ik het kon.

160
00:08:27,830 --> 00:08:31,370
>> Maar het belangrijkste om te recognize-- en
zie je heel vaak in D3 code.

161
00:08:31,370 --> 00:08:36,840
Dit blok tekst elementaire
creëert zo veel kringen

162
00:08:36,840 --> 00:08:41,360
aangezien er gegevenselementen
in deze array hier.

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

164
00:08:53,420 --> 00:08:55,780
Dus creëert zoveel
kringen als er elementen.

165
00:08:55,780 --> 00:08:58,520
Het gaat om ons te maken zeven cirkels.

166
00:08:58,520 --> 00:09:01,710
En het doet een heel, heel belangrijk ding.

167
00:09:01,710 --> 00:09:02,460
Dus laten we lopen dat.

168
00:09:02,460 --> 00:09:05,460
Laten verwijderen onze andere cirkel.

169
00:09:05,460 --> 00:09:09,565
Laten we gewoon dit commentaar
deel uit en opnieuw uitvoeren dit.

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

171
00:09:13,840 --> 00:09:15,260
>> Daar gaan we.

172
00:09:15,260 --> 00:09:18,030
Dus onze kring is hier een
stuk donkerder, omdat we

173
00:09:18,030 --> 00:09:20,720
zeven cirkels, een
bovenop de andere.

174
00:09:20,720 --> 00:09:25,425
We hebben zojuist zeven cirkels, één
elk voor elk van deze gegevenselementen.

175
00:09:25,425 --> 00:09:28,860
Maar er is een belangrijk ding dat gebeurd
met dit fragment hier.

176
00:09:28,860 --> 00:09:31,030
>> Het is dat de gegevens werd gebonden.

177
00:09:31,030 --> 00:09:33,440
Dus ieder van
deze gegevenselementen

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, was gebonden
een bijzondere categorie.

179
00:09:38,830 --> 00:09:40,960
Zodat deze niet alleen gemaakt
een bos van cirkels

180
00:09:40,960 --> 00:09:43,420
maar stropdassen die twee dingen samen.

181
00:09:43,420 --> 00:09:48,740
>> En in de toekomst, omdat we gecreëerd
die kringen met deze D3 functie,

182
00:09:48,740 --> 00:09:52,430
Als ik je een cirkel, je kan
geef mij de gegevens die ermee verbonden zijn.

183
00:09:52,430 --> 00:09:53,280
Dus we kunnen vragen D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, ik heb deze cirkel.

185
00:09:54,840 --> 00:09:57,350
Wat is de gegevens die de cirkel heeft?

186
00:09:57,350 --> 00:10:01,290
En D3 zou ons vertellen 10 of 45 of 105.

187
00:10:01,290 --> 00:10:02,380
>> Deze dingen zijn gebonden.

188
00:10:02,380 --> 00:10:04,490
Dat is een zeer, zeer fundamentele concept.

189
00:10:04,490 --> 00:10:06,070
Laten we eens kijken naar dat.

190
00:10:06,070 --> 00:10:12,210
>> Dus de manier waarop we zouden dus vraag D3--
Dit is relevant voor,

191
00:10:12,210 --> 00:10:16,620
maar geloof me op.

192
00:10:16,620 --> 00:10:17,620
Dit is hoe wij vragen D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, geef mij de eerste
cirkel die je kunt vinden.

194
00:10:21,312 --> 00:10:23,580
Geef me de eerste cirkel die u kunt vinden.

195
00:10:23,580 --> 00:10:29,660
En dan kunnen we D3 vragen, wat is
de gegevens op dat, als dit, 10.

196
00:10:29,660 --> 00:10:33,380
>> Dus we gewoon vragen D3, vinden mij
de eerste cirkel die u kunt vinden.

197
00:10:33,380 --> 00:10:34,400
Wat is haar gegevens?

198
00:10:34,400 --> 00:10:36,650
10, dat inderdaad onze
eerste gegevenselement.

199
00:10:36,650 --> 00:10:42,150
We kunnen het vragen, hey, D3,
ons vinden onze derde cirkel.

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

201
00:10:44,450 --> 00:10:45,740
Waarom is dit echt belangrijk?

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

203
00:10:49,790 --> 00:10:52,250
>> Dus hier, ik noemde
we functies kunnen gebruiken.

204
00:10:52,250 --> 00:10:54,910
En ik zei dat was
een zeer krachtig ding.

205
00:10:54,910 --> 00:11:03,070
Dus niet alleen kan onze functies dingen te doen
zoals sommige berekeningen, bijvoorbeeld,

206
00:11:03,070 --> 00:11:09,170
retourneren een willekeurig getal, kan
Ook gebaseerd op de gegevens doen.

207
00:11:09,170 --> 00:11:11,550
Dit is wat data driven documenten betekenen.

208
00:11:11,550 --> 00:11:13,750
Dat is wat D3 voor staat.

209
00:11:13,750 --> 00:11:17,800
>> Dus dit x postition-- plaats
van gewoon te zeggen, alle cirkels,

210
00:11:17,800 --> 00:11:21,735
krijgen x-positie 200, we
zou het een functie te geven.

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

212
00:11:26,140 --> 00:11:30,140
En hier kunnen we enkele berekening te maken.

213
00:11:30,140 --> 00:11:33,710
en d staat hier op zijn plaats voor de gegevens.

214
00:11:33,710 --> 00:11:36,120
Dus elke keer dat we hebben
een cirkel, in principe,

215
00:11:36,120 --> 00:11:37,750
D3 deze zeven cirkels creëren.

216
00:11:37,750 --> 00:11:38,500
En voor elke

217
00:11:38,500 --> 00:11:41,920
>> cirkel, het gaat om te gaan, he,
circle1 wat is je x-positie.

218
00:11:41,920 --> 00:11:45,210
Voorheen waren we
altijd het beantwoorden van 200.

219
00:11:45,210 --> 00:11:48,630
Maar nu, elke keer D3 vraagt
ons wat is je x-positie,

220
00:11:48,630 --> 00:11:51,790
het gaat om ons-- geven we
die cirkel, dus we hebben de gegevens.

221
00:11:51,790 --> 00:11:55,290
Het zal ons de gegevens te geven en zeggen:
wat wil je de expositie te zijn,

222
00:11:55,290 --> 00:11:57,120
op basis van die gegevens.

223
00:11:57,120 --> 00:11:59,590
>> Laten we gewoon terug de feitelijke gegevens.

224
00:11:59,590 --> 00:12:04,910
Dus als we deze draaien, dit geeft
ons data driven documenten.

225
00:12:04,910 --> 00:12:08,040
De cirkels zijn gebaseerd
in relatie position--

226
00:12:08,040 --> 00:12:11,120
ze basen als functie van de gegevens.

227
00:12:11,120 --> 00:12:13,100
>> Dus voor de eerste cirkel,
D3 zet een cirkel.

228
00:12:13,100 --> 00:12:16,770
En dan D3 ons vraagt, wat doen
u wilt dat de expositie te zijn.

229
00:12:16,770 --> 00:12:19,620
En we gewoon zeggen, ongeacht de data is.

230
00:12:19,620 --> 00:12:21,185
Maak de expositie 10.

231
00:12:21,185 --> 00:12:26,320
>> Dan vraagt ​​het, wat wil je de
blootstelling aan voor de tweede cirkel.

232
00:12:26,320 --> 00:12:27,270
En wij beantwoorden, 45.

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

234
00:12:30,000 --> 00:12:32,230
En wij, natuurlijk, kan
maken hier enig rekenwerk.

235
00:12:32,230 --> 00:12:35,510
Ik vind dat die kringen
zijn soort gepropt up.

236
00:12:35,510 --> 00:12:38,965
>> Dus vermenigvuldig het met 3, gegevens te vermenigvuldigen met 3.

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

238
00:12:41,870 --> 00:12:43,840
Onze kring ben net uitgebreid uit.

239
00:12:43,840 --> 00:12:46,730
Onze waarde werd verdrievoudigd.

240
00:12:46,730 --> 00:12:51,010
>> De cirkel is echt op de rand,
dus laten we misschien soort van offset het.

241
00:12:51,010 --> 00:12:53,632
Laten we zeggen, met 20.

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

243
00:12:56,070 --> 00:12:57,590
>> Dit is een data visualisatie.

244
00:12:57,590 --> 00:13:01,767
Het is een zeer basic één, maar dit
geeft ons enig inzicht in onze data.

245
00:13:01,767 --> 00:13:04,600
Het vertelt ons dat, bijvoorbeeld, hebben we
hebben een kleine cluster van elementen.

246
00:13:04,600 --> 00:13:06,340
En we hebben een grote uitschieter hier.

247
00:13:06,340 --> 00:13:10,830
Dit geeft ons wat informatie
over de verdeling.

248
00:13:10,830 --> 00:13:20,830
>> Als we bijvoorbeeld veranderen
de gegevens tot 150 hier en vernieuwen,

249
00:13:20,830 --> 00:13:22,630
onze visualisatie wordt veranderd.

250
00:13:22,630 --> 00:13:24,285
Dit document is data driven.

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

252
00:13:32,640 --> 00:13:36,180
>> Dus natuurlijk, al deze elementen,
al deze eigenschappen hier

253
00:13:36,180 --> 00:13:38,430
kunnen we een functie te gebruiken, niet
alleen de cijfers, niet alleen

254
00:13:38,430 --> 00:13:39,900
de x en y posities.

255
00:13:39,900 --> 00:13:42,120
Zo kunnen we een functie voor de kleur.

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

257
00:13:45,260 --> 00:13:46,360
Dus we zullen hetzelfde doen.

258
00:13:46,360 --> 00:13:49,360
We zullen het een functie te geven.

259
00:13:49,360 --> 00:13:52,320
>> En laten we zeggen, we konden hebben
conditionals in onze functie.

260
00:13:52,320 --> 00:13:54,770
Deze functie kan worden
honderd van regels lang.

261
00:13:54,770 --> 00:13:57,150
Het kan heel, heel ingewikkelde dingen te doen.

262
00:13:57,150 --> 00:13:59,080
>> Dus laten we hier een if-statement.

263
00:13:59,080 --> 00:14:03,420
Laten we zeggen, als onze gegevens minder
dan 50, dat is wat drempel

264
00:14:03,420 --> 00:14:05,817
dat we geïnteresseerd zijn
in een of andere reden.

265
00:14:05,817 --> 00:14:06,650
Laten we het groen.

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

267
00:14:09,830 --> 00:14:15,320
Anders laten we het rood.

268
00:14:15,320 --> 00:14:16,110
Hoe is dat?

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
>> Dus onze data visualisatie begint
om meer interessante informatie over te brengen

272
00:14:24,860 --> 00:14:26,727
op vele kanalen.

273
00:14:26,727 --> 00:14:28,560
Dus nu weten we een beetje
over de verdeling.

274
00:14:28,560 --> 00:14:31,768
En we weten dat er een soort van
afgesneden op 50 dat we geïnteresseerd zijn in.

275
00:14:31,768 --> 00:14:35,630
We weten dat er twee gegevenspunten
beneden die drempel en de meeste

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

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

278
00:14:41,510 --> 00:14:46,160
>> Dus als een laatste stap, deze gegevens hier
het is zeer zeldzaam om dit te zien als dat.

279
00:14:46,160 --> 00:14:52,610
Dus laten we gaan het gewoon uit aan een variabele
want dat is schoner, zoals deze.

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

281
00:15:02,980 --> 00:15:05,197
En dan gebruiken we die variabele hier.

282
00:15:05,197 --> 00:15:06,280
Het is precies hetzelfde.

283
00:15:06,280 --> 00:15:07,280
Het is gewoon een beetje schoner.

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

285
00:15:25,300 --> 00:15:35,300
>> Next up, Act III, Scales--
Dus een probleem rechts

286
00:15:35,300 --> 00:15:38,920
hier is, als we veranderen onze
gegevens in dit 200 value--

287
00:15:38,920 --> 00:15:41,685
als we veranderen naar 400
of iets en vernieuwen,

288
00:15:41,685 --> 00:15:44,540
dan is deze waarde ging gewoon offscreen.

289
00:15:44,540 --> 00:15:49,040
Dus onze logica hier
van hoe we dat doen de tijden 3

290
00:15:49,040 --> 00:15:52,570
en 20, om het uit te spreiden en dan
offset het een beetje is echt onhandig.

291
00:15:52,570 --> 00:15:54,150
>> Wat betekenen deze cijfers betekenen?

292
00:15:54,150 --> 00:15:55,400
Ze zijn gewoon er hard gecodeerd.

293
00:15:55,400 --> 00:15:58,830
En ze zijn heel erg gebonden aan de gegevens.

294
00:15:58,830 --> 00:16:00,550
We willen een data-driven document.

295
00:16:00,550 --> 00:16:05,460
Wij willen een zeer flexibel document,
dat gegeven data, past het

296
00:16:05,460 --> 00:16:07,900
en vertegenwoordigt het.

297
00:16:07,900 --> 00:16:11,330
>> Wat we eigenlijk nodig hebben is, dat we
hebben deze reeks getallen 10.

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

299
00:16:12,640 --> 00:16:17,630
En dat willen we in kaart dat uit op
de breedte, de volledige breedte in.

300
00:16:17,630 --> 00:16:20,620
Dus hebben we de reeks
getallen gaande van 0 tot 100.

301
00:16:20,620 --> 00:16:24,980
En we hebben deze campus I gaat
20-700, in dit geval.

302
00:16:24,980 --> 00:16:26,515
>> We soort wilt toewijzen dat op.

303
00:16:26,515 --> 00:16:30,002
We willen schalen die op en
dan gecompenseerd het een beetje.

304
00:16:30,002 --> 00:16:33,165
Het blijkt dat D3 heeft deze.

305
00:16:33,165 --> 00:16:34,220
Het heet een schaal.

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

307
00:16:37,410 --> 00:16:38,250
Dus laten we het gebruiken.

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

309
00:16:46,300 --> 00:16:49,670
>> De manier waarop works-- ik ga
typt u deze op en leggen het dan.

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

311
00:17:01,530 --> 00:17:02,450
Dit is een schaal.

312
00:17:02,450 --> 00:17:08,670
Wat het zal doen is, zal het in kaart brengen
waarden van 1 tot 200 op 20-600.

313
00:17:08,670 --> 00:17:10,990
Kunnen we controleren dat.

314
00:17:10,990 --> 00:17:13,329
We kunnen hier zien dat.

315
00:17:13,329 --> 00:17:21,704
>> Dus als ik voer het 1-- ene moment.

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

317
00:17:47,764 --> 00:17:48,555
Geef me een seconde.

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

319
00:17:53,680 --> 00:17:55,080
Ik moet het hebben typefout gemaakt.

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

321
00:18:15,320 --> 00:18:15,990
Daar ga je.

322
00:18:15,990 --> 00:18:17,930
Het spijt me dat.

323
00:18:17,930 --> 00:18:22,050
>> Dus wat een schaal zal doen
wordt, zal het een waarde te nemen

324
00:18:22,050 --> 00:18:24,930
en zetten dan dat,
uit te breiden dat uit, dus het

325
00:18:24,930 --> 00:18:27,320
vult het volledige scala je vraagt.

326
00:18:27,320 --> 00:18:32,910
Dus in dit geval, als we het één,
het gaat om in kaart die uit op 20.

327
00:18:32,910 --> 00:18:37,750
En als we er 200, het is
ga naar de kaart dat op tot 600.

328
00:18:37,750 --> 00:18:40,460
En ergens tussenin,
als we 100, het is

329
00:18:40,460 --> 00:18:44,610
ga ergens zijn
tussen 20 en 600.

330
00:18:44,610 --> 00:18:51,480
>> En natuurlijk, nu is dit wat
we nodig hebben om die hard gecodeerd verwijderen

331
00:18:51,480 --> 00:18:53,402
dingen die we hebben daar.

332
00:18:53,402 --> 00:18:55,950
Dus wat we willen doen is
neem de gegevens die we

333
00:18:55,950 --> 00:19:00,950
gegeven, dat individuele gegevens
element, en door te geven aan de eerste schaal.

334
00:19:00,950 --> 00:19:02,635
Dus schaal zal het opschalen.

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

336
00:19:27,020 --> 00:19:48,880
>> Goed-- Oh, we hebben een beetje fout hier.

337
00:19:48,880 --> 00:19:50,120
We missen gegevens.

338
00:19:50,120 --> 00:19:51,290
Daar ga je.

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

340
00:19:58,550 --> 00:19:59,550
En dat breidt het uit.

341
00:19:59,550 --> 00:20:01,383
>> Dat geeft ons hetzelfde
resultaat dat we eerder hadden,

342
00:20:01,383 --> 00:20:04,030
maar in plaats van de
hard gecodeerd beperkingen.

343
00:20:04,030 --> 00:20:07,790
En als de grootte van onze
canvas wijzigingen, bijvoorbeeld,

344
00:20:07,790 --> 00:20:11,790
als we willen dit over hebben
400 pixels en het squishes uit,

345
00:20:11,790 --> 00:20:15,440
we kunnen het over-- hebben
kunnen we het uit te breiden, of we

346
00:20:15,440 --> 00:20:21,890
kan dit linkermarge te reduceren tot
iets minder of meer dan 20.

347
00:20:21,890 --> 00:20:25,470
Deze cijfers, die hard gecodeerd
getallen maken het nu zin ​​om ons.

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

349
00:20:28,110 --> 00:20:30,520
>> En konden we veel meer doen
interessante dingen ook.

350
00:20:30,520 --> 00:20:35,990
Dus in plaats van een lineaire
schaal, zouden we willen een schaal loggen.

351
00:20:35,990 --> 00:20:37,840
En dat zal ons een log schaal is.

352
00:20:37,840 --> 00:20:41,269
>> Dus nu onze schaal, in plaats van
gewoon uitbreiding buiten dat bereik,

353
00:20:41,269 --> 00:20:42,810
het doet meer geavanceerde dingen.

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

355
00:20:48,790 --> 00:20:53,790
In plaats van deze reeks harde
gecodeerd en in plaats van dat 600,

356
00:20:53,790 --> 00:20:58,465
wij zouden willen gewoon gebruik maken van de breedte,
dus 20 de breedte minus 40,

357
00:20:58,465 --> 00:21:02,392
2 keer de marge aan de andere kant.

358
00:21:02,392 --> 00:21:05,350
En dit maakt veel meer zin om
iemand die zou kunnen kijken naar de code.

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

360
00:21:08,080 --> 00:21:11,850
>> Interessant is dat de weegschaal te krijgen
zeer, zeer geavanceerde als goed.

361
00:21:11,850 --> 00:21:13,350
Ze doen veel interessante dingen.

362
00:21:13,350 --> 00:21:17,620
Dus schalen niet noodzakelijk
om te werken gewoon met cijfers.

363
00:21:17,620 --> 00:21:18,955
Laten we een kleurenschaal.

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

365
00:21:23,120 --> 00:21:26,120
>> Dus ons assortiment kon be--
onze domein is 1 tot 200.

366
00:21:26,120 --> 00:21:28,220
Dat is de ingang ding.

367
00:21:28,220 --> 00:21:33,793
Maar we zouden willen in kaart uit
groen naar rood, bijvoorbeeld.

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

369
00:21:39,710 --> 00:21:42,910
En nu, als we langs het 1,
we gaan groen te krijgen.

370
00:21:42,910 --> 00:21:45,110
Als we geven 200, we krijgen rood.

371
00:21:45,110 --> 00:21:49,480
En als we langs het iets daar tussenin,
het gaat om een ​​aantal mix van dat zijn,

372
00:21:49,480 --> 00:21:52,520
ergens op het verloop
tussen groen en rood.

373
00:21:52,520 --> 00:21:55,210
>> En in plaats van het hebben van
dit soort onhandig logica

374
00:21:55,210 --> 00:21:58,550
We hebben hier met de
voorwaardelijk recht daar,

375
00:21:58,550 --> 00:22:03,250
we konden hebben something-- een
lineaire schaal tussen die.

376
00:22:03,250 --> 00:22:07,100
Dus zouden we de schaal gebruiken we gewoon
gecreëerd die we noemen kleur.

377
00:22:07,100 --> 00:22:09,060
En we zouden het eens te D, die
is onze gegevenselement.

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

379
00:22:14,250 --> 00:22:15,060
En daar gaan we.

380
00:22:15,060 --> 00:22:18,070
We hebben een kleur schaal.

381
00:22:18,070 --> 00:22:18,940
>> Dus dit is mapping.

382
00:22:18,940 --> 00:22:20,960
Dus de uiterst links is volledig groen.

383
00:22:20,960 --> 00:22:22,560
Uiterst rechts is helemaal rood.

384
00:22:22,560 --> 00:22:24,828
En alles daar tussenin
is een functie van d.

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

386
00:22:33,369 --> 00:22:35,160
We hebben een interessante
visualisaties hier.

387
00:22:35,160 --> 00:22:36,952
Maar onze gegevens was een beetje saai.

388
00:22:36,952 --> 00:22:39,410
Laten we eens kijken wat we konden doen als
we hadden meer interessante gegevens.

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

390
00:22:44,420 --> 00:22:50,500
>> Act IV, het werken met
Data-- het eerste wat

391
00:22:50,500 --> 00:22:53,560
we willen doen om onze
visualisatie interessanter

392
00:22:53,560 --> 00:22:56,140
is de data ergens anders heen.

393
00:22:56,140 --> 00:22:58,310
Het is erg onhandig om te hebben
de gegevens die hier hard gecodeerd.

394
00:22:58,310 --> 00:23:01,220
En in het algemeen, zullen we vragen
iemand andere voor gegevens.

395
00:23:01,220 --> 00:23:05,400
We zullen misschien moeten vragen van de overheid,
het Census Bureau, wat is uw gegevens

396
00:23:05,400 --> 00:23:10,170
en dan plotten dat of vragen
sommige van derden entiteit voor sommige gegevens

397
00:23:10,170 --> 00:23:13,330
en vervolgens bouwen van een
visualisatie op dat.

398
00:23:13,330 --> 00:23:17,170
>> Dus het eerste wat we willen doen
is verplaatst dat ergens anders.

399
00:23:17,170 --> 00:23:24,130
Dus ik ga een te creëren
bestand hier genoemd data.json.

400
00:23:24,130 --> 00:23:25,600
JSON is het dataformaat.

401
00:23:25,600 --> 00:23:29,210
Je hoeft niet veel van weten.

402
00:23:29,210 --> 00:23:33,210
En we gaan het kopiëren
weinig gegevens we daar hebben,

403
00:23:33,210 --> 00:23:40,330
plak het daar letterlijk, gaan
terug naar onze visualisatie code

404
00:23:40,330 --> 00:23:45,362
hier, en gebruik deze functie hier.

405
00:23:45,362 --> 00:23:46,820
Je hoeft niet om de details te kennen.

406
00:23:46,820 --> 00:23:49,800
Maar wat dit zal doen is,
het zal dat bestand te vinden,

407
00:23:49,800 --> 00:23:51,780
hem te halen, en terug te sturen naar ons.

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

409
00:24:11,660 --> 00:24:15,220
Dus wat dit doet is, het gaat
en krijg de data.json bestand.

410
00:24:15,220 --> 00:24:18,570
En dan al de code dat is
ingesprongen inside-- wezen,

411
00:24:18,570 --> 00:24:21,800
alle code die we hebben er-- zal
draaien alleen als we de gegevens terug.

412
00:24:21,800 --> 00:24:25,760
En dan is het gaan lopen dat
code met de gegevens die we hebben.

413
00:24:25,760 --> 00:24:28,870
Geweldig, we hebben een
visualisatie die query

414
00:24:28,870 --> 00:24:31,390
voor sommige code ergens
anders, die meestal

415
00:24:31,390 --> 00:24:36,110
waar het vraagt ​​een aantal gegevens uit
ergens anders, gewoonlijk

416
00:24:36,110 --> 00:24:38,656
hoe visualisaties werken.

417
00:24:38,656 --> 00:24:41,400
>> Maar ik wil om terug te gaan naar de gegevens.

418
00:24:41,400 --> 00:24:48,030
Zodat de gegevens fundamenteel in D3-- D3
verbruikt data dat is een lijst van dingen.

419
00:24:48,030 --> 00:24:53,000
D3 verwacht dat de gegevens alleen een lijst te zijn
van de dingen, een scala aan dingen.

420
00:24:53,000 --> 00:24:58,780
Het maakt niet uit wat die dingen
zijn, zolang het een array van.

421
00:24:58,780 --> 00:25:02,460
>> Dus hier, bijvoorbeeld, konden we van
Natuurlijk hebben floating point waarden.

422
00:25:02,460 --> 00:25:04,830
We konden negatieven hebben.

423
00:25:04,830 --> 00:25:09,400
D3 maakt het niet uit, zo lang
want het is een lijst van dingen.

424
00:25:09,400 --> 00:25:13,270
>> Zoals interessante dingen die we
zou kunnen hebben, kunnen we ook

425
00:25:13,270 --> 00:25:19,410
hebben een lijst van strings als dat.

426
00:25:19,410 --> 00:25:25,440
Dus dit zijn de Crimson headlines
Ik pakte een paar dagen geleden.

427
00:25:25,440 --> 00:25:29,220
En misschien vindt u een aantal interessante
dingen over deze een krantenkoppen.

428
00:25:29,220 --> 00:25:30,970
>> Dus nogmaals, dit is een lijst van dingen.

429
00:25:30,970 --> 00:25:32,360
D3 niet schelen.

430
00:25:32,360 --> 00:25:35,572
Deze toevallig een string zijn.

431
00:25:35,572 --> 00:25:36,530
We hebben onze data veranderd.

432
00:25:36,530 --> 00:25:38,210
>> Laten we terugkeren naar onze visualisatie.

433
00:25:38,210 --> 00:25:42,495
Nu, onze visualisatie verwacht
de-input nummers.

434
00:25:42,495 --> 00:25:44,370
Dus we gaan te hebben
om een ​​paar veranderingen aan te brengen.

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

436
00:25:47,180 --> 00:25:52,180
Dus bijvoorbeeld, allereerst, misschien
we willen deze kringen samen zetten

437
00:25:52,180 --> 00:25:56,870
door de lengte van de kop, de
aantal tekens in de kop.

438
00:25:56,870 --> 00:26:03,600
>> Dus wat we is-- doen elke keer onze
functie wordt aangeroepen met een string,

439
00:26:03,600 --> 00:26:09,095
we vinden het is de lengte en
overgaan dan is dat op schaal.

440
00:26:09,095 --> 00:26:11,550
De kleur, ik zal terugkeren
dat tot staalblauw.

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

442
00:26:19,060 --> 00:26:20,420
En daar gaan we.

443
00:26:20,420 --> 00:26:23,190
We hebben een visualisatie
van Crimson krantenkoppen.

444
00:26:23,190 --> 00:26:25,500
>> Onze schaalgrootte is een beetje uit.

445
00:26:25,500 --> 00:26:29,680
Laten we aannemen dat het langst
kop is 100 karakters lang,

446
00:26:29,680 --> 00:26:32,244
zo overspannen dat een beetje.

447
00:26:32,244 --> 00:26:33,410
En we hebben een visualisatie.

448
00:26:33,410 --> 00:26:36,710
Dus het lijkt erop dat de meeste krantenkoppen
zijn vrij dicht bij elkaar,

449
00:26:36,710 --> 00:26:38,750
in termen van karakter lijn.

450
00:26:38,750 --> 00:26:41,200
Maar men is er echt opvalt.

451
00:26:41,200 --> 00:26:46,660
>> We konden een aantal tools te bouwen
om te ontdekken dat er meer.

452
00:26:46,660 --> 00:26:50,710
Maar toen ik bezig was met dit, ik was
benieuwd of, in deze dataset,

453
00:26:50,710 --> 00:26:53,880
krantenkoppen met een dubbele punt
in hen langer.

454
00:26:53,880 --> 00:26:55,770
Ik veronderstelt dat ze dat zou doen.

455
00:26:55,770 --> 00:26:56,660
>> Dus laten we uitzoeken.

456
00:26:56,660 --> 00:27:00,650
Laten we gebruik maken van de kleur
kanaal zoals we deden voor,

457
00:27:00,650 --> 00:27:04,540
om wat over de vraag of te coderen
er is een dubbele punt of nee.

458
00:27:04,540 --> 00:27:07,220
Dus zullen we weer gebruik maken van een voorwaardelijk.

459
00:27:07,220 --> 00:27:09,350
Je hoeft niet te weten
de details van deze,

460
00:27:09,350 --> 00:27:14,260
maar dit is hoe we een controle op een
string voor een bepaald teken

461
00:27:14,260 --> 00:27:16,355
in JavaScript, nogmaals, niet relevant.

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

463
00:27:18,910 --> 00:27:23,270
>> Maar als we niet vinden van een
colon, we groen terug.

464
00:27:23,270 --> 00:27:26,100
En als we dat doen, zullen we rode terugkeren.

465
00:27:26,100 --> 00:27:29,010
Dus nogmaals, kopt dat
hebben een dubbele punt rood.

466
00:27:29,010 --> 00:27:34,980
Dit is wat dit means-- leuk.

467
00:27:34,980 --> 00:27:38,040
>> Dus het lijkt erop dat mijn
hypothese wordt gestoten.

468
00:27:38,040 --> 00:27:39,360
Er zijn maar twee.

469
00:27:39,360 --> 00:27:42,380
We hebben slechts zes datapunten
en slechts twee hadden dubbele punten.

470
00:27:42,380 --> 00:27:45,510
Maar het lijkt een beetje meer
op de onderkant, in feite.

471
00:27:45,510 --> 00:27:47,830
Krantenkoppen met dubbele punten lijken
algemeen korter,

472
00:27:47,830 --> 00:27:52,370
althans in onze data set-- interessant.

473
00:27:52,370 --> 00:27:55,830
>> Laten we terugkeren die aan
staalblauw en dan zien

474
00:27:55,830 --> 00:28:00,601
wat we kunnen maken met nog
interessanter data.

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

476
00:28:04,370 --> 00:28:09,070
Dus nogmaals, ik dat genoemd
gegevens in D3 is een lijst van dingen.

477
00:28:09,070 --> 00:28:11,080
We hebben aantallen verschillende types gezien.

478
00:28:11,080 --> 00:28:12,810
We hebben strings gezien.

479
00:28:12,810 --> 00:28:15,700
Maar de dingen kunnen ook objecten.

480
00:28:15,700 --> 00:28:20,080
>> Ze kunnen ingewikkelde dingen
dat een heleboel dingen op te nemen.

481
00:28:20,080 --> 00:28:24,510
Om duidelijker te zeggen dat,
In de meeste gevallen, we

482
00:28:24,510 --> 00:28:28,384
willen elk datapunt te bouwen als
ingewikkelder dan alleen maar één waarde.

483
00:28:28,384 --> 00:28:30,175
Als je zou denken een
database over studenten,

484
00:28:30,175 --> 00:28:32,470
er kan een student
te noemen, een student-ID,

485
00:28:32,470 --> 00:28:36,370
en een heleboel dingen geassocieerd
met een bepaald record,

486
00:28:36,370 --> 00:28:39,834
niet alleen een string of een nummer.

487
00:28:39,834 --> 00:28:40,750
Dus laten we eens kijken naar dat.

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

489
00:28:55,180 --> 00:28:56,760
>> Dit is een set die gegevens.

490
00:28:56,760 --> 00:28:59,090
Dit is een dataset aardbevingen.

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

492
00:29:01,910 --> 00:29:08,430
Dus alles hier op onze lijst of matrix
dingen bevat veel dingen zelf.

493
00:29:08,430 --> 00:29:11,380
Dus elke gegevens punt een
magnitude en een coördinaat.

494
00:29:11,380 --> 00:29:13,425
En coördineert zelf
bevatten twee dingen.

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

496
00:29:15,960 --> 00:29:20,450
>> Dus elke dag is nu een stuk meer
ingewikkeld en een stuk interessanter

497
00:29:20,450 --> 00:29:22,700
en bevat veel meer
interessante informatie.

498
00:29:22,700 --> 00:29:26,730
Laten we eens kijken we uit die zou kunnen bouwen.

499
00:29:26,730 --> 00:29:36,130
Terugkerend naar hier opnieuw met
onze histogram cirkel visualisatie

500
00:29:36,130 --> 00:29:42,110
we hebben opgebouwd, laten we eens kijken of we een kunnen bouwen
visualisatie van grootte distributie

501
00:29:42,110 --> 00:29:43,305
in onze dataset.

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

503
00:29:45,850 --> 00:29:48,660
>> Dus hier, het is hetzelfde concept.

504
00:29:48,660 --> 00:29:51,920
Maar nu, d bevat meer dingen.

505
00:29:51,920 --> 00:29:54,780
d bevat veel data-elementen.

506
00:29:54,780 --> 00:29:57,946
Dus we krijgen d rug.

507
00:29:57,946 --> 00:29:59,670
D3 geeft ons d.

508
00:29:59,670 --> 00:30:06,080
En we reageren door het vinden van de omvang
van d en dan doorgeven dat op schaal.

509
00:30:06,080 --> 00:30:08,490
>> En dan moeten we veranderen
onze schaal, natuurlijk.

510
00:30:08,490 --> 00:30:12,980
Dus magnitudes gewoon niet
gaan veel meer dan 10.

511
00:30:12,980 --> 00:30:15,485
Eigenlijk is er nooit geweest
10 magnitude aardbeving.

512
00:30:15,485 --> 00:30:19,360
Maar dat is een soort van onze bovenste
Daartoe onze bovenste spectrum.

513
00:30:19,360 --> 00:30:20,240
>> Laten we vernieuwen.

514
00:30:20,240 --> 00:30:22,990
Nice, hebben we een visualisatie.

515
00:30:22,990 --> 00:30:25,490
Het is interessant om zo note--
Er zijn twee datapunten

516
00:30:25,490 --> 00:30:29,010
vrijwel exact op elkaar
andere, in termen van grootte.

517
00:30:29,010 --> 00:30:31,350
Je ziet dit door de ondoorzichtigheid we gebruiken.

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

519
00:30:40,810 --> 00:30:42,690
>> We hebben nu geografische gegevens.

520
00:30:42,690 --> 00:30:44,710
We hebben lengte- en breedtegraad.

521
00:30:44,710 --> 00:30:47,549
Misschien kunnen we iets een doen
veel interessanter met dat.

522
00:30:47,549 --> 00:30:49,590
Laten we eens wat meer
interessante manier om te visualiseren

523
00:30:49,590 --> 00:30:53,500
dit ingewikkelder
gegevens hebben we toegang tot.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- fundamenteel,
willen we deze op een kaart te zetten.

525
00:31:04,950 --> 00:31:07,690
Ik bedoel, dit is waar dit naartoe gaat.

526
00:31:07,690 --> 00:31:13,130
We willen informatie over het coderen
positie van deze aardbeving lezingen,

527
00:31:13,130 --> 00:31:16,350
alsook hun omvang,
want we hebben dat nu.

528
00:31:16,350 --> 00:31:21,310
Wij begrijpen hoe om te consumeren
ingewikkelder data.

529
00:31:21,310 --> 00:31:26,200
>> Het eerste wat we doen is
maak een kaart, een achtergrond kaart.

530
00:31:26,200 --> 00:31:29,360
Ik ga om te gaan door
dit zeer snel.

531
00:31:29,360 --> 00:31:30,560
Dit is lastig code.

532
00:31:30,560 --> 00:31:33,110
Het is weer een van die
recepten je echt niet

533
00:31:33,110 --> 00:31:35,690
hebben om volledig te begrijpen voor u te gebruiken.

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

535
00:31:38,510 --> 00:31:39,740
Maar dit is de code.

536
00:31:39,740 --> 00:31:43,580
Deze code hier creëert een kaart.

537
00:31:43,580 --> 00:31:45,730
>> We zijn niet van plan om te gaan in detail.

538
00:31:45,730 --> 00:31:54,210
Maar oppervlakkig, wat het doet is,
het op deze us.json bestand, vragen die

539
00:31:54,210 --> 00:31:57,150
is een gegevensbestand zoals
degene die we eerder hadden.

540
00:31:57,150 --> 00:31:59,150
Het is ingewikkelder, natuurlijk.

541
00:31:59,150 --> 00:32:02,920
Maar in dit geval, alles,
elk datapunt is deze toestand

542
00:32:02,920 --> 00:32:05,420
en heeft een lijst van
lengte- en breedtegraad

543
00:32:05,420 --> 00:32:10,500
dat de veelhoek definiëren
die vorm, die staat.

544
00:32:10,500 --> 00:32:13,280
>> Dus wat D3 zal doen, is vergelijkbaar
aan wat we deden voor.

545
00:32:13,280 --> 00:32:18,140
Het zal verzoeken en
binden die een element.

546
00:32:18,140 --> 00:32:20,890
En er is een functie die
zal in kaart dat element uit,

547
00:32:20,890 --> 00:32:23,410
op basis van de lengte- en breedtegraad.

548
00:32:23,410 --> 00:32:24,580
U kunt meer op die te lezen.

549
00:32:24,580 --> 00:32:27,385
En ik raad het.

550
00:32:27,385 --> 00:32:30,090
>> Er zijn links aan de
einde van deze code geplaatst.

551
00:32:30,090 --> 00:32:31,570
En de code wordt gereageerd.

552
00:32:31,570 --> 00:32:34,050
In zijn er links voor meer over dit.

553
00:32:34,050 --> 00:32:36,590
Ik raad je het op te zoeken.

554
00:32:36,590 --> 00:32:39,460
Maar wat we de zorg over is
deze projectie functie.

555
00:32:39,460 --> 00:32:41,210
Ik wil om te gaan door dat.

556
00:32:41,210 --> 00:32:43,522
>> Allereerst, laat me zien
je dat, ja, we hebben een kaart.

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

558
00:32:47,300 --> 00:32:49,970
Kaarten zijn cool.

559
00:32:49,970 --> 00:32:52,330
Dus laten we eens kijken naar deze
productiefunctie.

560
00:32:52,330 --> 00:32:56,481
>> Projectie is heel erg
zoals een schaal, schalen opnieuw.

561
00:32:56,481 --> 00:32:59,210
Dus wat de productie voor
deze projectie functie

562
00:32:59,210 --> 00:33:06,610
doet is, konden we het passeren lengte
en latitudes-- in dit geval,

563
00:33:06,610 --> 00:33:09,590
deze waarden hier zijn de
lat-longs van het gebouw

564
00:33:09,590 --> 00:33:13,990
we zitten in de juiste
now-- tot projectie.

565
00:33:13,990 --> 00:33:20,560
En projectie zal omzetten
dat in x en y pixelwaarden.

566
00:33:20,560 --> 00:33:23,300
>> Dus wat projectie doet
is zeer vergelijkbaar met onze schaal.

567
00:33:23,300 --> 00:33:27,270
Het neemt onze contreien en
lengtegraad dat er een hele wereld vertegenwoordigt

568
00:33:27,270 --> 00:33:31,390
en krimpen en dimensionering dat
neer op het plein die we willen,

569
00:33:31,390 --> 00:33:33,510
dat we het hebben gegeven.

570
00:33:33,510 --> 00:33:35,220
In dit geval zijn we
het passeren van deze waarden.

571
00:33:35,220 --> 00:33:41,370
En het geeft ons, nou, dat
op uw scherm betekent 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Dit hele scherm is 700 pixels
breed, dus dat maakt ons over hier,

573
00:33:46,250 --> 00:33:53,310
en 154 pixels naar beneden, wat ik zou doen
schatting is vrij veel hier.

574
00:33:53,310 --> 00:33:57,250
>> Dus het nemen van die lat-longs, die
iets op de hele aardbol te vertegenwoordigen

575
00:33:57,250 --> 00:34:02,850
en squishing en bewegen die rond
ons x en y pixel waarden geven

576
00:34:02,850 --> 00:34:05,450
dit is het eerste ding dat is
gedaan in deze mapping code.

577
00:34:05,450 --> 00:34:07,920
En dan de rest van de
code verbruikt de gegevens

578
00:34:07,920 --> 00:34:14,310
en dan kaarten die lat-longs
op iets op uw scherm.

579
00:34:14,310 --> 00:34:18,380
>> Maar we gaan deze projectie gebruiken
functies, omdat het blijkt

580
00:34:18,380 --> 00:34:20,270
we hebben lat-longs longs ook.

581
00:34:20,270 --> 00:34:24,509
Terugkijkend op onze data, hebben we
lengte- en breedtegraden

582
00:34:24,509 --> 00:34:25,425
voor elke waarneming.

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

584
00:34:28,131 --> 00:34:29,130
Dus laten we gebruik projectie.

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

586
00:34:33,250 --> 00:34:37,639
>> Dus kijken naar onze expositie,
we willen dat onze exposition--

587
00:34:37,639 --> 00:34:39,590
hebben we een breedtegraad en een lengtegraad.

588
00:34:39,590 --> 00:34:40,770
Maar we willen pixelwaarden.

589
00:34:40,770 --> 00:34:43,510
En het blijkt, hebben we precies
wat we want-- projectie.

590
00:34:43,510 --> 00:34:46,239
Heel erg als we waren
met behulp van schaal hier,

591
00:34:46,239 --> 00:34:52,075
we gaan nu projectie gebruiken
en doorgeven coördineert.

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

593
00:34:55,241 --> 00:34:56,949
Dus het eerste wat
we doing-- dus we zijn

594
00:34:56,949 --> 00:35:01,520
krijgen d, die een individuele gegevens
element van een individuele aardbeving

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

596
00:35:02,370 --> 00:35:04,640
Het eerste wat we doen
is krijgen de coördinaten.

597
00:35:04,640 --> 00:35:06,150
Oké, we hebben de coördinaten.

598
00:35:06,150 --> 00:35:09,160
>> Het tweede wat we doen is
doorgeven aan projectie.

599
00:35:09,160 --> 00:35:13,440
Projectie zet die coördinaten
in pixelwaarden, x en y.

600
00:35:13,440 --> 00:35:16,680
En dan is het laatste wat we
wilt doen is gewoon de x,

601
00:35:16,680 --> 00:35:19,342
welk dit geval is de eerste.

602
00:35:19,342 --> 00:35:22,050
Het is de eerste van de twee dingen
die worden geretourneerd door projectie.

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

604
00:35:27,840 --> 00:35:29,630
>> We zullen hetzelfde doen voor y.

605
00:35:29,630 --> 00:35:34,960
Maar in plaats daarvan, zullen we terugkeren
het tweede element, de y.

606
00:35:34,960 --> 00:35:35,980
Maak je klaar om te vernieuwen.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, extra karakter
hier-- leuk, we hebben

609
00:35:46,450 --> 00:35:51,730
een data-driven document dat is
verbergen van deze JSON bestand van objecten,

610
00:35:51,730 --> 00:35:57,560
maken van een kaart, en wijzigen
attribuut met betrekking tot de gegevens

611
00:35:57,560 --> 00:35:59,600
te projecteren op een kaart.

612
00:35:59,600 --> 00:36:00,840
Dit is echt interessant.

613
00:36:00,840 --> 00:36:03,770
Dit is cool.

614
00:36:03,770 --> 00:36:05,640
>> Laten we het op een inkeping.

615
00:36:05,640 --> 00:36:08,795
Ik bedoel, we hebben twee stukken
informatie bij elk meetpunt.

616
00:36:08,795 --> 00:36:10,000
Ik bedoel, drie.

617
00:36:10,000 --> 00:36:12,540
We hebben de coördinaten,
die een x en y.

618
00:36:12,540 --> 00:36:15,700
En we hebben de omvang.

619
00:36:15,700 --> 00:36:17,420
>> We moeten de omvang of andere manier te coderen.

620
00:36:17,420 --> 00:36:18,920
We hebben veel kanalen.

621
00:36:18,920 --> 00:36:20,370
We kunnen kleur te gebruiken.

622
00:36:20,370 --> 00:36:21,890
We kunnen gebruiken radius.

623
00:36:21,890 --> 00:36:23,040
We konden ondoorzichtigheid gebruiken.

624
00:36:23,040 --> 00:36:25,540
We kunnen veel dingen gebruiken in de code.

625
00:36:25,540 --> 00:36:29,180
Elk van deze eigenschappen en vele
meer die er niet zijn vermeld,

626
00:36:29,180 --> 00:36:33,065
omdat ze optioneel, konden we
gebruiken om deze gegevens te coderen, de slag

627
00:36:33,065 --> 00:36:35,670
en al deze dingen die ik heb genoemd.

628
00:36:35,670 --> 00:36:36,690
>> Laten we het doen straal.

629
00:36:36,690 --> 00:36:38,830
Ik denk straal is de meest intuïtieve.

630
00:36:38,830 --> 00:36:46,210
Dus nogmaals, zullen we vervangen dat hard-coded
40 en maken een aantal berekeningen.

631
00:36:46,210 --> 00:36:48,810
We zullen onze favoriete schaal opnieuw gebruiken.

632
00:36:48,810 --> 00:36:50,290
En we zijn verleden d.

633
00:36:50,290 --> 00:36:55,850
Maar niet d, omdat we willen dat de magnitude
van d. d is gewoon de gegevens punt.

634
00:36:55,850 --> 00:36:57,430
We zullen passeren de magnitude op schaal.

635
00:36:57,430 --> 00:36:58,470
>> Laten we dat nog eens proberen.

636
00:36:58,470 --> 00:37:00,230
Ooh, het werkt niet.

637
00:37:00,230 --> 00:37:02,940
Waarom werkt het niet?

638
00:37:02,940 --> 00:37:04,387
>> Dus niet vergeten welke schaal doet.

639
00:37:04,387 --> 00:37:05,470
Laten we eens kijken naar schaal weer.

640
00:37:05,470 --> 00:37:10,800
Schaalkaarten van 1 tot 10 op
tot 22-600, meer of minder.

641
00:37:10,800 --> 00:37:12,030
600 is enorm.

642
00:37:12,030 --> 00:37:14,730
Dit is de reden waarom we krijgen dit.

643
00:37:14,730 --> 00:37:18,420
>> Dus willen we onze schaal te veranderen
om iets meer redelijk.

644
00:37:18,420 --> 00:37:22,610
Laten we zeggen, we willen 0-60.

645
00:37:22,610 --> 00:37:25,340
60 is groot, maar 10 aardbevingen
zijn ongelooflijk zeldzaam.

646
00:37:25,340 --> 00:37:27,880
In feite, hebben ze nog nooit gebeurd.

647
00:37:27,880 --> 00:37:31,830
>> Dus wat dit zal doen is, neem het
onze omvang die gaat van 1 tot 10

648
00:37:31,830 --> 00:37:34,490
en de kaart te zetten op om het uit te breiden.

649
00:37:34,490 --> 00:37:37,370
En de kaart te zetten naar 0-60.

650
00:37:37,370 --> 00:37:38,840
Laten we vernieuwen.

651
00:37:38,840 --> 00:37:41,850
>> Nice, hebben we een visualisatie.

652
00:37:41,850 --> 00:37:42,500
Dit is geweldig.

653
00:37:42,500 --> 00:37:43,736
Dit is feitelijke gegevens.

654
00:37:43,736 --> 00:37:46,360
U zult merken, in mijn kleine speelgoed
Bijvoorbeeld, de grootste aardbeving

655
00:37:46,360 --> 00:37:49,417
is recht op de top van ons.

656
00:37:49,417 --> 00:37:50,000
Maar dat is het.

657
00:37:50,000 --> 00:37:54,422
We hebben een datum gedreven visualisatie
dat de data verbruikt

658
00:37:54,422 --> 00:37:56,255
en geeft ons echt
interessante informatie.

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

660
00:38:02,600 --> 00:38:06,420
Ja, laten we nog wat
interactiviteit aan.

661
00:38:06,420 --> 00:38:08,675
Ik heb gezegd dat was
de sterke kracht van de D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Dus hier, voor elk element, we zijn
het beschrijven van een bos van attributen.

664
00:38:15,060 --> 00:38:20,230
Maar we kunnen ook beschrijven wat we willen
te gebeuren met interactiviteit elementen.

665
00:38:20,230 --> 00:38:26,190
Zo kunnen we beschrijven
wat gebeurt er als we de muis over.

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

667
00:38:28,740 --> 00:38:33,640
En zeer vergelijkbaar dat,
dat zal een functie te nemen,

668
00:38:33,640 --> 00:38:36,700
vergelijkbaar met de
attributen we eerder hadden,

669
00:38:36,700 --> 00:38:44,650
waar we iets doen om de
element wanneer we zweven over het.

670
00:38:44,650 --> 00:38:47,100
>> Dus eerste wat we moeten
doen is kiezen dat element,

671
00:38:47,100 --> 00:38:49,435
het principe, in het browser.

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

673
00:38:57,090 --> 00:39:00,920
en dan kunnen we stellen
een attribuut aan.

674
00:39:00,920 --> 00:39:06,870
Dus wat ik hier aan het doen is, wanneer we zweven
over iets, zullen we dat element te krijgen

675
00:39:06,870 --> 00:39:11,197
en stel vervolgens de dekking terug
1, volledig ondoorzichtig.

676
00:39:11,197 --> 00:39:12,488
Laten we eens kijken hoe dat eruit ziet.

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

678
00:39:29,430 --> 00:39:39,080
>> Het lijkt erop dat we hebben een
extra puntkomma hier.

679
00:39:39,080 --> 00:39:42,420
Dus als we hier zweven, het wordt vol.

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

681
00:39:46,530 --> 00:39:48,960
Maar nu natuurlijk,
blijft vol, omdat we

682
00:39:48,960 --> 00:39:53,240
hebben om te beschrijven wat er gebeurt
wanneer verwijder onze cursor.

683
00:39:53,240 --> 00:39:59,990
Dus laten we precies doen dat op
mouseout, in tegenstelling tot mouseover.

684
00:39:59,990 --> 00:40:06,399
>> En we zullen het te resetten
wat we hadden before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
En nu, elke keer als we
hover, krijgen we een volledige cirkel.

686
00:40:10,260 --> 00:40:13,468
Het helpt ons zien wat we
we wezen selecteren.

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

688
00:40:19,210 --> 00:40:22,860
>> En nu laten we maken dit echt geweldig.

689
00:40:22,860 --> 00:40:26,210
Laten we dit verbinden met echte data.

690
00:40:26,210 --> 00:40:30,890
Dus laten we vragen konden
USGS over hun gegevens.

691
00:40:30,890 --> 00:40:35,630
Dus de US Geological Survey
heeft gegevens over aardbevingen.

692
00:40:35,630 --> 00:40:41,460
Ze hebben een publieke API die in staat is
worden geconsumeerd JSON formaat.

693
00:40:41,460 --> 00:40:42,548
Dus laten we dat doen.

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

695
00:40:49,730 --> 00:40:55,900
>> Dus dit is een stukje code dat
verbinding meetstations API.

696
00:40:55,900 --> 00:40:57,990
En er is een beetje van de verwerking op.

697
00:40:57,990 --> 00:41:02,200
Dit is niet relevant, maar vereenvoudigt het
een eenvoudig dataformaat als degene

698
00:41:02,200 --> 00:41:03,800
we hadden eerder.

699
00:41:03,800 --> 00:41:08,140
Dus ik te ontdoen van onze oproep om
onze nep data.json in ons bestand.

700
00:41:08,140 --> 00:41:13,110
En in plaats daarvan, ik bel
de USGS wezen.

701
00:41:13,110 --> 00:41:16,700
>> Laten we vernieuwen, nice.

702
00:41:16,700 --> 00:41:21,260
Dit is de werkelijke, real-life data
vanaf deze week voor aardbevingen.

703
00:41:21,260 --> 00:41:23,217
Dit is echt interessant.

704
00:41:23,217 --> 00:41:25,050
Dit is niet verwonderlijk
voor ons, maar er zijn

705
00:41:25,050 --> 00:41:27,909
veel aardbevingen op de
West Coast in Californië.

706
00:41:27,909 --> 00:41:30,950
Maar ik dacht dat het was erg interessant
dat er zo veel aardbevingen

707
00:41:30,950 --> 00:41:34,350
in Alaska, en blijkbaar,
hier in de Midwest.

708
00:41:34,350 --> 00:41:37,630
Ik bedoel, interessant, en we zijn goed.

709
00:41:37,630 --> 00:41:40,410
Dat is de conclusie.

710
00:41:40,410 --> 00:41:43,760
>> Maar fundamenteel, dit
is wat D3 helpt ons doen.

711
00:41:43,760 --> 00:41:48,030
Het helpt ons de gegevens te nemen, te binden
aan elementen in de DOM,

712
00:41:48,030 --> 00:41:51,620
en hebben die elementen veranderen
als functie van de gegevens,

713
00:41:51,620 --> 00:41:54,780
hebben deze attributen, alle
vele eigenschappen van de elementen,

714
00:41:54,780 --> 00:41:57,393
alle nuttig voor kanalen
om informatie over te brengen.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 is een ongelooflijk krachtige
bibliotheek en verbazingwekkend goed uit te voeren.

717
00:42:09,290 --> 00:42:12,260
Dit is een krachtig spul.

718
00:42:12,260 --> 00:42:15,960
Data visualisatie is een
ongelooflijk krachtige tool

719
00:42:15,960 --> 00:42:21,530
voor het transport van mensen diep
inzichten die krijgt om hun core

720
00:42:21,530 --> 00:42:25,430
en helpt hen te begrijpen, in
deze diepgaande en intuïtieve manier,

721
00:42:25,430 --> 00:42:29,760
hoe gegevens werkt en hoe
data verandert ons leven.

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