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

2
00:00:00,780 --> 00:00:11,880
>> [音樂播放]

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD：我是大衛
喬伊納德，這是維生素D3。

4
00:00:16,480 --> 00:00:17,700
歡迎。

5
00:00:17,700 --> 00:00:21,270
我們今天要學習D3。

6
00:00:21,270 --> 00:00:25,020
D3是一個JavaScript框架
為建設高品質

7
00:00:25,020 --> 00:00:28,110
交互式可視化的網頁。

8
00:00:28,110 --> 00:00:30,870
東西像什麼我們
看在我後面，

9
00:00:30,870 --> 00:00:34,230
我們要學習，使這些
的東西，那種它的基礎知識。

10
00:00:34,230 --> 00:00:36,452
但它會很酷。

11
00:00:36,452 --> 00:00:38,160
讓我們開始吧
讓漂亮的照片。

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

13
00:00:41,108 --> 00:00:44,350
我們已經得到了更多的演示
可用的前景。

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

15
00:00:48,040 --> 00:00:50,760
我們開始做吧。

16
00:00:50,760 --> 00:00:58,700
>> 第一幕，DOM manipulation--我們要去
馬上開始做很酷的事情。

17
00:00:58,700 --> 00:01:01,240
首先，在左側，我們有代碼。

18
00:01:01,240 --> 00:01:03,470
在右邊，我們有
我們的代碼的結果。

19
00:01:03,470 --> 00:01:04,900
讓我們通過它。

20
00:01:04,900 --> 00:01:05,780
>> 讓我們做一個圓。

21
00:01:05,780 --> 00:01:08,570
你覺得如何？

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
我們剛剛作出了一個圓圈。

23
00:01:14,934 --> 00:01:16,100
你不相信我，對嗎？

24
00:01:16,100 --> 00:01:18,190
它不存在。

25
00:01:18,190 --> 00:01:21,830
>> 所以，我們做了正確的這裡，
SVG是可縮放矢量圖形。

26
00:01:21,830 --> 00:01:27,530
這是我們告訴瀏覽器的方式
使在瀏覽器中的矢量圖形。

27
00:01:27,530 --> 00:01:30,740
我們只是做了現在
添加了一圈瀏覽。

28
00:01:30,740 --> 00:01:34,790
>> 承諾是圓
需要一點基本屬性

29
00:01:34,790 --> 00:01:36,850
之前，我們其實可以看到它。

30
00:01:36,850 --> 00:01:40,045
我們需要告訴它的x位置，
其y位置，它的半徑。

31
00:01:40,045 --> 00:01:43,310
我們沒有告訴任何的是，
所以我們沒有看到它現在。

32
00:01:43,310 --> 00:01:46,210
但是，讓我們告訴它的東西。

33
00:01:46,210 --> 00:01:49,510
>> 所以，首先，你得
給我們的圈子名稱。

34
00:01:49,510 --> 00:01:53,070
所以，讓我們把它叫做圓。

35
00:01:53,070 --> 00:01:54,406
我們圈內有個名字吧。

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

37
00:01:57,230 --> 00:01:59,490
讓我們給它一些屬性。

38
00:01:59,490 --> 00:02:03,690
如何cx將中心X，所以
該中心的x位置。

39
00:02:03,690 --> 00:02:06,730
比方說，200 200像素。

40
00:02:06,730 --> 00:02:10,220
>> 讓我們給它200像素A Y為好。

41
00:02:10,220 --> 00:02:16,032
和R為約40個像素，一個半徑。

42
00:02:16,032 --> 00:02:16,950
現在，讓我們來看看。

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

44
00:02:21,740 --> 00:02:23,440
我不會拼寫。

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

46
00:02:30,430 --> 00:02:31,520
>> 你去那裡。

47
00:02:31,520 --> 00:02:37,330
我們有一個圓圈位置200
像素，200像素，40個像素的半徑。

48
00:02:37,330 --> 00:02:38,280
很酷吧？

49
00:02:38,280 --> 00:02:38,988
我們有一個圓。

50
00:02:38,988 --> 00:02:40,880
是啊。

51
00:02:40,880 --> 00:02:42,670
>> 因此，沒有必要跟著。

52
00:02:42,670 --> 00:02:45,790
所有這些例子中，所有的
我做今天的代碼

53
00:02:45,790 --> 00:02:51,300
將在年底提供在線
在交互式示例的形式

54
00:02:51,300 --> 00:02:54,010
與檢查站
每一個行為，等等。

55
00:02:54,010 --> 00:02:55,160
>> 讓我們做更多的東西。

56
00:02:55,160 --> 00:02:58,901
這個黑圈實在是太醜了。

57
00:02:58,901 --> 00:03:01,541
我很抱歉的錯誤
信息就在那裡。

58
00:03:01,541 --> 00:03:05,340
在那裡，我們走了。

59
00:03:05,340 --> 00:03:06,350
>> 讓我們給它的顏色。

60
00:03:06,350 --> 00:03:07,170
怎麼樣？

61
00:03:07,170 --> 00:03:08,340
我喜歡藍鋼。

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

63
00:03:13,280 --> 00:03:16,030
好了，我們的圈子變了顏色。

64
00:03:16,030 --> 00:03:17,320
那很棒。

65
00:03:17,320 --> 00:03:31,330
讓我們把它半透明
too--半透明。

66
00:03:31,330 --> 00:03:33,670
>> 因此，這些都是屬性
我們定義的圈子。

67
00:03:33,670 --> 00:03:36,774
我們做的第一件事是
我們把一個圓的頁面上。

68
00:03:36,774 --> 00:03:38,690
然後我們定義
一堆屬性。

69
00:03:38,690 --> 00:03:41,610
其中的一些是必需的，
像CX，CY和半徑。

70
00:03:41,610 --> 00:03:42,680
等是可選的。

71
00:03:42,680 --> 00:03:44,730
>> 有很多更多的屬性。

72
00:03:44,730 --> 00:03:46,760
有很多人。

73
00:03:46,760 --> 00:03:53,070
例如，我們可以有一個
行程為好，紅色的行程。

74
00:03:53,070 --> 00:03:55,630
但是，讓我們刪除。

75
00:03:55,630 --> 00:04:00,450
我們又回到了一圈，一個藍色圓圈。

76
00:04:00,450 --> 00:04:01,600
>> 因此，讓更多的圈。

77
00:04:01,600 --> 00:04:02,810
怎麼樣？

78
00:04:02,810 --> 00:04:04,665
讓我們另一個圓。

79
00:04:04,665 --> 00:04:05,985
這是令人興奮的，對不對？

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

81
00:04:09,630 --> 00:04:12,300
>> 所以說，我只是複製粘貼
我們已經。

82
00:04:12,300 --> 00:04:13,570
讓我們把它叫做CIRCLE2。

83
00:04:13,570 --> 00:04:15,840
讓我們做精確
同樣的事情，並給它

84
00:04:15,840 --> 00:04:20,450
屬性，定為300的x位置。

85
00:04:20,450 --> 00:04:24,140
耶，我們有兩個圓了。

86
00:04:24,140 --> 00:04:27,240
>> ，當然，我們可以
更新這些值。

87
00:04:27,240 --> 00:04:31,640
我可以把它放在400，而現在它的動作。

88
00:04:31,640 --> 00:04:35,470
並且由於它煩人，讓我們
刪除它，所以circle2.remove。

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

90
00:04:39,000 --> 00:04:40,730
現在它不見了。

91
00:04:40,730 --> 00:04:43,170
>> 所以，我們在做什麼，並
只是非常，very--這

92
00:04:43,170 --> 00:04:46,030
非常類似於您
可能會做的jQuery，例如。

93
00:04:46,030 --> 00:04:48,240
我們只是操縱
DOM中，它被稱為。

94
00:04:48,240 --> 00:04:50,040
你可能已經聽說過這個詞。

95
00:04:50,040 --> 00:04:53,255
我們正在創造的東西，設置
屬性上的東西，刪除的東西。

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

