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

2
00:00:00,780 --> 00:00:11,880
>> [Musika nagpe-play]

3
00:00:11,880 --> 00:00:16,480
>> David CHOUINARD: Ako David
Chouinard, at ito ay D3.

4
00:00:16,480 --> 00:00:17,700
Maligayang pagdating.

5
00:00:17,700 --> 00:00:21,270
Kami ay pagpunta upang malaman ang tungkol D3 ngayon.

6
00:00:21,270 --> 00:00:25,020
D3 ay isang JavaScript framework
para sa pagbuo ng isang mataas na kalidad

7
00:00:25,020 --> 00:00:28,110
interactive na visualization para sa web.

8
00:00:28,110 --> 00:00:30,870
Mga bagay tulad ng kung ano ang hindi namin
makita sa likod ng akin,

9
00:00:30,870 --> 00:00:34,230
kami ay pagpunta upang matuto upang gumawa ng mga
mga bagay, uri ng mga pangunahing kaalaman ng ito.

10
00:00:34,230 --> 00:00:36,452
Ngunit ito ay magiging cool.

11
00:00:36,452 --> 00:00:38,160
Magsimula na tayo
paggawa ng kaakit-akit na mga larawan.

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

13
00:00:41,108 --> 00:00:44,350
Mayroon kaming higit pang mga demo
ng mga prospects magagamit.

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

15
00:00:48,040 --> 00:00:50,760
Gawin natin ito Hayaan.

16
00:00:50,760 --> 00:00:58,700
>> Batas ko, DOM manipulation-- kami ng pagpunta
upang simulan agad ang paggawa ng mga cool na bagay.

17
00:00:58,700 --> 00:01:01,240
Una sa lahat, sa kaliwa, mayroon kaming code.

18
00:01:01,240 --> 00:01:03,470
Sa kanang, mayroon kaming
ang resulta ng aming mga code.

19
00:01:03,470 --> 00:01:04,900
Tara sa pamamagitan nito.

20
00:01:04,900 --> 00:01:05,780
>> Gumawa ng isang lupon Hayaan.

21
00:01:05,780 --> 00:01:08,570
Paano gumagana ang tunog?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
ginawa lang namin isang lupon.

23
00:01:14,934 --> 00:01:16,100
Hindi ka naniniwala sa akin, tama?

24
00:01:16,100 --> 00:01:18,190
Hindi ito doon.

25
00:01:18,190 --> 00:01:21,830
>> Kaya kung ano ang ginawa namin dito mismo ay,
SVG ay nasusukat vector graphics.

26
00:01:21,830 --> 00:01:27,530
Ito ang paraan para sa sabihin namin ang mga browser sa
gumawa ng mga vector graphics sa browser.

27
00:01:27,530 --> 00:01:30,740
Ang ginawa lang namin sa ngayon
ay nagdagdag ng isang lupon upang mag-browse.

28
00:01:30,740 --> 00:01:34,790
>> Ang pangako ay na ang mga lupon
ay nangangailangan ng isang bit ng mga pangunahing katangian

29
00:01:34,790 --> 00:01:36,850
bago aktwal na namin makita ito.

30
00:01:36,850 --> 00:01:40,045
Kailangan namin upang sabihin dito na posisyon x nito,
ang posisyon nito y, radius nito.

31
00:01:40,045 --> 00:01:43,310
Hindi namin sabihin dito ang anuman sa na,
kaya hindi ito namin nakikita sa ngayon.

32
00:01:43,310 --> 00:01:46,210
Ngunit sabihin natin ito bagay-bagay ipaalam.

33
00:01:46,210 --> 00:01:49,510
>> Kaya una sa lahat, mayroon ka
upang bigyan ang aming lupon ng pangalan.

34
00:01:49,510 --> 00:01:53,070
Kaya ipaalam tawagan natin ito bilog.

35
00:01:53,070 --> 00:01:54,406
Ang aming lupon ay mayroon na ngayong pangalan.

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

37
00:01:57,230 --> 00:01:59,490
At bibigyan natin ito ng ilang mga katangian ipaalam.

38
00:01:59,490 --> 00:02:03,690
Paano ang tungkol sa cx ay nakasentro x, kaya
sa gitna ng posisyon x.

39
00:02:03,690 --> 00:02:06,730
Sabihin nating, 200 para sa 200 pixels.

40
00:02:06,730 --> 00:02:10,220
>> Bigyan natin ito ng y ng 200 pixels pati na rin ipaalam sa.

41
00:02:10,220 --> 00:02:16,032
At isang r, isang radius, ng tungkol sa 40 pixels.

42
00:02:16,032 --> 00:02:16,950
Ngayon tingnan natin.

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

44
00:02:21,740 --> 00:02:23,440
Hindi ko ma-spell.

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

46
00:02:30,430 --> 00:02:31,520
>> Mayroon kang pumunta.

47
00:02:31,520 --> 00:02:37,330
Mayroon kaming isang lupon sa posisyon 200
mga pixel, 200 mga pixel, radius na 40 pixels.

48
00:02:37,330 --> 00:02:38,280
Uri ng mga cool na, i-right?

49
00:02:38,280 --> 00:02:38,988
Mayroon kaming isang lupon.

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

51
00:02:40,880 --> 00:02:42,670
>> Kaya hindi na kailangang sundin kasama.

52
00:02:42,670 --> 00:02:45,790
Ang lahat ng mga halimbawang ito, ang lahat ng mga
ang code ako paggawa ngayon

53
00:02:45,790 --> 00:02:51,300
Ibibigay online sa dulo
sa anyo ng mga interactive na mga halimbawa

54
00:02:51,300 --> 00:02:54,010
may checkpoints sa
bawat batas, at iba pa.

55
00:02:54,010 --> 00:02:55,160
>> Gawin ang mga bagay-bagay nang higit pa Hayaan.

56
00:02:55,160 --> 00:02:58,901
Ang itim na bilog ay talagang hindi mabuti.

57
00:02:58,901 --> 00:03:01,541
Ikinalulungkot kong para sa error na
mga mensahe mula doon.

58
00:03:01,541 --> 00:03:05,340
May pumunta namin.

59
00:03:05,340 --> 00:03:06,350
>> Bigyan natin ito ng isang kulay Hayaan.

60
00:03:06,350 --> 00:03:07,170
Paano iyan?

61
00:03:07,170 --> 00:03:08,340
Gusto kong bakal asul.

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

63
00:03:13,280 --> 00:03:16,030
Well, ang aming lupon ay nagbago ng kulay.

64
00:03:16,030 --> 00:03:17,320
Mabuti iyan.

65
00:03:17,320 --> 00:03:31,330
Ay gawin itong semi-transparent Hayaan
too-- semi-transparent.

66
00:03:31,330 --> 00:03:33,670
>> Kaya ito ay mga katangian
kami ay pagtukoy sa lupon.

67
00:03:33,670 --> 00:03:36,774
Ang unang bagay na ginawa namin ay
inilalagay namin ang isang lupon sa pahina.

68
00:03:36,774 --> 00:03:38,690
At pagkatapos kami ay pagtukoy sa
isang bungkos ng mga katangian.

69
00:03:38,690 --> 00:03:41,610
Ang ilan sa mga ito ay kailangan,
tulad ng cx, .cy, at Radius.

70
00:03:41,610 --> 00:03:42,680
At iba pa ay opsyonal.

71
00:03:42,680 --> 00:03:44,730
>> Maraming higit pang mga katangian.

72
00:03:44,730 --> 00:03:46,760
Marami sa mga ito.

73
00:03:46,760 --> 00:03:53,070
Halimbawa, maaari kaming magkaroon ng
stroke pati na rin, isang stroke ng pula.

74
00:03:53,070 --> 00:03:55,630
Ngunit ng alisin na ipaalam.

75
00:03:55,630 --> 00:04:00,450
Humihingi kami pabalik sa isang lupon, ang isang asul na bilog.

76
00:04:00,450 --> 00:04:01,600
>> Kaya ipaalam gumawa ng higit pang mga lupon.

77
00:04:01,600 --> 00:04:02,810
Paano iyan?

78
00:04:02,810 --> 00:04:04,665
Gumawa ng isa pang lupon Hayaan.

79
00:04:04,665 --> 00:04:05,985
Ito ay kapana-panabik, tama?

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

81
00:04:09,630 --> 00:04:12,300
>> Kaya sabihin ko lang Kopyahin-paste
kung ano ang namin ay may mga naka.

82
00:04:12,300 --> 00:04:13,570
Tawagan natin ito circle2 Hayaan.

83
00:04:13,570 --> 00:04:15,840
At ni gawin ang eksaktong ipaalam
parehong bagay at bigyan ito ng

84
00:04:15,840 --> 00:04:20,450
katangian, na ibinigay ng x posisyon ng 300.

85
00:04:20,450 --> 00:04:24,140
Ayos, mayroon kaming dalawang mga lupon ngayon.

86
00:04:24,140 --> 00:04:27,240
>> At siyempre, maaari naming
-update ang mga halaga.

87
00:04:27,240 --> 00:04:31,640
Maaari ko itong ilagay sa 400, at ngayon ay gumagalaw ito.

88
00:04:31,640 --> 00:04:35,470
At dahil ito ay nakakainis na, sabihin
alisin ito, kaya circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Ito ay wala na ngayon.

91
00:04:40,730 --> 00:04:43,170
>> Kaya kung anong ginagawa namin at
Lubos na lang, very-- ito

92
00:04:43,170 --> 00:04:46,030
ay lubos na katulad sa kung ano ang
maaaring gawin sa jQuery, halimbawa.

93
00:04:46,030 --> 00:04:48,240
Lamang kami ng pagpapatakbo
DOM, ito ay tinatawag na.

94
00:04:48,240 --> 00:04:50,040
Maaaring narinig mo na ang salitang iyon dati.

95
00:04:50,040 --> 00:04:53,255
Kami ay lumilikha ng mga bagay-bagay, ang pagtatakda
mga katangian sa bagay, pag-aalis ng mga bagay-bagay.

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

