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

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

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Jeg er David
Chouinard, og dette er D3.

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

5
00:00:17,700 --> 00:00:21,270
Vi kommer til å lære om D3 i dag.

6
00:00:21,270 --> 00:00:25,020
D3 er en Javascript-rammeverk
for bygging av en høykvalitets

7
00:00:25,020 --> 00:00:28,110
interaktive visualiseringer for weben.

8
00:00:28,110 --> 00:00:30,870
Ting som hva vi er
se på baksiden av meg,

9
00:00:30,870 --> 00:00:34,230
vi kommer til å lære å lage de
ting, hva slags grunnleggende om det.

10
00:00:34,230 --> 00:00:36,452
Men det kommer til å være kul.

11
00:00:36,452 --> 00:00:38,160
La oss komme i gang
lage pene bilder.

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

13
00:00:41,108 --> 00:00:44,350
Vi har fått flere demoer
av prospektene tilgjengelig.

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

15
00:00:48,040 --> 00:00:50,760
La oss gjøre det.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- skal vi
å starte med en gang å lage kule ting.

17
00:00:58,700 --> 00:01:01,240
Først av alt, på venstre side, har vi kode.

18
00:01:01,240 --> 00:01:03,470
Til høyre har vi
resultatet av vår kode.

19
00:01:03,470 --> 00:01:04,900
La oss gå gjennom den.

20
00:01:04,900 --> 00:01:05,780
>> La oss lage en sirkel.

21
00:01:05,780 --> 00:01:08,570
Hvordan høres det ut?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
vi bare gjort en sirkel.

23
00:01:14,934 --> 00:01:16,100
Du trenger ikke tro meg, ikke sant?

24
00:01:16,100 --> 00:01:18,190
Det er ikke der.

25
00:01:18,190 --> 00:01:21,830
>> Så det vi gjorde rett her er,
SVG er skalerbar vektorgrafikk.

26
00:01:21,830 --> 00:01:27,530
Dette er måten vi fortelle leseren til
lage vektorgrafikk i nettleseren.

27
00:01:27,530 --> 00:01:30,740
Hva vi nettopp gjorde akkurat nå
er lagt til en sirkel for å bla.

28
00:01:30,740 --> 00:01:34,790
>> Løftet er at sirkelen
krever litt grunnleggende egenskaper

29
00:01:34,790 --> 00:01:36,850
før vi kan faktisk se det.

30
00:01:36,850 --> 00:01:40,045
Vi må fortelle det sin x-posisjon,
sin y posisjon, dens radius.

31
00:01:40,045 --> 00:01:43,310
Vi gjorde ikke fortelle det noe av det,
slik at vi ikke ser det akkurat nå.

32
00:01:43,310 --> 00:01:46,210
Men la oss si det ting.

33
00:01:46,210 --> 00:01:49,510
>> Så først av alt, du har
å gi vår sirkel et navn.

34
00:01:49,510 --> 00:01:53,070
Så la oss kalle det sirkel.

35
00:01:53,070 --> 00:01:54,406
Vår sirkel har et navn nå.

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

37
00:01:57,230 --> 00:01:59,490
Og la oss gi det noen attributter.

38
00:01:59,490 --> 00:02:03,690
Hva med cx ville sentrere x, så
midten av x-posisjon.

39
00:02:03,690 --> 00:02:06,730
La oss si, 200 for 200 piksler.

40
00:02:06,730 --> 00:02:10,220
>> La oss gi det en y på 200 piksler i tillegg.

41
00:02:10,220 --> 00:02:16,032
Og en r, en radius, på ca 40 piksler.

42
00:02:16,032 --> 00:02:16,950
Nå la oss se.

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

44
00:02:21,740 --> 00:02:23,440
Jeg kan ikke stave.

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

46
00:02:30,430 --> 00:02:31,520
>> Der du går.

47
00:02:31,520 --> 00:02:37,330
Vi har en sirkel i posisjon 200
piksler, 200 piksler, radius av 40 piksler.

48
00:02:37,330 --> 00:02:38,280
Litt kult, ikke sant?

49
00:02:38,280 --> 00:02:38,988
Vi har en sirkel.

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

51
00:02:40,880 --> 00:02:42,670
>> Så ingen grunn til å følge med.

52
00:02:42,670 --> 00:02:45,790
Alle disse eksemplene, alle av
koden jeg gjør i dag

53
00:02:45,790 --> 00:02:51,300
vil bli gitt elektronisk ved slutten
i form av interaktive eksempler

54
00:02:51,300 --> 00:02:54,010
med sjekkpunkter på
hver handling, og så videre.

55
00:02:54,010 --> 00:02:55,160
>> La oss gjøre flere ting.

56
00:02:55,160 --> 00:02:58,901
Denne sorte sirkelen er virkelig stygg.

57
00:02:58,901 --> 00:03:01,541
Jeg beklager for at feil
meldinger der.

58
00:03:01,541 --> 00:03:05,340
Det vi går.

59
00:03:05,340 --> 00:03:06,350
>> La oss gi det en farge.

60
00:03:06,350 --> 00:03:07,170
Hvordan er det?

61
00:03:07,170 --> 00:03:08,340
Jeg liker å stålblå.

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

63
00:03:13,280 --> 00:03:16,030
Vel, endret vår sirkel farge.

64
00:03:16,030 --> 00:03:17,320
Det er flott.

65
00:03:17,320 --> 00:03:31,330
La oss gjøre det semi-transparent
også-- semi-transparent.

66
00:03:31,330 --> 00:03:33,670
>> Så disse er attributter
vi definere på sirkelen.

67
00:03:33,670 --> 00:03:36,774
Det første vi gjorde er
vi sette en sirkel på siden.

68
00:03:36,774 --> 00:03:38,690
Og så skal vi definere
en haug med attributter.

69
00:03:38,690 --> 00:03:41,610
Noen av disse er nødvendig,
som CX, CY, og Radius.

70
00:03:41,610 --> 00:03:42,680
Og andre er valgfrie.

71
00:03:42,680 --> 00:03:44,730
>> Det er mange flere attributter.

72
00:03:44,730 --> 00:03:46,760
Det er mange av dem.

73
00:03:46,760 --> 00:03:53,070
For eksempel kan vi ha en
slag også, et strøk av rødt.

74
00:03:53,070 --> 00:03:55,630
Men la oss ta det.

75
00:03:55,630 --> 00:04:00,450
Vi er tilbake til en sirkel, en blå sirkel.

76
00:04:00,450 --> 00:04:01,600
>> Så la oss gjøre flere sirkler.

77
00:04:01,600 --> 00:04:02,810
Hvordan er det?

78
00:04:02,810 --> 00:04:04,665
La oss gjøre en annen sirkel.

79
00:04:04,665 --> 00:04:05,985
Dette er spennende, ikke sant?

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

81
00:04:09,630 --> 00:04:12,300
>> Så sier jeg bare kopiere limt
hva vi hadde allerede.

82
00:04:12,300 --> 00:04:13,570
La oss kalle det circle2.

83
00:04:13,570 --> 00:04:15,840
Og la oss gjøre det nøyaktige
samme ting og gi det

84
00:04:15,840 --> 00:04:20,450
attributter, gitt en x-posisjon på 300.

85
00:04:20,450 --> 00:04:24,140
Yay, vi har to sirkler nå.

86
00:04:24,140 --> 00:04:27,240
>> Og selvfølgelig, vi kunne
oppdatere disse verdiene.

87
00:04:27,240 --> 00:04:31,640
Jeg kunne sette den på 400, og nå den beveger seg.

88
00:04:31,640 --> 00:04:35,470
Og siden det er irriterende, la oss
fjerne det, så circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Den er borte nå.

91
00:04:40,730 --> 00:04:43,170
>> Så det vi gjør og
er bare veldig, very-- dette

92
00:04:43,170 --> 00:04:46,030
er svært likt det du
kan gjøre i jQuery, for eksempel.

93
00:04:46,030 --> 00:04:48,240
Vi bare manipulere
DOM, det heter.

94
00:04:48,240 --> 00:04:50,040
Du har kanskje hørt det ordet før.

95
00:04:50,040 --> 00:04:53,255
Vi skaper ting, sette
attributter på ting, fjerne ting.

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

97
00:04:58,950 --> 00:05:02,360
>> Nå, her er der det blir interessant.

98
00:05:02,360 --> 00:05:07,250
Så senere i koden, kunne vi fortsatt
referere til den opprinnelige sirkelen her.

