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

2
00:00:00,780 --> 00:00:11,880
>> [MUSIK SPELA]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Jag är David
Chouinard, och detta är D3.

4
00:00:16,480 --> 00:00:17,700
Välkommen.

5
00:00:17,700 --> 00:00:21,270
Vi kommer att lära sig om D3 idag.

6
00:00:21,270 --> 00:00:25,020
D3 är en JavaScript ramverk
för att bygga en hög kvalitet

7
00:00:25,020 --> 00:00:28,110
interaktiva visualiseringar för webben.

8
00:00:28,110 --> 00:00:30,870
Saker som vad vi är
ser i baksidan av mig,

9
00:00:30,870 --> 00:00:34,230
vi kommer att lära sig att göra dem
saker, typ av grunderna i det.

10
00:00:34,230 --> 00:00:36,452
Men det kommer att vara cool.

11
00:00:36,452 --> 00:00:38,160
Låt oss komma igång
gör vackra bilder.

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

13
00:00:41,108 --> 00:00:44,350
Vi har fler demos
av utsikterna tillgängliga.

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

15
00:00:48,040 --> 00:00:50,760
Låt oss göra det.

16
00:00:50,760 --> 00:00:58,700
>> Akt I, DOM manipulation-- vi ska
att börja direkt göra coola saker.

17
00:00:58,700 --> 00:01:01,240
Först av allt, på vänster sida, har vi kod.

18
00:01:01,240 --> 00:01:03,470
Till höger har vi
resultatet av vår kod.

19
00:01:03,470 --> 00:01:04,900
Låt oss gå igenom det.

20
00:01:04,900 --> 00:01:05,780
>> Låt oss göra en cirkel.

21
00:01:05,780 --> 00:01:08,570
Hur låter det?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
Vi gjorde bara en cirkel.

23
00:01:14,934 --> 00:01:16,100
Du behöver inte tro mig, eller hur?

24
00:01:16,100 --> 00:01:18,190
Det är inte där.

25
00:01:18,190 --> 00:01:21,830
>> Så vad vi gjorde just här är,
SVG är skalbar vektorgrafik.

26
00:01:21,830 --> 00:01:27,530
Detta är vårt sätt att tala om för webbläsaren att
göra vektorgrafik i webbläsaren.

27
00:01:27,530 --> 00:01:30,740
Vad vi gjorde precis just nu
läggs en cirkel för att bläddra.

28
00:01:30,740 --> 00:01:34,790
>> Löftet är att cirkeln
kräver lite grundläggande attribut

29
00:01:34,790 --> 00:01:36,850
innan vi faktiskt kan se det.

30
00:01:36,850 --> 00:01:40,045
Vi måste tala om det dess x läge,
dess y läge, dess radie.

31
00:01:40,045 --> 00:01:43,310
Vi talade inte om det något av det,
så vi inte ser det just nu.

32
00:01:43,310 --> 00:01:46,210
Men låt oss säga det grejer.

33
00:01:46,210 --> 00:01:49,510
>> Så först av allt, har du fått
att ge vår krets ett namn.

34
00:01:49,510 --> 00:01:53,070
Så låt oss kalla det cirkel.

35
00:01:53,070 --> 00:01:54,406
Vår cirkel har ett namn nu.

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

37
00:01:57,230 --> 00:01:59,490
Och låt oss ge det några attribut.

38
00:01:59,490 --> 00:02:03,690
Vad sägs om cx skulle centrera x, så
mitten av x-position.

39
00:02:03,690 --> 00:02:06,730
Låt oss säga, 200 för 200 pixlar.

40
00:02:06,730 --> 00:02:10,220
>> Låt oss ge det ett y på 200 pixlar samt.

41
00:02:10,220 --> 00:02:16,032
Och en r, en radie av ca 40 pixlar.

42
00:02:16,032 --> 00:02:16,950
Nu ska vi se.

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

44
00:02:21,740 --> 00:02:23,440
Jag kan inte stava.

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

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

47
00:02:31,520 --> 00:02:37,330
Vi har en cirkel vid position 200
pixlar, 200 pixlar, radie av 40 pixlar.

48
00:02:37,330 --> 00:02:38,280
Typ av cool, eller hur?

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

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

51
00:02:40,880 --> 00:02:42,670
>> Så ingen anledning att följa med.

52
00:02:42,670 --> 00:02:45,790
Alla dessa exempel är alla av
koden jag gör idag

53
00:02:45,790 --> 00:02:51,300
kommer att tillhandahållas på nätet i slutet
i form av interaktiva exempel

54
00:02:51,300 --> 00:02:54,010
med kontrollpunkter på
varje handling, och så vidare.

55
00:02:54,010 --> 00:02:55,160
>> Låt oss göra mer saker.

56
00:02:55,160 --> 00:02:58,901
Denna svarta cirkeln är verkligen ful.

57
00:02:58,901 --> 00:03:01,541
Jag är ledsen för att fel
meddelanden just där.

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

59
00:03:05,340 --> 00:03:06,350
>> Låt oss ge det en färg.

60
00:03:06,350 --> 00:03:07,170
Hur är det?

61
00:03:07,170 --> 00:03:08,340
Jag gillar att stålblå.

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

63
00:03:13,280 --> 00:03:16,030
Tja, vår krets ändrat färg.

64
00:03:16,030 --> 00:03:17,320
Det är bra.

65
00:03:17,320 --> 00:03:31,330
Låt oss göra det halvgenomskinliga
too-- halvtransparent.

66
00:03:31,330 --> 00:03:33,670
>> Så dessa är attribut
vi definierar på cirkeln.

67
00:03:33,670 --> 00:03:36,774
Det första vi gjorde är
vi sätta en cirkel på sidan.

68
00:03:36,774 --> 00:03:38,690
Och sedan är vi definiera
ett gäng attribut.

69
00:03:38,690 --> 00:03:41,610
Vissa av dessa är obligatoriska,
gillar CX, CY och Radius.

70
00:03:41,610 --> 00:03:42,680
Och andra är valfria.

71
00:03:42,680 --> 00:03:44,730
>> Det finns många fler attribut.

72
00:03:44,730 --> 00:03:46,760
Det finns en hel del av dem.

73
00:03:46,760 --> 00:03:53,070
Till exempel kan vi ha en
stroke också, en stroke av rött.

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

75
00:03:55,630 --> 00:04:00,450
Vi är tillbaka till en cirkel, en blå cirkel.

76
00:04:00,450 --> 00:04:01,600
>> Så låt oss göra fler cirklar.

77
00:04:01,600 --> 00:04:02,810
Hur är det?

78
00:04:02,810 --> 00:04:04,665
Låt oss göra en annan cirkel.

79
00:04:04,665 --> 00:04:05,985
Detta är spännande, eller hur?

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

81
00:04:09,630 --> 00:04:12,300
>> Så säger jag bara Copy-Klistras
vad vi hade redan.

82
00:04:12,300 --> 00:04:13,570
Låt oss kalla det circle2.

83
00:04:13,570 --> 00:04:15,840
Och låt oss göra det exakta
samma sak och ge den

84
00:04:15,840 --> 00:04:20,450
attribut, givet en x-position 300.

85
00:04:20,450 --> 00:04:24,140
Yay, har vi två cirklar nu.

86
00:04:24,140 --> 00:04:27,240
>> Och naturligtvis, vi kunde
uppdatera dessa värden.

87
00:04:27,240 --> 00:04:31,640
Jag skulle kunna sätta den på 400, och nu flyttar.

88
00:04:31,640 --> 00:04:35,470
Och eftersom det är irriterande, låt oss
ta bort det, så circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Det är borta nu.

91
00:04:40,730 --> 00:04:43,170
>> Så vad vi gör och
är bara väldigt, very-- här

92
00:04:43,170 --> 00:04:46,030
är mycket likt det du
kan göra i jQuery, till exempel.

93
00:04:46,030 --> 00:04:48,240
Vi har precis manipulera
DOM, det kallas.

94
00:04:48,240 --> 00:04:50,040
Du kanske har hört det ordet förut.