97
00:04:58,950 --> 00:05:02,360
>> Ngayon, narito ang kung saan kagiliw-giliw na ito ay nakakakuha.

98
00:05:02,360 --> 00:05:07,250
Kaya sa huling bahagi ng code, maaari naming pa rin
sumangguni sa orihinal na bilog dito.

99
00:05:07,250 --> 00:05:14,100
Kaya ipaalam reset ng katangian nito sa cx.

100
00:05:14,100 --> 00:05:18,260
Sabihin nating, nitong posisyon x 400.

101
00:05:18,260 --> 00:05:22,406
At Pupunta ako sa transition
iyon, kaya halata.

102
00:05:22,406 --> 00:05:23,360
May pumunta namin.

103
00:05:23,360 --> 00:05:24,780
>> Kaya nagdagdag kami ng isang lupon.

104
00:05:24,780 --> 00:05:26,440
Itinakda namin ang ilang mga katangian.

105
00:05:26,440 --> 00:05:28,210
Nagdagdag kami ng isa pang lupon, inalis ito.

106
00:05:28,210 --> 00:05:31,650
At pagkatapos ay namin ang pagbabago
ang orihinal na bilog.

107
00:05:31,650 --> 00:05:35,400
>> Ngunit narito ang kung saan ito ay makakakuha ng
Marami pang mga kagiliw-giliw.

108
00:05:35,400 --> 00:05:39,070
Hindi lamang maaari naming itakda ang mga katangian
bilang pinahahalagahan lamang, maaari naming sabihin,

109
00:05:39,070 --> 00:05:41,610
hey, bilog, pumunta sa iposisyon 200.

110
00:05:41,610 --> 00:05:44,540
Maaari din naming itakda ang mga ito bilang mga pag-andar.

111
00:05:44,540 --> 00:05:48,850
>> Kaya sa halip na nagbibigay sa 400 dito,
maaari naming gumawa ng ilang mga kalkulasyon

112
00:05:48,850 --> 00:05:53,950
sa mabilisang para sa kung ano tayo
Gusto katangiang iyon upang maging.

113
00:05:53,950 --> 00:05:56,580
Kaya ito ay kung paano mo nais ipahayag iyon.

114
00:05:56,580 --> 00:06:00,660
Sabihin namin, sa halip na 400, ipaalam sa akin
magbibigay sa iyo ng isang function sa halip.

115
00:06:00,660 --> 00:06:04,180
At dito, sa loob ng function na ito,
maaari naming gumawa ng anumang mga nakatutuwang pagkalkula.

116
00:06:04,180 --> 00:06:06,820
>> Maaari naming maglaan ng oras at
tingnan natin ang ilang iba pang mga bagay

117
00:06:06,820 --> 00:06:11,230
at dynamic na magpasya para sa
ang lupon kung ano ang halaga na gusto namin.

118
00:06:11,230 --> 00:06:15,266
Paano ang tungkol sa bigyan kami lamang
ito ng random na x posisyon?

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

120
00:06:20,360 --> 00:06:21,120
Kaya na iyon.

121
00:06:21,120 --> 00:06:25,490
>> Kaya kung ano na nagsasabing ay, para sa
bawat x, patakbuhin ang function na ito.

122
00:06:25,490 --> 00:06:29,340
At kung ano ang aming ginagawa ay pagkalkula
ilang mga bagay, ang isang random na beses ang lapad

123
00:06:29,340 --> 00:06:30,410
at bumabalik na iyon.

124
00:06:30,410 --> 00:06:34,765
Kaya sa tuwing nagsasagawa kami na, makakakuha tayo ng isang
bilog na napupunta sa isang random na lugar.

125
00:06:34,765 --> 00:06:36,394
Ito ay uri ng cool.

126
00:06:36,394 --> 00:06:38,310
Pakiramdam ko ay tulad ng maaari ko bang tingnan
sa ito para sa isang maliit na.

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

128
00:06:44,274 --> 00:06:46,440
Kami ay nagsisimula upang makapunta sa
isang bagay na kawili-wiling dito.

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

130
00:06:49,120 --> 00:06:51,390
Gumawa ng hinimok na ngayon ang data na ito Hayaan.

131
00:06:51,390 --> 00:06:53,420
Walang data dito.

132
00:06:53,420 --> 00:06:54,482
Ay baguhin natin iyon.

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

134
00:06:57,440 --> 00:07:12,140
>> Act II, pinapaandar ng data Documents--
Kaya sabihin bumalik sa dito.

135
00:07:12,140 --> 00:07:15,340
At sabihin lamang makakuha ng pawalan ng circle2,
dahil lamang namin ang pagdaragdag at pag-aalis

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

137
00:07:15,840 --> 00:07:17,382
Kaya huwag talagang kailangan namin ito.

138
00:07:17,382 --> 00:07:21,421
Kailangan ba naming maging ng maraming higit matalino dito.

139
00:07:21,421 --> 00:07:23,170
Sabihin nating, mayroon kaming
ilang data ng uri.

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

141
00:07:31,540 --> 00:07:40,020
Isa moment-- sabihin nating,
namin ay may data ng form na ito.

142
00:07:40,020 --> 00:07:41,800
Nagkaroon kami ng isang array, lamang
isang bungkos ng mga numero.

143
00:07:41,800 --> 00:07:45,750
Mayroon kaming pitong mga numero dito,
kahit anong mga represent-- halaga

144
00:07:45,750 --> 00:07:48,810
sa bank account ng mga tao, kung paano
magkano ang timbangin nila, alam ng diyos kung ano.

145
00:07:48,810 --> 00:07:51,310
>> Ito ang mga numero, at kami
nais na gamitin ang aming mga lupon

146
00:07:51,310 --> 00:07:53,240
upang katawanin ang mga numero kahit papaano.

147
00:07:53,240 --> 00:07:55,515
Gusto naming itali ang aming
lupon ng mga numero.

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

149
00:07:58,750 --> 00:07:59,626
Kaya kung ano ang ginagawa namin.

150
00:07:59,626 --> 00:08:01,500
Sabihin nating, gusto namin ng isang
bilog para sa bawat numero.

151
00:08:01,500 --> 00:08:03,590
Maaari naming gawin ang mga lumang
bagay tayo ay doing--

152
00:08:03,590 --> 00:08:06,020
bilog na Magkabit at circle2 at circle3.

153
00:08:06,020 --> 00:08:10,020
Ngunit ito nakakaabala kamay, at
maraming ng paulit-ulit na lohika.

154
00:08:10,020 --> 00:08:12,760
>> Kaya sabihin makakuha ng higit pang matalino na may mga iyon.

155
00:08:12,760 --> 00:08:17,810
Sa halip na gamitin ang var lupon
svg.append tayo ay lamang ang ginagamit,

156
00:08:17,810 --> 00:08:21,580
kami ay pagpunta upang gamitin ang
ito maliit na bloke dito.

157
00:08:21,580 --> 00:08:24,510
Hindi ko nais upang pumunta sa malalim
sa kung anong gagawin ang lahat ng mga bahagi.

158
00:08:24,510 --> 00:08:26,020
At ito ay uri ng isang advanced na paksa.

159
00:08:26,020 --> 00:08:27,830
At gusto ko ma ko.

160
00:08:27,830 --> 00:08:31,370
>> Ngunit ang mga pangunahing bagay na dapat recognize-- at
makikita mo ay napakadalas sa D3 code.

161
00:08:31,370 --> 00:08:36,840
Ang bloke ng teksto ng mga pangunahing
lumilikha ng maraming mga lupon

162
00:08:36,840 --> 00:08:41,360
bilang mayroong mga elemento ng data
sa array dito mismo.

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

164
00:08:53,420 --> 00:08:55,780
Kaya ito ay lumilikha ng maraming
mga lupon bilang mayroong mga elemento.

165
00:08:55,780 --> 00:08:58,520
Ito ay pagpunta sa lumikha sa amin ng pitong mga lupon.

166
00:08:58,520 --> 00:09:01,710
At ito ang isang talagang, talagang pangunahing bagay.

167
00:09:01,710 --> 00:09:02,460
Ay tumakbo na Kaya ipaalam.

168
00:09:02,460 --> 00:09:05,460
Mag-alis ng aming iba pang mga lupon Hayaan.

169
00:09:05,460 --> 00:09:09,565
Hayaan magkomento ni lamang ito
Bahagi out at magpatakbo ng mga ito muli.

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

171
00:09:13,840 --> 00:09:15,260
>> May pumunta namin.

172
00:09:15,260 --> 00:09:18,030
Kaya aming lupon dito ay isang
maraming mas madilim, dahil kami

173
00:09:18,030 --> 00:09:20,720
may pitong mga lupon, isa
sa tuktok ng isa.

174
00:09:20,720 --> 00:09:25,425
Nilikha namin lamang pitong mga lupon, isa
bawat isa para sa bawat isa sa mga elemento ng data.

175
00:09:25,425 --> 00:09:28,860
Ngunit mayroong isang mahalagang bagay na nangyari
sa ang snippet na ito dito mismo.

176
00:09:28,860 --> 00:09:31,030
>> Ito ay ang data na iyon ay masaklawan.

177
00:09:31,030 --> 00:09:33,440
Kaya bawat solong isa sa
mga elemento ng data,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, ay nakagapos
sa isang partikular na lupon.

179
00:09:38,830 --> 00:09:40,960
Kaya ito ay hindi lamang nilikha
ng grupo ng mga lupon

180
00:09:40,960 --> 00:09:43,420
ngunit Tie ang dalawang bagay-bagay.

181
00:09:43,420 --> 00:09:48,740
>> At sa hinaharap, dahil nilikha namin
mga lupon na may ganitong D3 function,

182
00:09:48,740 --> 00:09:52,430
kung bibigyan ko kayo ng isang lupon, maaari kang
bigyan mo ako ng data na nauugnay dito.

183
00:09:52,430 --> 00:09:53,280
Kaya maaari naming hilingin sa D3.