97
00:04:58,950 --> 00:05:02,360
>> 現在，這裡的地方開始變得有趣。

98
00:05:02,360 --> 00:05:07,250
所以在後面的代碼中，我們仍然可以
參考這裡原來的圈子。

99
00:05:07,250 --> 00:05:14,100
因此，讓我們重新設置其屬性為CX。

100
00:05:14,100 --> 00:05:18,260
比方說，它的x坐標為400。

101
00:05:18,260 --> 00:05:22,406
而且我要轉型
這一點，所以很明顯。

102
00:05:22,406 --> 00:05:23,360
在那裡，我們走了。

103
00:05:23,360 --> 00:05:24,780
>> 所以我們增加了一個圓圈。

104
00:05:24,780 --> 00:05:26,440
我們設置一些屬性。

105
00:05:26,440 --> 00:05:28,210
我們增加了一個圈，刪除它。

106
00:05:28,210 --> 00:05:31,650
然後我們修改
原來的圈子。

107
00:05:31,650 --> 00:05:35,400
>> 但這裡那裡得到
很多更有趣。

108
00:05:35,400 --> 00:05:39,070
我們不僅可以設置屬性
作為剛剛值，我們可以說，

109
00:05:39,070 --> 00:05:41,610
哎，圈子，去定位200。

110
00:05:41,610 --> 00:05:44,540
我們也可以將它們作為功能。

111
00:05:44,540 --> 00:05:48,850
>> 所以給人，而不是在這裡400，
我們可以做一些計算

112
00:05:48,850 --> 00:05:53,950
在什麼我們飛
希望該屬性是。

113
00:05:53,950 --> 00:05:56,580
因此，這是你如何表達了。

114
00:05:56,580 --> 00:06:00,660
我們說，400來代替，讓我
給你一個函數。

115
00:06:00,660 --> 00:06:04,180
而在這裡，這個功能裡面，
我們可以做任何瘋狂的計算。

116
00:06:04,180 --> 00:06:06,820
>> 我們可以花時間和
看一些其他的東西

117
00:06:06,820 --> 00:06:11,230
動態決定
我們想要什麼樣的價值圈。

118
00:06:11,230 --> 00:06:15,266
怎麼樣，我們只是給
它隨機x位置？

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

120
00:06:20,360 --> 00:06:21,120
不過就是這樣。

121
00:06:21,120 --> 00:06:25,490
>> 那麼，什麼是說的是，對於
每x，運行此功能。

122
00:06:25,490 --> 00:06:29,340
我們正在做的事情是計算
有些事情，一個隨機時間寬度

123
00:06:29,340 --> 00:06:30,410
並返回了。

124
00:06:30,410 --> 00:06:34,765
所以，我們每次運行時，我們得到了一個
圓去隨機的地方。

125
00:06:34,765 --> 00:06:36,394
這是一種很酷的。

126
00:06:36,394 --> 00:06:38,310
我覺得我可以看看
在此一小。

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

128
00:06:44,274 --> 00:06:46,440
我們開始去
這裡一些有趣的事情。

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

130
00:06:49,120 --> 00:06:51,390
讓我們把這個數據現在驅動。

131
00:06:51,390 --> 00:06:53,420
這裡沒有數據。

132
00:06:53,420 --> 00:06:54,482
讓我們來改變這種狀況。

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

134
00:06:57,440 --> 00:07:12,140
>> 第二幕，數據驅動Documents--
因此，讓我們回到這裡。

135
00:07:12,140 --> 00:07:15,340
讓我們剛剛擺脫CIRCLE2的，
因為我們只是添加和刪除

136
00:07:15,340 --> 00:07:15,840
它。

137
00:07:15,840 --> 00:07:17,382
所以，我們並不真正需要它。

138
00:07:17,382 --> 00:07:21,421
我們需要在這裡有很多更聰明。

139
00:07:21,421 --> 00:07:23,170
比方說，我們有
某種一些數據。

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

141
00:07:31,540 --> 00:07:40,020
一個moment--讓我們說，
我們有這種形式的數據。

142
00:07:40,020 --> 00:07:41,800
我們有一個數組，只是
一串數字。

143
00:07:41,800 --> 00:07:45,750
我們有7個號碼在這裡，
無論這些represent--量

144
00:07:45,750 --> 00:07:48,810
在人們的銀行賬戶，怎麼
很多他們的體重，上帝知道。

145
00:07:48,810 --> 00:07:51,310
>> 這些數字，我們
要使用我們的圈子

146
00:07:51,310 --> 00:07:53,240
代表這些數字在某種程度上。

147
00:07:53,240 --> 00:07:55,515
我們希望我們的配合
圈子裡這些數字。

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

149
00:07:58,750 --> 00:07:59,626
所以，我們做什麼。

150
00:07:59,626 --> 00:08:01,500
比方說，我們希望有一個
圈每一個數字。

151
00:08:01,500 --> 00:08:03,590
我們可以做舊
我們doing--的事情

152
00:08:03,590 --> 00:08:06,020
圈追加和CIRCLE2和circle3的。

153
00:08:06,020 --> 00:08:10,020
但這種失控的，而
有很多重複的邏輯。

154
00:08:10,020 --> 00:08:12,760
>> 因此，讓我們更聰明這一點。

155
00:08:12,760 --> 00:08:17,810
相反，使用var圈
svg.append，我們只是使用，

156
00:08:17,810 --> 00:08:21,580
我們將使用
這裡這個小方塊。

157
00:08:21,580 --> 00:08:24,510
我不想去深入
成什麼這些部位做。

158
00:08:24,510 --> 00:08:26,020
它是一種先進的話題。

159
00:08:26,020 --> 00:08:27,830
我希望我可以。

160
00:08:27,830 --> 00:08:31,370
>> 但關鍵是要recognize--和
你會看到很多時候在D3的代碼。

161
00:08:31,370 --> 00:08:36,840
文本基本的此塊
創建盡可能多的圈

162
00:08:36,840 --> 00:08:41,360
因為有數據元素
在這陣就在這裡。

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

164
00:08:53,420 --> 00:08:55,780
因此，這造成很多
圈的有元素。

165
00:08:55,780 --> 00:08:58,520
這將創造我們七界。

166
00:08:58,520 --> 00:09:01,710
它做了非常，非常關鍵的一點。

167
00:09:01,710 --> 00:09:02,460
因此，讓我們運行。

168
00:09:02,460 --> 00:09:05,460
讓我們刪除我們的其他圈子。

169
00:09:05,460 --> 00:09:09,565
就讓我們評論這個
部分分離出來，並再次運行此。

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

171
00:09:13,840 --> 00:09:15,260
>> 在那裡，我們走了。

172
00:09:15,260 --> 00:09:18,030
所以在這裡我們的圈子是
很多暗，因為我們

173
00:09:18,030 --> 00:09:20,720
有七界一
在另一個的頂部。

174
00:09:20,720 --> 00:09:25,425
我們剛剛創建的七界一
每一個用於每個數據元素。

175
00:09:25,425 --> 00:09:28,860
但有發生的重要事情
在這個片段就在這裡。

176
00:09:28,860 --> 00:09:31,030
>> 這是該數據被綁定。

177
00:09:31,030 --> 00:09:33,440
所以每一個人
這些數據元素之後，

178
00:09:33,440 --> 00:09:38,830
10，45，105，是裝訂
到一個特定的圓。

179
00:09:38,830 --> 00:09:40,960
因此，這些不僅創造
一幫圈

180
00:09:40,960 --> 00:09:43,420
但綁這兩個東西放在一起。

181
00:09:43,420 --> 00:09:48,740
>> 並在以後的，因為我們產生
那些圈子與此D3的功能，

182
00:09:48,740 --> 00:09:52,430
如果我給你一個圈，你可以
給我與它相關的數據。

183
00:09:52,430 --> 00:09:53,280
因此，我們可以問D3。