95
00:04:50,040 --> 00:04:53,255
Vi skapar saker, inställning
attribut på saker, ta bort saker.

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

97
00:04:58,950 --> 00:05:02,360
>> Nu är här där det blir intressant.

98
00:05:02,360 --> 00:05:07,250
Så senare i koden, vi kan fortfarande
hänvisa till den ursprungliga cirkeln här.

99
00:05:07,250 --> 00:05:14,100
Så låt oss återställa dess attribut till cx.

100
00:05:14,100 --> 00:05:18,260
Låt oss säga, dess x-position till 400.

101
00:05:18,260 --> 00:05:22,406
Och jag kommer att övergå
att, så det är självklart.

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

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

104
00:05:24,780 --> 00:05:26,440
Vi satt några attribut.

105
00:05:26,440 --> 00:05:28,210
Vi lade en annan cirkel, tog bort den.

106
00:05:28,210 --> 00:05:31,650
Och sedan är vi modifiera
den ursprungliga cirkeln.

107
00:05:31,650 --> 00:05:35,400
>> Men här är där det blir
mycket mer intressant.

108
00:05:35,400 --> 00:05:39,070
Inte bara kan vi ställa attribut
som bara värden, kan vi säga,

109
00:05:39,070 --> 00:05:41,610
hey, cirkel, gå till position 200.

110
00:05:41,610 --> 00:05:44,540
Vi kan också ställa dem som funktioner.

111
00:05:44,540 --> 00:05:48,850
>> Så istället för att ge 400 här,
vi kan göra några beräkningar

112
00:05:48,850 --> 00:05:53,950
i farten för vad vi
vill att attributet ska vara.

113
00:05:53,950 --> 00:05:56,580
Så detta är hur du skulle uttrycka det.

114
00:05:56,580 --> 00:06:00,660
Vi säger, i stället för 400, låt mig
ge dig en funktion istället.

115
00:06:00,660 --> 00:06:04,180
Och här, i denna funktion,
vi kan göra någon galen beräkning.

116
00:06:04,180 --> 00:06:06,820
>> Vi kan ta tid och
titta på några andra sak

117
00:06:06,820 --> 00:06:11,230
och dynamiskt bestämma
cirkeln vilket värde vi vill.

118
00:06:11,230 --> 00:06:15,266
Vad sägs om att vi ger bara
det en slumpmässig x-position?

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

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

121
00:06:21,120 --> 00:06:25,490
>> Så vad som säger är, för
varje x, kör denna funktion.

122
00:06:25,490 --> 00:06:29,340
Och vad vi gör är att beräkna
vissa saker, en slumpmässig gånger bredden

123
00:06:29,340 --> 00:06:30,410
och returnera det.

124
00:06:30,410 --> 00:06:34,765
Så varje gång vi kör det, vi får en
cirkel som går till en slumpmässig plats.

125
00:06:34,765 --> 00:06:36,394
Det är ganska häftigt.

126
00:06:36,394 --> 00:06:38,310
Jag känner att jag skulle kunna se
Detta för lite.

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

128
00:06:44,274 --> 00:06:46,440
Vi börjar komma till
något intressant här.

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

130
00:06:49,120 --> 00:06:51,390
Låt oss göra detta data driven nu.

131
00:06:51,390 --> 00:06:53,420
Det finns ingen data här.

132
00:06:53,420 --> 00:06:54,482
Låt oss ändra på 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å låt oss gå tillbaka till hit.

135
00:07:12,140 --> 00:07:15,340
Och låt oss bara bli av circle2,
eftersom vi bara lägga till och ta bort

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

137
00:07:15,840 --> 00:07:17,382
Så gör vi inte verkligen behöver det.

138
00:07:17,382 --> 00:07:21,421
Vi måste vara mycket mer smart här.

139
00:07:21,421 --> 00:07:23,170
Låt oss säga, vi har
vissa uppgifter av något slag.

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

141
00:07:31,540 --> 00:07:40,020
Man moment-- låt oss säga,
Vi hade uppgifter i detta formulär.

142
00:07:40,020 --> 00:07:41,800
Vi hade en matris, precis
en massa siffror.

143
00:07:41,800 --> 00:07:45,750
Vi har sju siffror här,
oavsett dessa represent-- belopp

144
00:07:45,750 --> 00:07:48,810
i människors bankkonto, hur
mycket de väger, Gud vet vad.

145
00:07:48,810 --> 00:07:51,310
>> Dessa är siffror, och vi
vill använda våra cirklar

146
00:07:51,310 --> 00:07:53,240
att representera dessa siffror på något sätt.

147
00:07:53,240 --> 00:07:55,515
Vi vill knyta vår
cirklar till dessa siffror.

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

149
00:07:58,750 --> 00:07:59,626
Så vad vi gör.

150
00:07:59,626 --> 00:08:01,500
Låt oss säga, vi vill ha en
cirkel för varje nummer.

151
00:08:01,500 --> 00:08:03,590
Vi kunde göra den gamla
sak vi doing--

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

153
00:08:06,020 --> 00:08:10,020
Men detta spårar ur, och
det finns en hel del att upprepa logik.

154
00:08:10,020 --> 00:08:12,760
>> Så låt oss få mer smart med det.

155
00:08:12,760 --> 00:08:17,810
Istället för att använda var cirkeln
svg.append att vi bara använde,

156
00:08:17,810 --> 00:08:21,580
vi kommer att använda
denna lilla blocket här.

157
00:08:21,580 --> 00:08:24,510
Jag vill inte gå på djupet
i vad alla dessa delar gör.

158
00:08:24,510 --> 00:08:26,020
Och det är typ av en avancerad ämne.

159
00:08:26,020 --> 00:08:27,830
Och jag önskar att jag kunde.

160
00:08:27,830 --> 00:08:31,370
>> Men det viktigaste att recognize-- och
du ser mycket ofta i D3-kod.

161
00:08:31,370 --> 00:08:36,840
Denna textblock grundläggande
skapar så många cirklar

162
00:08:36,840 --> 00:08:41,360
som det finns dataelement
i denna array här.

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

164
00:08:53,420 --> 00:08:55,780
Så detta skapar så många
cirklar som det finns element.

165
00:08:55,780 --> 00:08:58,520
Det kommer att skapa oss sju cirklar.

166
00:08:58,520 --> 00:09:01,710
Och det gör en riktigt, riktigt viktig sak.

167
00:09:01,710 --> 00:09:02,460
Så låt oss köra den.

168
00:09:02,460 --> 00:09:05,460
Låt oss ta bort vår andra cirkeln.

169
00:09:05,460 --> 00:09:09,565
Låt oss bara kommentera
del ut och köra igen.

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

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

172
00:09:15,260 --> 00:09:18,030
Så vår cirkel här är en
mycket mörkare, eftersom vi

173
00:09:18,030 --> 00:09:20,720
har sju cirklar, en
ovanpå den andra.

174
00:09:20,720 --> 00:09:25,425
Vi skapade bara sju cirklar, en
vardera för var och en av dessa dataelement.

175
00:09:25,425 --> 00:09:28,860
Men det finns en viktig sak som hände
med denna snutt här.

176
00:09:28,860 --> 00:09:31,030
>> Det är att data var bunden.

177
00:09:31,030 --> 00:09:33,440
Så varenda en av
dessa dataelement,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, var bunden
till en viss cirkel.

179
00:09:38,830 --> 00:09:40,960
Så dessa inte bara skapat
ett gäng cirklar

180
00:09:40,960 --> 00:09:43,420
men knyter dessa två saker tillsammans.

181
00:09:43,420 --> 00:09:48,740
>> Och i framtiden, eftersom vi skapade
dessa kretsar med denna D3 funktion,

182
00:09:48,740 --> 00:09:52,430
om jag ger dig en cirkel, kan du
ge mig de uppgifter som är förknippade med den.

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

184
00:09:53,280 --> 00:09:54,840
Hej, D3, jag har denna cirkel.

185
00:09:54,840 --> 00:09:57,350
Vad är de data som cirkeln har?

186
00:09:57,350 --> 00:10:01,290
Och D3 skulle berätta 10 eller 45 eller 105.