99
00:05:07,250 --> 00:05:14,100
Så la oss tilbakestille sin egenskap til cx.

100
00:05:14,100 --> 00:05:18,260
La oss si, sin x posisjon til 400.

101
00:05:18,260 --> 00:05:22,406
Og jeg kommer til å overgang
det, så det er åpenbart.

102
00:05:22,406 --> 00:05:23,360
Det vi går.

103
00:05:23,360 --> 00:05:24,780
>> Så vi har lagt en sirkel.

104
00:05:24,780 --> 00:05:26,440
Vi satt noen attributter.

105
00:05:26,440 --> 00:05:28,210
Vi har lagt en annen sirkel, fjernet den.

106
00:05:28,210 --> 00:05:31,650
Og så skal vi modifisere
den opprinnelige sirkelen.

107
00:05:31,650 --> 00:05:35,400
>> Men her er der det blir
mye mer interessant.

108
00:05:35,400 --> 00:05:39,070
Ikke bare kan vi sette attributter
som bare verdier, kan vi si,

109
00:05:39,070 --> 00:05:41,610
hei, sirkel, gå til posisjon 200.

110
00:05:41,610 --> 00:05:44,540
Vi kan også sette dem som funksjoner.

111
00:05:44,540 --> 00:05:48,850
>> Så i stedet for å gi 400 her,
vi kan gjøre noen beregning

112
00:05:48,850 --> 00:05:53,950
på fly for hva vi
ønsker at attributtet skal være.

113
00:05:53,950 --> 00:05:56,580
Så dette er hvordan du vil uttrykke det.

114
00:05:56,580 --> 00:06:00,660
Vi sier, i stedet for 400, la meg
gi deg en funksjon i stedet.

115
00:06:00,660 --> 00:06:04,180
Og her, i denne funksjonen,
vi kan gjøre noen sprø beregning.

116
00:06:04,180 --> 00:06:06,820
>> Vi kunne ta tid og
se på noen andre ting

117
00:06:06,820 --> 00:06:11,230
og dynamisk bestemme
sirkelen hvilken verdi vi ønsker.

118
00:06:11,230 --> 00:06:15,266
Hva om vi bare gi
det en tilfeldig x posisjon?

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

120
00:06:20,360 --> 00:06:21,120
Så det er det.

121
00:06:21,120 --> 00:06:25,490
>> Så hva som sier er, for
hver x, kjøre denne funksjonen.

122
00:06:25,490 --> 00:06:29,340
Og hva vi gjør er å beregne
noen ting, noen tilfeldige ganger bredden

123
00:06:29,340 --> 00:06:30,410
og returnere det.

124
00:06:30,410 --> 00:06:34,765
Så hver gang vi kjører det, får vi en
sirkelen som går til et tilfeldig sted.

125
00:06:34,765 --> 00:06:36,394
Det er litt kult.

126
00:06:36,394 --> 00:06:38,310
Jeg føler at jeg kunne se
på dette for litt.

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

128
00:06:44,274 --> 00:06:46,440
Vi begynner å få til
noe interessant her.

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

130
00:06:49,120 --> 00:06:51,390
La oss gjøre dette datadrevet nå.

131
00:06:51,390 --> 00:06:53,420
Det er ingen data her.

132
00:06:53,420 --> 00:06:54,482
La oss endre det.

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

134
00:06:57,440 --> 00:07:12,140
>> Act II Data Driven Documents--
Så la oss gå tilbake til her.

135
00:07:12,140 --> 00:07:15,340
Og la oss bare bli kvitt circle2,
fordi vi bare legge til og fjerne

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

137
00:07:15,840 --> 00:07:17,382
Så vi egentlig ikke trenger det.

138
00:07:17,382 --> 00:07:21,421
Vi må være mye mer flink her.

139
00:07:21,421 --> 00:07:23,170
La oss si, vi har
noen data av noe slag.

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

141
00:07:31,540 --> 00:07:40,020
En moment-- la oss si,
vi hadde data for dette skjemaet.

142
00:07:40,020 --> 00:07:41,800
Vi hadde en rekke, bare
en haug med tall.

143
00:07:41,800 --> 00:07:45,750
Vi har syv tall her,
hva disse represent-- mengde

144
00:07:45,750 --> 00:07:48,810
i folks bankkonto, hvordan
mye de veier, gud vet hva.

145
00:07:48,810 --> 00:07:51,310
>> Dette er tall, og vi
ønsker å bruke våre sirkler

146
00:07:51,310 --> 00:07:53,240
å representere disse tallene en eller annen måte.

147
00:07:53,240 --> 00:07:55,515
Vi ønsker å knytte vår
sirkler til disse tallene.

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

149
00:07:58,750 --> 00:07:59,626
Så det vi gjør.

150
00:07:59,626 --> 00:08:01,500
La oss si, vi ønsker en
sirkel for hvert nummer.

151
00:08:01,500 --> 00:08:03,590
Vi kunne gjøre den gamle
ting vi ble doing--

152
00:08:03,590 --> 00:08:06,020
sirkel append og circle2 og circle3.

153
00:08:06,020 --> 00:08:10,020
Men dette kommer ut av kontroll, og
det er mye av repeterende logikk.

154
00:08:10,020 --> 00:08:12,760
>> Så la oss få mer flink med det.

155
00:08:12,760 --> 00:08:17,810
I stedet for å bruke VAR sirkel
svg.append at vi var bare bruke,

156
00:08:17,810 --> 00:08:21,580
vi kommer til å bruke
denne lille blokken her.

157
00:08:21,580 --> 00:08:24,510
Jeg ønsker ikke å gå i dybden
inn i det alle disse delene gjør.

158
00:08:24,510 --> 00:08:26,020
Og det er litt av et avansert tema.

159
00:08:26,020 --> 00:08:27,830
Og jeg skulle ønske jeg kunne.

160
00:08:27,830 --> 00:08:31,370
>> Men det viktigste å recognize-- og
ser du er veldig ofte i D3-kode.

161
00:08:31,370 --> 00:08:36,840
Denne tekstblokk basic
skaper så mange kretser

162
00:08:36,840 --> 00:08:41,360
som det er dataelementer
i denne matrisen til høyre her.

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

164
00:08:53,420 --> 00:08:55,780
Så dette skaper så mange
sirkler som det er elementer.

165
00:08:55,780 --> 00:08:58,520
Det kommer til å skape oss syv sirkler.

166
00:08:58,520 --> 00:09:01,710
Og det gjør en veldig, veldig viktig ting.

167
00:09:01,710 --> 00:09:02,460
Så la oss kjøre det.

168
00:09:02,460 --> 00:09:05,460
La oss ta vår andre sirkel.

169
00:09:05,460 --> 00:09:09,565
La oss bare kommentere dette
skilles ut og kjøre dette igjen.

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

171
00:09:13,840 --> 00:09:15,260
>> Det vi går.

172
00:09:15,260 --> 00:09:18,030
Så vår sirkel her er en
mye mørkere, fordi vi

173
00:09:18,030 --> 00:09:20,720
har syv sirkler, en
på toppen av den andre.

174
00:09:20,720 --> 00:09:25,425
Vi nettopp opprettet syv sirkler, en
hver for hver av disse dataelementer.

175
00:09:25,425 --> 00:09:28,860
Men det er en viktig ting som har skjedd
med denne tekstutdrag her.

176
00:09:28,860 --> 00:09:31,030
>> Det er at data ble bundet.

177
00:09:31,030 --> 00:09:33,440
Så hver eneste en av
disse dataelementer,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, var bundet
til en bestemt krets.

179
00:09:38,830 --> 00:09:40,960
Slik at disse ikke bare skapt
en haug med sirkler

180
00:09:40,960 --> 00:09:43,420
men knytter de to tingene sammen.

181
00:09:43,420 --> 00:09:48,740
>> Og i fremtiden, fordi vi opprettet
de kretser med denne D3 funksjon,

182
00:09:48,740 --> 00:09:52,430
hvis jeg gir deg en sirkel, kan du
gi meg data knyttet til den.

183
00:09:52,430 --> 00:09:53,280
Så vi kan spørre D3.

184
00:09:53,280 --> 00:09:54,840
Hei, D3, har jeg denne sirkelen.

185
00:09:54,840 --> 00:09:57,350
Hva er data som sirkelen har?

186
00:09:57,350 --> 00:10:01,290
Og D3 ville fortelle oss 10 eller 45 eller 105.