184
00:09:53,280 --> 00:09:54,840
嘿，D3，我有這個圈子。

185
00:09:54,840 --> 00:09:57,350
那是什麼圈子有數據嗎？

186
00:09:57,350 --> 00:10:01,290
與D3會告訴我們10或45或105。

187
00:10:01,290 --> 00:10:02,380
>> 這些事情都會。

188
00:10:02,380 --> 00:10:04,490
這是一個非常，非常基本的概念。

189
00:10:04,490 --> 00:10:06,070
讓我們看一下。

190
00:10:06,070 --> 00:10:12,210
>> 所以這樣，我們會問D3--等
這是無關緊要的這一點，

191
00:10:12,210 --> 00:10:16,620
只是相信我就可以了。

192
00:10:16,620 --> 00:10:17,620
這就是我們如何要求D3。

193
00:10:17,620 --> 00:10:21,312
嘿，D3，給我的第一
圈，你可以找到。

194
00:10:21,312 --> 00:10:23,580
給我的第一圈，你可以找到。

195
00:10:23,580 --> 00:10:29,660
然後我們可以問D3，什麼是
對這些數據，這樣，10。

196
00:10:29,660 --> 00:10:33,380
>> 所以，我們只問D3，找我
第一圈，你可以找到。

197
00:10:33,380 --> 00:10:34,400
什麼是它的數據？

198
00:10:34,400 --> 00:10:36,650
10，這確實是我們的
第一數據元素。

199
00:10:36,650 --> 00:10:42,150
我們可以問，哎，D3，
找到我們我們的第三圈。

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

201
00:10:44,450 --> 00:10:45,740
為什麼這很重要？

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

203
00:10:49,790 --> 00:10:52,250
>> 所以在這裡，我提
我們可以使用的功能。

204
00:10:52,250 --> 00:10:54,910
我提到這是
一個非常強大的東西。

205
00:10:54,910 --> 00:11:03,070
這樣不僅可以我們的函數做的事情
像做一些計算，例如，

206
00:11:03,070 --> 00:11:09,170
返回一個隨機數，它可以
還做基於所述的數據事物。

207
00:11:09,170 --> 00:11:11,550
這是數據驅動的文件的意思。

208
00:11:11,550 --> 00:11:13,750
這就是D3代表。

209
00:11:13,750 --> 00:11:17,800
>> 所以這個X postition--代替
只是說，所有的圈子，

210
00:11:17,800 --> 00:11:21,735
得到x位置200，我們
可以給它一個函數。

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

212
00:11:26,140 --> 00:11:30,140
在這裡，我們可以做一些計算。

213
00:11:30,140 --> 00:11:33,710
和D在這裡矗立在地方的數據。

214
00:11:33,710 --> 00:11:36,120
所以每次我們
一個圓圈，基本上，

215
00:11:36,120 --> 00:11:37,750
D3將創建這些七界。

216
00:11:37,750 --> 00:11:38,500
然後每

217
00:11:38,500 --> 00:11:41,920
>> 圓圈，它會去，哎，
circle1添加什麼是你的x位置。

218
00:11:41,920 --> 00:11:45,210
此前，我們
總是回答200。

219
00:11:45,210 --> 00:11:48,630
但現在，每次D3問
我們什麼是你的x位置，

220
00:11:48,630 --> 00:11:51,790
這將給予us--我們
這個圈子，所以我們的數據。

221
00:11:51,790 --> 00:11:55,290
這將給予我們的數據說，
你怎麼想的論述是，

222
00:11:55,290 --> 00:11:57,120
基於該數據。

223
00:11:57,120 --> 00:11:59,590
>> 讓我們只是返回的實際數據。

224
00:11:59,590 --> 00:12:04,910
因此，如果我們運行這個，這給
我們的數據驅動的文件。

225
00:12:04,910 --> 00:12:08,040
這些圈子是基於
有關position--

226
00:12:08,040 --> 00:12:11,120
它們的鹼作為所述數據的函數。

227
00:12:11,120 --> 00:12:13,100
>> 所以對於第一圈，
D3把一個圓。

228
00:12:13,100 --> 00:12:16,770
然後D3要求我們，做什麼
你想博覽會是。

229
00:12:16,770 --> 00:12:19,620
我們只是說，無論數據。

230
00:12:19,620 --> 00:12:21,185
使博覽會10。

231
00:12:21,185 --> 00:12:26,320
>> 然後問，你怎麼想的
博覽會是第二圈。

232
00:12:26,320 --> 00:12:27,270
我們回答，45。

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

234
00:12:30,000 --> 00:12:32,230
我們當然，可以
做一些計算在這裡。

235
00:12:32,230 --> 00:12:35,510
我發現，那些圈子
有一種壓扁了。

236
00:12:35,510 --> 00:12:38,965
>> 所以，乘以3吧，乘以3的數據。

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

238
00:12:41,870 --> 00:12:43,840
我們的圈子剛剛被擴大了。

239
00:12:43,840 --> 00:12:46,730
我們的價值翻了三倍。

240
00:12:46,730 --> 00:12:51,010
>> 圈真的是在邊緣上，
所以我們也許種補償吧。

241
00:12:51,010 --> 00:12:53,632
比方說，20。

242
00:12:53,632 --> 00:12:56,070
幹得好。

243
00:12:56,070 --> 00:12:57,590
>> 這是一個數據可視化。

244
00:12:57,590 --> 00:13:01,767
這是一個非常基本的，但是這
給了我們一些洞察我們的數據。

245
00:13:01,767 --> 00:13:04,600
它告訴我們，比如說我們
有元素的小集群。

246
00:13:04,600 --> 00:13:06,340
我們有一個大的異常這裡。

247
00:13:06,340 --> 00:13:10,830
這給了我們一些信息
約的分佈。

248
00:13:10,830 --> 00:13:20,830
>> 如果我們，例如，改變
數據150在這裡和刷新，

249
00:13:20,830 --> 00:13:22,630
我們的可視化被改變。

250
00:13:22,630 --> 00:13:24,285
這個文件是數據驅動。

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

252
00:13:32,640 --> 00:13:36,180
>> 所以，當然，所有這些元素，
所有這些屬性在這裡，

253
00:13:36,180 --> 00:13:38,430
我們可以用一個函數，而不是
只是這些數字，不只是

254
00:13:38,430 --> 00:13:39,900
x和y的位置。

255
00:13:39,900 --> 00:13:42,120
所以我們可以用一個函數的顏色。

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

257
00:13:45,260 --> 00:13:46,360
因此，我們將這樣做。

258
00:13:46,360 --> 00:13:49,360
我們給它一個函數。

259
00:13:49,360 --> 00:13:52,320
>> 讓我們說，我們可以有
條件語句中我們的函數。

260
00:13:52,320 --> 00:13:54,770
此功能可
幾百行代碼的。

261
00:13:54,770 --> 00:13:57,150
它可以做非常複雜的事情。

262
00:13:57,150 --> 00:13:59,080
>> 所以，讓我們把一個if語句在這裡。

263
00:13:59,080 --> 00:14:03,420
比方說，如果我們的數據較少
比50，這是一些門檻

264
00:14:03,420 --> 00:14:05,817
我們感興趣
在由於某種原因。

265
00:14:05,817 --> 00:14:06,650
讓我們把它的綠色。

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

267
00:14:09,830 --> 00:14:15,320
否則，讓我們做它的紅色。

268
00:14:15,320 --> 00:14:16,110
怎麼樣？

269
00:14:16,110 --> 00:14:19,630

270
00:14:19,630 --> 00:14:21,220
尼斯。

271
00:14:21,220 --> 00:14:24,860
>> 因此，我們的數據可視化開始
傳達更有趣的信息

272
00:14:24,860 --> 00:14:26,727
許多渠道。

273
00:14:26,727 --> 00:14:28,560
所以，現在我們知道了一點
約的分佈。

274
00:14:28,560 --> 00:14:31,768
而我們知道，有某種
切斷50，我們感興趣的問題。