187
00:10:01,290 --> 00:10:02,380
>> Dessa saker är bundna.

188
00:10:02,380 --> 00:10:04,490
Det är en väldigt, väldigt grundläggande begrepp.

189
00:10:04,490 --> 00:10:06,070
Låt oss titta på det.

190
00:10:06,070 --> 00:10:12,210
>> Så hur vi skulle ställa D3-- så
detta är irrelevant för detta,

191
00:10:12,210 --> 00:10:16,620
men bara lita på mig om det.

192
00:10:16,620 --> 00:10:17,620
Det är så vi ber D3.

193
00:10:17,620 --> 00:10:21,312
Hej, D3, ge mig den första
cirkel som du kan hitta.

194
00:10:21,312 --> 00:10:23,580
Ge mig den första cirkeln du kan hitta.

195
00:10:23,580 --> 00:10:29,660
Och då kan vi be D3, vad är
data på den, som den här, 10.

196
00:10:29,660 --> 00:10:33,380
>> Så vi bara be D3, hitta mig
den första cirkeln du kan hitta.

197
00:10:33,380 --> 00:10:34,400
Vad är dess data?

198
00:10:34,400 --> 00:10:36,650
10, är ​​det verkligen vår
första dataelement.

199
00:10:36,650 --> 00:10:42,150
Vi kan fråga det, hey, D3,
hitta oss vår tredje cirkeln.

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

201
00:10:44,450 --> 00:10:45,740
Varför är detta verkligen viktigt?

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

203
00:10:49,790 --> 00:10:52,250
>> Så just här, nämnde jag
att vi skulle kunna använda funktionerna.

204
00:10:52,250 --> 00:10:54,910
Och jag nämnde det var
en mycket kraftfull sak.

205
00:10:54,910 --> 00:11:03,070
Så inte bara kan våra funktioner gör saker
som gör vissa beräkningar, till exempel,

206
00:11:03,070 --> 00:11:09,170
returnera ett slumptal, det kan
också göra saker som bygger på data.

207
00:11:09,170 --> 00:11:11,550
Detta är vad data driven dokument betyder.

208
00:11:11,550 --> 00:11:13,750
Det är vad D3 står för.

209
00:11:13,750 --> 00:11:17,800
>> Så detta x postition-- istället
för att bara säga, alla cirklar,

210
00:11:17,800 --> 00:11:21,735
få x ställning 200, vi
skulle kunna ge det en funktion.

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

212
00:11:26,140 --> 00:11:30,140
Och här kan vi göra några beräkningar.

213
00:11:30,140 --> 00:11:33,710
och d står här på plats för data.

214
00:11:33,710 --> 00:11:36,120
Så varje gång vi har
en cirkel, i princip,

215
00:11:36,120 --> 00:11:37,750
D3 kommer att skapa dessa sju cirklar.

216
00:11:37,750 --> 00:11:38,500
Och sedan för varje

217
00:11:38,500 --> 00:11:41,920
>> cirkel, det kommer att gå, hej,
circle1 vad är din x-position.

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

219
00:11:45,210 --> 00:11:48,630
Men nu, frågar varje gång D3
vad är din X-position,

220
00:11:48,630 --> 00:11:51,790
det kommer att ge oss-- vi har
den cirkeln, så vi har data.

221
00:11:51,790 --> 00:11:55,290
Det kommer att ge oss uppgifter och säga,
vad vill du utläggningen vara,

222
00:11:55,290 --> 00:11:57,120
baserat på dessa data.

223
00:11:57,120 --> 00:11:59,590
>> Låt oss bara tillbaka de faktiska uppgifter.

224
00:11:59,590 --> 00:12:04,910
Så om vi kör detta, ger detta
us data driven dokument.

225
00:12:04,910 --> 00:12:08,040
Dessa cirklar är baserade
i förhållande position--

226
00:12:08,040 --> 00:12:11,120
de är baser som en funktion av data.

227
00:12:11,120 --> 00:12:13,100
>> Så för den första cirkeln,
D3 sätter en cirkel.

228
00:12:13,100 --> 00:12:16,770
Och sedan D3 frågar oss, vad gör
du vill att utläggningen vara.

229
00:12:16,770 --> 00:12:19,620
Och vi bara säga, oavsett data.

230
00:12:19,620 --> 00:12:21,185
Gör verkstadshandboken 10.

231
00:12:21,185 --> 00:12:26,320
>> Då frågar, vad vill du att
utläggning att vara för den andra cirkeln.

232
00:12:26,320 --> 00:12:27,270
Och vi svarar, 45.

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

234
00:12:30,000 --> 00:12:32,230
Och vi, naturligtvis, kan
göra några beräkningar här.

235
00:12:32,230 --> 00:12:35,510
Jag tycker att dessa cirklar
är typ av mosade upp.

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

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

238
00:12:41,870 --> 00:12:43,840
Vår cirkel fick just utökats ut.

239
00:12:43,840 --> 00:12:46,730
Vår värdet tredubblats.

240
00:12:46,730 --> 00:12:51,010
>> Cirkeln är verkligen på kanten,
så låt oss kanske slags kompensera det.

241
00:12:51,010 --> 00:12:53,632
Låt oss säga, med 20.

242
00:12:53,632 --> 00:12:56,070
Här har du.

243
00:12:56,070 --> 00:12:57,590
>> Detta är en datavisualisering.

244
00:12:57,590 --> 00:13:01,767
Det är en mycket grundläggande, men det
ger oss en inblick i våra data.

245
00:13:01,767 --> 00:13:04,600
Det säger oss att, till exempel, vi
har en liten kluster av element.

246
00:13:04,600 --> 00:13:06,340
Och vi har en stor avvikare här.

247
00:13:06,340 --> 00:13:10,830
Detta ger oss en del information
om fördelningen.

248
00:13:10,830 --> 00:13:20,830
>> Om vi ​​till exempel vill ändra
data till 150 här och uppdatera,

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

250
00:13:22,630 --> 00:13:24,285
Detta dokument är data driven.

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

252
00:13:32,640 --> 00:13:36,180
>> Så naturligtvis, alla dessa element,
alla dessa attribut här,

253
00:13:36,180 --> 00:13:38,430
vi kan använda en funktion, inte
bara siffror, inte bara

254
00:13:38,430 --> 00:13:39,900
x- och y-positioner.

255
00:13:39,900 --> 00:13:42,120
Så vi kan använda en funktion för färgen.

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

257
00:13:45,260 --> 00:13:46,360
Så vi ska göra detsamma.

258
00:13:46,360 --> 00:13:49,360
Vi ska ge det en funktion.

259
00:13:49,360 --> 00:13:52,320
>> Och låt oss säga, vi skulle kunna ha
villkors i vår funktion.

260
00:13:52,320 --> 00:13:54,770
Denna funktion kan vara
hundra rader långa.

261
00:13:54,770 --> 00:13:57,150
Det kan göra mycket, mycket komplicerade saker.

262
00:13:57,150 --> 00:13:59,080
>> Så låt oss sätta en if-sats här.

263
00:13:59,080 --> 00:14:03,420
Låt oss säga, om vår data är mindre
än 50, det är en del tröskel

264
00:14:03,420 --> 00:14:05,817
att vi är intresserade
in av någon anledning.

265
00:14:05,817 --> 00:14:06,650
Låt oss göra det grönt.

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

267
00:14:09,830 --> 00:14:15,320
Annars, låt oss göra det rött.

268
00:14:15,320 --> 00:14:16,110
Hur är 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 börjar
att förmedla mer intressant information

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

273
00:14:26,727 --> 00:14:28,560
Så nu vet vi lite
om fördelningen.

274
00:14:28,560 --> 00:14:31,768
Och vi vet att det finns någon form av
avskurna vid 50 som vi är intresserade av.

275
00:14:31,768 --> 00:14:35,630
Vi vet att det finns två datapunkter
under denna tröskel, och de flesta av dem

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

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

278
00:14:41,510 --> 00:14:46,160
>> Så som ett sista steg, denna data här,
det är mycket ovanligt att se detta viset.