187
00:10:01,290 --> 00:10:02,380
>> Disse tingene er bundet.

188
00:10:02,380 --> 00:10:04,490
Det er en veldig, veldig grunnleggende konseptet.

189
00:10:04,490 --> 00:10:06,070
La oss se på det.

190
00:10:06,070 --> 00:10:12,210
>> Så måten vi skulle spørre D3-- så
dette er irrelevant for dette,

191
00:10:12,210 --> 00:10:16,620
men bare tro meg på det.

192
00:10:16,620 --> 00:10:17,620
Dette er hvordan vi spør D3.

193
00:10:17,620 --> 00:10:21,312
Hei, D3, gi meg den første
sirkel som du kan finne.

194
00:10:21,312 --> 00:10:23,580
Gi meg den første sirkelen du kan finne.

195
00:10:23,580 --> 00:10:29,660
Og så kan vi spørre D3, hva er
dataene på det, som dette, 10.

196
00:10:29,660 --> 00:10:33,380
>> Så vi bare spør D3, finne meg
den første sirkelen du kan finne.

197
00:10:33,380 --> 00:10:34,400
Hva er dataene?

198
00:10:34,400 --> 00:10:36,650
10, er det faktisk vår
første dataelement.

199
00:10:36,650 --> 00:10:42,150
Vi kunne spørre det, hei, D3,
finne oss vår tredje sirkel.

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

201
00:10:44,450 --> 00:10:45,740
Hvorfor er dette veldig viktig?

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

203
00:10:49,790 --> 00:10:52,250
>> Så akkurat her, jeg nevnte
at vi kunne bruke funksjonene.

204
00:10:52,250 --> 00:10:54,910
Og jeg nevnte det var
en svært mektig ting.

205
00:10:54,910 --> 00:11:03,070
Så ikke bare kan våre funksjoner gjøre ting
som gjøre noen beregninger, for eksempel,

206
00:11:03,070 --> 00:11:09,170
returnere et tilfeldig tall, det kan
også gjøre ting basert på dataene.

207
00:11:09,170 --> 00:11:11,550
Dette er hva data drevet dokumenter betyr.

208
00:11:11,550 --> 00:11:13,750
Det er det D3 står for.

209
00:11:13,750 --> 00:11:17,800
>> Så dette x postition-- stedet
for å bare si, alle sirkler,

210
00:11:17,800 --> 00:11:21,735
få x posisjon 200, vi
kunne gi den en funksjon.

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

212
00:11:26,140 --> 00:11:30,140
Og her kan vi gjøre noen beregning.

213
00:11:30,140 --> 00:11:33,710
og d her står på plass for dataene.

214
00:11:33,710 --> 00:11:36,120
Så hver gang vi har
en sirkel, i utgangspunktet,

215
00:11:36,120 --> 00:11:37,750
D3 vil skape disse syv sirkler.

216
00:11:37,750 --> 00:11:38,500
Og deretter for hvert

217
00:11:38,500 --> 00:11:41,920
>> sirkel, det kommer til å gå, hei,
circle1 hva er din x posisjon.

218
00:11:41,920 --> 00:11:45,210
Tidligere var vi
alltid svarer 200.

219
00:11:45,210 --> 00:11:48,630
Men nå, spør hver gang D3
oss hva som er din x posisjon,

220
00:11:48,630 --> 00:11:51,790
det kommer til å gi us-- vi har
den sirkelen, så vi har data.

221
00:11:51,790 --> 00:11:55,290
Det kommer til å gi oss data og si,
hva vil du utstilling å være,

222
00:11:55,290 --> 00:11:57,120
basert på disse data.

223
00:11:57,120 --> 00:11:59,590
>> La oss bare tilbake de faktiske data.

224
00:11:59,590 --> 00:12:04,910
Så hvis vi kjøre dette, gir dette
amerikanske data drevet dokumenter.

225
00:12:04,910 --> 00:12:08,040
Disse sirklene er basert
i forhold position--

226
00:12:08,040 --> 00:12:11,120
de er baser som en funksjon av dataene.

227
00:12:11,120 --> 00:12:13,100
>> Så for den første sirkelen,
D3 setter en sirkel.

228
00:12:13,100 --> 00:12:16,770
Og så D3 spør oss, hva gjør
du vil utstillingen skal være.

229
00:12:16,770 --> 00:12:19,620
Og vi bare si, hva dataene er.

230
00:12:19,620 --> 00:12:21,185
Gjør utstilling 10.

231
00:12:21,185 --> 00:12:26,320
>> Så spør det, hva vil du den
utredning for å være for den andre sirkelen.

232
00:12:26,320 --> 00:12:27,270
Og vi svarer, 45.

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

234
00:12:30,000 --> 00:12:32,230
Og vi, selvfølgelig, kan
gjøre noen beregninger her.

235
00:12:32,230 --> 00:12:35,510
Jeg finner at de kretser
er slags klemt opp.

236
00:12:35,510 --> 00:12:38,965
>> Så multiplisere det med tre, multiplisere data med 3.

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

238
00:12:41,870 --> 00:12:43,840
Vår sirkel bare fikk utvidet ut.

239
00:12:43,840 --> 00:12:46,730
Vår verdi ble tredoblet.

240
00:12:46,730 --> 00:12:51,010
>> Sirkelen er virkelig på kanten,
så la oss kanskje slags offset det.

241
00:12:51,010 --> 00:12:53,632
La oss si, med 20.

242
00:12:53,632 --> 00:12:56,070
Her kan du gå.

243
00:12:56,070 --> 00:12:57,590
>> Dette er et datavisualisering.

244
00:12:57,590 --> 00:13:01,767
Det er en veldig enkel en, men dette
gir oss et innblikk i våre data.

245
00:13:01,767 --> 00:13:04,600
Det forteller oss at, for eksempel, vi
har en liten klynge av elementene.

246
00:13:04,600 --> 00:13:06,340
Og vi har en stor avvikende her.

247
00:13:06,340 --> 00:13:10,830
Dette gir oss litt informasjon
om fordelingen.

248
00:13:10,830 --> 00:13:20,830
>> Hvis vi for eksempel for å endre
dataene til 150 her og refresh,

249
00:13:20,830 --> 00:13:22,630
vår visualisering endres.

250
00:13:22,630 --> 00:13:24,285
Dette dokumentet er datadrevet.

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

252
00:13:32,640 --> 00:13:36,180
>> Så selvfølgelig alle disse elementene,
alle disse attributtene her,

253
00:13:36,180 --> 00:13:38,430
vi kan bruke en funksjon, ikke
bare tallene, ikke bare

254
00:13:38,430 --> 00:13:39,900
x- og y-posisjoner.

255
00:13:39,900 --> 00:13:42,120
Slik at vi kan bruke en funksjon for fargen.

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

257
00:13:45,260 --> 00:13:46,360
Så vi vil gjøre det samme.

258
00:13:46,360 --> 00:13:49,360
Vi skal gi det en funksjon.

259
00:13:49,360 --> 00:13:52,320
>> Og la oss si, vi kunne ha
conditionals i vår funksjon.

260
00:13:52,320 --> 00:13:54,770
Denne funksjonen kan være
hundre linjer lange.

261
00:13:54,770 --> 00:13:57,150
Det kan gjøre veldig, veldig kompliserte ting.

262
00:13:57,150 --> 00:13:59,080
>> Så la oss sette en hvis setningen her.

263
00:13:59,080 --> 00:14:03,420
La oss si, hvis våre data er mindre
enn 50, er at noen terskel

264
00:14:03,420 --> 00:14:05,817
at vi er interessert
i en eller annen grunn.

265
00:14:05,817 --> 00:14:06,650
La oss gjøre det grønne.

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

267
00:14:09,830 --> 00:14:15,320
Ellers, la oss gjøre det rødt.

268
00:14:15,320 --> 00:14:16,110
Hvordan er det?

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
>> Så vår datavisualisering begynner
å formidle mer interessant informasjon

272
00:14:24,860 --> 00:14:26,727
på mange kanaler.

273
00:14:26,727 --> 00:14:28,560
Så nå vet vi litt
om fordelingen.

274
00:14:28,560 --> 00:14:31,768
Og vi vet at det er en slags
avskåret på 50 som vi er interessert i.

275
00:14:31,768 --> 00:14:35,630
Vi vet at det er to datapunkter
under denne terskelen, og de fleste av dem

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

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