275
00:14:31,768 --> 00:14:35,630
我們知道，有兩個數據點
低於這個門檻，其中大部分

276
00:14:35,630 --> 00:14:36,130
上面。

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

278
00:14:41,510 --> 00:14:46,160
>> 所以作為最後一個步驟，此數據在這裡，
這是非常罕見的看到這個像。

279
00:14:46,160 --> 00:14:52,610
因此，讓我們只是把它移動到一個變量
因為這是更清潔，這樣。

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

281
00:15:02,980 --> 00:15:05,197
然後我們在這裡使用的變量。

282
00:15:05,197 --> 00:15:06,280
這是完全一樣的東西。

283
00:15:06,280 --> 00:15:07,280
這只是一個有點清潔。

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

285
00:15:25,300 --> 00:15:35,300
>> 接下來，第三幕，Scales--
因此一個問題吧

286
00:15:35,300 --> 00:15:38,920
在這裡，如果我們改變
在這200 value--數據

287
00:15:38,920 --> 00:15:41,685
如果我們將其更改為400
什麼和刷新，

288
00:15:41,685 --> 00:15:44,540
那麼這個值只是去屏幕外。

289
00:15:44,540 --> 00:15:49,040
所以，我們的邏輯就在這裡
我們如何做3次

290
00:15:49,040 --> 00:15:52,570
20，宣揚出去，然後
抵消了一點確實是笨重。

291
00:15:52,570 --> 00:15:54,150
>> 什麼是這些數字意味著什麼呢？

292
00:15:54,150 --> 00:15:55,400
他們只是硬編碼在那裡。

293
00:15:55,400 --> 00:15:58,830
而且他們非常依賴於數據。

294
00:15:58,830 --> 00:16:00,550
我們希望有一個數據驅動的文檔。

295
00:16:00,550 --> 00:16:05,460
我們希望有一個非常靈活的文件，
即給定的數據，去適應它，

296
00:16:05,460 --> 00:16:07,900
並代表它。

297
00:16:07,900 --> 00:16:11,330
>> 我們主要需要的是，我們
這個範圍的數字10。

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

299
00:16:12,640 --> 00:16:17,630
我們想映射出到
的寬度，在這裡的整個寬度。

300
00:16:17,630 --> 00:16:20,620
因此，我們有範圍
數字去從0到100。

301
00:16:20,620 --> 00:16:24,980
我們有這個校園我去
從20到700，在這種情況下。

302
00:16:24,980 --> 00:16:26,515
>> 那種我們想要映射上。

303
00:16:26,515 --> 00:16:30,002
我們希望以這和
那麼抵消它一點點。

304
00:16:30,002 --> 00:16:33,165
事實證明，D3擁有這些。

305
00:16:33,165 --> 00:16:34,220
這就是所謂的規模。

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

307
00:16:37,410 --> 00:16:38,250
因此，讓我們使用它。

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

309
00:16:46,300 --> 00:16:49,670
>> 這works--我要去的方式
鍵入此起來，然後解釋它。

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

311
00:17:01,530 --> 00:17:02,450
這是一個尺度。

312
00:17:02,450 --> 00:17:08,670
它會做的是，它會映射出
值從1到200上，以20至600。

313
00:17:08,670 --> 00:17:10,990
我們可以檢查。

314
00:17:10,990 --> 00:17:13,329
我們可以看到這一點。

315
00:17:13,329 --> 00:17:21,704
>> 所以，如果我給它1--一個瞬間。

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

317
00:17:47,764 --> 00:17:48,555
給我一秒鐘。

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

319
00:17:53,680 --> 00:17:55,080
我一定是打錯了。

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

321
00:18:15,320 --> 00:18:15,990
你去那裡。

322
00:18:15,990 --> 00:18:17,930
對不起有關。

323
00:18:17,930 --> 00:18:22,050
>> 那麼，什麼規模都行
是，這將需要一個值

324
00:18:22,050 --> 00:18:24,930
然後將其轉換，
展開了，所以

325
00:18:24,930 --> 00:18:27,320
填補了全方位你問的。

326
00:18:27,320 --> 00:18:32,910
因此，在這種情況下，如果我們給它，
它會映射出到20。

327
00:18:32,910 --> 00:18:37,750
如果我們給它200，它的
要在地圖上，為600。

328
00:18:37,750 --> 00:18:40,460
而介於兩者之間，
如果我們得到100，這是

329
00:18:40,460 --> 00:18:44,610
將是某處
在20和600之間。

330
00:18:44,610 --> 00:18:51,480
>> 當然，現在這是什麼
我們需要刪除這些硬編碼

331
00:18:51,480 --> 00:18:53,402
事情我們都在那裡。

332
00:18:53,402 --> 00:18:55,950
所以，我們想要做的是
採取我們的數​​據

333
00:18:55,950 --> 00:19:00,950
鑑於，個別數據
元素，並把它傳遞第一規模。

334
00:19:00,950 --> 00:19:02,635
所以規模將擴大它。

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

336
00:19:27,020 --> 00:19:48,880
>> Well--哦，我們有一點點的錯誤在這裡。

337
00:19:48,880 --> 00:19:50,120
我們丟失的數據。

338
00:19:50,120 --> 00:19:51,290
你去那裡。

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

340
00:19:58,550 --> 00:19:59,550
而且擴大了出來。

341
00:19:59,550 --> 00:20:01,383
>> 這給了我們同樣的
結果我們以前，

342
00:20:01,383 --> 00:20:04,030
但有代替那些
硬編碼的限制。

343
00:20:04,030 --> 00:20:07,790
如果尺寸我們
帆布的變化，例如，

344
00:20:07,790 --> 00:20:11,790
如果我們希望有這種過度
400像素，它squishes出來，

345
00:20:11,790 --> 00:20:15,440
我們可以把它over--
我們可以展開它，或者我們

346
00:20:15,440 --> 00:20:21,890
可以減少這種留有餘量，以
東西少或超過20。

347
00:20:21,890 --> 00:20:25,470
這些數字，這些硬編碼
數字現在是有意義的我們。

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

349
00:20:28,110 --> 00:20:30,520
>> 我們可以做更多的事情
有趣的事情也是如此。

350
00:20:30,520 --> 00:20:35,990
所以具有代替線性
規模，我們可能要記錄一個規模。

351
00:20:35,990 --> 00:20:37,840
那會給我們一個數刻度。

352
00:20:37,840 --> 00:20:41,269
>> 所以，現在我們的規模，而不是
只是擴大了這個範圍，

353
00:20:41,269 --> 00:20:42,810
它做更複雜的事情。

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

355
00:20:48,790 --> 00:20:53,790
代替具有該範圍內的硬盤
編碼的，而是具有600，

356
00:20:53,790 --> 00:20:58,465
我們可能希望只使用寬度，
所以從20到寬度減去40，

357
00:20:58,465 --> 00:21:02,392
2倍的另一側緣。

358
00:21:02,392 --> 00:21:05,350
這使得很多更有意義
有人誰可能看代碼。

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

360
00:21:08,080 --> 00:21:11,850
>> 有趣的是，秤取
非常非常複雜的為好。

361
00:21:11,850 --> 00:21:13,350
他們做了很多有趣的事情。

362
00:21:13,350 --> 00:21:17,620
所以秤不一定
操作只需用數字。

363
00:21:17,620 --> 00:21:18,955
讓我們做一個色階。

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

365
00:21:23,120 --> 00:21:26,120
>> 因此，我們可能範圍be--
我們的域名是1〜200。

366
00:21:26,120 --> 00:21:28,220
這就是輸入的東西。

367
00:21:28,220 --> 00:21:33,793
但是，我們可能需要從地圖
綠色到紅色，例如。

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

369
00:21:39,710 --> 00:21:42,910
而現在，如果我們把它傳遞1，
我們將得到綠色。

370
00:21:42,910 --> 00:21:45,110
如果我們給它200，我們會得到紅色。