279
00:14:46,160 --> 00:14:52,610
Så låt oss bara flytta ut den till en variabel
eftersom det är renare, som den här.

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

281
00:15:02,980 --> 00:15:05,197
Och sedan använder vi den variabeln här.

282
00:15:05,197 --> 00:15:06,280
Det är exakt samma sak.

283
00:15:06,280 --> 00:15:07,280
Det är bara lite renare.

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

285
00:15:25,300 --> 00:15:35,300
>> Nästa upp, Act III, Scales--
Så ett problem rätt

286
00:15:35,300 --> 00:15:38,920
här är, om vi ändrar vårt
data i denna 200 value--

287
00:15:38,920 --> 00:15:41,685
om vi ändrar det till 400
eller något och uppdatera,

288
00:15:41,685 --> 00:15:44,540
då detta värde bara gick utanför skärmen.

289
00:15:44,540 --> 00:15:49,040
Så vår logik här
hur vi gör tiderna 3

290
00:15:49,040 --> 00:15:52,570
och 20, för att sprida ut det och sedan
offset det lite är riktigt otymplig.

291
00:15:52,570 --> 00:15:54,150
>> Vad gör dessa siffror betyder?

292
00:15:54,150 --> 00:15:55,400
De är bara hårt kodad där.

293
00:15:55,400 --> 00:15:58,830
Och de är mycket bunden till uppgifterna.

294
00:15:58,830 --> 00:16:00,550
Vi vill ha en datadriven dokument.

295
00:16:00,550 --> 00:16:05,460
Vi vill ha en mycket flexibel dokument,
att givna data, anpassar sig till det

296
00:16:05,460 --> 00:16:07,900
och representerar den.

297
00:16:07,900 --> 00:16:11,330
>> Vad vi i grunden behöver är, vi
har denna nummerserie 10.

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

299
00:16:12,640 --> 00:16:17,630
Och vi vill mappa det ut på
bredden, hela bredden här.

300
00:16:17,630 --> 00:16:20,620
Så vi har intervallet
nummer som går från 0 till 100.

301
00:16:20,620 --> 00:16:24,980
Och vi har denna campus I går
20-700, i det här fallet.

302
00:16:24,980 --> 00:16:26,515
>> Vi vill slags att kart det på.

303
00:16:26,515 --> 00:16:30,002
Vi vill att skala upp det och
då kompensera det lite.

304
00:16:30,002 --> 00:16:33,165
Det visar sig att D3 har dessa.

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

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

307
00:16:37,410 --> 00:16:38,250
Så låt oss använda den.

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

309
00:16:46,300 --> 00:16:49,670
>> Det sätt som works-- jag ska
skriver detta upp och sedan förklara det.

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

311
00:17:01,530 --> 00:17:02,450
Detta är en skala.

312
00:17:02,450 --> 00:17:08,670
Vad det kommer att göra är, kommer det att kartlägga
värden från 1 till 200 om till 20-600.

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

314
00:17:10,990 --> 00:17:13,329
Vi kan se att här.

315
00:17:13,329 --> 00:17:21,704
>> Så om jag matar den 1-- ett ögonblick.

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

317
00:17:47,764 --> 00:17:48,555
Ge mig en sekund.

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

319
00:17:53,680 --> 00:17:55,080
Jag måste ha stavat fel det.

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

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

322
00:18:15,990 --> 00:18:17,930
Jag är ledsen för det.

323
00:18:17,930 --> 00:18:22,050
>> Så vad en skala kommer att göra
är, kommer det att ta ett värde

324
00:18:22,050 --> 00:18:24,930
och sedan omvandla det,
expandera ut det, så det

325
00:18:24,930 --> 00:18:27,320
fyller hela skalan du frågar efter.

326
00:18:27,320 --> 00:18:32,910
Så i det här fallet, om vi ger det en,
det kommer att kart att ut på 20.

327
00:18:32,910 --> 00:18:37,750
Och om vi ger det 200, är ​​det
kommer att kart det på till 600.

328
00:18:37,750 --> 00:18:40,460
Och någonstans däremellan,
om vi får 100, är ​​det

329
00:18:40,460 --> 00:18:44,610
kommer att vara någonstans
mellan 20 och 600.

330
00:18:44,610 --> 00:18:51,480
>> Och naturligtvis, det är nu vad
Vi måste ta bort dessa hårdkodat

331
00:18:51,480 --> 00:18:53,402
saker vi har rätt där.

332
00:18:53,402 --> 00:18:55,950
Så vad vi vill göra är att
ta de data som vi är

333
00:18:55,950 --> 00:19:00,950
givet, att enskilda uppgifter
element, och ge det att skala först.

334
00:19:00,950 --> 00:19:02,635
Så skala skalas upp.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Åh, vi har en liten fel här.

337
00:19:48,880 --> 00:19:50,120
Vi saknade uppgifter.

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

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

340
00:19:58,550 --> 00:19:59,550
Och som expanderar ut.

341
00:19:59,550 --> 00:20:01,383
>> Det ger oss samma
Resultatet vi hade tidigare,

342
00:20:01,383 --> 00:20:04,030
men istället för att ha de
hårdkodad begränsningar.

343
00:20:04,030 --> 00:20:07,790
Och om storleken på vår
duk förändringar, till exempel,

344
00:20:07,790 --> 00:20:11,790
om vi vill ha detta över
400 pixlar och det squishes ut,

345
00:20:11,790 --> 00:20:15,440
Vi kan ha det over--
Vi kan utöka det, eller vi

346
00:20:15,440 --> 00:20:21,890
kan minska denna vänster marginal till
något mindre eller mer än 20.

347
00:20:21,890 --> 00:20:25,470
Dessa siffror, dessa hårt kodad
siffror nu vettigt för oss.

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

349
00:20:28,110 --> 00:20:30,520
>> Och vi kan göra mycket mer
intressanta saker också.

350
00:20:30,520 --> 00:20:35,990
Så i stället för att ha en linjär
skala, kanske vi vill logga en skala.

351
00:20:35,990 --> 00:20:37,840
Och det kommer att ge oss en logaritmisk skala.

352
00:20:37,840 --> 00:20:41,269
>> Så nu vår skala, i stället för
bara expanderar ut det intervallet,

353
00:20:41,269 --> 00:20:42,810
det gör mer avancerade saker.

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

355
00:20:48,790 --> 00:20:53,790
Istället för att ha detta intervall hårt
kodade, och istället för att ha det 600,

356
00:20:53,790 --> 00:20:58,465
vi kanske vill bara använda bredden,
så från 20 till bredden minus 40,

357
00:20:58,465 --> 00:21:02,392
2 gånger marginalen på den andra sidan.

358
00:21:02,392 --> 00:21:05,350
Och detta gör mycket mer meningsfullt att
någon som kan titta på koden.

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

360
00:21:08,080 --> 00:21:11,850
>> Intressant vågen får
mycket, mycket sofistikerad också.

361
00:21:11,850 --> 00:21:13,350
De gör en hel del intressanta saker.

362
00:21:13,350 --> 00:21:17,620
Så vågar inte nödvändigtvis
att arbeta bara med siffror.

363
00:21:17,620 --> 00:21:18,955
Låt oss göra en färgskala.

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

365
00:21:23,120 --> 00:21:26,120
>> Så vårt sortiment kan be--
vår domän är 1 till 200.

366
00:21:26,120 --> 00:21:28,220
Det är ingångs sak.

367
00:21:28,220 --> 00:21:33,793
Men vi kanske vill mappa från
grönt till rött, till exempel.

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

369
00:21:39,710 --> 00:21:42,910
Och nu, om vi passerar den 1,
Vi kommer att få grönt.

370
00:21:42,910 --> 00:21:45,110
Om vi ​​ger det 200, får vi rött.

371
00:21:45,110 --> 00:21:49,480
Och om vi passerar det något däremellan,
det kommer att bli någon blandning av det,

372
00:21:49,480 --> 00:21:52,520
någonstans på lutningen
mellan grönt och rött.