184
00:09:53,280 --> 00:09:54,840
Uy, D3, mayroon akong lupong ito.

185
00:09:54,840 --> 00:09:57,350
Ano ang data na ang mga bilog ay may?

186
00:09:57,350 --> 00:10:01,290
At D3 ay sabihin sa amin 10 o 45 o 105.

187
00:10:01,290 --> 00:10:02,380
>> Mga bagay na ito ay napapailalim.

188
00:10:02,380 --> 00:10:04,490
Iyon ay isang napaka, napaka pangunahing mga konsepto.

189
00:10:04,490 --> 00:10:06,070
Tingnan natin natin iyon.

190
00:10:06,070 --> 00:10:12,210
>> Kaya ang paraan na gusto naming hilingin sa D3-- kaya
ito ay walang-katuturang para sa,

191
00:10:12,210 --> 00:10:16,620
ngunit pinagkakatiwalaan lang ako dito.

192
00:10:16,620 --> 00:10:17,620
Ito ay kung paano namin magtanong D3.

193
00:10:17,620 --> 00:10:21,312
Uy, D3, ibigay ang unang sa akin
bilog na maaari mong mahanap.

194
00:10:21,312 --> 00:10:23,580
Bigyan mo ako ng unang bilog maaari mong mahanap.

195
00:10:23,580 --> 00:10:29,660
At pagkatapos ay maaari naming hilingin sa D3, kung ano ang
ang data sa na, tulad nito, 10.

196
00:10:29,660 --> 00:10:33,380
>> Kaya tanungin lang namin D3, mahanap ako
unang bilog maaari mong mahanap.

197
00:10:33,380 --> 00:10:34,400
Ano ang data nito?

198
00:10:34,400 --> 00:10:36,650
10, na talaga ang aming
unang elemento ng data.

199
00:10:36,650 --> 00:10:42,150
Maaari naming hilingin ito, hey, D3,
hanapin sa amin sa aming third lupon.

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

201
00:10:44,450 --> 00:10:45,740
Bakit ito talagang mahalaga?

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

203
00:10:49,790 --> 00:10:52,250
>> Kaya dito mismo, nabanggit ko
na maaaring namin ang mga pag-andar.

204
00:10:52,250 --> 00:10:54,910
At nabanggit ko na noon ay
isang napaka-makapangyarihang bagay.

205
00:10:54,910 --> 00:11:03,070
Kaya hindi lamang ay maaaring ang aming mga pag-andar gumawa ng mga bagay
tulad ng ilang mga pag-compute, halimbawa,

206
00:11:03,070 --> 00:11:09,170
bumalik ng random na numero, maaari itong
ring gawin ang mga bagay batay sa data.

207
00:11:09,170 --> 00:11:11,550
Ito ay kung ano ang ibig sabihin ng data hinihimok ng mga dokumento.

208
00:11:11,550 --> 00:11:13,750
Iyon ay kung ano ang ibig sabihin D3 para sa.

209
00:11:13,750 --> 00:11:17,800
>> Sa halip Kaya ito x postition--
ng lang ang sinasabi, ang lahat ng mga lupon,

210
00:11:17,800 --> 00:11:21,735
makakuha ng mga x 200 posisyon, namin
Maaaring bigyan ito ng isang function.

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

212
00:11:26,140 --> 00:11:30,140
At dito, maaari kaming magsagawa ng ilang mga kalkulasyon.

213
00:11:30,140 --> 00:11:33,710
at d dito nakatayo sa lugar para sa data.

214
00:11:33,710 --> 00:11:36,120
Kaya sa tuwing mayroon kaming
isang lupon, talaga,

215
00:11:36,120 --> 00:11:37,750
D3 ay lumikha ng mga pitong mga lupon.

216
00:11:37,750 --> 00:11:38,500
At pagkatapos ay para sa bawat

217
00:11:38,500 --> 00:11:41,920
>> bilog, ito ay pagpunta sa pumunta, hey,
circle1 kung ano ang iyong posisyon x.

218
00:11:41,920 --> 00:11:45,210
Sa nakaraan, hindi namin
laging pagsagot 200.

219
00:11:45,210 --> 00:11:48,630
Ngunit ngayon, itatanong sa tuwing D3
amin kung ano ang iyong posisyon x,

220
00:11:48,630 --> 00:11:51,790
ito ay pagpunta sa magbibigay sa us-- mayroon kami
bilog na iyon, kaya may namin ang data.

221
00:11:51,790 --> 00:11:55,290
Ito ay pagpunta sa bigyan kami ng data at sabihin,
kung ano ang gusto ng pagsasaysay maging,

222
00:11:55,290 --> 00:11:57,120
batay sa data na iyon.

223
00:11:57,120 --> 00:11:59,590
>> Hayaan bumalik ni lamang ang aktwal na data.

224
00:11:59,590 --> 00:12:04,910
Kaya kung nagpapatakbo namin ito, nagbibigay ito
amin data hinihimok ng mga dokumento.

225
00:12:04,910 --> 00:12:08,040
Ang mga lupon ay batay
kaugnay position--

226
00:12:08,040 --> 00:12:11,120
ang mga ito ay bases bilang isang katangian ng data.

227
00:12:11,120 --> 00:12:13,100
>> Kaya para sa unang bilog,
D3 naglalagay ng isang lupon.

228
00:12:13,100 --> 00:12:16,770
At pagkatapos ay nagtatanong sa amin D3, kung ano ang ginagawa
Gusto mo ang paglalahad upang maging.

229
00:12:16,770 --> 00:12:19,620
At kami lang sabihin, anuman ang data ay.

230
00:12:19,620 --> 00:12:21,185
Gawin ang pagsasaysay 10.

231
00:12:21,185 --> 00:12:26,320
>> Pagkatapos ay humihingi ito, kung ano ang gusto mong ang
pagsasaysay na para sa pangalawang bilog.

232
00:12:26,320 --> 00:12:27,270
At namin masagot, 45.

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

234
00:12:30,000 --> 00:12:32,230
At kami, siyempre, maaari
gumawa ng ilang mga pag-compute dito.

235
00:12:32,230 --> 00:12:35,510
Tingin ko na ang mga lupon
mga uri ng squished up.

236
00:12:35,510 --> 00:12:38,965
>> Kaya i-multiply ito sa pamamagitan ng 3, i-multiply ang data sa pamamagitan ng 3.

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

238
00:12:41,870 --> 00:12:43,840
Ang aming mga bilog lamang Kaka pinalawak out.

239
00:12:43,840 --> 00:12:46,730
Ang aming mga halaga ay triple.

240
00:12:46,730 --> 00:12:51,010
>> Ang lupon ay talagang sa dulo,
kaya siguro ng uri ng offset ito ipaalam.

241
00:12:51,010 --> 00:12:53,632
Sabihin nating, sa pamamagitan 20.

242
00:12:53,632 --> 00:12:56,070
Narito kang pumunta.

243
00:12:56,070 --> 00:12:57,590
>> Ito ay isang visualization ng data.

244
00:12:57,590 --> 00:13:01,767
Ito ay isang napaka-basic na isa, ngunit ito
Binibigyan kami ng ilang pananaw sa aming mga data.

245
00:13:01,767 --> 00:13:04,600
Sinasabi ito sa amin na, halimbawa, namin
magkaroon ng isang maliit na kumpol ng mga elemento.

246
00:13:04,600 --> 00:13:06,340
At mayroon kaming isang malaking outlier dito.

247
00:13:06,340 --> 00:13:10,830
Ito ay nagbibigay sa amin ng ilang impormasyon
tungkol sa pamamahagi.

248
00:13:10,830 --> 00:13:20,830
>> Kung kami ay, halimbawa, upang baguhin
ang data sa 150 dito at refresh,

249
00:13:20,830 --> 00:13:22,630
ang aming mga visualization ay nagbago.

250
00:13:22,630 --> 00:13:24,285
Ang dokumentong ito ay pinapaandar ng data.

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

252
00:13:32,640 --> 00:13:36,180
>> Kaya siyempre, ang lahat ng mga sangkap na ito,
lahat ng mga katangian dito,

253
00:13:36,180 --> 00:13:38,430
Maaari kaming gumamit ng isang function, hindi
lamang ang mga numero, hindi lamang

254
00:13:38,430 --> 00:13:39,900
ang x at y mga posisyon.

255
00:13:39,900 --> 00:13:42,120
Kaya maaari naming gamitin ang isang pagpapaandar para sa kulay.

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

257
00:13:45,260 --> 00:13:46,360
Kaya kami na ang parehong.

258
00:13:46,360 --> 00:13:49,360
Susubukan naming bigyan ito ng isang function.

259
00:13:49,360 --> 00:13:52,320
>> At maaari kaming magkaroon sabihin nating,
conditionals sa aming function.

260
00:13:52,320 --> 00:13:54,770
Function na ito ay maaaring maging
daan ng mga linya mahaba.

261
00:13:54,770 --> 00:13:57,150
Maaari itong gawin sa lalong, napaka-komplikadong bagay.

262
00:13:57,150 --> 00:13:59,080
>> Kaya ilagay ang isang pahayag kung dito ipaalam.

263
00:13:59,080 --> 00:14:03,420
Sabihin natin, kung ang aming data ay mas mababa
sa 50, na ang ilang limitasyon

264
00:14:03,420 --> 00:14:05,817
na hindi kami interesado
sa para sa ilang mga kadahilanan.

265
00:14:05,817 --> 00:14:06,650
Ay gawin itong green Hayaan.

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

267
00:14:09,830 --> 00:14:15,320
Kung hindi man, na gawin itong pula ipaalam.

268
00:14:15,320 --> 00:14:16,110
Paano iyan?

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
>> Kaya aming mga visualization data ay nagsisimula
ihatid mas kawili-wiling impormasyon

272
00:14:24,860 --> 00:14:26,727
sa maraming mga channel.

273
00:14:26,727 --> 00:14:28,560
Kaya ngayon alam namin ng kaunti
tungkol sa pamamahagi.