371
00:21:45,110 --> 00:21:49,480
如果我們通過它介於兩者之間，
這將是一些組合，

372
00:21:49,480 --> 00:21:52,520
某處梯度
之間的綠色和紅色。

373
00:21:52,520 --> 00:21:55,210
>> 並有代替
這種笨重的邏輯

374
00:21:55,210 --> 00:21:58,550
我們在這裡與
有條件的就在那裡，

375
00:21:58,550 --> 00:22:03,250
我們可以有一個something--
那些之間的線性度。

376
00:22:03,250 --> 00:22:07,100
所以我們會使用規模，我們只是
創建，我們稱之為顏色。

377
00:22:07,100 --> 00:22:09,060
我們想給它D，它
是我們的數據元素。

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

379
00:22:14,250 --> 00:22:15,060
還有，我們走了。

380
00:22:15,060 --> 00:22:18,070
我們有一個色階。

381
00:22:18,070 --> 00:22:18,940
>> 因此，這是映射。

382
00:22:18,940 --> 00:22:20,960
所以，最左邊是完全綠色。

383
00:22:20,960 --> 00:22:22,560
最右邊的是完全的紅色。

384
00:22:22,560 --> 00:22:24,828
之間的一切
為d的函數。

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

386
00:22:33,369 --> 00:22:35,160
我們有一個有趣的
可視化在這裡。

387
00:22:35,160 --> 00:22:36,952
但是，我們的數據是種無聊。

388
00:22:36,952 --> 00:22:39,410
讓我們來看看有什麼我們可以做的，如果
我們有更多有趣的數據。

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

390
00:22:44,420 --> 00:22:50,500
>> 第四幕，正與
數據 - 的第一件事

391
00:22:50,500 --> 00:22:53,560
我們想要做的，使我們的
可視化更有趣

392
00:22:53,560 --> 00:22:56,140
是將數據在其他地方。

393
00:22:56,140 --> 00:22:58,310
這是非常笨拙的有
數據硬編碼這裡。

394
00:22:58,310 --> 00:23:01,220
一般，我們會問
別人的數據。

395
00:23:01,220 --> 00:23:05,400
我們將可能要求政府，
人口普查局，什麼是你的數據

396
00:23:05,400 --> 00:23:10,170
然後繪製的或要求
一些對某些數據的第三方實體

397
00:23:10,170 --> 00:23:13,330
然後建立一個
可視化上。

398
00:23:13,330 --> 00:23:17,170
>> 所以，第一件事我們想要做的
就是那個移動到別的地方。

399
00:23:17,170 --> 00:23:24,130
所以，我要創建一個
文件這裡叫做data.json。

400
00:23:24,130 --> 00:23:25,600
JSON是數據格式。

401
00:23:25,600 --> 00:23:29,210
你不必知道太多有關。

402
00:23:29,210 --> 00:23:33,210
而且我們要複製
數據很少，我們必須在那裡，

403
00:23:33,210 --> 00:23:40,330
它粘貼在那裡逐字，去
回到我們的可視化代碼

404
00:23:40,330 --> 00:23:45,362
在這裡，並使用此功能就在這裡。

405
00:23:45,362 --> 00:23:46,820
你不必知道的細節。

406
00:23:46,820 --> 00:23:49,800
但是，這會做的是，
它會發現文件時，

407
00:23:49,800 --> 00:23:51,780
取水的時候，並返回給我們。

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

409
00:24:11,660 --> 00:24:15,220
所以，這是什麼做的是，它會
並獲得data.json文件。

410
00:24:15,220 --> 00:24:18,570
然後所有的代碼是
縮進inside--本質，

411
00:24:18,570 --> 00:24:21,800
所有的代碼我們那裡 - 會
只有當我們得到的數據備份運行。

412
00:24:21,800 --> 00:24:25,760
然後它會運行
與我們有數據的代碼。

413
00:24:25,760 --> 00:24:28,870
太好了，我們有一個
可視化查詢

414
00:24:28,870 --> 00:24:31,390
對一些地方的代碼
否則，這通常是

415
00:24:31,390 --> 00:24:36,110
在此它查詢從一些數據
別的地方，這通常是

416
00:24:36,110 --> 00:24:38,656
如何可視化工作。

417
00:24:38,656 --> 00:24:41,400
>> 但我想回去的數據。

418
00:24:41,400 --> 00:24:48,030
因此，在D3-- D3根本數據
消費數據的事情的清單。

419
00:24:48,030 --> 00:24:53,000
D3預計，該數據只是一個列表
物聯網，物聯網的陣列。

420
00:24:53,000 --> 00:24:58,780
不要緊，什麼這些東西
是，只要它是其中的​​一個陣列。

421
00:24:58,780 --> 00:25:02,460
>> 所以在這裡，例如，我們可以對
當然也浮點值。

422
00:25:02,460 --> 00:25:04,830
我們可能有負面影響。

423
00:25:04,830 --> 00:25:09,400
D3並不關心，只要
因為它是一個事物的列表。

424
00:25:09,400 --> 00:25:13,270
>> 有趣的東西，我們
可能有，我們也可以

425
00:25:13,270 --> 00:25:19,410
有這樣的字符串列表。

426
00:25:19,410 --> 00:25:25,440
因此，這些都是深紅頭條
我前幾天回升。

427
00:25:25,440 --> 00:25:29,220
也許你可以找到一些有趣的
事情有關這些一個頭條新聞。

428
00:25:29,220 --> 00:25:30,970
>> 如此反复，這是事情的清單。

429
00:25:30,970 --> 00:25:32,360
D3並不關心。

430
00:25:32,360 --> 00:25:35,572
這恰好是一個字符串。

431
00:25:35,572 --> 00:25:36,530
我們已經改變了我們的數據。

432
00:25:36,530 --> 00:25:38,210
>> 讓我們回到我們的可視化。

433
00:25:38,210 --> 00:25:42,495
現在，我們的可視化預期
的輸入是數字。

434
00:25:42,495 --> 00:25:44,370
因此，我們將不得不
做出一些改變。

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

436
00:25:47,180 --> 00:25:52,180
因此，例如，首先，也許
我們希望把這些圈子沿

437
00:25:52,180 --> 00:25:56,870
由標題的長度，所述
在標題字符的數目。

438
00:25:56,870 --> 00:26:03,600
>> 因此，我們將每一次做is--我們
函數被調用的，

439
00:26:03,600 --> 00:26:09,095
我們會發現它的長度和
然後傳遞到規模。

440
00:26:09,095 --> 00:26:11,550
顏色，我會回來
該鋼藍色。

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

442
00:26:19,060 --> 00:26:20,420
還有，我們走了。

443
00:26:20,420 --> 00:26:23,190
我們有一個可視化
深紅色的頭條新聞。

444
00:26:23,190 --> 00:26:25,500
>> 我們的規模是有點過。

445
00:26:25,500 --> 00:26:29,680
讓我們假設時間最長
標題是100個字符長，

446
00:26:29,680 --> 00:26:32,244
因此跨度了一下。

447
00:26:32,244 --> 00:26:33,410
我們有一個可視化。

448
00:26:33,410 --> 00:26:36,710
如此看來，最頭條
相當接近，

449
00:26:36,710 --> 00:26:38,750
在字符行的條款。

450
00:26:38,750 --> 00:26:41,200
但是，一個人也沒有真正脫穎而出。

451
00:26:41,200 --> 00:26:46,660
>> 我們可以建立一些工具
探索更多。

452
00:26:46,660 --> 00:26:50,710
但是，當我在這方面的工作，我
好奇，是否在這組數據，

453
00:26:50,710 --> 00:26:53,880
頭條用冒號
在他們會更長。

454
00:26:53,880 --> 00:26:55,770
我假設他們會。

455
00:26:55,770 --> 00:26:56,660
>> 因此，讓我們了解一下。

456
00:26:56,660 --> 00:27:00,650
讓我們使用的顏色
通道像我們以前那樣，