278
00:14:41,510 --> 00:14:46,160
>> Så som et siste trinn, disse dataene her,
det er svært sjelden å se dette sånn.

279
00:14:46,160 --> 00:14:52,610
Så la oss bare flytte den ut til en variabel
fordi det er renere, som dette.

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

281
00:15:02,980 --> 00:15:05,197
Og så bruker vi den variabelen her.

282
00:15:05,197 --> 00:15:06,280
Det er akkurat det samme.

283
00:15:06,280 --> 00:15:07,280
Det er bare litt renere.

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

285
00:15:25,300 --> 00:15:35,300
>> Neste opp, Act III, Scales--
Så ett problem rett

286
00:15:35,300 --> 00:15:38,920
her er, hvis vi endrer vår
data i denne 200 value--

287
00:15:38,920 --> 00:15:41,685
hvis vi endrer det til 400
eller noe og oppdatering,

288
00:15:41,685 --> 00:15:44,540
Da denne verdien bare gikk offscreen.

289
00:15:44,540 --> 00:15:49,040
Så vår logikk her
av hvordan vi gjør de gangene 3

290
00:15:49,040 --> 00:15:52,570
og 20, for å spre den ut og deretter
oppveie det litt er virkelig clunky.

291
00:15:52,570 --> 00:15:54,150
>> Hva mener de tallene?

292
00:15:54,150 --> 00:15:55,400
De er bare hard kodet der.

293
00:15:55,400 --> 00:15:58,830
Og de er veldig mye knyttet til dataene.

294
00:15:58,830 --> 00:16:00,550
Vi ønsker en datadrevet dokument.

295
00:16:00,550 --> 00:16:05,460
Vi vil ha en svært fleksibel dokument,
at gitte data, tilpasser seg det

296
00:16:05,460 --> 00:16:07,900
og representerer det.

297
00:16:07,900 --> 00:16:11,330
>> Hva vi trenger i utgangspunktet er, vi
har denne rekke tall 10.

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

299
00:16:12,640 --> 00:16:17,630
Og vi ønsker å kartlegge det ut på
bredde, i hele bredden her.

300
00:16:17,630 --> 00:16:20,620
Så vi har utvalget av
tallene kommer fra 0 til 100.

301
00:16:20,620 --> 00:16:24,980
Og vi har denne campus jeg går
20-700, i dette tilfellet.

302
00:16:24,980 --> 00:16:26,515
>> Vi slags ønsker å kartlegge det videre.

303
00:16:26,515 --> 00:16:30,002
Vi vil skalere det opp og
deretter utlignet det litt.

304
00:16:30,002 --> 00:16:33,165
Det viser seg at D3 har disse.

305
00:16:33,165 --> 00:16:34,220
Det kalles en skala.

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

307
00:16:37,410 --> 00:16:38,250
Så la oss bruke den.

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

309
00:16:46,300 --> 00:16:49,670
>> Måten works-- jeg kommer til å
skriver dette opp og deretter forklare det.

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

311
00:17:01,530 --> 00:17:02,450
Dette er en skala.

312
00:17:02,450 --> 00:17:08,670
Hva det vil gjøre er, vil det kartlegge
verdier fra 1 til 200 for å 20-600.

313
00:17:08,670 --> 00:17:10,990
Vi kan sjekke det.

314
00:17:10,990 --> 00:17:13,329
Vi kan se at her.

315
00:17:13,329 --> 00:17:21,704
>> Så hvis jeg mate den 1-- ett øyeblikk.

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

317
00:17:47,764 --> 00:17:48,555
Gi meg ett sekund.

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

319
00:17:53,680 --> 00:17:55,080
Jeg må ha skrevet feil det.

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

321
00:18:15,320 --> 00:18:15,990
Der du går.

322
00:18:15,990 --> 00:18:17,930
Jeg er lei for det.

323
00:18:17,930 --> 00:18:22,050
>> Så hva en skala vil gjøre
er, vil det ta en verdi

324
00:18:22,050 --> 00:18:24,930
og deretter konvertere det,
utvide det ut, så det

325
00:18:24,930 --> 00:18:27,320
fyller hele spekteret du spør etter.

326
00:18:27,320 --> 00:18:32,910
Så i dette tilfellet, hvis vi gir det en,
det kommer til å kartlegge det ut på 20.

327
00:18:32,910 --> 00:18:37,750
Og hvis vi gir det 200, er det
kommer til å kartlegge den videre til 600.

328
00:18:37,750 --> 00:18:40,460
Og et sted i mellom,
hvis vi får 100, er det

329
00:18:40,460 --> 00:18:44,610
kommer til å være et sted
på mellom 20 og 600.

330
00:18:44,610 --> 00:18:51,480
>> Og selvfølgelig, nå er dette hva
vi trenger å fjerne disse hardkodet

331
00:18:51,480 --> 00:18:53,402
ting vi har rett der.

332
00:18:53,402 --> 00:18:55,950
Så det vi ønsker å gjøre er
ta dataene som vi er

333
00:18:55,950 --> 00:19:00,950
gitt, at enkelte data
element, og gi det til skalere først.

334
00:19:00,950 --> 00:19:02,635
Så skala vil skalere det opp.

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

336
00:19:27,020 --> 00:19:48,880
>> Samt-- Oh, vi har en liten feil her.

337
00:19:48,880 --> 00:19:50,120
Vi mangler data.

338
00:19:50,120 --> 00:19:51,290
Der du går.

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

340
00:19:58,550 --> 00:19:59,550
Og som utvider den ut.

341
00:19:59,550 --> 00:20:01,383
>> Det gir oss den samme
resultat vi hadde før,

342
00:20:01,383 --> 00:20:04,030
men i stedet for å ha dem
hard kodet begrensninger.

343
00:20:04,030 --> 00:20:07,790
Og hvis størrelsen på vår
lerret endringer, f.eks

344
00:20:07,790 --> 00:20:11,790
hvis vi ønsker å ha dette over
400 piksler og det squishes ut,

345
00:20:11,790 --> 00:20:15,440
vi kan ha det over--
vi kan utvide det, eller vi

346
00:20:15,440 --> 00:20:21,890
kan redusere dette venstre marg til
noe mindre eller mer enn 20.

347
00:20:21,890 --> 00:20:25,470
Disse tallene, disse hardkodet
tallene nå fornuftig for oss.

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

349
00:20:28,110 --> 00:20:30,520
>> Og vi kunne gjøre mye mer
interessante ting også.

350
00:20:30,520 --> 00:20:35,990
Så i stedet for å ha en lineær
skala, kanskje vi vil logge en skala.

351
00:20:35,990 --> 00:20:37,840
Og som vil gi oss en log skala.

352
00:20:37,840 --> 00:20:41,269
>> Så nå vår skala, i stedet for
bare vokser ut dette området,

353
00:20:41,269 --> 00:20:42,810
det gjør mer avanserte ting.

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

355
00:20:48,790 --> 00:20:53,790
I stedet for at dette område vanskelig
kodet, og i stedet for å ha det 600,

356
00:20:53,790 --> 00:20:58,465
vi ønsker kanskje å bare bruke bredden,
slik at fra 20 til bredden minus 40,

357
00:20:58,465 --> 00:21:02,392
2 ganger margin på den andre siden.

358
00:21:02,392 --> 00:21:05,350
Og dette gjør mye mer fornuftig å
noen som kan se på koden.

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

360
00:21:08,080 --> 00:21:11,850
>> Interessant, skalaer få
veldig, veldig sofistikert også.

361
00:21:11,850 --> 00:21:13,350
De gjør en masse interessante ting.

362
00:21:13,350 --> 00:21:17,620
Så skalerer ikke nødvendigvis har
å operere med like tall.

363
00:21:17,620 --> 00:21:18,955
La oss lage en fargeskala.

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

365
00:21:23,120 --> 00:21:26,120
>> Så vårt utvalg kunne be--
vårt domene er 1 til 200.

366
00:21:26,120 --> 00:21:28,220
Det er inngangs ting.

367
00:21:28,220 --> 00:21:33,793
Men vi ønsker kanskje å kartlegge fra
grønt til rødt, f.eks.

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

369
00:21:39,710 --> 00:21:42,910
Og nå, hvis vi passerer det en,
vi kommer til å få grønt.

370
00:21:42,910 --> 00:21:45,110
Hvis vi gir det 200, vil vi få rødt.

371
00:21:45,110 --> 00:21:49,480
Og hvis vi passerer det noe i mellom,
det kommer til å bli noen blanding av det,

