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