457
00:27:00,650 --> 00:27:04,540
編碼一些關於是否
有一個冒號或沒有。

458
00:27:04,540 --> 00:27:07,220
因此，我們將使用一個條件了。

459
00:27:07,220 --> 00:27:09,350
你不必知道
這一細節，

460
00:27:09,350 --> 00:27:14,260
但這是我們如何檢查
串為特定的字符

461
00:27:14,260 --> 00:27:16,355
在JavaScript中，再次，不相關的。

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

463
00:27:18,910 --> 00:27:23,270
>> 但是，如果我們沒有找到
結腸，我們將返回綠色。

464
00:27:23,270 --> 00:27:26,100
如果我們這樣做，我們將返回紅色。

465
00:27:26,100 --> 00:27:29,010
如此反复，頭條新聞
有一個冒號會變成紅色。

466
00:27:29,010 --> 00:27:34,980
這是這是指：好的。

467
00:27:34,980 --> 00:27:38,040
>> 如此看來，我
假設碰撞。

468
00:27:38,040 --> 00:27:39,360
有只有兩個。

469
00:27:39,360 --> 00:27:42,380
我們只有6個數據點
只有倆人冒號。

470
00:27:42,380 --> 00:27:45,510
但似乎有點多
在其下端，實際上。

471
00:27:45,510 --> 00:27:47,830
頭條用冒號似乎
到通常更短，

472
00:27:47,830 --> 00:27:52,370
至少在我們的數據set--有趣。

473
00:27:52,370 --> 00:27:55,830
>> 讓我們返回到
鋼藍色，然後看看

474
00:27:55,830 --> 00:28:00,601
我們可以利用甚至使
更有趣的數據。

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

476
00:28:04,370 --> 00:28:09,070
於是，我再次提到，
在D3的數據是事情的清單。

477
00:28:09,070 --> 00:28:11,080
我們已經看到了很多類型的號碼。

478
00:28:11,080 --> 00:28:12,810
我們已經看到的字符串。

479
00:28:12,810 --> 00:28:15,700
但事情也可以是對象。

480
00:28:15,700 --> 00:28:20,080
>> 它們可以是複雜的事情
包含了很多東西。

481
00:28:20,080 --> 00:28:24,510
如果說的更清楚，
在大多數情況下，我們

482
00:28:24,510 --> 00:28:28,384
要建立每一個數據點作為
不僅僅是一個值更複雜。

483
00:28:28,384 --> 00:28:30,175
如果你想像
關於學生數據庫，

484
00:28:30,175 --> 00:28:32,470
有可能是一個學生
名，學生證，

485
00:28:32,470 --> 00:28:36,370
和很多相關的東西
與一個特定的記錄，

486
00:28:36,370 --> 00:28:39,834
不只是一個字符串或數字。

487
00:28:39,834 --> 00:28:40,750
因此，讓我們看一下。

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

489
00:28:55,180 --> 00:28:56,760
>> 這是一種這樣的數據集。

490
00:28:56,760 --> 00:28:59,090
這是一個數據集有關地震。

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

492
00:29:01,910 --> 00:29:08,430
所以，這裡的一切我們的列表或陣列上
東西包含了很多東西本身。

493
00:29:08,430 --> 00:29:11,380
所以，每一個數據點都具有
幅度和一個坐標。

494
00:29:11,380 --> 00:29:13,425
和自己的坐標
包含兩件事情。

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

496
00:29:15,960 --> 00:29:20,450
>> 所以每天是現在很多更
複雜，有很多更有趣

497
00:29:20,450 --> 00:29:22,700
並包含更多
有趣的信息。

498
00:29:22,700 --> 00:29:26,730
讓我們來看看，我們可以打造出這一點。

499
00:29:26,730 --> 00:29:36,130
再次返回這裡，再次，用
我們直方圖圈的可視化

500
00:29:36,130 --> 00:29:42,110
我們已經建立了，讓我們看看我們是否能夠建立一個
震級分佈可視化

501
00:29:42,110 --> 00:29:43,305
在我們的數據集。

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

503
00:29:45,850 --> 00:29:48,660
>> 所以在這裡，這是同一個概念。

504
00:29:48,660 --> 00:29:51,920
但現在，D包含更多的東西。

505
00:29:51,920 --> 00:29:54,780
D包含許多數據元素。

506
00:29:54,780 --> 00:29:57,946
所以我們得到D背面。

507
00:29:57,946 --> 00:29:59,670
D3給我們ð。

508
00:29:59,670 --> 00:30:06,080
我們通過查找幅度響應
d和再遞過來的規模。

509
00:30:06,080 --> 00:30:08,490
>> 然後，我們需要改變
我們的規模，當然。

510
00:30:08,490 --> 00:30:12,980
所以幅度根本就沒有
去遠遠超過10。

511
00:30:12,980 --> 00:30:15,485
其實，從來沒有
一個10級的地震。

512
00:30:15,485 --> 00:30:19,360
但是，這是一種我們上的
為此，我們在上面的光譜。

513
00:30:19,360 --> 00:30:20,240
>> 讓我們來刷新。

514
00:30:20,240 --> 00:30:22,990
不錯，我們有一個可視化。

515
00:30:22,990 --> 00:30:25,490
有趣的是note--等
有兩個數據點

516
00:30:25,490 --> 00:30:29,010
幾乎正好在每個頂
其他，在幅度方面。

517
00:30:29,010 --> 00:30:31,350
你看這通過我們使用的透明度。

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

519
00:30:40,810 --> 00:30:42,690
>> 我們現在有地理數據。

520
00:30:42,690 --> 00:30:44,710
我們有緯度和經度。

521
00:30:44,710 --> 00:30:47,549
也許我們可以做的東西
很多與更有趣。

522
00:30:47,549 --> 00:30:49,590
讓我們找一些更
有趣的方式來可視化

523
00:30:49,590 --> 00:30:53,500
這更複雜
數據，我們有機會獲得。

524
00:30:53,500 --> 00:31:04,950
>> 第五幕，Mapping--根本，
我們要在地圖上把這些。

525
00:31:04,950 --> 00:31:07,690
我的意思是，這是這是怎麼回事。

526
00:31:07,690 --> 00:31:13,130
我們想了解的信息進行編碼
這些地震讀數的位置，

527
00:31:13,130 --> 00:31:16,350
以及其規模，
因為我們有現在。

528
00:31:16,350 --> 00:31:21,310
我們知道如何消費
更複雜的數據。

529
00:31:21,310 --> 00:31:26,200
>> 我們要做的第一件事就是
創建地圖，一個背景圖。

530
00:31:26,200 --> 00:31:29,360
我會去通過
這非常快。

531
00:31:29,360 --> 00:31:30,560
這是棘手的代碼。

532
00:31:30,560 --> 00:31:33,110
這是另一個那些
食譜，你真的不

533
00:31:33,110 --> 00:31:35,690
要充分了解供您使用。

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

535
00:31:38,510 --> 00:31:39,740
但是，這是代碼。

536
00:31:39,740 --> 00:31:43,580
這段代碼在這裡創建了一個地圖。

537
00:31:43,580 --> 00:31:45,730
>> 我們不會去詳細。

538
00:31:45,730 --> 00:31:54,210
但表面上，它的作用是，
它查詢該us.json文件，

539
00:31:54,210 --> 00:31:57,150
就像一個數據文件
一個我們以前。

540
00:31:57,150 --> 00:31:59,150
這是比較複雜的，當然。

541
00:31:59,150 --> 00:32:02,920
但在這種情況下，一切，
每一個數據點是這樣的狀態，

542
00:32:02,920 --> 00:32:05,420
並具有列表
緯度和經度

543
00:32:05,420 --> 00:32:10,500
定義的多邊形，
這種形式，這種狀態。

544
00:32:10,500 --> 00:32:13,280
>> 那麼，什麼D3會做類似
什麼我們以前那樣。

545
00:32:13,280 --> 00:32:18,140
這將要求和
結合，為一個元件。