372
00:21:49,480 --> 00:21:52,520
et sted på gradient
mellom grønn og rød.

373
00:21:52,520 --> 00:21:55,210
>> Og i stedet for å ha
denne typen clunky logikk

374
00:21:55,210 --> 00:21:58,550
vi har her med
betinget rett der,

375
00:21:58,550 --> 00:22:03,250
vi kunne ha something-- en
lineær skala mellom disse.

376
00:22:03,250 --> 00:22:07,100
Så vi vil bruke skalaen vi bare
opprettet, som vi kalte farge.

377
00:22:07,100 --> 00:22:09,060
Og vi ville gi den d, som
er vår dataelement.

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

379
00:22:14,250 --> 00:22:15,060
Og der vi går.

380
00:22:15,060 --> 00:22:18,070
Vi har en fargeskala.

381
00:22:18,070 --> 00:22:18,940
>> Så dette er kartlegging.

382
00:22:18,940 --> 00:22:20,960
Så helt til venstre er helt grønn.

383
00:22:20,960 --> 00:22:22,560
Helt til høyre er helt rød.

384
00:22:22,560 --> 00:22:24,828
Og alt i mellom
er en funksjon av d.

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

386
00:22:33,369 --> 00:22:35,160
Vi har en interessant
visualiseringer her.

387
00:22:35,160 --> 00:22:36,952
Men våre data var litt kjedelig.

388
00:22:36,952 --> 00:22:39,410
La oss se hva vi kan gjøre hvis
vi hadde mer interessante data.

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

390
00:22:44,420 --> 00:22:50,500
>> Act IV, som arbeider med
Data-- det første

391
00:22:50,500 --> 00:22:53,560
vi ønsker å gjøre for å gjøre vår
visualisering mer interessant

392
00:22:53,560 --> 00:22:56,140
er å flytte dataene et annet sted.

393
00:22:56,140 --> 00:22:58,310
Det er veldig clunky å ha
dataene hard kodet her.

394
00:22:58,310 --> 00:23:01,220
Og generelt, vil vi være å spørre
noen andre for dataene.

395
00:23:01,220 --> 00:23:05,400
Vi skal kanskje ber regjeringen,
Census Bureau, hva er din data

396
00:23:05,400 --> 00:23:10,170
og deretter plotte det eller spørre
noen tredjepart enhet for noen data

397
00:23:10,170 --> 00:23:13,330
og deretter bygge en
visualisering på det.

398
00:23:13,330 --> 00:23:17,170
>> Så det første vi vil gjøre
er å flytte det til et annet sted.

399
00:23:17,170 --> 00:23:24,130
Så jeg kommer til å lage en
fil her kalt data.json.

400
00:23:24,130 --> 00:23:25,600
JSON er dataformatet.

401
00:23:25,600 --> 00:23:29,210
Du trenger ikke å vite mye om det.

402
00:23:29,210 --> 00:23:33,210
Og vi kommer til å kopiere
lite data vi har der,

403
00:23:33,210 --> 00:23:40,330
lime den inn i det ordrett, gå
tilbake til vår visualisering kode

404
00:23:40,330 --> 00:23:45,362
her, og bruke denne funksjonen til høyre her.

405
00:23:45,362 --> 00:23:46,820
Du trenger ikke å kjenne detaljene.

406
00:23:46,820 --> 00:23:49,800
Men hva dette vil gjøre er,
det vil finne denne filen,

407
00:23:49,800 --> 00:23:51,780
hente det, og returnere det til oss.

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

409
00:24:11,660 --> 00:24:15,220
Så hva dette betyr er, det går
og få data.json fil.

410
00:24:15,220 --> 00:24:18,570
Og så all koden som er
innrykket inside-- hovedsak,

411
00:24:18,570 --> 00:24:21,800
all koden vi har det-- vil
kjøres bare når vi får data tilbake.

412
00:24:21,800 --> 00:24:25,760
Og så kommer det til å kjøre den
kode med de dataene vi har.

413
00:24:25,760 --> 00:24:28,870
Stor, har vi en
visualisering som spørringer

414
00:24:28,870 --> 00:24:31,390
for noen kode sted
annet, som vanligvis

415
00:24:31,390 --> 00:24:36,110
hvor det spør noen data fra
et annet sted, som vanligvis

416
00:24:36,110 --> 00:24:38,656
hvordan visualiser fungere.

417
00:24:38,656 --> 00:24:41,400
>> Men jeg ønsker å gå tilbake til dataene.

418
00:24:41,400 --> 00:24:48,030
Slik at dataene fundamentalt i D3-- D3
forbruker data som er en liste over ting.

419
00:24:48,030 --> 00:24:53,000
D3 forventer at data bare være en liste
av ting, en rekke ting.

420
00:24:53,000 --> 00:24:58,780
Det spiller ingen rolle hva disse tingene
er, så lenge det er en rekke av dem.

421
00:24:58,780 --> 00:25:02,460
>> Så her, for eksempel, kan vi av
Selvfølgelig har flytende punkt verdier.

422
00:25:02,460 --> 00:25:04,830
Vi kunne ha negative.

423
00:25:04,830 --> 00:25:09,400
D3 ikke bryr seg, så lenge
som det er en liste over ting.

424
00:25:09,400 --> 00:25:13,270
>> Som interessante ting vi
kunne ha, kunne vi også

425
00:25:13,270 --> 00:25:19,410
har en liste over strenger sånn.

426
00:25:19,410 --> 00:25:25,440
Så disse er Crimson overskrifter
Jeg plukket opp et par dager siden.

427
00:25:25,440 --> 00:25:29,220
Og kanskje du kan finne noen interessant
ting om disse noen overskrifter.

428
00:25:29,220 --> 00:25:30,970
>> Så igjen, er dette en liste over ting.

429
00:25:30,970 --> 00:25:32,360
D3 bryr seg ikke.

430
00:25:32,360 --> 00:25:35,572
Disse tilfeldigvis være en streng.

431
00:25:35,572 --> 00:25:36,530
Vi har endret våre data.

432
00:25:36,530 --> 00:25:38,210
>> La oss gå tilbake til vår visualisering.

433
00:25:38,210 --> 00:25:42,495
Nå forventer vår visualisering
input til å være nummer.

434
00:25:42,495 --> 00:25:44,370
Så vi kommer til å ha
å gjøre noen endringer.

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

436
00:25:47,180 --> 00:25:52,180
Så for eksempel, først av alt, kanskje
vi ønsker å sette disse sirklene sammen

437
00:25:52,180 --> 00:25:56,870
med lengden på overskriften, den
antall tegn i overskriften.

438
00:25:56,870 --> 00:26:03,600
>> Så hva skal vi gjøre er-- hver gang vår
funksjonen kalles med en streng,

439
00:26:03,600 --> 00:26:09,095
vi finner det lengde og
så pass på at til skala.

440
00:26:09,095 --> 00:26:11,550
Fargen, vil jeg komme tilbake
at for å stålblå.

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

442
00:26:19,060 --> 00:26:20,420
Og der vi går.

443
00:26:20,420 --> 00:26:23,190
Vi har en visualisering
av Crimson overskrifter.

444
00:26:23,190 --> 00:26:25,500
>> Vår målestokk er en bit av.

445
00:26:25,500 --> 00:26:29,680
La oss anta at den lengste
overskrift er 100 tegn,

446
00:26:29,680 --> 00:26:32,244
så spenner det ut litt.

447
00:26:32,244 --> 00:26:33,410
Og vi har en visualisering.

448
00:26:33,410 --> 00:26:36,710
Så det virker som de fleste overskrifter
er ganske tett sammen,

449
00:26:36,710 --> 00:26:38,750
i form av karakter linje.

450
00:26:38,750 --> 00:26:41,200
Men en det virkelig skiller seg ut.

451
00:26:41,200 --> 00:26:46,660
>> Vi kunne bygge noen verktøy
å utforske det mer.

452
00:26:46,660 --> 00:26:50,710
Men da jeg jobbet på dette, var jeg
nysgjerrig på om, i dette datasettet,

453
00:26:50,710 --> 00:26:53,880
overskrifter med et kolon
i dem ville være lenger.

454
00:26:53,880 --> 00:26:55,770
Jeg antar de ville.

455
00:26:55,770 --> 00:26:56,660
>> Så la oss finne ut.

456
00:26:56,660 --> 00:27:00,650
La oss bruke farge
kanal som vi gjorde før,