274
00:14:28,560 --> 00:14:31,768
At alam natin na mayroong ilang mga uri ng
cut off sa 50 na kami interesado.

275
00:14:31,768 --> 00:14:35,630
Alam namin na may dalawang mga punto ng data
sa ibaba na hangganan at karamihan sa mga ito

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

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

278
00:14:41,510 --> 00:14:46,160
>> Kaya bilang panghuling hakbang, ang data na ito dito,
ito ay lubhang bibihirang upang makita ito tulad na.

279
00:14:46,160 --> 00:14:52,610
Kaya ipaalam ilipat lamang ng ito sa isang variable
dahil iyon ang mas malinis, tulad nito.

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

281
00:15:02,980 --> 00:15:05,197
At pagkatapos ay gamitin ang aming variable na dito.

282
00:15:05,197 --> 00:15:06,280
Ito ay ang eksaktong parehong bagay.

283
00:15:06,280 --> 00:15:07,280
Ito ay lamang ng kaunti mas malinis.

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

285
00:15:25,300 --> 00:15:35,300
>> Susunod, Act III, Scales--
Kaya isa problema sa

286
00:15:35,300 --> 00:15:38,920
dito ay, kung babaguhin namin ang aming
data ng mga ito 200 value--

287
00:15:38,920 --> 00:15:41,685
kung babaguhin namin ito sa 400
o isang bagay at refresh,

288
00:15:41,685 --> 00:15:44,540
pagkatapos ay ang halaga na ito lamang nagpunta sa labas ng puting-tabing.

289
00:15:44,540 --> 00:15:49,040
Kaya aming logic dito mismo
kung paano gawin namin ang mga oras 3

290
00:15:49,040 --> 00:15:52,570
at 20, upang ipakalat ito out at pagkatapos ay
offset ito ng kaunti ay talagang clunky.

291
00:15:52,570 --> 00:15:54,150
>> Ano ang ibig sabihin ng mga numero?

292
00:15:54,150 --> 00:15:55,400
Lang nila hard code doon.

293
00:15:55,400 --> 00:15:58,830
At sila talaga ay nakatali sa data.

294
00:15:58,830 --> 00:16:00,550
Gusto naming ng isang hinimok ng data ng dokumento.

295
00:16:00,550 --> 00:16:05,460
Gusto naming isang napaka-kakayahang umangkop na dokumento,
na ibinigay ng data, adapts upang ito

296
00:16:05,460 --> 00:16:07,900
at kinakatawan nito.

297
00:16:07,900 --> 00:16:11,330
>> Ano ang kailangan namin talaga ay, namin
mayroon sa hanay ng mga numero 10.

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

299
00:16:12,640 --> 00:16:17,630
At gusto naming upang i-map na papunta
ang lapad, ang buong lapad dito.

300
00:16:17,630 --> 00:16:20,620
Kaya mayroon namin ang saklaw ng
pagpunta 0-100 numero.

301
00:16:20,620 --> 00:16:24,980
At mayroon kaming pumupunta ito campus ko
20-700, sa kasong ito.

302
00:16:24,980 --> 00:16:26,515
>> Uri ng namin nais upang i-map na sa.

303
00:16:26,515 --> 00:16:30,002
Gusto naming masukat na pataas at
pagkatapos ay i-offset ito nang kaunti.

304
00:16:30,002 --> 00:16:33,165
Ito ay lumiliko out na D3 ay may mga ito.

305
00:16:33,165 --> 00:16:34,220
Ito ay tinatawag na isang sukat.

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

307
00:16:37,410 --> 00:16:38,250
Kaya gamitin natin ito ipaalam.

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

309
00:16:46,300 --> 00:16:49,670
>> Ang paraan na works-- pupuntahan ko
-type ito up at pagkatapos ay ipaliwanag ito.

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

311
00:17:01,530 --> 00:17:02,450
Ito ay isang sukatan.

312
00:17:02,450 --> 00:17:08,670
Ano ito ay gawin ay, ito ay i-map out
mga halaga ng 1-200 sa sa 20-600.

313
00:17:08,670 --> 00:17:10,990
Maaari naming suriin na.

314
00:17:10,990 --> 00:17:13,329
Maaari naming makita na dito.

315
00:17:13,329 --> 00:17:21,704
>> Kaya kung feed ko ito 1-- isang sandali.

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

317
00:17:47,764 --> 00:17:48,555
Bigyan mo ako ng isang segundo.

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

319
00:17:53,680 --> 00:17:55,080
Dapat na namali ang pagkakapasok ko ito.

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

321
00:18:15,320 --> 00:18:15,990
Mayroon kang pumunta.

322
00:18:15,990 --> 00:18:17,930
Ikinalulungkot kong tungkol iyon.

323
00:18:17,930 --> 00:18:22,050
>> Kaya kung ano ang gagawin ng isang sukat
ay, tatagal ng isang halaga

324
00:18:22,050 --> 00:18:24,930
at pagkatapos ay convert na,
palawakin na out, kaya

325
00:18:24,930 --> 00:18:27,320
punan ang buong hanay ka humihingi.

326
00:18:27,320 --> 00:18:32,910
Kaya sa kasong ito, kung paano namin ibinigay ito sa isa,
ito ang nangyayari upang i-map na papunta 20.

327
00:18:32,910 --> 00:18:37,750
At kung paano namin ibinigay ito sa 200, ito ay
pagpunta sa map na sa sa 600.

328
00:18:37,750 --> 00:18:40,460
At sa isang lugar sa pagitan ng,
kung makuha namin 100, ito ay

329
00:18:40,460 --> 00:18:44,610
magiging isang lugar
sa pagitan ng 20 at 600.

330
00:18:44,610 --> 00:18:51,480
>> At siyempre, ngayon ito ay kung ano ang
kailangan namin upang alisin ang matapang na mga naka-code

331
00:18:51,480 --> 00:18:53,402
mga bagay na mayroon kami doon.

332
00:18:53,402 --> 00:18:55,950
Kaya kung ano ang gusto naming gawin ay
kunin ang data na hindi namin

333
00:18:55,950 --> 00:19:00,950
ibinigay, na ang mga indibidwal na data
elemento, at pumasa ito sa unang scale.

334
00:19:00,950 --> 00:19:02,635
Kaya scale ay scale up ito.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, mayroon kaming maliit na error dito.

337
00:19:48,880 --> 00:19:50,120
Kami ay ang mga nawawalang data.

338
00:19:50,120 --> 00:19:51,290
Mayroon kang pumunta.

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

340
00:19:58,550 --> 00:19:59,550
At na lumalaki ito.

341
00:19:59,550 --> 00:20:01,383
>> Iyon ay nagbibigay sa amin ng parehong
resulta namin ay may bago,

342
00:20:01,383 --> 00:20:04,030
ngunit sa halip ng pagkakaroon ng mga
hard code mga hadlang.

343
00:20:04,030 --> 00:20:07,790
At kung ang laki ng aming mga
canvas pagbabago, halimbawa,

344
00:20:07,790 --> 00:20:11,790
kung gusto naming magkaroon ng ito sa paglipas ng
400 pixels at ito squishes out,

345
00:20:11,790 --> 00:20:15,440
maaari kaming magkaroon ito over--
maaari naming palawakin ito, o namin

346
00:20:15,440 --> 00:20:21,890
Maaaring mabawasan ang natitira upang margin
isang bagay na mas mababa o higit pa kaysa sa 20.

347
00:20:21,890 --> 00:20:25,470
Ang mga numerong ito, ang mga hard code
mga numero ngayong magkaroon ng kahulugan sa amin.

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

349
00:20:28,110 --> 00:20:30,520
>> At maaari naming gawin ng maraming higit pa
pati na rin ang mga kawili-wiling mga bagay.

350
00:20:30,520 --> 00:20:35,990
Kaya sa halip ng pagkakaroon ng linear
Scale, maaari naming nais na mag-log isang sukat.

351
00:20:35,990 --> 00:20:37,840
At iyon ay magbibigay sa amin ng isang sukat ng log.

352
00:20:37,840 --> 00:20:41,269
>> Kaya ngayon ang aming sukat, sa halip na
lamang pagpapalawak out ang saklaw na iyon,

353
00:20:41,269 --> 00:20:42,810
ito ang ginagawa mas sopistikadong mga bagay.

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

355
00:20:48,790 --> 00:20:53,790
Sa halip ng pagkakaroon ng hanay na ito mahirap
-code, at sa halip ng pagkakaroon na 600,

356
00:20:53,790 --> 00:20:58,465
maaari naming nais na gumamit lang ang lapad,
kaya mula 20 hanggang ang lapad minus 40,

357
00:20:58,465 --> 00:21:02,392
2 beses ang margin sa kabilang panig.

358
00:21:02,392 --> 00:21:05,350
At ito ay gumagawa ng maraming higit pang mga kahulugan upang
isang tao na maaaring tumingin sa ang code.

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

360
00:21:08,080 --> 00:21:11,850
>> Nang kawili-wili, ang mga antas makakuha ng
napaka, napaka-sopistikadong pati na rin.

361
00:21:11,850 --> 00:21:13,350
Gawin ang mga ito ng maraming kawili-wiling bagay.

362
00:21:13,350 --> 00:21:17,620
Kaya mga antas ay hindi kinakailangang magkaroon
upang patakbuhin lamang na may mga numero.

363
00:21:17,620 --> 00:21:18,955
Gumawa ng isang sukat ng kulay Hayaan.

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

365
00:21:23,120 --> 00:21:26,120
>> Kaya maaari be-- ang aming hanay
ang aming mga domain ay 1-200.

366
00:21:26,120 --> 00:21:28,220
Iyan ang input bagay.

367
00:21:28,220 --> 00:21:33,793
Ngunit maaari naming gusto upang i-map mula sa
berde sa pula, halimbawa.

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

369
00:21:39,710 --> 00:21:42,910
At ngayon, kung pumasa namin ito 1,
kami ay pagpunta upang makakuha ng berde.

370
00:21:42,910 --> 00:21:45,110
Kung bigyan namin ito 200, magpapadala kami makakuha ng pula.