373
00:21:52,520 --> 00:21:55,210
>> Och istället för att ha
denna typ av clunky logik

374
00:21:55,210 --> 00:21:58,550
vi har här med
korad rätt där,

375
00:21:58,550 --> 00:22:03,250
Vi skulle kunna ha something-- en
linjär skala mellan dem.

376
00:22:03,250 --> 00:22:07,100
Så vi skulle använda skalan vi bara
skapat, som vi kallade färg.

377
00:22:07,100 --> 00:22:09,060
Och vi skulle ge det D, vilket
är vår dataelement.

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

379
00:22:14,250 --> 00:22:15,060
Och där går vi.

380
00:22:15,060 --> 00:22:18,070
Vi har en färgskala.

381
00:22:18,070 --> 00:22:18,940
>> Så det här är kartläggning.

382
00:22:18,940 --> 00:22:20,960
Så längst till vänster är helt grön.

383
00:22:20,960 --> 00:22:22,560
Den längst till höger är helt röd.

384
00:22:22,560 --> 00:22:24,828
Och allt däremellan
är en funktion av d.

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

386
00:22:33,369 --> 00:22:35,160
Vi har en intressant
visualiseringar här.

387
00:22:35,160 --> 00:22:36,952
Men våra data var ganska tråkigt.

388
00:22:36,952 --> 00:22:39,410
Låt oss se vad vi kunde göra om
vi hade mer intressanta uppgifter.

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

390
00:22:44,420 --> 00:22:50,500
>> Act IV, Arbeta med
Data-- det första

391
00:22:50,500 --> 00:22:53,560
vi vill göra för att göra vår
visualisering mer intressant

392
00:22:53,560 --> 00:22:56,140
är att flytta data någon annanstans.

393
00:22:56,140 --> 00:22:58,310
Det är väldigt otymplig att ha
data hårdkodade här.

394
00:22:58,310 --> 00:23:01,220
Och generellt, vi kommer att fråga
någon annan för data.

395
00:23:01,220 --> 00:23:05,400
Vi ska kanske be regeringen,
Census Bureau, vad är dina data

396
00:23:05,400 --> 00:23:10,170
och sedan plotta det eller frågar
några tredjeparts enhet för vissa uppgifter

397
00:23:10,170 --> 00:23:13,330
och sedan bygga en
visualisering på det.

398
00:23:13,330 --> 00:23:17,170
>> Så det första vi vill göra
är att flytta det till någon annanstans.

399
00:23:17,170 --> 00:23:24,130
Så jag kommer att skapa en
fil här kallas data.json.

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

401
00:23:25,600 --> 00:23:29,210
Du behöver inte veta mycket om det.

402
00:23:29,210 --> 00:23:33,210
Och vi kommer att kopiera
lite uppgifter vi har där,

403
00:23:33,210 --> 00:23:40,330
klistra in den i det ordagrant, gå
tillbaka till vår visualisering kod

404
00:23:40,330 --> 00:23:45,362
här, och använda denna funktion här.

405
00:23:45,362 --> 00:23:46,820
Du behöver inte känna till detaljer.

406
00:23:46,820 --> 00:23:49,800
Men vad detta kommer att göra är,
Det kommer att tycka att filen,

407
00:23:49,800 --> 00:23:51,780
hämta den och returnera den till oss.

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

409
00:24:11,660 --> 00:24:15,220
Så vad detta innebär är, det går
och få data.json filen.

410
00:24:15,220 --> 00:24:18,570
Och sedan all kod som är
indragen inside-- väsentligen,

411
00:24:18,570 --> 00:24:21,800
all kod vi har there-- kommer
kör bara när vi får tillbaka data.

412
00:24:21,800 --> 00:24:25,760
Och då det kommer att köra den
kod med de data vi har.

413
00:24:25,760 --> 00:24:28,870
Stor, vi har en
visualisering som frågar

414
00:24:28,870 --> 00:24:31,390
för lite kod någonstans
annat, som vanligtvis är

415
00:24:31,390 --> 00:24:36,110
där den frågar en del data från
någon annanstans, som vanligtvis är

416
00:24:36,110 --> 00:24:38,656
hur visualiseringar fungerar.

417
00:24:38,656 --> 00:24:41,400
>> Men jag vill gå tillbaka till data.

418
00:24:41,400 --> 00:24:48,030
Så de uppgifter i grunden i D3-- D3
förbrukar data som är en lista över saker.

419
00:24:48,030 --> 00:24:53,000
D3 förväntar datan bara vara en lista
av saker, en mängd saker.

420
00:24:53,000 --> 00:24:58,780
Det spelar ingen roll vad dessa saker
är, så länge det är en samling av dem.

421
00:24:58,780 --> 00:25:02,460
>> Så här, till exempel, kan vi av
Naturligtvis har flyttalsvärden.

422
00:25:02,460 --> 00:25:04,830
Vi skulle kunna ha negativ.

423
00:25:04,830 --> 00:25:09,400
D3 bryr sig inte, så länge
eftersom det är en lista över saker.

424
00:25:09,400 --> 00:25:13,270
>> Som intressanta saker vi
skulle kunna ha, vi kunde också

425
00:25:13,270 --> 00:25:19,410
har en lista med strängar som.

426
00:25:19,410 --> 00:25:25,440
Så dessa är de Crimson rubriker
Jag plockade upp ett par dagar sedan.

427
00:25:25,440 --> 00:25:29,220
Och kanske kan du hitta några intressanta
saker om dessa a rubriker.

428
00:25:29,220 --> 00:25:30,970
>> Så återigen, detta är en lista över saker.

429
00:25:30,970 --> 00:25:32,360
D3 bryr sig inte.

430
00:25:32,360 --> 00:25:35,572
Dessa råkar vara en sträng.

431
00:25:35,572 --> 00:25:36,530
Vi har ändrat våra data.

432
00:25:36,530 --> 00:25:38,210
>> Låt oss återvända till vår visualisering.

433
00:25:38,210 --> 00:25:42,495
Nu förväntar sig vår visualisering
ingången att vara nummer.

434
00:25:42,495 --> 00:25:44,370
Så vi kommer att ha
att göra några ändringar.

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

436
00:25:47,180 --> 00:25:52,180
Så till exempel, först av allt, kanske
Vi vill sätta dessa cirklar längs

437
00:25:52,180 --> 00:25:56,870
av längden på rubriken, den
antal tecken i rubriken.

438
00:25:56,870 --> 00:26:03,600
>> Så vad vi ska göra är-- varje gång vår
funktionen anropas med ett snöre,

439
00:26:03,600 --> 00:26:09,095
Vi hittar det är längd och
sedan vidarebefordra det till skalan.

440
00:26:09,095 --> 00:26:11,550
Färgen kommer jag tillbaka
att till stålblå.

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

442
00:26:19,060 --> 00:26:20,420
Och där går vi.

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

444
00:26:23,190 --> 00:26:25,500
>> Vår skalan är lite off.

445
00:26:25,500 --> 00:26:29,680
Låt oss anta att den längsta
rubrik är 100 tecken lång,

446
00:26:29,680 --> 00:26:32,244
så spänner det ut lite.

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

448
00:26:33,410 --> 00:26:36,710
Så det verkar som de flesta rubriker
är ganska nära varandra,

449
00:26:36,710 --> 00:26:38,750
i termer av teckenraden.

450
00:26:38,750 --> 00:26:41,200
Men en det verkligen sticker ut.

451
00:26:41,200 --> 00:26:46,660
>> Vi kunde bygga några verktyg
att utforska det mer.

452
00:26:46,660 --> 00:26:50,710
Men när jag arbetade med detta, var jag
nyfiken om det i denna datauppsättning,

453
00:26:50,710 --> 00:26:53,880
rubriker med ett kolon
i dem skulle vara längre.

454
00:26:53,880 --> 00:26:55,770
Jag antar att de skulle.

455
00:26:55,770 --> 00:26:56,660
>> Så låt oss ta reda på.

456
00:26:56,660 --> 00:27:00,650
Låt oss använda färgen
kanal som vi gjorde förut,