457
00:27:00,650 --> 00:27:04,540
å kode noen om hvorvidt
det er et kolon eller nei.

458
00:27:04,540 --> 00:27:07,220
Så vi kommer til å bruke en betinget igjen.

459
00:27:07,220 --> 00:27:09,350
Du trenger ikke å vite
detaljene i dette,

460
00:27:09,350 --> 00:27:14,260
men dette er hvordan vi sjekke en
streng for et bestemt tegn

461
00:27:14,260 --> 00:27:16,355
i Javascript, igjen, ikke relevant.

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

463
00:27:18,910 --> 00:27:23,270
>> Men hvis vi ikke finner en
tykktarm, vil vi returnere grønt.

464
00:27:23,270 --> 00:27:26,100
Og hvis vi gjør det, vil vi returnere rødt.

465
00:27:26,100 --> 00:27:29,010
Så igjen, overskrifter som
har et kolon vil være rød.

466
00:27:29,010 --> 00:27:34,980
Dette er hva dette means-- hyggelig.

467
00:27:34,980 --> 00:27:38,040
>> Så det virker som min
hypotese er bumped.

468
00:27:38,040 --> 00:27:39,360
Det er bare to.

469
00:27:39,360 --> 00:27:42,380
Vi har bare seks datapunkter
og bare to hadde kolon.

470
00:27:42,380 --> 00:27:45,510
Men det virker litt mer
på den nedre ende, i virkeligheten.

471
00:27:45,510 --> 00:27:47,830
Overskrifter med kolon synes
generelt å være kortere,

472
00:27:47,830 --> 00:27:52,370
i hvert fall i våre data set-- interessant.

473
00:27:52,370 --> 00:27:55,830
>> La oss vende tilbake som til
stålblå og deretter se

474
00:27:55,830 --> 00:28:00,601
hva vi kan gjøre med selv
mer interessante data.

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

476
00:28:04,370 --> 00:28:09,070
Så igjen, nevnte jeg at
data i D3 er en liste over ting.

477
00:28:09,070 --> 00:28:11,080
Vi har sett tall av mange typer.

478
00:28:11,080 --> 00:28:12,810
Vi har sett strenger.

479
00:28:12,810 --> 00:28:15,700
Men ting kan også være gjenstander.

480
00:28:15,700 --> 00:28:20,080
>> De kan være kompliserte ting
som inkluderer en rekke ting.

481
00:28:20,080 --> 00:28:24,510
Å si at mer tydelig,
i de fleste tilfeller, har vi

482
00:28:24,510 --> 00:28:28,384
ønsker å bygge hvert datapunkt som
mer komplisert enn bare én verdi.

483
00:28:28,384 --> 00:28:30,175
Hvis du kan tenke en
database om studenter,

484
00:28:30,175 --> 00:28:32,470
det kan være en student
navn, en student-ID,

485
00:28:32,470 --> 00:28:36,370
og en masse ting forbundet
med en spesiell rekord,

486
00:28:36,370 --> 00:28:39,834
ikke bare en streng eller et tall.

487
00:28:39,834 --> 00:28:40,750
Så la oss se på det.

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

489
00:28:55,180 --> 00:28:56,760
>> Dette er en slike datasett.

490
00:28:56,760 --> 00:28:59,090
Dette er et datasett om jordskjelv.

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

492
00:29:01,910 --> 00:29:08,430
Så alt her på vår liste eller matrise
ting inneholder mange ting selv.

493
00:29:08,430 --> 00:29:11,380
Så hver datapunkt et
omfang og et koordinatsystem.

494
00:29:11,380 --> 00:29:13,425
Og koordinerer seg selv
inneholde to ting.

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

496
00:29:15,960 --> 00:29:20,450
>> Så hver dag er nå mye mer
komplisert og mye mer interessant

497
00:29:20,450 --> 00:29:22,700
og inneholder mye mer
interessant informasjon.

498
00:29:22,700 --> 00:29:26,730
La oss se vi kan bygge ut av det.

499
00:29:26,730 --> 00:29:36,130
Retur tilbake til her, igjen, ved hjelp
vår histogram sirkel visualisering

500
00:29:36,130 --> 00:29:42,110
vi har bygget, la oss se om vi kan bygge en
visualisering av magnitude distribusjon

501
00:29:42,110 --> 00:29:43,305
i vår datasettet.

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

503
00:29:45,850 --> 00:29:48,660
>> Så her er det samme konseptet.

504
00:29:48,660 --> 00:29:51,920
Men nå, inneholder d flere ting.

505
00:29:51,920 --> 00:29:54,780
d inneholder mange dataelementer.

506
00:29:54,780 --> 00:29:57,946
Så vi får d tilbake.

507
00:29:57,946 --> 00:29:59,670
D3 gir oss d.

508
00:29:59,670 --> 00:30:06,080
Og vi svare ved å finne omfanget
av d og deretter passerer det til skala.

509
00:30:06,080 --> 00:30:08,490
>> Og da må vi endre
vår skala, selvfølgelig.

510
00:30:08,490 --> 00:30:12,980
Så størrelsene rett og slett ikke
gå mye mer enn 10 år.

511
00:30:12,980 --> 00:30:15,485
Egentlig har det aldri vært
10 magnitude jordskjelv.

512
00:30:15,485 --> 00:30:19,360
Men det er slags vår øvre
slutt, vår øvre spekteret.

513
00:30:19,360 --> 00:30:20,240
>> La oss oppdatere.

514
00:30:20,240 --> 00:30:22,990
Nice, har vi en visualisering.

515
00:30:22,990 --> 00:30:25,490
Det er interessant å note-- så
det er to datapunkter som

516
00:30:25,490 --> 00:30:29,010
er nesten nøyaktig på toppen av hverandre
andre, i form av omfanget.

517
00:30:29,010 --> 00:30:31,350
Du ser dette ved opacity vi bruker.

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

519
00:30:40,810 --> 00:30:42,690
>> Vi har geografiske data nå.

520
00:30:42,690 --> 00:30:44,710
Vi har breddegrader og lengdegrad.

521
00:30:44,710 --> 00:30:47,549
Kanskje vi kunne gjøre noe
mye mer interessant med det.

522
00:30:47,549 --> 00:30:49,590
La oss finne noen mer
interessant måte å visualisere

523
00:30:49,590 --> 00:30:53,500
dette mer komplisert
data vi har tilgang til.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- fundamentalt,
vi ønsker å sette disse på et kart.

525
00:31:04,950 --> 00:31:07,690
Jeg mener, dette er hvor dette går.

526
00:31:07,690 --> 00:31:13,130
Vi ønsker å kode informasjon om
stilling av disse jordskjelvmålinger,

527
00:31:13,130 --> 00:31:16,350
samt deres størrelse,
fordi vi har det nå.

528
00:31:16,350 --> 00:31:21,310
Vi forstår hvordan å konsumere
mer kompliserte data.

529
00:31:21,310 --> 00:31:26,200
>> Det første vi skal gjøre er
lage et kart, et bakgrunnskart.

530
00:31:26,200 --> 00:31:29,360
Jeg kommer til å gå gjennom
dette meget raskt.

531
00:31:29,360 --> 00:31:30,560
Dette er vanskelig kode.

532
00:31:30,560 --> 00:31:33,110
Det er enda en av de
oppskrifter du egentlig ikke

533
00:31:33,110 --> 00:31:35,690
må forstå fullt ut for deg å bruke.

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

535
00:31:38,510 --> 00:31:39,740
Men dette er koden.

536
00:31:39,740 --> 00:31:43,580
Denne koden her skaper et kart.

537
00:31:43,580 --> 00:31:45,730
>> Vi kommer ikke til å gå i detalj.

538
00:31:45,730 --> 00:31:54,210
Men overfladisk, hva den gjør er,
Det spør denne us.json fil, som

539
00:31:54,210 --> 00:31:57,150
er en datafil som
den vi hadde før.

540
00:31:57,150 --> 00:31:59,150
Det er mer komplisert, selvfølgelig.

541
00:31:59,150 --> 00:32:02,920
Men i dette tilfellet, alt
hvert datapunkt er denne tilstanden

542
00:32:02,920 --> 00:32:05,420
og har en liste over
breddegrader og lengdegrad

543
00:32:05,420 --> 00:32:10,500
som definerer et polygon,
som form, at staten.

544
00:32:10,500 --> 00:32:13,280
>> Så hva D3 vil gjøre er lik
til hva vi gjorde før.