371
00:21:45,110 --> 00:21:49,480
At kung pumasa namin ito ng isang bagay sa pagitan,
ito ay pagpunta sa ilang mga kumbinasyon ng mga iyon,

372
00:21:49,480 --> 00:21:52,520
pang lugar sa gradient
sa pagitan ng berde at pulang.

373
00:21:52,520 --> 00:21:55,210
>> At sa halip ng pagkakaroon
ang ganitong uri ng clunky logic

374
00:21:55,210 --> 00:21:58,550
mayroon kaming dito sa
kondisyong doon,

375
00:21:58,550 --> 00:22:03,250
maaari kaming magkaroon ng isang something--
linear na sukat sa pagitan ng mga iyon.

376
00:22:03,250 --> 00:22:07,100
Kaya gusto naming gamitin ang sukatan namin lamang
nilikha, na tinatawag naming kulay.

377
00:22:07,100 --> 00:22:09,060
At gusto namin bigyan D ito, na
ay ang aming elemento ng data.

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

379
00:22:14,250 --> 00:22:15,060
At doon pumunta namin.

380
00:22:15,060 --> 00:22:18,070
Mayroon kaming isang sukat ng kulay.

381
00:22:18,070 --> 00:22:18,940
>> Kaya ito ay pagma-map.

382
00:22:18,940 --> 00:22:20,960
Kaya dulong kaliwa ay ganap na berde.

383
00:22:20,960 --> 00:22:22,560
Ang dulong kanan ay lubos na pula.

384
00:22:22,560 --> 00:22:24,828
At lahat ng nasa pagitan ng
ay isang katangian ng d.

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

386
00:22:33,369 --> 00:22:35,160
Mayroon kaming isang kawili-wiling
visualization dito.

387
00:22:35,160 --> 00:22:36,952
Ngunit ang aming data ay uri ng pagbubutas.

388
00:22:36,952 --> 00:22:39,410
Tingnan natin kung ano ang namin gawin kung Ipaalam
namin ay may higit pang mga kagiliw-giliw na data.

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

390
00:22:44,420 --> 00:22:50,500
>> Act IV, Pagtatrabaho Sa
Data-- ang unang bagay na

391
00:22:50,500 --> 00:22:53,560
Makikita gusto naming gawin upang gumawa ng aming mga
visualization mas kawili-wiling

392
00:22:53,560 --> 00:22:56,140
ay upang ilipat ang data sa ibang lugar.

393
00:22:56,140 --> 00:22:58,310
Ito ay napaka-clunky na magkaroon
matigas ang data naka-code dito.

394
00:22:58,310 --> 00:23:01,220
At sa pangkalahatan, kami ay magiging nagtatanong
ibang tao para sa data.

395
00:23:01,220 --> 00:23:05,400
Kami mag-i-siguro na humihiling sa pamahalaan,
ang Census Bureau, kung ano ang iyong data

396
00:23:05,400 --> 00:23:10,170
at pagkatapos ay paglalagay na iyon o na nagtatanong
ang ilang mga third-party na entity para sa ilang data

397
00:23:10,170 --> 00:23:13,330
at pagkatapos ay pagbuo ng isang
visualization sa iyon.

398
00:23:13,330 --> 00:23:17,170
>> Kaya ang unang bagay na gusto naming gawin
ay lumipat na sa ibang lugar.

399
00:23:17,170 --> 00:23:24,130
Kaya ako pupunta upang lumikha ng isang
-file dito na tinatawag na data.json.

400
00:23:24,130 --> 00:23:25,600
JSON ay ang format ng data.

401
00:23:25,600 --> 00:23:29,210
Hindi mo na kailangang magkano ang tungkol na alam.

402
00:23:29,210 --> 00:23:33,210
At kami ay pagpunta upang kopyahin ang mga
kaunting data na mayroon kami doon,

403
00:23:33,210 --> 00:23:40,330
-paste ito sa may verbatim, pumunta
pabalik sa aming mga visualization code

404
00:23:40,330 --> 00:23:45,362
dito, at gamitin ang function na ito dito mismo.

405
00:23:45,362 --> 00:23:46,820
Hindi mo na kailangang malaman ang mga detalye.

406
00:23:46,820 --> 00:23:49,800
Ngunit kung ano ito ay gawin ay,
ito ay mahanap ang file na iyon,

407
00:23:49,800 --> 00:23:51,780
kunin ang mga ito, at ibalik ito sa amin.

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

409
00:24:11,660 --> 00:24:15,220
Kaya kung ano ang ginagawa ay, ito mapupunta
at makuha ang data.json file.

410
00:24:15,220 --> 00:24:18,570
At pagkatapos ay ang lahat ng mga code na
naka-indent inside-- tunay,

411
00:24:18,570 --> 00:24:21,800
lahat ng code na mayroon kami habilin there--
tumakbo lamang kapag makuha namin ang data pabalik.

412
00:24:21,800 --> 00:24:25,760
At pagkatapos ito ay pagpunta sa magpatakbo na
code na may data na mayroon kami.

413
00:24:25,760 --> 00:24:28,870
Mahusay, mayroon kaming
visualization na query

414
00:24:28,870 --> 00:24:31,390
para sa ilang mga code sa isang lugar
iba pa, na kung saan ay karaniwang

415
00:24:31,390 --> 00:24:36,110
kung saan ito query sa ilang mga data mula sa
sa isang lugar ng iba pa, na kung saan ay karaniwang

416
00:24:36,110 --> 00:24:38,656
kung paano gumagana ang mga visualization.

417
00:24:38,656 --> 00:24:41,400
>> Pero gusto kong bumalik sa data.

418
00:24:41,400 --> 00:24:48,030
Kaya ang data sa panimula sa D3-- D3
consumes data na ang isang listahan ng mga bagay.

419
00:24:48,030 --> 00:24:53,000
D3 inaasahan ang data ay lamang ng isang listahan
ng mga bagay, ang isang hanay ng mga bagay.

420
00:24:53,000 --> 00:24:58,780
Hindi mahalaga kung ano ang mga bagay
ay, kaya hangga't ito ay isang hanay ng mga ito.

421
00:24:58,780 --> 00:25:02,460
>> Kaya dito, halimbawa, maaari naming ng
Siyempre pa lumulutang na halaga ng point.

422
00:25:02,460 --> 00:25:04,830
Maaari kaming may mga negatibo.

423
00:25:04,830 --> 00:25:09,400
Hindi mahalaga D3, kaya mahaba
bilang ito ay isang listahan ng mga bagay.

424
00:25:09,400 --> 00:25:13,270
>> Tulad ng kawili-wiling mga bagay na aming
ay maaaring magkaroon, maaari rin naming

425
00:25:13,270 --> 00:25:19,410
May isang listahan ng mga string tulad na.

426
00:25:19,410 --> 00:25:25,440
Kaya ito ay ang Crimson mga headline
Ako kinuha ang ilang mga araw na nakalipas.

427
00:25:25,440 --> 00:25:29,220
At marahil maaari mong mahanap ang ilang mga kawili-wiling
bagay tungkol sa mga ito ng mga ulo ng balita.

428
00:25:29,220 --> 00:25:30,970
>> Kaya muli, ito ay isang listahan ng mga bagay.

429
00:25:30,970 --> 00:25:32,360
Hindi mahalaga D3.

430
00:25:32,360 --> 00:25:35,572
Mangyari ang mga ito upang maging isang string.

431
00:25:35,572 --> 00:25:36,530
Binago namin ang aming data.

432
00:25:36,530 --> 00:25:38,210
>> Ay bumalik sa aming mga visualization Hayaan.

433
00:25:38,210 --> 00:25:42,495
Ngayon, ang aming mga visualization inaasahan
ang pag-input na numero.

434
00:25:42,495 --> 00:25:44,370
Kaya kami ay pagpunta sa may
upang gumawa ng ilang pagbabago.

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

436
00:25:47,180 --> 00:25:52,180
Kaya halimbawa, una sa lahat, siguro
gusto naming ilagay ang mga lupon kasama

437
00:25:52,180 --> 00:25:56,870
sa pamamagitan ng haba ng ulo ng ad, ang
bilang ng mga character sa ulo ng ad.

438
00:25:56,870 --> 00:26:03,600
>> Kaya kung ano ang gagawin namin is-- sa bawat oras na aming
function ay tinatawag na may isang string,

439
00:26:03,600 --> 00:26:09,095
ipapakita namin mahanap ito ay haba At
pagkatapos ay pumasa na sa scale.

440
00:26:09,095 --> 00:26:11,550
Kulay ng, magpapadala ako bumalik
na sa bakal asul.

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

442
00:26:19,060 --> 00:26:20,420
At doon pumunta namin.

443
00:26:20,420 --> 00:26:23,190
Mayroon kaming visualization
ng Crimson mga headline.

444
00:26:23,190 --> 00:26:25,500
>> Ang aming scale ay isang bit off.

445
00:26:25,500 --> 00:26:29,680
Ipagpalagay na ang pinakamahabang Hayaan
headline ay 100 mga character ang haba,

446
00:26:29,680 --> 00:26:32,244
kaya span na ang isang bit.

447
00:26:32,244 --> 00:26:33,410
At mayroon kaming visualization.

448
00:26:33,410 --> 00:26:36,710
Kaya tila na ang karamihan ng mga ulo
ay malapit sa katangian nang magkasama,

449
00:26:36,710 --> 00:26:38,750
sa mga tuntunin ng karakter linya.

450
00:26:38,750 --> 00:26:41,200
Ngunit isa doon talaga ay nakatayo sa labas.

451
00:26:41,200 --> 00:26:46,660
>> Maaari naming bumuo ng ilang mga tool
upang galugarin ang higit pa.

452
00:26:46,660 --> 00:26:50,710
Ngunit kapag ako ay nagtatrabaho sa ito, ako ay
malaman kung, sa data na ito set,

453
00:26:50,710 --> 00:26:53,880
mga ulo ng tutuldok
sa kanila ay mas mahaba.