546
00:32:18,140 --> 00:32:20,890
這裡面的一個函數，
將映射元素出來，

547
00:32:20,890 --> 00:32:23,410
根據該緯度和經度。

548
00:32:23,410 --> 00:32:24,580
你可以閱讀更多關於這一點。

549
00:32:24,580 --> 00:32:27,385
我推薦它。

550
00:32:27,385 --> 00:32:30,090
>> 有在鏈接
這段代碼的最終發布。

551
00:32:30,090 --> 00:32:31,570
和代碼註釋。

552
00:32:31,570 --> 00:32:34,050
在有關於該鏈接用於進一步。

553
00:32:34,050 --> 00:32:36,590
我建議你查一下。

554
00:32:36,590 --> 00:32:39,460
但我們關心的是
該投影功能。

555
00:32:39,460 --> 00:32:41,210
我想通過這一點。

556
00:32:41,210 --> 00:32:43,522
>> 首先，讓我告訴
你說，是的，我們有一個地圖。

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

558
00:32:47,300 --> 00:32:49,970
地圖是冷的。

559
00:32:49,970 --> 00:32:52,330
因此，讓我們看看這個
生產函數。

560
00:32:52,330 --> 00:32:56,481
>> 投影是非常
像規模，再擴展。

561
00:32:56,481 --> 00:32:59,210
那麼，什麼生產
該投影功能

562
00:32:59,210 --> 00:33:06,610
確實是，我們可以通過它的經度
和latitudes--在這種情況下，

563
00:33:06,610 --> 00:33:09,590
這裡，這些值是在
LAT-多頭的建設

564
00:33:09,590 --> 00:33:13,990
我們坐在右
now--投影。

565
00:33:13,990 --> 00:33:20,560
和投影將轉換
到這一點的x和y的像素值。

566
00:33:20,560 --> 00:33:23,300
>> 那麼，什麼投影做
非常類似於我們的規模。

567
00:33:23,300 --> 00:33:27,270
它以我們的緯度和
經度表示整個地球

568
00:33:27,270 --> 00:33:31,390
和收縮和尺寸的
下來，我們希望廣場，

569
00:33:31,390 --> 00:33:33,510
我們已經給了它。

570
00:33:33,510 --> 00:33:35,220
在這種情況下，我們
通過這些值。

571
00:33:35,220 --> 00:33:41,370
而且它給我們，好，那
在屏幕上指640像素。

572
00:33:41,370 --> 00:33:46,250
這整個屏幕為700像素
寬，這樣就使得我們這裡，

573
00:33:46,250 --> 00:33:53,310
和154像素下來，我會
估計是幾乎在這裡。

574
00:33:53,310 --> 00:33:57,250
>> 所以服用這些緯度多頭，其中
代表東西就整個地球

575
00:33:57,250 --> 00:34:02,850
和壓扁和移動周圍
給我們x和y的像素值，

576
00:34:02,850 --> 00:34:05,450
這是第一件事，就是
在這個映射代碼完成。

577
00:34:05,450 --> 00:34:07,920
的，然後休息
代碼消費數據

578
00:34:07,920 --> 00:34:14,310
然後映射那些緯度多頭
到的東西在屏幕上。

579
00:34:14,310 --> 00:34:18,380
>> 但是，我們要利用這個投影
功能，因為事實證明

580
00:34:18,380 --> 00:34:20,270
我們有緯度多頭多頭為好。

581
00:34:20,270 --> 00:34:24,509
回頭看看我們的數據，我們有
緯度和經度坐標

582
00:34:24,509 --> 00:34:25,425
每一個觀察。

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

584
00:34:28,131 --> 00:34:29,130
因此，讓我們使用投影。

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

586
00:34:33,250 --> 00:34:37,639
>> 所以，看我們的闡述，
我們希望我們的exposition--

587
00:34:37,639 --> 00:34:39,590
我們有一個緯度和經度。

588
00:34:39,590 --> 00:34:40,770
但我們要的像素值。

589
00:34:40,770 --> 00:34:43,510
而事實證明，我們有完全相同
我們want--投影。

590
00:34:43,510 --> 00:34:46,239
很像我們
使用規模就在這裡，

591
00:34:46,239 --> 00:34:52,075
我們現在要使用投影
並把它傳遞坐標。

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

593
00:34:55,241 --> 00:34:56,949
所以，第一件事
我們doing--所以我們

594
00:34:56,949 --> 00:35:01,520
得到D，它是一個單獨的數據
單個地震元素

595
00:35:01,520 --> 00:35:02,370
閱讀。

596
00:35:02,370 --> 00:35:04,640
我們要做的第一件事
是獲取坐標。

597
00:35:04,640 --> 00:35:06,150
好吧，我們有坐標。

598
00:35:06,150 --> 00:35:09,160
>> 我們要做的第二件事是
傳遞到投影。

599
00:35:09,160 --> 00:35:13,440
投影轉換這些坐標
入的像素值，x和y。

600
00:35:13,440 --> 00:35:16,680
再過去的事情，我們
想要做的是剛剛拿到X，

601
00:35:16,680 --> 00:35:19,342
這此情況下是第一個。

602
00:35:19,342 --> 00:35:22,050
它是第一個的兩件事
這是由投射返回。

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

604
00:35:27,840 --> 00:35:29,630
>> 我們將y的做同樣的。

605
00:35:29,630 --> 00:35:34,960
而是，我們將返回
第二元件，在y。

606
00:35:34,960 --> 00:35:35,980
準備好刷新。

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

608
00:35:39,830 --> 00:35:46,450
哦，多餘的字符
這裡 - 不錯，我們有

609
00:35:46,450 --> 00:35:51,730
一個數據驅動的文件，是
隱瞞對象的這個JSON文件，

610
00:35:51,730 --> 00:35:57,560
拍圖，並且改變
關於屬性的數據

611
00:35:57,560 --> 00:35:59,600
突出它在地圖上。

612
00:35:59,600 --> 00:36:00,840
這真的很有趣。

613
00:36:00,840 --> 00:36:03,770
這是很酷的。

614
00:36:03,770 --> 00:36:05,640
>> 讓我們把它上升了一個檔次。

615
00:36:05,640 --> 00:36:08,795
我的意思是，我們有兩件
信息與每一個數據點。

616
00:36:08,795 --> 00:36:10,000
我的意思是，三名。

617
00:36:10,000 --> 00:36:12,540
我們有坐標，
其是x和y。

618
00:36:12,540 --> 00:36:15,700
而我們的規模。

619
00:36:15,700 --> 00:36:17,420
>> 我們需要以某種方式程度編碼。

620
00:36:17,420 --> 00:36:18,920
我們有很多渠道。

621
00:36:18,920 --> 00:36:20,370
我們可以使用的顏色。

622
00:36:20,370 --> 00:36:21,890
我們可以使用半徑。

623
00:36:21,890 --> 00:36:23,040
我們可以使用不透明。

624
00:36:23,040 --> 00:36:25,540
我們可以在代碼中使用了很多東西。

625
00:36:25,540 --> 00:36:29,180
這些屬性和許多
更多未列出的有，

626
00:36:29,180 --> 00:36:33,065
因為他們是可選的，我們可以
使用這種數據進行編碼，行程

627
00:36:33,065 --> 00:36:35,670
和我提到的所有這些事情。

628
00:36:35,670 --> 00:36:36,690
>> 讓我們做半徑。

629
00:36:36,690 --> 00:36:38,830
我覺得半徑是最直觀的。

630
00:36:38,830 --> 00:36:46,210
所以，再一次，我們將取代硬編碼
40並進行一些計算。

631
00:36:46,210 --> 00:36:48,810
我們將再次使用我們最喜歡的規模。

632
00:36:48,810 --> 00:36:50,290
而且我們過去ð。

633
00:36:50,290 --> 00:36:55,850
但不是D，因為我們想要的幅度
的D-。 d為僅僅是數據點。