457
00:27:00,650 --> 00:27:04,540
att koda lite om huruvida
det finns ett kolon eller ingen.

458
00:27:04,540 --> 00:27:07,220
Så vi kommer att använda ett villkor igen.

459
00:27:07,220 --> 00:27:09,350
Du behöver inte veta
detaljerna i detta,

460
00:27:09,350 --> 00:27:14,260
men detta är hur vi kontrollerar en
sträng för ett visst tecken

461
00:27:14,260 --> 00:27:16,355
i JavaScript, återigen, inte relevant.

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

463
00:27:18,910 --> 00:27:23,270
>> Men om vi inte hittar en
kolon, kommer vi tillbaka grönt.

464
00:27:23,270 --> 00:27:26,100
Och om vi gör det kommer vi tillbaka rött.

465
00:27:26,100 --> 00:27:29,010
Så återigen, rubriker som
har ett kolon blir röd.

466
00:27:29,010 --> 00:27:34,980
Detta är vad detta means-- trevligt.

467
00:27:34,980 --> 00:27:38,040
>> Så det verkar som min
hypotes stötte.

468
00:27:38,040 --> 00:27:39,360
Det finns bara två.

469
00:27:39,360 --> 00:27:42,380
Vi har bara sex datapunkter
och endast två hade kolon.

470
00:27:42,380 --> 00:27:45,510
Men det verkar lite mer
på den nedre änden, i själva verket.

471
00:27:45,510 --> 00:27:47,830
Rubriker med kolon verkar
att i allmänhet vara kortare,

472
00:27:47,830 --> 00:27:52,370
åtminstone i våra data set-- intressant.

473
00:27:52,370 --> 00:27:55,830
>> Låt oss återvända till att till
stålblå och sedan se

474
00:27:55,830 --> 00:28:00,601
vad vi kan göra med ens
mer intressanta uppgifter.

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

476
00:28:04,370 --> 00:28:09,070
Så återigen, nämnde jag att
data i D3 är en lista över saker.

477
00:28:09,070 --> 00:28:11,080
Vi har sett antal många typer.

478
00:28:11,080 --> 00:28:12,810
Vi har sett strängar.

479
00:28:12,810 --> 00:28:15,700
Men de saker kan också vara föremål.

480
00:28:15,700 --> 00:28:20,080
>> De kan vara komplicerade saker
som inkluderar en massa saker.

481
00:28:20,080 --> 00:28:24,510
Att säga att tydligare,
i de flesta fall, vi

482
00:28:24,510 --> 00:28:28,384
vill bygga varje datapunkt som
mer komplicerat än bara ett värde.

483
00:28:28,384 --> 00:28:30,175
Om du skulle föreställa sig en
databas om studenter,

484
00:28:30,175 --> 00:28:32,470
det kan finnas en elev
namn, en student-ID,

485
00:28:32,470 --> 00:28:36,370
och en hel del saker i samband
med en viss post,

486
00:28:36,370 --> 00:28:39,834
inte bara en sträng eller ett nummer.

487
00:28:39,834 --> 00:28:40,750
Så låt oss titta på det.

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

489
00:28:55,180 --> 00:28:56,760
>> Detta är en sådan datauppsättningen.

490
00:28:56,760 --> 00:28:59,090
Detta är en datamängd om jordbävningar.

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

492
00:29:01,910 --> 00:29:08,430
Så allt här på vår lista eller matris
saker innehåller många saker själv.

493
00:29:08,430 --> 00:29:11,380
Så varje datapunkt har en
magnitud och en koordinat.

494
00:29:11,380 --> 00:29:13,425
Och samordnar själva
innehåller två saker.

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

496
00:29:15,960 --> 00:29:20,450
>> Så varje dag är nu en mycket mer
komplicerat och mycket mer intressant

497
00:29:20,450 --> 00:29:22,700
och innehåller mycket mer
intressant information.

498
00:29:22,700 --> 00:29:26,730
Låt oss se att vi kunde bygga ut det.

499
00:29:26,730 --> 00:29:36,130
Återvända tillbaka till här, återigen, med användning av
vår histogram cirkel visualisering

500
00:29:36,130 --> 00:29:42,110
vi har byggt, låt oss se om vi kan bygga en
visualisering av distributions magnitud

501
00:29:42,110 --> 00:29:43,305
I vår datamängd.

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

503
00:29:45,850 --> 00:29:48,660
>> Så här är det samma koncept.

504
00:29:48,660 --> 00:29:51,920
Men nu, d innehåller fler saker.

505
00:29:51,920 --> 00:29:54,780
d innehåller många dataelement.

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

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

508
00:29:59,670 --> 00:30:06,080
Och vi svarar genom att hitta storleken
av d och därefter passerar det till skalan.

509
00:30:06,080 --> 00:30:08,490
>> Och då måste vi ändra
vår skala, förstås.

510
00:30:08,490 --> 00:30:12,980
Så storheter gör helt enkelt inte
går mycket mer än 10.

511
00:30:12,980 --> 00:30:15,485
Egentligen har det aldrig funnits
10 magnitud jordbävning.

512
00:30:15,485 --> 00:30:19,360
Men det är typ av vår övre
slutet, vårt övre spektrat.

513
00:30:19,360 --> 00:30:20,240
>> Låt oss uppdatera.

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

515
00:30:22,990 --> 00:30:25,490
Det är intressant att note-- så
det finns två datapunkter som

516
00:30:25,490 --> 00:30:29,010
är nästan exakt på toppen av varje
andra, i fråga om omfattning.

517
00:30:29,010 --> 00:30:31,350
Du ser detta genom opaciteten vi använder.

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

519
00:30:40,810 --> 00:30:42,690
>> Vi har geografisk data nu.

520
00:30:42,690 --> 00:30:44,710
Vi har latituder och longitud.

521
00:30:44,710 --> 00:30:47,549
Vi kanske kan göra något
mycket mer intressant med det.

522
00:30:47,549 --> 00:30:49,590
Låt oss hitta lite mer
intressant sätt att visualisera

523
00:30:49,590 --> 00:30:53,500
detta mer komplicerat
uppgifter har vi tillgång till.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- grunden,
Vi vill sätta dessa på en karta.

525
00:31:04,950 --> 00:31:07,690
Jag menar, det är där det kommer.

526
00:31:07,690 --> 00:31:13,130
Vi vill koda information om
ställning av dessa jordbävnings avläsningar,

527
00:31:13,130 --> 00:31:16,350
liksom deras storlek,
eftersom vi har det nu.

528
00:31:16,350 --> 00:31:21,310
Vi förstår hur att konsumera
mer komplicerade uppgifter.

529
00:31:21,310 --> 00:31:26,200
>> Det första vi ska göra är
skapa en karta, en bakgrundskarta.

530
00:31:26,200 --> 00:31:29,360
Jag ska gå igenom
detta mycket snabbt.

531
00:31:29,360 --> 00:31:30,560
Detta är knepigt kod.

532
00:31:30,560 --> 00:31:33,110
Det är ytterligare en av dem
recept du egentligen inte

533
00:31:33,110 --> 00:31:35,690
måste förstå fullt för dig att använda.

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

535
00:31:38,510 --> 00:31:39,740
Men detta är kod.

536
00:31:39,740 --> 00:31:43,580
Denna kod här skapar en karta.

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

538
00:31:45,730 --> 00:31:54,210
Men ytligt, vad den gör är,
Det frågar detta us.json fil, vilket

539
00:31:54,210 --> 00:31:57,150
är en datafil som
det vi hade tidigare.

540
00:31:57,150 --> 00:31:59,150
Det är mer komplicerat, naturligtvis.

541
00:31:59,150 --> 00:32:02,920
Men i detta fall, allt,
Varje datapunkt är detta tillstånd

542
00:32:02,920 --> 00:32:05,420
och har en lista med
latituder och longitud

543
00:32:05,420 --> 00:32:10,500
som definierar polygonen,
den formen, det tillståndet.

544
00:32:10,500 --> 00:32:13,280
>> Så vad D3 kommer att göra är likartad
vad vi gjorde innan.