454
00:26:53,880 --> 00:26:55,770
Ipinapalagay ko gagawin nila.

455
00:26:55,770 --> 00:26:56,660
>> Kaya ng malaman ipaalam.

456
00:26:56,660 --> 00:27:00,650
Gamitin ang mga kulay Hayaan
channel tulad ng ginawa namin bago,

457
00:27:00,650 --> 00:27:04,540
upang i-encode ang ilan tungkol sa kung ang
mayroong isang tutuldok o hindi.

458
00:27:04,540 --> 00:27:07,220
Kaya gagamitin namin ang isang may-kondisyong muli.

459
00:27:07,220 --> 00:27:09,350
Hindi mo na kailangang malaman
ang mga detalye ng ito,

460
00:27:09,350 --> 00:27:14,260
ngunit ito ay kung paano namin ang isang
string para sa isang partikular na karakter

461
00:27:14,260 --> 00:27:16,355
sa JavaScript, muli, hindi katuturan.

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

463
00:27:18,910 --> 00:27:23,270
>> Ngunit kung hindi kami makahanap ng isang
tutuldok, babalik kami berde.

464
00:27:23,270 --> 00:27:26,100
At kung ang ginagawa namin, babalik kami pula.

465
00:27:26,100 --> 00:27:29,010
Kaya muli, mga ulo ng balita na
na tutuldok ay magiging pula.

466
00:27:29,010 --> 00:27:34,980
Ito ay kung ano ang means-- mabait.

467
00:27:34,980 --> 00:27:38,040
>> Kaya tila na ang aking
teorya ay Uusog.

468
00:27:38,040 --> 00:27:39,360
Mayroong dalawang lamang.

469
00:27:39,360 --> 00:27:42,380
Lamang mayroon kaming anim na puntos ng data
at dalawang lamang ay nagkaroon ng colon.

470
00:27:42,380 --> 00:27:45,510
Ngunit ito ay tila ng kaunti pang
sa ibabang dulo, sa katunayan.

471
00:27:45,510 --> 00:27:47,830
Mga pamagat sa colon mukhang
sa pangkalahatan ay mas maikli,

472
00:27:47,830 --> 00:27:52,370
hindi bababa sa aming mga data set-- kawili-wili.

473
00:27:52,370 --> 00:27:55,830
>> Sabihin bumalik na sa
bakal asul at pagkatapos ay makita

474
00:27:55,830 --> 00:28:00,601
kung ano ang maaari naming gawin sa kahit
mas kawili-wiling data.

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

476
00:28:04,370 --> 00:28:09,070
Kaya muli, nabanggit ko na
data sa D3 ay isang listahan ng mga bagay.

477
00:28:09,070 --> 00:28:11,080
Nakita namin ang mga numero ng maraming uri.

478
00:28:11,080 --> 00:28:12,810
Nakita namin ang mga string.

479
00:28:12,810 --> 00:28:15,700
Ngunit maaari ring bagay ang mga bagay.

480
00:28:15,700 --> 00:28:20,080
>> Maaari silang maging kumplikado ng mga bagay
na kasama ang maraming mga bagay.

481
00:28:20,080 --> 00:28:24,510
Upang sabihin na higit na malinaw,
sa karamihan ng mga kaso, namin

482
00:28:24,510 --> 00:28:28,384
Gusto upang bumuo ng bawat punto ng data bilang
higit pang kumplikado kaysa sa isang halaga lamang.

483
00:28:28,384 --> 00:28:30,175
Kung nais mong isipin na ang isang
database ng tungkol sa mga mag-aaral,

484
00:28:30,175 --> 00:28:32,470
Maaaring mayroong isang mag-aaral
pangalanan, isang mag-aaral ID,

485
00:28:32,470 --> 00:28:36,370
at maraming bagay na nauugnay
sa isang partikular na talaan,

486
00:28:36,370 --> 00:28:39,834
hindi lamang isang string o numero.

487
00:28:39,834 --> 00:28:40,750
Kaya tingnan natin na ipaalam.

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

489
00:28:55,180 --> 00:28:56,760
>> Ito ay isa tulad ng data set.

490
00:28:56,760 --> 00:28:59,090
Ito ay isang data-set tungkol sa lindol.

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

492
00:29:01,910 --> 00:29:08,430
Kaya lahat ng bagay dito sa aming listahan o array
ng mga bagay ay naglalaman ng maraming mga bagay mismo.

493
00:29:08,430 --> 00:29:11,380
Kaya ang bawat punto ng data ay may
magnitude at coordinate.

494
00:29:11,380 --> 00:29:13,425
At coordinate ang kanilang mga sarili
maglaman ng dalawang mga bagay.

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

496
00:29:15,960 --> 00:29:20,450
>> Kaya araw-araw na ngayon ng maraming higit pa
kumplikado at mas kawili-wiling marami

497
00:29:20,450 --> 00:29:22,700
at naglalaman ng higit pa
kawili-wiling impormasyon.

498
00:29:22,700 --> 00:29:26,730
Tingnan natin na maaari kaming bumuo out sa natin iyon.

499
00:29:26,730 --> 00:29:36,130
Bumabalik pabalik sa dito, muli, gamit
ang aming histogram lupon visualization

500
00:29:36,130 --> 00:29:42,110
na binuo namin, sabihin makita kung maaari naming bumuo ng isang
visualization ng magnitude na pamamahagi

501
00:29:42,110 --> 00:29:43,305
sa aming mga hanay ng data.

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

503
00:29:45,850 --> 00:29:48,660
>> Kaya dito, ito ay ang parehong konsepto.

504
00:29:48,660 --> 00:29:51,920
Ngunit ngayon, d naglalaman ng higit pang mga bagay.

505
00:29:51,920 --> 00:29:54,780
d ay naglalaman ng maraming mga elemento ng data.

506
00:29:54,780 --> 00:29:57,946
Kaya natin d pabalik.

507
00:29:57,946 --> 00:29:59,670
D3 ay nagbibigay sa amin d.

508
00:29:59,670 --> 00:30:06,080
At sumagot namin sa pamamagitan ng paghahanap ng magnitude
ng d at pagkatapos ng pagpasa na sa scale.

509
00:30:06,080 --> 00:30:08,490
>> At pagkatapos ay kailangan namin upang baguhin
ang aming scale, siyempre.

510
00:30:08,490 --> 00:30:12,980
Kaya huwag lamang magnitudes
pumunta higit pa sa 10.

511
00:30:12,980 --> 00:30:15,485
Sa totoo lang, mayroong ay hindi kailanman naging
10 magnitude na lindol.

512
00:30:15,485 --> 00:30:19,360
Ngunit iyon lamang ang uri ng aming itaas
pagtatapos, aming itaas na spectrum.

513
00:30:19,360 --> 00:30:20,240
>> Ni-refresh Hayaan.

514
00:30:20,240 --> 00:30:22,990
Nice, mayroon kaming visualization.

515
00:30:22,990 --> 00:30:25,490
Ito ay kawili-wili sa note-- kaya
mayroong dalawang mga punto ng data na

516
00:30:25,490 --> 00:30:29,010
ay halos eksakto sa tuktok ng bawat
isa, sa mga tuntunin ng magnitude.

517
00:30:29,010 --> 00:30:31,350
Ang makikita mo ito sa pamamagitan ng opacity na aming ginagamit.

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

519
00:30:40,810 --> 00:30:42,690
>> Mayroon kaming geographic data ngayon.

520
00:30:42,690 --> 00:30:44,710
Mayroon kaming mga latitude at longitude.

521
00:30:44,710 --> 00:30:47,549
Siguro maaari naming gawin ang isang bagay ng
Marami pang mga kagiliw-giliw na may iyon.

522
00:30:47,549 --> 00:30:49,590
Sa tingin ng ilang higit Hayaan
kawili-wiling paraan upang maisalarawan

523
00:30:49,590 --> 00:30:53,500
ito mas komplikado
data na mayroon kami ng access.

524
00:30:53,500 --> 00:31:04,950
>> Batas V, Mapping-- sa panimula,
gusto naming ilagay ang mga sa isang mapa.

525
00:31:04,950 --> 00:31:07,690
Ibig kong sabihin, ito ay kung saan ito ay pagpunta.

526
00:31:07,690 --> 00:31:13,130
Gusto naming upang i-encode ang impormasyon tungkol sa
posisyon sa mga pagbabasa lindol,

527
00:31:13,130 --> 00:31:16,350
pati na rin ang kanilang magnitude,
dahil mayroon kaming na ngayon.

528
00:31:16,350 --> 00:31:21,310
Nauunawaan namin kung paano sa pagkonsumo
mas komplikado data.

529
00:31:21,310 --> 00:31:26,200
>> Ang unang bagay na gagawin namin ay
lumikha ng isang mapa, isang background mapa.

530
00:31:26,200 --> 00:31:29,360
Pupunta ako sa pumunta sa pamamagitan ng
ito masyadong mabilis.

531
00:31:29,360 --> 00:31:30,560
Ito ay nakakalito code.

532
00:31:30,560 --> 00:31:33,110
Ito ay isa pang isa sa mga
mga recipe hindi mo talaga

533
00:31:33,110 --> 00:31:35,690
Mayroon upang maunawaan ang ganap na para sa iyo upang gamitin.

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

535
00:31:38,510 --> 00:31:39,740
Ngunit ito ay code.

536
00:31:39,740 --> 00:31:43,580
Ang code na ito dito mismo ay lumilikha ng isang mapa.

537
00:31:43,580 --> 00:31:45,730
>> Hindi namin pagpunta sa pumunta sa detalye.

538
00:31:45,730 --> 00:31:54,210
Ngunit sa mababaw, ano ang ginagawa nito ay,
ito query na ito us.json file, na

539
00:31:54,210 --> 00:31:57,150
ay isang file ng data tulad ng
ang isa namin ay may mga bago.

540
00:31:57,150 --> 00:31:59,150
Ito ay mas kumplikado, siyempre.

541
00:31:59,150 --> 00:32:02,920
Ngunit sa kasong ito, ang lahat ng bagay,
bawat punto ng data ay estadong ito