634
00:36:55,850 --> 00:36:57,430
我們將通過規模擴展。

635
00:36:57,430 --> 00:36:58,470
>> 讓我們再試一次。

636
00:36:58,470 --> 00:37:00,230
哦，這是行不通的。

637
00:37:00,230 --> 00:37:02,940
為什麼它不工作？

638
00:37:02,940 --> 00:37:04,387
>> 所以要記住什麼規模呢。

639
00:37:04,387 --> 00:37:05,470
讓我們來看看規模了。

640
00:37:05,470 --> 00:37:10,800
比例尺地圖從1到10上
到22〜600，更多或更少。

641
00:37:10,800 --> 00:37:12,030
600是巨大的。

642
00:37:12,030 --> 00:37:14,730
這就是為什麼我們得到這個。

643
00:37:14,730 --> 00:37:18,420
>> 因此，我們要改變我們的規模
為更合理。

644
00:37:18,420 --> 00:37:22,610
比方說，我們要0到60。

645
00:37:22,610 --> 00:37:25,340
60大，但10地震
是令人難以置信的罕見。

646
00:37:25,340 --> 00:37:27,880
事實上，他們從來沒有發生過。

647
00:37:27,880 --> 00:37:31,830
>> 所以，這是什麼會做的是，它會採取
我們的大小是從1到10

648
00:37:31,830 --> 00:37:34,490
並將其映射到擴展出來。

649
00:37:34,490 --> 00:37:37,370
並在地圖上為0到60。

650
00:37:37,370 --> 00:37:38,840
讓我們來刷新。

651
00:37:38,840 --> 00:37:41,850
>> 不錯，我們有一個可視化。

652
00:37:41,850 --> 00:37:42,500
這是偉大的。

653
00:37:42,500 --> 00:37:43,736
這是實際的數據。

654
00:37:43,736 --> 00:37:46,360
你會發現，在我的小玩具
舉例來說，最大的地震

655
00:37:46,360 --> 00:37:49,417
是正確的我們之上。

656
00:37:49,417 --> 00:37:50,000
但僅此而已。

657
00:37:50,000 --> 00:37:54,422
我們有個約會驅動的可視化
消耗的數據

658
00:37:54,422 --> 00:37:56,255
並給了我們真正的
有趣的信息。

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

660
00:38:02,600 --> 00:38:06,420
是啊，讓我們添加一些
互動吧。

661
00:38:06,420 --> 00:38:08,675
我提到這是
D3的強大力量。

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

663
00:38:11,490 --> 00:38:15,060
>> 所以在這裡，對於每一個元素，我們
描述了一堆屬性。

664
00:38:15,060 --> 00:38:20,230
但是，我們也可以描述我們想要的
發生與互動元素。

665
00:38:20,230 --> 00:38:26,190
例如，我們可以描述
會發生什麼，當我們鼠標滑過。

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

667
00:38:28,740 --> 00:38:33,640
和非常相似的是，
那將需要的功能，

668
00:38:33,640 --> 00:38:36,700
非常相似的
屬性我們以前，

669
00:38:36,700 --> 00:38:44,650
我們做一些事來了哪裡
元素，當我們將鼠標懸停在它。

670
00:38:44,650 --> 00:38:47,100
>> 所以第一件事情，我們需要
做的是選擇元素，

671
00:38:47,100 --> 00:38:49,435
找到它基本上，在瀏覽器中。

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

673
00:38:57,090 --> 00:39:00,920
然後，我們可以設置
一個屬性給它。

674
00:39:00,920 --> 00:39:06,870
所以我在做什麼在這裡，當我們徘徊
過什麼東西，我們會得到這個元素

675
00:39:06,870 --> 00:39:11,197
然後將其不透明度回
1，完全不透明。

676
00:39:11,197 --> 00:39:12,488
讓我們來看看是什麼樣子。

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

678
00:39:29,430 --> 00:39:39,080
>> 看來我們有一個
在這裡多餘的分號。

679
00:39:39,080 --> 00:39:42,420
因此，如果我們在這裡徘徊，它就會爆滿。

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

681
00:39:46,530 --> 00:39:48,960
但現在，當然，它
撐滿了，因為我們

682
00:39:48,960 --> 00:39:53,240
要描述發生了什麼
當我們刪除光標。

683
00:39:53,240 --> 00:39:59,990
因此，讓我們做到這些的
鼠標移出，而不是將鼠標放置。

684
00:39:59,990 --> 00:40:06,399
>> 我們將其重置為
我們有什麼before-- 0.5。

685
00:40:06,399 --> 00:40:10,260
而現在，我們每次
懸停，我們得到一個完整的圓。

686
00:40:10,260 --> 00:40:13,468
它幫助我們看到我們
我們選擇本質。

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

688
00:40:19,210 --> 00:40:22,860
>> 現在讓我們做這真是太好了。

689
00:40:22,860 --> 00:40:26,210
讓我們連接這個真實的數據。

690
00:40:26,210 --> 00:40:30,890
因此，讓我們問能
有關他們的數據USGS。

691
00:40:30,890 --> 00:40:35,630
因此，美國地質調查局
有關於地震的數據。

692
00:40:35,630 --> 00:40:41,460
他們有一個公共的API，能夠
被消耗JSON格式。

693
00:40:41,460 --> 00:40:42,548
因此，讓我們做到這一點。

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

695
00:40:49,730 --> 00:40:55,900
>> 所以這是一個有點代碼
連接到USGS API。

696
00:40:55,900 --> 00:40:57,990
還有的就可以了位處理的。

697
00:40:57,990 --> 00:41:02,200
這是不相關的，但它簡​​化
到像一個簡單的數據格式

698
00:41:02,200 --> 00:41:03,800
我們以前有。

699
00:41:03,800 --> 00:41:08,140
所以我擺脫我們的電話來
我們假data.json的文件。

700
00:41:08,140 --> 00:41:13,110
而是，我打電話
美國地質勘探局是必須的。

701
00:41:13,110 --> 00:41:16,700
>> 讓我們來刷新，美觀大方。

702
00:41:16,700 --> 00:41:21,260
這是實際的，現實生活中的數據
從本週的地震。

703
00:41:21,260 --> 00:41:23,217
這真的很有趣。

704
00:41:23,217 --> 00:41:25,050
這並不令人驚訝
對我們來說，但有

705
00:41:25,050 --> 00:41:27,909
很多在地震
西海岸加利福尼亞州。

706
00:41:27,909 --> 00:41:30,950
但我認為這是非常有趣
有這麼多地震

707
00:41:30,950 --> 00:41:34,350
在阿拉斯加，顯然，
這裡在中西部地區。

708
00:41:34,350 --> 00:41:37,630
我的意思是，有趣，我們是很好的。

709
00:41:37,630 --> 00:41:40,410
這就是結論。

710
00:41:40,410 --> 00:41:43,760
>> 但從根本上說，這
是D3幫助我們做的。

711
00:41:43,760 --> 00:41:48,030
它可以幫助我們獲取數據，綁定
它在DOM元素，

712
00:41:48,030 --> 00:41:51,620
並將這些元素改變
作為數據的功能，

713
00:41:51,620 --> 00:41:54,780
具有這些屬性，所有的
元素的許多屬性，

714
00:41:54,780 --> 00:41:57,393
一切是非常有用的渠道
傳達信息。

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

716
00:42:05,440 --> 00:42:09,290
>> D3是一個令人難以置信的強大
圖書館和得非常好運行。

717
00:42:09,290 --> 00:42:12,260
這是一些強大的東西。

718
00:42:12,260 --> 00:42:15,960
數據可視化是一個
令人難以置信的強大的工具

719
00:42:15,960 --> 00:42:21,530
輸送到人的深
，獲取他們的核心見解

720
00:42:21,530 --> 00:42:25,430
並幫助他們了解，在
這種深刻和直觀的方式，

721
00:42:25,430 --> 00:42:29,760
數據如何工作以及如何
數據改變了我們的生活。

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