545
00:32:13,280 --> 00:32:18,140
Det kommer att begära det och
binda den till ett element.

546
00:32:18,140 --> 00:32:20,890
Och det finns en funktion som
kommer att kart det elementet ut,

547
00:32:20,890 --> 00:32:23,410
baserat på latituder och longitud.

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

549
00:32:24,580 --> 00:32:27,385
Och jag rekommenderar den.

550
00:32:27,385 --> 00:32:30,090
>> Det finns länkar på
slutet av denna kod postat.

551
00:32:30,090 --> 00:32:31,570
Och koden kommen.

552
00:32:31,570 --> 00:32:34,050
I det finns länkar för vidare på detta.

553
00:32:34,050 --> 00:32:36,590
Jag rekommenderar att du slå upp det.

554
00:32:36,590 --> 00:32:39,460
Men vad vi bryr oss om är
denna prognos funktion.

555
00:32:39,460 --> 00:32:41,210
Jag vill gå igenom det.

556
00:32:41,210 --> 00:32:43,522
>> Först av allt, låt mig visa
du att, ja, vi har en karta.

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

558
00:32:47,300 --> 00:32:49,970
Kartor är coolt.

559
00:32:49,970 --> 00:32:52,330
Så låt oss titta på det här
produktionsfunktion.

560
00:32:52,330 --> 00:32:56,481
>> Projektion är mycket
som en skala, skalor igen.

561
00:32:56,481 --> 00:32:59,210
Så vad produktion för
denna prognos funktion

562
00:32:59,210 --> 00:33:06,610
gör är, kunde vi passera den longitud
och latitudes-- i detta fall,

563
00:33:06,610 --> 00:33:09,590
dessa värden här är den
lats longs av byggnaden

564
00:33:09,590 --> 00:33:13,990
vi sitter i höger
now-- till projektion.

565
00:33:13,990 --> 00:33:20,560
Och projektion kommer att konvertera
att i x och y pixelvärden.

566
00:33:20,560 --> 00:33:23,300
>> Så vad projektion gör
är mycket lik vår skala.

567
00:33:23,300 --> 00:33:27,270
Det tar våra breddgrader och
longitud som representerar en hel jordglob

568
00:33:27,270 --> 00:33:31,390
och krympande och dimensionering att
ner till torget som vi vill,

569
00:33:31,390 --> 00:33:33,510
att vi har gett det.

570
00:33:33,510 --> 00:33:35,220
I det här fallet är vi
passerar dessa värden.

571
00:33:35,220 --> 00:33:41,370
Och det ger oss, ja, att
på skärmen innebär 640 pixlar.

572
00:33:41,370 --> 00:33:46,250
Hela den här skärmen är 700 pixlar
bred, så det gör vi om här,

573
00:33:46,250 --> 00:33:53,310
och 154 pixlar ner, som jag vill
uppskattning är ganska mycket här.

574
00:33:53,310 --> 00:33:57,250
>> Så ta de lat-längtar, vilket
representerar något på hela jordklotet

575
00:33:57,250 --> 00:34:02,850
och mosa och röra att omkring
att ge oss x och y pixelvärden,

576
00:34:02,850 --> 00:34:05,450
Detta är det första som är
görs i denna kartläggning koden.

577
00:34:05,450 --> 00:34:07,920
Och sedan resten av
kod förbrukar data

578
00:34:07,920 --> 00:34:14,310
och sedan kartor dessa lat-längtar
på något på skärmen.

579
00:34:14,310 --> 00:34:18,380
>> Men vi kommer att använda denna projektion
funktioner, eftersom det visar sig

580
00:34:18,380 --> 00:34:20,270
Vi har lat-längtar längtar också.

581
00:34:20,270 --> 00:34:24,509
Ser tillbaka på våra data, vi har
latituder och longitud

582
00:34:24,509 --> 00:34:25,425
för varje observation.

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

584
00:34:28,131 --> 00:34:29,130
Så låt oss använda projektion.

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

586
00:34:33,250 --> 00:34:37,639
>> Så titta på vår framställning,
Vi vill att vår exposition--

587
00:34:37,639 --> 00:34:39,590
vi har en latitud och en longitud.

588
00:34:39,590 --> 00:34:40,770
Men vi vill pixelvärden.

589
00:34:40,770 --> 00:34:43,510
Och det visar sig, vi har exakt
vad vi want-- projektion.

590
00:34:43,510 --> 00:34:46,239
Väldigt mycket som vi var
använder skalan just här,

591
00:34:46,239 --> 00:34:52,075
vi nu kommer att använda projektion
och passera den koordinater.

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

593
00:34:55,241 --> 00:34:56,949
Så det första
vi doing-- så vi är

594
00:34:56,949 --> 00:35:01,520
få d, som är en individuell data
element i en enskild jordbävning

595
00:35:01,520 --> 00:35:02,370
läsning.

596
00:35:02,370 --> 00:35:04,640
Det första vi gör
är få koordinaterna.

597
00:35:04,640 --> 00:35:06,150
Okej, vi har koordinaterna.

598
00:35:06,150 --> 00:35:09,160
>> Den andra saken som vi gör är
passera att till projektion.

599
00:35:09,160 --> 00:35:13,440
Projektion omvandlar dessa koordinater
in pixelvärden, x och y.

600
00:35:13,440 --> 00:35:16,680
Och sedan det sista vi
vill göra är att bara få x,

601
00:35:16,680 --> 00:35:19,342
vilket detta fall är den första.

602
00:35:19,342 --> 00:35:22,050
Det är den första av de två saker
som returneras genom projektion.

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

604
00:35:27,840 --> 00:35:29,630
>> Vi ska göra samma sak för y.

605
00:35:29,630 --> 00:35:34,960
Men i stället, kommer vi tillbaka
den andra delen, y.

606
00:35:34,960 --> 00:35:35,980
Gör dig redo att uppdatera.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, extra karaktär
här-- trevligt, vi har

609
00:35:46,450 --> 00:35:51,730
en datadriven dokument som är
dölja denna JSON fil av föremål,

610
00:35:51,730 --> 00:35:57,560
göra en karta, och ändra
skriva i förhållande till data

611
00:35:57,560 --> 00:35:59,600
att projicera den på en karta.

612
00:35:59,600 --> 00:36:00,840
Detta är verkligen intressant.

613
00:36:00,840 --> 00:36:03,770
Detta är coolt.

614
00:36:03,770 --> 00:36:05,640
>> Låt oss ta upp ett snäpp.

615
00:36:05,640 --> 00:36:08,795
Jag menar, vi har två stycken
information med varje datapunkt.

616
00:36:08,795 --> 00:36:10,000
Jag menar, tre.

617
00:36:10,000 --> 00:36:12,540
Vi har koordinaterna,
vilket är ett x och y.

618
00:36:12,540 --> 00:36:15,700
Och vi har storleken.

619
00:36:15,700 --> 00:36:17,420
>> Vi måste koda magnitud på något sätt.

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

621
00:36:18,920 --> 00:36:20,370
Vi kan använda färg.

622
00:36:20,370 --> 00:36:21,890
Vi kan använda radie.

623
00:36:21,890 --> 00:36:23,040
Vi skulle kunna använda opacitet.

624
00:36:23,040 --> 00:36:25,540
Vi skulle kunna använda många saker i kod.

625
00:36:25,540 --> 00:36:29,180
Någon av dessa attribut och många
fler som inte är upptagna där,

626
00:36:29,180 --> 00:36:33,065
eftersom de är valfritt, vi kunde
använder för att koda dessa data, slaget

627
00:36:33,065 --> 00:36:35,670
och alla dessa saker som jag har nämnt.

628
00:36:35,670 --> 00:36:36,690
>> Låt oss göra radie.

629
00:36:36,690 --> 00:36:38,830
Jag tror radie är den mest intuitiva.

630
00:36:38,830 --> 00:36:46,210
Så återigen, vi ersätta det hårdkodad
40 och göra några beräkningar.

631
00:36:46,210 --> 00:36:48,810
Vi använder vår favorit skala igen.

632
00:36:48,810 --> 00:36:50,290
Och vi är förbi d.