542
00:32:02,920 --> 00:32:05,420
at may isang listahan ng mga
latitude at longitude

543
00:32:05,420 --> 00:32:10,500
na tukuyin ang mga polygon,
na form, na estado.

544
00:32:10,500 --> 00:32:13,280
>> Kaya kung ano D3 ang gagawin ay katulad
sa kung ano ang ginawa namin bago.

545
00:32:13,280 --> 00:32:18,140
Ito ay hilingin na at
isailalim na sa isang elemento.

546
00:32:18,140 --> 00:32:20,890
At mayroong isang function na
ay map elemento na out,

547
00:32:20,890 --> 00:32:23,410
batay sa mga latitude at longitude.

548
00:32:23,410 --> 00:32:24,580
Maaari mong basahin ang higit pa sa na.

549
00:32:24,580 --> 00:32:27,385
At inirerekumenda ko ito.

550
00:32:27,385 --> 00:32:30,090
>> May mga link sa
pagtatapos ng code na ito na nai-post.

551
00:32:30,090 --> 00:32:31,570
At ang code ay nagkomento.

552
00:32:31,570 --> 00:32:34,050
Sa may mga link para sa karagdagang dito.

553
00:32:34,050 --> 00:32:36,590
Inirerekomenda ko kang tumingin up ito.

554
00:32:36,590 --> 00:32:39,460
Ngunit kung ano ang mahalaga sa kami tungkol sa ay
ito projection function.

555
00:32:39,460 --> 00:32:41,210
Gusto kong pumunta sa pamamagitan na iyon.

556
00:32:41,210 --> 00:32:43,522
>> Una sa lahat, hayaan mo akong ipakita
mo iyon, oo, mayroon kaming isang mapa.

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

558
00:32:47,300 --> 00:32:49,970
Mga mapa ay cool.

559
00:32:49,970 --> 00:32:52,330
Kaya tingnan natin ito ipaalam
produksyon function.

560
00:32:52,330 --> 00:32:56,481
>> Projection ay napaka
tulad ng isang antas, ang mga antas muli.

561
00:32:56,481 --> 00:32:59,210
Kaya kung ano ang produksyon para sa
ito projection ng function

562
00:32:59,210 --> 00:33:06,610
ay ay, maaari naming ipasa ito longitude
at latitudes-- sa kasong ito,

563
00:33:06,610 --> 00:33:09,590
ang mga halagang ito narito ang mga
lat-longs ng gusali

564
00:33:09,590 --> 00:33:13,990
kami ay nakaupo sa kanang
now-- sa projection.

565
00:33:13,990 --> 00:33:20,560
At magko-convert ang projection
na sa x at y mga halaga ng pixel.

566
00:33:20,560 --> 00:33:23,300
>> Kaya kung ano projection ay ang magawa
ay halos kapareho sa aming sukat.

567
00:33:23,300 --> 00:33:27,270
Tumatagal ito sa aming mga latitude at
longitude na kumakatawan sa isang buong mundo

568
00:33:27,270 --> 00:33:31,390
at pag-urong at pagpapalaki na
pababa sa parisukat na gusto namin,

569
00:33:31,390 --> 00:33:33,510
na binigyan namin ito.

570
00:33:33,510 --> 00:33:35,220
Sa kasong ito, hindi namin
pagpasa sa mga halagang ito.

571
00:33:35,220 --> 00:33:41,370
At ito ay nagbibigay sa amin, na rin, na
sa iyong screen ay nangangahulugang 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Ang buong screen ay 700 pixels
malawak, kaya na gumagawa sa amin ang tungkol dito,

573
00:33:46,250 --> 00:33:53,310
at 154 pixels pababa, na nais ko
pagtatantya ay halos dito.

574
00:33:53,310 --> 00:33:57,250
>> Kaya pagkuha ng mga lat-longs, na
kinakatawan ng isang bagay sa buong mundo

575
00:33:57,250 --> 00:34:02,850
at squishing at paggalaw sa paligid na
upang bigyan kami ng x at halaga y pixel,

576
00:34:02,850 --> 00:34:05,450
ito ay ang unang bagay na
tapos sa code na ito sa pagmamapa.

577
00:34:05,450 --> 00:34:07,920
At pagkatapos ay ang natitirang bahagi ng
code consumes ang data

578
00:34:07,920 --> 00:34:14,310
at pagkatapos ay i-mapa ang mga lat-longs
sa isang bagay sa iyong screen.

579
00:34:14,310 --> 00:34:18,380
>> Ngunit kami ay pagpunta sa gamitin ang projection
-andar, dahil ito ay lumiliko out

580
00:34:18,380 --> 00:34:20,270
mayroon kaming lat-longs longs pati na rin.

581
00:34:20,270 --> 00:34:24,509
Naghahanap pabalik sa aming mga data, mayroon kaming
latitude at longitude na mga coordinate

582
00:34:24,509 --> 00:34:25,425
para sa bawat obserbasyon.

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

584
00:34:28,131 --> 00:34:29,130
Kaya gamitin ang projection ipaalam.

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

586
00:34:33,250 --> 00:34:37,639
>> Kaya ng pagtingin sa aming pagsasaysay,
Gusto namin ang aming exposition--

587
00:34:37,639 --> 00:34:39,590
mayroon kaming latitude at longitude ng.

588
00:34:39,590 --> 00:34:40,770
Pero gusto naming mga halaga ng pixel.

589
00:34:40,770 --> 00:34:43,510
At ito ay lumiliko out, mayroon kaming eksakto
ano want-- namin projection.

590
00:34:43,510 --> 00:34:46,239
Tunay na halos tulad namin
gamit scale dito mismo,

591
00:34:46,239 --> 00:34:52,075
ngayon kami ay pagpunta upang gamitin ang projection
at pumasa ito coordinate.

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

593
00:34:55,241 --> 00:34:56,949
Kaya ang unang bagay na
kami ay doing-- kaya kami ay

594
00:34:56,949 --> 00:35:01,520
pagkuha d, kung saan ay isang indibidwal na data
elemento ng isang indibidwal na lindol

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

596
00:35:02,370 --> 00:35:04,640
Ang unang bagay na aming ginagawa
ay makuha ang mga coordinate.

597
00:35:04,640 --> 00:35:06,150
Ang lahat ng mga karapatan, mayroon kaming ang mga coordinate.

598
00:35:06,150 --> 00:35:09,160
>> Ang ikalawang bagay na ginagawa namin ay
pumasa na sa pag-project sa.

599
00:35:09,160 --> 00:35:13,440
Projection-convert ang mga coordinate ng
sa mga halaga ng pixel, x at y.

600
00:35:13,440 --> 00:35:16,680
At pagkatapos ay ang huling bagay namin
gusto lang gawin ay makuha ang x,

601
00:35:16,680 --> 00:35:19,342
kung saan ito ay ang unang isa.

602
00:35:19,342 --> 00:35:22,050
Ito ay ang unang ng dalawang bagay
na ibinalik ng mga projection.

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

604
00:35:27,840 --> 00:35:29,630
>> Susubukan naming gawin ang pareho sa y.

605
00:35:29,630 --> 00:35:34,960
Ngunit sa halip, babalik kami
ang pangalawang elemento, y.

606
00:35:34,960 --> 00:35:35,980
Maghanda upang i-refresh.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, dagdag na karakter
here-- magaling, mayroon kaming

609
00:35:46,450 --> 00:35:51,730
isang data hinihimok ng dokumento na
concealing ito JSON na file ng mga bagay,

610
00:35:51,730 --> 00:35:57,560
paggawa ng isang mapa, at pagbabago sa
katangian na may kaugnayan sa data

611
00:35:57,560 --> 00:35:59,600
upang i-project ito sa isang mapa.

612
00:35:59,600 --> 00:36:00,840
Ito ay talagang kawili-wiling.

613
00:36:00,840 --> 00:36:03,770
Ito ay cool.

614
00:36:03,770 --> 00:36:05,640
>> Tingnan natin ang isang bingas ito pataas.

615
00:36:05,640 --> 00:36:08,795
Ibig kong sabihin, mayroon kaming dalawang piraso ng
impormasyon sa bawat punto ng data.

616
00:36:08,795 --> 00:36:10,000
Ibig kong sabihin, tatlo.

617
00:36:10,000 --> 00:36:12,540
Mayroon kaming ang mga coordinate,
kung saan ay isang x at y.

618
00:36:12,540 --> 00:36:15,700
At mayroon kaming ang magnitude.

619
00:36:15,700 --> 00:36:17,420
>> Kailangan naming i-e-encode ng magnitude kahit papaano.

620
00:36:17,420 --> 00:36:18,920
Mayroon kaming maraming mga channel.

621
00:36:18,920 --> 00:36:20,370
Maaari naming gamitin ang kulay.

622
00:36:20,370 --> 00:36:21,890
Maaari naming gamitin ang radius.

623
00:36:21,890 --> 00:36:23,040
Maaari naming gamitin ang opacity.

624
00:36:23,040 --> 00:36:25,540
Maaari naming gamitin ang maraming bagay sa code.

625
00:36:25,540 --> 00:36:29,180
Alinman sa mga katangian at marami
higit na hindi nakalista doon,

626
00:36:29,180 --> 00:36:33,065
dahil ang mga ito ay opsyonal, maaari naming
gamitin upang i-encode ang data na ito, ang stroke

627
00:36:33,065 --> 00:36:35,670
at ang lahat ng mga bagay na nabanggit ko.

628
00:36:35,670 --> 00:36:36,690
>> Gawin ang radius Hayaan.

629
00:36:36,690 --> 00:36:38,830
Sa tingin ko radius ay ang pinaka-intuitive.

630
00:36:38,830 --> 00:36:46,210
Kaya muli, ipapakita namin palitan na hard-code
40 at gumawa ng ilang mga kalkulasyon.

631
00:36:46,210 --> 00:36:48,810
Gagamitin namin muli ang aming mga paboritong scale.