545
00:32:13,280 --> 00:32:18,140
Det vil be om at og
binde det til et element.

546
00:32:18,140 --> 00:32:20,890
Og det er en funksjon som
vil kartlegge dette elementet ut,

547
00:32:20,890 --> 00:32:23,410
basert på de breddegrader og lengdegrad.

548
00:32:23,410 --> 00:32:24,580
Du kan lese mer om det.

549
00:32:24,580 --> 00:32:27,385
Og jeg anbefaler det.

550
00:32:27,385 --> 00:32:30,090
>> Det er koblingene på
slutten av denne koden postet.

551
00:32:30,090 --> 00:32:31,570
Og koden blir kommentert.

552
00:32:31,570 --> 00:32:34,050
I det lenker til videre på dette.

553
00:32:34,050 --> 00:32:36,590
Jeg anbefaler at du slå det opp.

554
00:32:36,590 --> 00:32:39,460
Men hva vi bryr oss om er
dette anslaget funksjon.

555
00:32:39,460 --> 00:32:41,210
Jeg ønsker å gå gjennom det.

556
00:32:41,210 --> 00:32:43,522
>> Først av alt, la meg vise
du at, ja, vi har et kart.

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

558
00:32:47,300 --> 00:32:49,970
Kartene er kult.

559
00:32:49,970 --> 00:32:52,330
Så la oss se på dette
produktfunksjon.

560
00:32:52,330 --> 00:32:56,481
>> Projeksjon er veldig mye
som en skala, skalaer igjen.

561
00:32:56,481 --> 00:32:59,210
Så hva produksjon for
denne projeksjon funksjon

562
00:32:59,210 --> 00:33:06,610
ikke er, kan vi passere det lengdegrad
og latitudes-- i dette tilfellet

563
00:33:06,610 --> 00:33:09,590
disse verdiene her er det
latissimus-lengter av bygningen

564
00:33:09,590 --> 00:33:13,990
vi sitter i retten
now-- til projeksjon.

565
00:33:13,990 --> 00:33:20,560
Og projeksjon vil konvertere
det inn x og y pikselverdier.

566
00:33:20,560 --> 00:33:23,300
>> Så hva projeksjon gjør
er svært lik våre skala.

567
00:33:23,300 --> 00:33:27,270
Det tar våre breddegrader og
lengdegrad som representerer en hel verden

568
00:33:27,270 --> 00:33:31,390
og krymper og dimensjonering som
ned til torget som vi ønsker,

569
00:33:31,390 --> 00:33:33,510
at vi har gitt det.

570
00:33:33,510 --> 00:33:35,220
I dette tilfellet er vi
passerer disse verdiene.

571
00:33:35,220 --> 00:33:41,370
Og det er å gi oss, vel, at
på skjermen betyr 640 piksler.

572
00:33:41,370 --> 00:33:46,250
Hele denne skjermen er 700 piksler
bred, slik som gjør oss om her,

573
00:33:46,250 --> 00:33:53,310
og 154 piksler ned, som jeg vil
Estimatet er ganske mye her.

574
00:33:53,310 --> 00:33:57,250
>> Så tar de lat-lengter, som
representere noe på hele kloden

575
00:33:57,250 --> 00:34:02,850
og knuse og flytte det rundt
å gi oss x og y pikselverdier,

576
00:34:02,850 --> 00:34:05,450
dette er det første som er
gjøres i denne kartleggingen kode.

577
00:34:05,450 --> 00:34:07,920
Og deretter resten av
kode forbruker data

578
00:34:07,920 --> 00:34:14,310
og deretter tilordne de lat-lengter
på noe på skjermen din.

579
00:34:14,310 --> 00:34:18,380
>> Men vi kommer til å bruke dette anslaget
funksjoner, fordi det viser seg

580
00:34:18,380 --> 00:34:20,270
vi har Lat-lengter lengter også.

581
00:34:20,270 --> 00:34:24,509
Ser tilbake på våre data, har vi
breddegrader og lengdegrad

582
00:34:24,509 --> 00:34:25,425
for hver observasjon.

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

584
00:34:28,131 --> 00:34:29,130
Så la oss bruke projeksjon.

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

586
00:34:33,250 --> 00:34:37,639
>> Så se på vår utstilling,
vi ønsker vår exposition--

587
00:34:37,639 --> 00:34:39,590
vi har en bredde og en lengdegrad.

588
00:34:39,590 --> 00:34:40,770
Men vi ønsker pikselverdier.

589
00:34:40,770 --> 00:34:43,510
Og det viser seg, vi har nøyaktig
hva vi want-- projeksjon.

590
00:34:43,510 --> 00:34:46,239
Veldig mye som vi var
ved hjelp av skalaen akkurat her,

591
00:34:46,239 --> 00:34:52,075
vi nå kommer til å bruke projeksjon
og passerer det koordinerer.

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

593
00:34:55,241 --> 00:34:56,949
Så det første
vi doing-- så vi er

594
00:34:56,949 --> 00:35:01,520
får d, som er individuell data
element av en individuell jordskjelv

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

596
00:35:02,370 --> 00:35:04,640
Det første vi gjør
er å få koordinatene.

597
00:35:04,640 --> 00:35:06,150
Greit, vi har koordinatene.

598
00:35:06,150 --> 00:35:09,160
>> Den andre tingen vi gjør er
passere den videre til projeksjon.

599
00:35:09,160 --> 00:35:13,440
Projeksjon konverterer disse koordinatene
i pikselverdier, x og y.

600
00:35:13,440 --> 00:35:16,680
Og så det siste vi
ønsker å gjøre er å bare få x,

601
00:35:16,680 --> 00:35:19,342
som dette tilfellet er den første.

602
00:35:19,342 --> 00:35:22,050
Det er den første av de to tingene
som er returnert av projeksjon.

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

604
00:35:27,840 --> 00:35:29,630
>> Vi vil gjøre det samme for y.

605
00:35:29,630 --> 00:35:34,960
Men i stedet, vil vi gå tilbake
det andre elementet, y.

606
00:35:34,960 --> 00:35:35,980
Gjør deg klar for å oppdatere.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, ekstra karakter
her-- fin, har vi

609
00:35:46,450 --> 00:35:51,730
en datadrevet dokument som er
skjule dette JSON-fil av objekter,

610
00:35:51,730 --> 00:35:57,560
lage et kart, og endre
attributt i forhold til data

611
00:35:57,560 --> 00:35:59,600
å projisere den på et kart.

612
00:35:59,600 --> 00:36:00,840
Dette er virkelig interessant.

613
00:36:00,840 --> 00:36:03,770
Dette er kult.

614
00:36:03,770 --> 00:36:05,640
>> La oss ta det opp et hakk.

615
00:36:05,640 --> 00:36:08,795
Jeg mener, vi har to stykker av
informasjon med hvert datapunkt.

616
00:36:08,795 --> 00:36:10,000
Jeg mener, tre.

617
00:36:10,000 --> 00:36:12,540
Vi har koordinatene,
som er en x og y.

618
00:36:12,540 --> 00:36:15,700
Og vi har den størrelsesorden.

619
00:36:15,700 --> 00:36:17,420
>> Vi trenger å kode magnitude eller annen måte.

620
00:36:17,420 --> 00:36:18,920
Vi har en rekke kanaler.

621
00:36:18,920 --> 00:36:20,370
Vi kan bruke farger.

622
00:36:20,370 --> 00:36:21,890
Vi kan bruke radius.

623
00:36:21,890 --> 00:36:23,040
Vi kunne bruke opacity.

624
00:36:23,040 --> 00:36:25,540
Vi kunne bruke mange ting i kode.

625
00:36:25,540 --> 00:36:29,180
Noen av disse attributter og mange
mer som ikke er listet opp her,

626
00:36:29,180 --> 00:36:33,065
fordi de er valgfritt, vi kunne
bruker å kode disse dataene, hjerneslag

627
00:36:33,065 --> 00:36:35,670
og alle disse tingene jeg har nevnt.

628
00:36:35,670 --> 00:36:36,690
>> La oss gjøre radius.

629
00:36:36,690 --> 00:36:38,830
Jeg tror radius er den mest intuitive.

630
00:36:38,830 --> 00:36:46,210
Så igjen, vil vi erstatte det hardkodet
40 og gjøre noen beregninger.

631
00:36:46,210 --> 00:36:48,810
Vi vil bruke vår favoritt skala igjen.