633
00:36:50,290 --> 00:36:55,850
Men inte d eftersom vi vill storleken
av d. d är bara datapunkten.

634
00:36:55,850 --> 00:36:57,430
Vi kommer klara storleken att skala.

635
00:36:57,430 --> 00:36:58,470
>> Låt oss försöka det igen.

636
00:36:58,470 --> 00:37:00,230
Ooh, fungerar det inte.

637
00:37:00,230 --> 00:37:02,940
Varför fungerar det inte?

638
00:37:02,940 --> 00:37:04,387
>> Så kom ihåg vad skalan gör.

639
00:37:04,387 --> 00:37:05,470
Låt oss titta på skalan igen.

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

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

642
00:37:12,030 --> 00:37:14,730
Det är därför vi får detta.

643
00:37:14,730 --> 00:37:18,420
>> Så vi vill förändra vår skala
till något mer rimligt.

644
00:37:18,420 --> 00:37:22,610
Låt oss säga, vi vill 0-60.

645
00:37:22,610 --> 00:37:25,340
60 är stora, men 10 jordbävningar
är oerhört sällsynt.

646
00:37:25,340 --> 00:37:27,880
I själva verket har de aldrig hänt.

647
00:37:27,880 --> 00:37:31,830
>> Så vad detta kommer att göra är, kommer det att ta
vår storleksordning som går från 1 till 10

648
00:37:31,830 --> 00:37:34,490
och kartlägga den på att expandera det.

649
00:37:34,490 --> 00:37:37,370
Och map den till 0-60.

650
00:37:37,370 --> 00:37:38,840
Låt oss uppdatera.

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

652
00:37:41,850 --> 00:37:42,500
Det här är bra.

653
00:37:42,500 --> 00:37:43,736
Detta är faktiska data.

654
00:37:43,736 --> 00:37:46,360
Du kommer att märka, i min lilla leksak
exempel, den största jordbävningen

655
00:37:46,360 --> 00:37:49,417
är rätt ovanpå oss.

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

657
00:37:50,000 --> 00:37:54,422
Vi har ett datum driven visualisering
som förbrukar data

658
00:37:54,422 --> 00:37:56,255
och ger oss verkligen
intressant information.

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

660
00:38:02,600 --> 00:38:06,420
Ja, låt oss lägga till några
interaktivitet till det.

661
00:38:06,420 --> 00:38:08,675
Jag nämnde att var
den starka kraft D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Så här, för varje element, vi är
beskriver ett gäng attribut.

664
00:38:15,060 --> 00:38:20,230
Men vi kan också beskriva vad vi vill
att hända med interelement.

665
00:38:20,230 --> 00:38:26,190
Till exempel kan vi beskriva
vad som händer när vi musen över.

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

667
00:38:28,740 --> 00:38:33,640
Och mycket likt det,
som tar en funktion,

668
00:38:33,640 --> 00:38:36,700
mycket lik den
attribut vi hade tidigare,

669
00:38:36,700 --> 00:38:44,650
där vi gör något till
elementet när vi svävar över det.

670
00:38:44,650 --> 00:38:47,100
>> Så första måste vi
göra är att välja det elementet,

671
00:38:47,100 --> 00:38:49,435
att hitta det i princip, i webbläsaren.

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

673
00:38:57,090 --> 00:39:00,920
och sedan kunde vi ställa
ett attribut till den.

674
00:39:00,920 --> 00:39:06,870
Så vad jag gör här är, när vi svävar
över något, vi får det elementet

675
00:39:06,870 --> 00:39:11,197
och sedan ställa sin opacitet tillbaka
till 1, till helt ogenomskinlig.

676
00:39:11,197 --> 00:39:12,488
Låt oss se vad som ser ut som.

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

678
00:39:29,430 --> 00:39:39,080
>> Det verkar vi har en
extra semikolon här.

679
00:39:39,080 --> 00:39:42,420
Så om vi svävar över här, det blir fullt.

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

681
00:39:46,530 --> 00:39:48,960
Men nu, naturligtvis, det
förblir fullt, eftersom vi

682
00:39:48,960 --> 00:39:53,240
måste beskriva vad som händer
när tar bort vår markör.

683
00:39:53,240 --> 00:39:59,990
Så låt oss göra just det på
mouseOut, i motsats till mouseover.

684
00:39:59,990 --> 00:40:06,399
>> Och vi kommer att återställa den till
vad vi hade before-- 0,5.

685
00:40:06,399 --> 00:40:10,260
Och nu, varje gång vi
hover, vi får en full cirkel.

686
00:40:10,260 --> 00:40:13,468
Det hjälper oss att se vad vi
vi väljer väsentligen.

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

688
00:40:19,210 --> 00:40:22,860
>> Och nu ska vi göra det här riktigt bra.

689
00:40:22,860 --> 00:40:26,210
Låt oss koppla detta till verkliga data.

690
00:40:26,210 --> 00:40:30,890
Så låt oss be kunde
USGS om deras uppgifter.

691
00:40:30,890 --> 00:40:35,630
Så US Geological Survey
har uppgifter om jordbävningar.

692
00:40:35,630 --> 00:40:41,460
De har en offentlig API som är i stånd
att konsumeras i JSON-format.

693
00:40:41,460 --> 00:40:42,548
Så låt oss göra det.

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

695
00:40:49,730 --> 00:40:55,900
>> Så detta är lite av kod som
ansluter till USGS API.

696
00:40:55,900 --> 00:40:57,990
Och det är lite av bearbetningen på den.

697
00:40:57,990 --> 00:41:02,200
Detta är inte relevant, men förenklar det
till en enkel dataformat som en

698
00:41:02,200 --> 00:41:03,800
vi hade tidigare.

699
00:41:03,800 --> 00:41:08,140
Så jag bli av med vår uppmaning till
vår falska data.json på fil.

700
00:41:08,140 --> 00:41:13,110
Och istället, jag ringer
USGS huvudsak.

701
00:41:13,110 --> 00:41:16,700
>> Låt oss uppdatera, trevligt.

702
00:41:16,700 --> 00:41:21,260
Detta är verkliga, data verkliga
från denna vecka för jordbävningar.

703
00:41:21,260 --> 00:41:23,217
Detta är verkligen intressant.

704
00:41:23,217 --> 00:41:25,050
Detta är inte förvånande
för oss, men det finns

705
00:41:25,050 --> 00:41:27,909
en massa jordbävningar på
West Coast i Kalifornien.

706
00:41:27,909 --> 00:41:30,950
Men jag tyckte det var mycket intressant
att det fanns så många jordbävningar

707
00:41:30,950 --> 00:41:34,350
i Alaska, och uppenbarligen,
här i mellanvästern.

708
00:41:34,350 --> 00:41:37,630
Jag menar, intressant, och vi är bra.

709
00:41:37,630 --> 00:41:40,410
Det är slutsatsen.

710
00:41:40,410 --> 00:41:43,760
>> Men i grunden, detta
är vad D3 hjälper oss att göra.

711
00:41:43,760 --> 00:41:48,030
Det hjälper oss att ta data, bind
det till element i DOM,

712
00:41:48,030 --> 00:41:51,620
och har dessa delar förändras
som en funktion av uppgifter,

713
00:41:51,620 --> 00:41:54,780
har dessa attribut, alla de
många attribut av elementen,

714
00:41:54,780 --> 00:41:57,393
alla vara användbara för kanaler
att förmedla information.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 är en otroligt kraftfull
bibliotek och förvånansvärt väl köra.

717
00:42:09,290 --> 00:42:12,260
Detta är några kraftfulla saker.

718
00:42:12,260 --> 00:42:15,960
Data visualisering är en
otroligt kraftfullt verktyg

719
00:42:15,960 --> 00:42:21,530
för att transportera människor djupa
insikter som kommer till sin kärn

720
00:42:21,530 --> 00:42:25,430
och hjälper dem att förstå, i
denna djupgående och intuitivt sätt,

721
00:42:25,430 --> 00:42:29,760
hur data fungerar och hur
uppgifter förändrar våra liv.

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