632
00:36:48,810 --> 00:36:50,290
At kami ay nakalipas na d.

633
00:36:50,290 --> 00:36:55,850
Ngunit hindi d dahil gusto naming ang magnitude
ng d. d lamang ang punto ng data.

634
00:36:55,850 --> 00:36:57,430
Susubukan naming ipasa ang magnitude-scale.

635
00:36:57,430 --> 00:36:58,470
>> Subukan muli natin iyon.

636
00:36:58,470 --> 00:37:00,230
Ooh, hindi ito gumana.

637
00:37:00,230 --> 00:37:02,940
Bakit hindi ito gumagana?

638
00:37:02,940 --> 00:37:04,387
>> Kaya tandaan kung ano ang ginagawa scale.

639
00:37:04,387 --> 00:37:05,470
Ating tingnan muli sa scale Hayaan.

640
00:37:05,470 --> 00:37:10,800
Scale mapa 1-10 sa
sa 22-600, higit pa o mas mababa.

641
00:37:10,800 --> 00:37:12,030
600 ay malaking.

642
00:37:12,030 --> 00:37:14,730
Ito ay kung bakit namin nakukuha mo ito.

643
00:37:14,730 --> 00:37:18,420
>> Kaya gusto naming baguhin ang aming mga sukat
sa isang bagay na mas makatwirang.

644
00:37:18,420 --> 00:37:22,610
Sabihin nating, nais naming 0-60.

645
00:37:22,610 --> 00:37:25,340
60 ay malaki, subalit 10 lindol
ay hindi mapaniniwalaan o kapani-paniwala bihirang.

646
00:37:25,340 --> 00:37:27,880
Sa katunayan, hindi na nila ang nangyari.

647
00:37:27,880 --> 00:37:31,830
>> Kaya kung ano ito ay gawin ay, makikita itong tumagal
ang aming magnitude na napupunta 1-10

648
00:37:31,830 --> 00:37:34,490
at i-map ito sa upang palawakin ito.

649
00:37:34,490 --> 00:37:37,370
At map ito sa sa 0-60.

650
00:37:37,370 --> 00:37:38,840
Ni-refresh Hayaan.

651
00:37:38,840 --> 00:37:41,850
>> Nice, mayroon kaming visualization.

652
00:37:41,850 --> 00:37:42,500
Mahusay ito.

653
00:37:42,500 --> 00:37:43,736
Ito ay aktwal na data.

654
00:37:43,736 --> 00:37:46,360
Mapapansin mo, sa aking maliit na laruan
Halimbawa, ang pinakamalaking lindol

655
00:37:46,360 --> 00:37:49,417
ang tama sa tuktok ng sa amin.

656
00:37:49,417 --> 00:37:50,000
Ngunit iyon dito.

657
00:37:50,000 --> 00:37:54,422
Mayroon kaming hinimok petsa visualization
na consumes ang data

658
00:37:54,422 --> 00:37:56,255
at nagbibigay sa amin talaga
kawili-wiling impormasyon.

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

660
00:38:02,600 --> 00:38:06,420
Oo, sabihin magdagdag ng ilang
interactivity dito.

661
00:38:06,420 --> 00:38:08,675
Nabanggit ko na noon ay
sa malakas na puwersa ng D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Kaya dito, para sa bawat elemento, hindi namin
naglalarawan ng isang bungkos ng mga katangian.

664
00:38:15,060 --> 00:38:20,230
Ngunit maaari rin naming ilarawan kung ano ang gusto namin
mangyari na may mga elemento ng interactivity.

665
00:38:20,230 --> 00:38:26,190
Halimbawa, maaari naming ilarawan
kung ano ang mangyayari kapag kami mouse sa ibabaw.

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

667
00:38:28,740 --> 00:38:33,640
At halos katulad na,
na makikita tumagal ng isang function,

668
00:38:33,640 --> 00:38:36,700
na halos kapareho sa
mga katangian namin ay may bago,

669
00:38:36,700 --> 00:38:44,650
kung saan ang ginagawa namin ng isang bagay sa
elemento kapag mag-hover sa ibabaw namin ito.

670
00:38:44,650 --> 00:38:47,100
>> Kaya ang unang bagay na kailangan namin upang
gawin ay piliin ang elemento na,

671
00:38:47,100 --> 00:38:49,435
upang hanapin ito talaga, sa browser.

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

673
00:38:57,090 --> 00:39:00,920
at pagkatapos ay maaari kaming magtakda
isang katangian na ito.

674
00:39:00,920 --> 00:39:06,870
Kaya kung ano ang ako paggawa dito ay, kapag mag-hover namin
sa ibabaw ng isang bagay, susuriin namin elemento na

675
00:39:06,870 --> 00:39:11,197
at pagkatapos ay itakda ang opacity nito pabalik
1, upang ganap na hindi lampasan ng liwanag.

676
00:39:11,197 --> 00:39:12,488
Tingnan natin kung ano na kamukha Hayaan.

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

678
00:39:29,430 --> 00:39:39,080
>> Mukhang mayroon kaming isang
dagdag na tuldok-kuwit dito.

679
00:39:39,080 --> 00:39:42,420
Kaya kung mag-hover sa ibabaw namin dito, ganap na ito ay nakakakuha.

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

681
00:39:46,530 --> 00:39:48,960
Ngunit ngayon, siyempre, ito
mananatiling buo, dahil kami

682
00:39:48,960 --> 00:39:53,240
Mayroon upang ilarawan kung ano ang mangyayari
kapag alisin ang aming cursor.

683
00:39:53,240 --> 00:39:59,990
Kaya sabihin gawin eksakto na sa
mouseout, bilang kabaligtaran sa mouseover.

684
00:39:59,990 --> 00:40:06,399
>> At kami i-reset ito sa
kung ano ang namin ay may before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
At ngayon, sa tuwing namin
mag-agaw-buhay, makakakuha tayo ng isang buong lupon.

686
00:40:10,260 --> 00:40:13,468
Tinutulungan kami makita kung ano ang namin
pumipili ka namin talaga.

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

688
00:40:19,210 --> 00:40:22,860
>> At sa gawing ito ay talagang mahusay na ngayon hayaan.

689
00:40:22,860 --> 00:40:26,210
Ni kumonekta ito sa totoong data Hayaan.

690
00:40:26,210 --> 00:40:30,890
Kaya ng tanungin ipaalam ng dati
USGS tungkol sa kanilang data.

691
00:40:30,890 --> 00:40:35,630
Kaya ang US Geological Survey
may data tungkol sa lindol.

692
00:40:35,630 --> 00:40:41,460
Ang mga ito ay isang pampublikong API na nagagawa
na natupok sa JSON format.

693
00:40:41,460 --> 00:40:42,548
Kaya sabihin gawin iyon.

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

695
00:40:49,730 --> 00:40:55,900
>> Kaya ito ay isang bit ng code na
kumokonekta sa USGS API.

696
00:40:55,900 --> 00:40:57,990
At mayroong isang bit ng processing dito.

697
00:40:57,990 --> 00:41:02,200
Ito ay walang kaugnayan ngunit pinapasimple ito
sa isang simpleng format ng data tulad ng

698
00:41:02,200 --> 00:41:03,800
namin ay may mga bago.

699
00:41:03,800 --> 00:41:08,140
Kaya makakuha ng ko mapupuksa ang aming tawag sa
ang aming mga pekeng data.json sa file.

700
00:41:08,140 --> 00:41:13,110
At sa halip, ako pagtawag
ang USGS mahalagang.

701
00:41:13,110 --> 00:41:16,700
>> Ni-refresh Hayaan, mabait.

702
00:41:16,700 --> 00:41:21,260
Ito ay aktwal na, ang data ng real-buhay
mula sa linggong ito para sa lindol.

703
00:41:21,260 --> 00:41:23,217
Ito ay talagang kawili-wiling.

704
00:41:23,217 --> 00:41:25,050
Hindi ito kagulat-gulat
para sa atin, ngunit may mga

705
00:41:25,050 --> 00:41:27,909
ng maraming mga lindol sa
West Coast sa California.

706
00:41:27,909 --> 00:41:30,950
Ngunit naisip ko na ito ay napaka-interesante
na mayroong napakaraming lindol

707
00:41:30,950 --> 00:41:34,350
sa Alaska, at tila,
dito sa Gitnang-kanluran.

708
00:41:34,350 --> 00:41:37,630
Ibig kong sabihin, kawili-wili, at nagpapaumanhin kami mabuti.

709
00:41:37,630 --> 00:41:40,410
Iyon ang konklusyon.

710
00:41:40,410 --> 00:41:43,760
>> Ngunit sa panimula, ito
ay kung ano ang tumutulong sa D3 sa amin gawin.

711
00:41:43,760 --> 00:41:48,030
Tinutulungan kami kumuha ng data, magbigkis
ito sa mga elemento sa DOM,

712
00:41:48,030 --> 00:41:51,620
at may mga baguhin ang mga elemento
bilang isang katangian ng data,

713
00:41:51,620 --> 00:41:54,780
May mga katangian, ang lahat ng mga
maraming mga katangian ng elemento,

714
00:41:54,780 --> 00:41:57,393
maging kapaki-pakinabang para sa mga channel sa lahat
ihatid impormasyon.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 ay isang hindi kapani-paniwalang makapangyarihan
library at amazingly na rin tumakbo.

717
00:42:09,290 --> 00:42:12,260
Ito ay ilang mga makapangyarihang mga bagay-bagay.

718
00:42:12,260 --> 00:42:15,960
Visualization ng data ay isang
hindi kapani-paniwalang napakalakas na tool

719
00:42:15,960 --> 00:42:21,530
para sa conveying sa mga taong malalim
mga pananaw na hindi nakakaabala sa kanilang mga core

720
00:42:21,530 --> 00:42:25,430
at ang mga ito ay makakatulong na maunawaan, sa
ito malalim at madaling gamitin na paraan,

721
00:42:25,430 --> 00:42:29,760
kung paano gumagana ang data at kung paano
nagbabago ang data ng ating buhay.

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