632
00:36:48,810 --> 00:36:50,290
Og vi er forbi d.

633
00:36:50,290 --> 00:36:55,850
Men ikke d fordi vi vil at omfanget
d. d er bare datapunkt.

634
00:36:55,850 --> 00:36:57,430
Vi passerer omfanget å skalere.

635
00:36:57,430 --> 00:36:58,470
>> La oss prøve det igjen.

636
00:36:58,470 --> 00:37:00,230
Ooh, det fungerer ikke.

637
00:37:00,230 --> 00:37:02,940
Hvorfor virker det ikke?

638
00:37:02,940 --> 00:37:04,387
>> Så husk hva skala gjør.

639
00:37:04,387 --> 00:37:05,470
La oss se på skalaen igjen.

640
00:37:05,470 --> 00:37:10,800
Skala kart fra 1 til 10 på
til 22 til 600, mer eller mindre.

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

642
00:37:12,030 --> 00:37:14,730
Dette er grunnen til at vi får dette.

643
00:37:14,730 --> 00:37:18,420
>> Så vi ønsker å endre vår målestokk
til noe mer fornuftig.

644
00:37:18,420 --> 00:37:22,610
La oss si, vi ønsker 0-60.

645
00:37:22,610 --> 00:37:25,340
60 er stor, men 10 jordskjelv
er utrolig sjelden.

646
00:37:25,340 --> 00:37:27,880
Faktisk har de aldri skjedd.

647
00:37:27,880 --> 00:37:31,830
>> Så hva dette vil gjøre er, vil det ta
vår størrelsesorden som går fra 1 til 10

648
00:37:31,830 --> 00:37:34,490
og kartlegge den på å utvide den ut.

649
00:37:34,490 --> 00:37:37,370
Og kartlegge det videre til 0-60.

650
00:37:37,370 --> 00:37:38,840
La oss oppdatere.

651
00:37:38,840 --> 00:37:41,850
>> Nice, har vi en visualisering.

652
00:37:41,850 --> 00:37:42,500
Dette er flott.

653
00:37:42,500 --> 00:37:43,736
Dette er faktiske data.

654
00:37:43,736 --> 00:37:46,360
Du vil legge merke til, i min lille leketøy
eksempel, det største jordskjelvet

655
00:37:46,360 --> 00:37:49,417
er rett på toppen av oss.

656
00:37:49,417 --> 00:37:50,000
Men det er det.

657
00:37:50,000 --> 00:37:54,422
Vi har en dato drevet visualisering
som forbruker data

658
00:37:54,422 --> 00:37:56,255
og gir oss virkelig
interessant informasjon.

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

660
00:38:02,600 --> 00:38:06,420
Ja, la oss legge til noen
interaktivitet til det.

661
00:38:06,420 --> 00:38:08,675
Jeg nevnte at var
den sterke kraft av D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Så her, for hvert element, er vi
beskriver en haug med attributter.

664
00:38:15,060 --> 00:38:20,230
Men vi kan også beskrive hva vi ønsker
å skje med interaktivitet elementer.

665
00:38:20,230 --> 00:38:26,190
For eksempel kan vi beskrive
hva som skjer når vi musen over.

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

667
00:38:28,740 --> 00:38:33,640
Og veldig likt det,
som vil ta en funksjon,

668
00:38:33,640 --> 00:38:36,700
svært lik
attributter vi hadde før,

669
00:38:36,700 --> 00:38:44,650
hvor vi gjør noe til
element når vi sveve over det.

670
00:38:44,650 --> 00:38:47,100
>> Så første vi må
gjøre er å velge det elementet,

671
00:38:47,100 --> 00:38:49,435
å finne det i utgangspunktet, i nettleseren.

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

673
00:38:57,090 --> 00:39:00,920
og da kunne vi sette
et attributt til det.

674
00:39:00,920 --> 00:39:06,870
Så det jeg gjør her er, når vi holder
over noe, vil vi få dette elementet

675
00:39:06,870 --> 00:39:11,197
og deretter sette sin opacity tilbake
til 1, til fullstendig ugjennomsiktig.

676
00:39:11,197 --> 00:39:12,488
La oss se hva som ser ut som.

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

678
00:39:29,430 --> 00:39:39,080
>> Det synes vi har en
ekstra semikolon her.

679
00:39:39,080 --> 00:39:42,420
Så hvis vi sveve over her, det blir full.

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

681
00:39:46,530 --> 00:39:48,960
Men nå, selvfølgelig, det
forblir fullt, fordi vi

682
00:39:48,960 --> 00:39:53,240
må beskrive hva som skjer
når fjerne vår markøren.

683
00:39:53,240 --> 00:39:59,990
Så la oss gjøre akkurat det på
mouseout, i motsetning til mouse.

684
00:39:59,990 --> 00:40:06,399
>> Og vi vil tilbakestille det til
hva vi hadde before-- 0,5.

685
00:40:06,399 --> 00:40:10,260
Og nå, hver gang vi
hover, vi får en full sirkel.

686
00:40:10,260 --> 00:40:13,468
Det hjelper oss å se hva vi
vi velger i hovedsak.

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

688
00:40:19,210 --> 00:40:22,860
>> Og nå la oss gjøre dette virkelig flott.

689
00:40:22,860 --> 00:40:26,210
La oss koble denne til reelle data.

690
00:40:26,210 --> 00:40:30,890
Så la oss be kunne
USGS om sine data.

691
00:40:30,890 --> 00:40:35,630
Så US Geological Survey
har data om jordskjelv.

692
00:40:35,630 --> 00:40:41,460
De har en offentlig API som er i stand
å bli fortært i JSON-format.

693
00:40:41,460 --> 00:40:42,548
Så la oss gjøre det.

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

695
00:40:49,730 --> 00:40:55,900
>> Så dette er en bit av koden som
kobles til USGS API.

696
00:40:55,900 --> 00:40:57,990
Og det er litt av prosessering på det.

697
00:40:57,990 --> 00:41:02,200
Dette er ikke relevant, men det forenkler
til en enkelt dataformat som en

698
00:41:02,200 --> 00:41:03,800
vi hadde før.

699
00:41:03,800 --> 00:41:08,140
Så jeg bli kvitt vår samtale til
vår falske data.json på filen.

700
00:41:08,140 --> 00:41:13,110
Og i stedet, jeg ringer
USGS hovedsak.

701
00:41:13,110 --> 00:41:16,700
>> La oss oppdatere, hyggelig.

702
00:41:16,700 --> 00:41:21,260
Dette er faktiske, reelle data
fra denne uken for jordskjelv.

703
00:41:21,260 --> 00:41:23,217
Dette er virkelig interessant.

704
00:41:23,217 --> 00:41:25,050
Dette er ikke overraskende
for oss, men det finnes

705
00:41:25,050 --> 00:41:27,909
en masse av jordskjelv på
West Coast i California.

706
00:41:27,909 --> 00:41:30,950
Men jeg syntes det var veldig interessant
at det var så mange jordskjelv

707
00:41:30,950 --> 00:41:34,350
i Alaska, og tilsynelatende,
her i Midtvesten.

708
00:41:34,350 --> 00:41:37,630
Jeg mener, interessant, og vi er gode.

709
00:41:37,630 --> 00:41:40,410
Det er konklusjonen.

710
00:41:40,410 --> 00:41:43,760
>> Men fundamentalt, dette
er hva D3 hjelper oss til å gjøre.

711
00:41:43,760 --> 00:41:48,030
Det hjelper oss ta data, bind
det til elementer i DOM,

712
00:41:48,030 --> 00:41:51,620
og har disse elementene endres
som en funksjon av data,

713
00:41:51,620 --> 00:41:54,780
har disse attributtene, alle de
mange attributter for elementene,

714
00:41:54,780 --> 00:41:57,393
alle være nyttig for kanalene
å formidle informasjon.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 er et utrolig kraftig
bibliotek og utrolig veldrevet.

717
00:42:09,290 --> 00:42:12,260
Dette er noen kraftige saker.

718
00:42:12,260 --> 00:42:15,960
Data visualisering er en
utrolig kraftig verktøy

719
00:42:15,960 --> 00:42:21,530
for å formidle til folk dype
innsikter som får til deres kjerne

720
00:42:21,530 --> 00:42:25,430
og hjelper dem til å forstå, i
dette dyp og intuitiv måte,

721
00:42:25,430 --> 00:42:29,760
hvordan data fungerer og hvordan
data endrer våre liv.

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