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

2
00:00:00,780 --> 00:00:11,880
>> [MUSIC CHƠI]

3
00:00:11,880 --> 00:00:16,480
>> DAVID Chouinard: Tôi là David
Chouinard, và điều này là D3.

4
00:00:16,480 --> 00:00:17,700
Chào mừng.

5
00:00:17,700 --> 00:00:21,270
Chúng ta sẽ tìm hiểu về D3 ngày hôm nay.

6
00:00:21,270 --> 00:00:25,020
D3 là một khuôn khổ JavaScript
để xây dựng một chất lượng cao

7
00:00:25,020 --> 00:00:28,110
visualizations tương tác cho web.

8
00:00:28,110 --> 00:00:30,870
Những điều như những gì chúng tôi
nhìn thấy ở phía sau của tôi,

9
00:00:30,870 --> 00:00:34,230
chúng ta sẽ tìm hiểu để làm cho những người
điều, loại vấn đề cơ bản của nó.

10
00:00:34,230 --> 00:00:36,452
Nhưng nó sẽ được mát mẻ.

11
00:00:36,452 --> 00:00:38,160
Hãy bắt đầu
làm cho hình ảnh đẹp.

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

13
00:00:41,108 --> 00:00:44,350
Chúng tôi đã có nhiều bản demo
khách hàng tiềm năng có sẵn.

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

15
00:00:48,040 --> 00:00:50,760
Hãy làm điều đó.

16
00:00:50,760 --> 00:00:58,700
>> Act I, DOM manipulation-- chúng ta đang đi
để bắt đầu ngay lập tức làm cho những thứ mát mẻ.

17
00:00:58,700 --> 00:01:01,240
Trước hết, bên trái, chúng ta có mã.

18
00:01:01,240 --> 00:01:03,470
Bên phải, chúng ta có
kết quả của mã của chúng tôi.

19
00:01:03,470 --> 00:01:04,900
Chúng ta hãy đi qua nó.

20
00:01:04,900 --> 00:01:05,780
>> Hãy thực hiện một vòng tròn.

21
00:01:05,780 --> 00:01:08,570
Làm thế nào để âm thanh?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
chúng ta chỉ cần thực hiện một vòng tròn.

23
00:01:14,934 --> 00:01:16,100
Bạn không tin tôi, phải không?

24
00:01:16,100 --> 00:01:18,190
Nó không có ở đó.

25
00:01:18,190 --> 00:01:21,830
>> Vì vậy, những gì chúng tôi đã làm đúng ở đây là,
SVG là đồ họa vector mở rộng.

26
00:01:21,830 --> 00:01:27,530
Đây là cách chúng ta nói với trình duyệt
làm cho đồ họa vector trong trình duyệt.

27
00:01:27,530 --> 00:01:30,740
Những gì chúng ta chỉ cần làm ngay bây giờ
được thêm vào một vòng tròn để duyệt.

28
00:01:30,740 --> 00:01:34,790
>> Lời hứa là vòng tròn
đòi hỏi một chút về các thuộc tính cơ bản

29
00:01:34,790 --> 00:01:36,850
trước khi chúng ta thực sự có thể nhìn thấy nó.

30
00:01:36,850 --> 00:01:40,045
Chúng tôi cần phải nói cho nó vị trí x của nó,
vị trí của y, bán kính của nó.

31
00:01:40,045 --> 00:01:43,310
Chúng tôi đã không nói với nó điều đó,
vì vậy chúng ta không nhìn thấy nó ngay bây giờ.

32
00:01:43,310 --> 00:01:46,210
Nhưng hãy nói cho nó công cụ.

33
00:01:46,210 --> 00:01:49,510
>> Vì vậy, trước hết, bạn đã có
để cung cấp cho chúng tôi một vòng tròn tên.

34
00:01:49,510 --> 00:01:53,070
Vì vậy, chúng ta hãy gọi nó là vòng tròn.

35
00:01:53,070 --> 00:01:54,406
Vòng tròn của chúng tôi có một cái tên bây giờ.

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

37
00:01:57,230 --> 00:01:59,490
Và chúng ta hãy cho nó một vài thuộc tính.

38
00:01:59,490 --> 00:02:03,690
Làm thế nào về cx sẽ tập trung x, do đó
trung tâm của vị trí x.

39
00:02:03,690 --> 00:02:06,730
Hãy nói rằng, 200 x 200 pixel.

40
00:02:06,730 --> 00:02:10,220
>> Hãy cung cấp cho nó một y 200 pixel là tốt.

41
00:02:10,220 --> 00:02:16,032
Và một r, bán kính, khoảng 40 pixel.

42
00:02:16,032 --> 00:02:16,950
Bây giờ chúng ta hãy xem.

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

44
00:02:21,740 --> 00:02:23,440
Tôi không thể đánh vần.

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

46
00:02:30,430 --> 00:02:31,520
>> Có bạn đi.

47
00:02:31,520 --> 00:02:37,330
Chúng tôi có một vòng tròn ở vị trí 200
pixel, 200 pixel, bán kính 40 pixel.

48
00:02:37,330 --> 00:02:38,280
Loại mát mẻ, phải không?

49
00:02:38,280 --> 00:02:38,988
Chúng tôi có một vòng tròn.

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

51
00:02:40,880 --> 00:02:42,670
>> Vì vậy, không cần thiết phải làm theo cùng.

52
00:02:42,670 --> 00:02:45,790
Tất cả những ví dụ này, tất cả các
mã Tôi đang làm hôm nay

53
00:02:45,790 --> 00:02:51,300
sẽ được cung cấp trực tuyến ở cuối
trong các hình thức ví dụ tương tác

54
00:02:51,300 --> 00:02:54,010
với trạm kiểm soát tại
mỗi hành động, và như vậy.

55
00:02:54,010 --> 00:02:55,160
>> Hãy làm nhiều thứ hơn.

56
00:02:55,160 --> 00:02:58,901
Vòng tròn màu đen này là thực sự xấu xí.

57
00:02:58,901 --> 00:03:01,541
Tôi xin lỗi vì lỗi
tin nhắn ngay ở đó.

58
00:03:01,541 --> 00:03:05,340
Hiện chúng tôi đi.

59
00:03:05,340 --> 00:03:06,350
>> Hãy cung cấp cho nó một màu sắc.

60
00:03:06,350 --> 00:03:07,170
Làm thế nào vậy?

61
00:03:07,170 --> 00:03:08,340
Tôi thích màu xanh thép.

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

63
00:03:13,280 --> 00:03:16,030
Vâng, vòng tròn của chúng tôi thay đổi màu sắc.

64
00:03:16,030 --> 00:03:17,320
Đó là tuyệt vời.

65
00:03:17,320 --> 00:03:31,330
Hãy làm cho nó bán trong suốt
too-- bán trong suốt.

66
00:03:31,330 --> 00:03:33,670
>> Vì vậy, đây là những thuộc tính
chúng tôi đang xác định trên đường tròn.

67
00:03:33,670 --> 00:03:36,774
Điều đầu tiên chúng tôi làm
chúng tôi đặt một vòng tròn trên trang.

68
00:03:36,774 --> 00:03:38,690
Và sau đó chúng tôi đang xác định
một loạt các thuộc tính.

69
00:03:38,690 --> 00:03:41,610
Một số trong số này được yêu cầu,
như CX, CY, và Radius.

70
00:03:41,610 --> 00:03:42,680
Và những người khác là tùy chọn.

71
00:03:42,680 --> 00:03:44,730
>> Có rất nhiều thuộc tính.

72
00:03:44,730 --> 00:03:46,760
Có rất nhiều trong số họ.

73
00:03:46,760 --> 00:03:53,070
Ví dụ, chúng ta có thể có một
đột quỵ cũng như, một cơn đột quỵ của màu đỏ.

74
00:03:53,070 --> 00:03:55,630
Nhưng chúng ta hãy loại bỏ.

75
00:03:55,630 --> 00:04:00,450
Chúng ta trở lại với một vòng tròn, một vòng tròn màu xanh.

76
00:04:00,450 --> 00:04:01,600
>> Vì vậy, chúng ta hãy làm tròn hơn.

77
00:04:01,600 --> 00:04:02,810
Làm thế nào vậy?

78
00:04:02,810 --> 00:04:04,665
Chúng ta hãy làm một vòng tròn.

79
00:04:04,665 --> 00:04:05,985
Đây là thú vị, phải không?

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

81
00:04:09,630 --> 00:04:12,300
>> Vì vậy, nói tôi chỉ Copy-dán
những gì chúng tôi đã có rồi.

82
00:04:12,300 --> 00:04:13,570
Hãy gọi nó là circle2.

83
00:04:13,570 --> 00:04:15,840
Và chúng ta hãy làm chính xác
điều tương tự và cung cấp cho nó

84
00:04:15,840 --> 00:04:20,450
thuộc tính, với một vị trí x 300.

85
00:04:20,450 --> 00:04:24,140
Yay, chúng tôi có hai vòng tròn bây giờ.

86
00:04:24,140 --> 00:04:27,240
>> Và tất nhiên, chúng ta có thể
cập nhật các giá trị này.

87
00:04:27,240 --> 00:04:31,640
Tôi có thể đặt nó ở 400, và bây giờ nó di chuyển.

88
00:04:31,640 --> 00:04:35,470
Và kể từ khi nó gây phiền nhiễu, hãy
loại bỏ nó, vì vậy circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
Nó đi ngay bây giờ.

91
00:04:40,730 --> 00:04:43,170
>> Vì vậy, những gì chúng tôi đang làm và
chỉ là rất, very-- này

92
00:04:43,170 --> 00:04:46,030
rất giống với những gì bạn
có thể làm trong jQuery, cho ví dụ.

93
00:04:46,030 --> 00:04:48,240
Chúng tôi chỉ đang thao tác
DOM, nó được gọi là.

94
00:04:48,240 --> 00:04:50,040
Bạn có thể đã nghe từ đó trước.

95
00:04:50,040 --> 00:04:53,255
Chúng tôi đang tạo ra các công cụ, thiết lập
thuộc tính trên các công cụ, loại bỏ công cụ.

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

97
00:04:58,950 --> 00:05:02,360
>> Bây giờ, đây là nơi mà nó được thú vị.

98
00:05:02,360 --> 00:05:07,250
Vì vậy, sau này trong mã, chúng ta vẫn có thể
tham khảo các vòng tròn ban đầu ở đây.

99
00:05:07,250 --> 00:05:14,100
Vì vậy, chúng ta hãy thiết lập lại thuộc tính của nó để cx.

100
00:05:14,100 --> 00:05:18,260
Hãy nói rằng, vị trí x lên 400.

101
00:05:18,260 --> 00:05:22,406
Và tôi sẽ chuyển
đó, vì vậy nó là hiển nhiên.

102
00:05:22,406 --> 00:05:23,360
Hiện chúng tôi đi.

103
00:05:23,360 --> 00:05:24,780
>> Vì vậy, chúng tôi đã thêm một vòng tròn.

104
00:05:24,780 --> 00:05:26,440
Chúng tôi thiết lập một số thuộc tính.

105
00:05:26,440 --> 00:05:28,210
Chúng tôi thêm một vòng tròn, loại bỏ nó.

106
00:05:28,210 --> 00:05:31,650
Và sau đó chúng tôi đang thay đổi
các vòng tròn ban đầu.

107
00:05:31,650 --> 00:05:35,400
>> Nhưng đây là nơi nó được
rất nhiều chi tiết thú vị.

108
00:05:35,400 --> 00:05:39,070
Không chỉ chúng tôi có thể thiết lập các thuộc tính
như chỉ là giá trị, chúng ta có thể nói,

109
00:05:39,070 --> 00:05:41,610
hey, vòng tròn, đi đến vị trí 200.

110
00:05:41,610 --> 00:05:44,540
Chúng tôi cũng có thể cài đặt chúng như các chức năng.

111
00:05:44,540 --> 00:05:48,850
>> Vì vậy, thay vì cho 400 ở đây,
chúng ta có thể làm một số tính toán

112
00:05:48,850 --> 00:05:53,950
trên bay cho những gì chúng tôi
muốn thuộc tính đó được.

113
00:05:53,950 --> 00:05:56,580
Vì vậy, đây là cách thức bạn thể hiện điều đó.

114
00:05:56,580 --> 00:06:00,660
Chúng tôi nói, thay vì 400, cho tôi
cung cấp cho bạn một chức năng thay thế.

115
00:06:00,660 --> 00:06:04,180
Và ở đây, bên trong chức năng này,
chúng ta có thể thực hiện bất kỳ tính toán điên.

116
00:06:04,180 --> 00:06:06,820
>> Chúng tôi có thể dành thời gian và
xem xét một số điều khác

117
00:06:06,820 --> 00:06:11,230
và tự động quyết định cho
vòng tròn những gì giá trị mà chúng ta muốn.

118
00:06:11,230 --> 00:06:15,266
Làm thế nào về chúng tôi chỉ cung cấp cho
nó một vị trí x ngẫu nhiên?

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

120
00:06:20,360 --> 00:06:21,120
Vì vậy, đó là điều đó.

121
00:06:21,120 --> 00:06:25,490
>> Vì vậy, những gì mà nói là, cho
mọi x, chạy chức năng này.

122
00:06:25,490 --> 00:06:29,340
Và những gì chúng tôi đang làm là tính toán
một số thứ, một lần ngẫu nhiên chiều rộng

123
00:06:29,340 --> 00:06:30,410
và quay trở lại đó.

124
00:06:30,410 --> 00:06:34,765
Vì vậy, mỗi khi chúng ta chạy đó, chúng tôi nhận được một
vòng tròn mà đi đến một nơi ngẫu nhiên.

125
00:06:34,765 --> 00:06:36,394
Đó là loại mát mẻ.

126
00:06:36,394 --> 00:06:38,310
Tôi cảm thấy như tôi có thể nhìn
lúc này cho một chút.

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

128
00:06:44,274 --> 00:06:46,440
Chúng tôi đang bắt đầu để có được
một cái gì đó thú vị ở đây.

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

130
00:06:49,120 --> 00:06:51,390
Hãy làm cho dữ liệu này hướng bây giờ.

131
00:06:51,390 --> 00:06:53,420
Không có dữ liệu ở đây.

132
00:06:53,420 --> 00:06:54,482
Hãy thay đổi điều đó.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- Act II, dữ liệu Driven
Vì vậy, chúng ta hãy trở lại đây.

135
00:07:12,140 --> 00:07:15,340
Và chúng ta hãy chỉ thoát khỏi circle2,
bởi vì chúng ta chỉ cần thêm và loại bỏ

136
00:07:15,340 --> 00:07:15,840
nó.

137
00:07:15,840 --> 00:07:17,382
Vì vậy, chúng tôi không thực sự cần nó.

138
00:07:17,382 --> 00:07:21,421
Chúng tôi cần phải trở nên thông minh hơn rất nhiều ở đây.

139
00:07:21,421 --> 00:07:23,170
Hãy nói rằng, chúng tôi có
một số dữ liệu của một số loại.

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

141
00:07:31,540 --> 00:07:40,020
Một moment-- hãy nói,
chúng tôi đã có dữ liệu của mẫu này.

142
00:07:40,020 --> 00:07:41,800
Chúng tôi đã có một mảng, chỉ cần
một loạt các con số.

143
00:07:41,800 --> 00:07:45,750
Chúng tôi có bảy số ở đây,
bất cứ điều gì các tiền represent--

144
00:07:45,750 --> 00:07:48,810
trong tài khoản ngân hàng của người dân, làm thế nào
nhiều họ cân nhắc, thần biết gì.

145
00:07:48,810 --> 00:07:51,310
>> Đây là những con số, và chúng tôi
muốn sử dụng vòng tròn của chúng tôi

146
00:07:51,310 --> 00:07:53,240
để đại diện cho những con số này bằng cách nào đó.

147
00:07:53,240 --> 00:07:55,515
Chúng tôi muốn buộc chúng tôi
vòng tròn đến con số đó.

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

149
00:07:58,750 --> 00:07:59,626
Vì vậy, những gì chúng tôi làm.

150
00:07:59,626 --> 00:08:01,500
Hãy nói rằng, chúng tôi muốn có một
vòng tròn cho mỗi số.

151
00:08:01,500 --> 00:08:03,590
Chúng tôi có thể làm cũ
điều chúng tôi đã doing--

152
00:08:03,590 --> 00:08:06,020
vòng tròn và append circle2 và circle3.

153
00:08:06,020 --> 00:08:10,020
Nhưng điều này được ra khỏi tay, và
có rất nhiều lặp lại logic.

154
00:08:10,020 --> 00:08:12,760
>> Vì vậy, hãy thông minh hơn với điều đó.

155
00:08:12,760 --> 00:08:17,810
Thay vì sử dụng các vòng tròn var
svg.append rằng chúng tôi chỉ sử dụng,

156
00:08:17,810 --> 00:08:21,580
chúng ta sẽ sử dụng
khối nhỏ này ở đây.

157
00:08:21,580 --> 00:08:24,510
Tôi không muốn đi vào chiều sâu
vào những gì tất cả các bộ phận làm.

158
00:08:24,510 --> 00:08:26,020
Và nó là loại một chủ đề cao.

159
00:08:26,020 --> 00:08:27,830
Và tôi ước tôi có thể.

160
00:08:27,830 --> 00:08:31,370
>> Nhưng điều quan trọng để recognize-- và
bạn sẽ thấy là rất thường xuyên trong mã D3.

161
00:08:31,370 --> 00:08:36,840
Đây là khối cơ bản của văn bản
tạo ra nhiều vòng tròn

162
00:08:36,840 --> 00:08:41,360
như có những yếu tố dữ liệu
trong mảng này ngay tại đây.

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

164
00:08:53,420 --> 00:08:55,780
Vì vậy, điều này tạo ra càng nhiều
những vòng tròn có những yếu tố.

165
00:08:55,780 --> 00:08:58,520
Nó sẽ tạo cho chúng tôi bảy vòng tròn.

166
00:08:58,520 --> 00:09:01,710
Và nó là một điều thực sự, thực sự quan trọng.

167
00:09:01,710 --> 00:09:02,460
Vì vậy, chúng ta hãy chạy đó.

168
00:09:02,460 --> 00:09:05,460
Hãy loại bỏ vòng tròn khác của chúng tôi.

169
00:09:05,460 --> 00:09:09,565
Hãy chỉ nhận xét này
chia ra và chạy này một lần nữa.

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

171
00:09:13,840 --> 00:09:15,260
>> Hiện chúng tôi đi.

172
00:09:15,260 --> 00:09:18,030
Vì vậy, vòng tròn của chúng tôi ở đây là một
tối hơn rất nhiều, bởi vì chúng tôi

173
00:09:18,030 --> 00:09:20,720
có bảy vòng, một
trên đầu khác.

174
00:09:20,720 --> 00:09:25,425
Chúng tôi vừa tạo ra bảy vòng, một
từng cho từng yếu tố dữ liệu.

175
00:09:25,425 --> 00:09:28,860
Nhưng có một điều quan trọng đã xảy ra
với đoạn này ngay tại đây.

176
00:09:28,860 --> 00:09:31,030
>> Đó là những dữ liệu đã bị ràng buộc.

177
00:09:31,030 --> 00:09:33,440
Vì vậy, mỗi một đơn của
những yếu tố dữ liệu,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, là ràng buộc
một vòng tròn đặc biệt.

179
00:09:38,830 --> 00:09:40,960
Vì vậy, những điều này không chỉ tạo ra
một loạt các vòng tròn

180
00:09:40,960 --> 00:09:43,420
nhưng quan hệ hai thứ với nhau.

181
00:09:43,420 --> 00:09:48,740
>> Và trong tương lai, bởi vì chúng tôi tạo ra
những vòng tròn với chức năng D3 này,

182
00:09:48,740 --> 00:09:52,430
nếu tôi cung cấp cho bạn một vòng tròn, bạn có thể
cung cấp cho tôi những dữ liệu liên kết với nó.

183
00:09:52,430 --> 00:09:53,280
Vì vậy, chúng tôi có thể yêu cầu D3.

184
00:09:53,280 --> 00:09:54,840
Hey, D3, tôi có vòng tròn này.

185
00:09:54,840 --> 00:09:57,350
Các dữ liệu mà các vòng tròn có những gì?

186
00:09:57,350 --> 00:10:01,290
Và D3 sẽ cho chúng ta 10 hoặc 45 hoặc 105.

187
00:10:01,290 --> 00:10:02,380
>> Những điều này đang bị ràng buộc.

188
00:10:02,380 --> 00:10:04,490
Đó là một khái niệm rất, rất cơ bản.

189
00:10:04,490 --> 00:10:06,070
Hãy nhìn vào đó.

190
00:10:06,070 --> 00:10:12,210
>> Vì vậy, cách chúng ta muốn hỏi D3-- vậy
này là không thích hợp cho việc này,

191
00:10:12,210 --> 00:10:16,620
nhưng chỉ tin tưởng tôi về nó.

192
00:10:16,620 --> 00:10:17,620
Đây là cách chúng tôi yêu cầu D3.

193
00:10:17,620 --> 00:10:21,312
Hey, D3, cho tôi là người đầu tiên
vòng tròn mà bạn có thể tìm thấy.

194
00:10:21,312 --> 00:10:23,580
Hãy cho tôi những vòng tròn đầu tiên, bạn có thể tìm thấy.

195
00:10:23,580 --> 00:10:29,660
Và sau đó chúng ta có thể hỏi D3, có chuyện gì
các dữ liệu trên đó, như thế này, 10.

196
00:10:29,660 --> 00:10:33,380
>> Vì vậy, chúng tôi chỉ cần hỏi D3, tìm thấy tôi
vòng tròn đầu tiên, bạn có thể tìm thấy.

197
00:10:33,380 --> 00:10:34,400
Dữ liệu của nó là gì?

198
00:10:34,400 --> 00:10:36,650
10, đó thực sự của chúng tôi là
phần tử dữ liệu đầu tiên.

199
00:10:36,650 --> 00:10:42,150
Chúng tôi có thể yêu cầu nó, hey, D3,
tìm thấy chúng tôi vòng tròn thứ ba của chúng tôi.

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

201
00:10:44,450 --> 00:10:45,740
Tại sao điều này là thực sự quan trọng?

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

203
00:10:49,790 --> 00:10:52,250
>> Vì vậy, ngay ở đây, tôi đã đề cập
rằng chúng ta có thể sử dụng chức năng này.

204
00:10:52,250 --> 00:10:54,910
Và tôi đã đề cập đó là
một điều rất mạnh mẽ.

205
00:10:54,910 --> 00:11:03,070
Vì vậy, không chỉ có thể chức năng của chúng tôi làm những việc
như làm một số tính toán, ví dụ,

206
00:11:03,070 --> 00:11:09,170
trả về một số ngẫu nhiên, nó có thể
cũng làm việc dựa trên dữ liệu.

207
00:11:09,170 --> 00:11:11,550
Đây là những gì dữ liệu hướng các tài liệu có ý nghĩa.

208
00:11:11,550 --> 00:11:13,750
Đó là những gì D3 là viết tắt của.

209
00:11:13,750 --> 00:11:17,800
>> Vì vậy, đây x postition-- thay
chỉ nói rằng, tất cả các vòng tròn,

210
00:11:17,800 --> 00:11:21,735
có được vị trí x 200, chúng tôi
có thể cung cấp cho nó một chức năng.

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

212
00:11:26,140 --> 00:11:30,140
Và ở đây, chúng ta có thể làm một số tính toán.

213
00:11:30,140 --> 00:11:33,710
và d ở đây đứng tại chỗ cho các dữ liệu.

214
00:11:33,710 --> 00:11:36,120
Vì vậy, mỗi khi chúng tôi có
một vòng tròn, về cơ bản,

215
00:11:36,120 --> 00:11:37,750
D3 sẽ tạo ra những vòng tròn bảy.

216
00:11:37,750 --> 00:11:38,500
Và sau đó cho mỗi

217
00:11:38,500 --> 00:11:41,920
>> hình tròn, nó sẽ đi, hey,
circle1 vị trí x của bạn là gì.

218
00:11:41,920 --> 00:11:45,210
Trước đây, chúng tôi đã
luôn luôn trả lời 200.

219
00:11:45,210 --> 00:11:48,630
Nhưng bây giờ, mỗi khi D3 hỏi
chúng tôi vị trí x của bạn là gì,

220
00:11:48,630 --> 00:11:51,790
nó sẽ cung cấp cho chúng tôi có us--
vòng tròn đó, vì vậy chúng tôi có dữ liệu.

221
00:11:51,790 --> 00:11:55,290
Nó sẽ cung cấp cho chúng ta những dữ liệu và nói,
làm những gì bạn muốn trình bày là,

222
00:11:55,290 --> 00:11:57,120
dựa trên dữ liệu đó.

223
00:11:57,120 --> 00:11:59,590
>> Hãy chỉ trả lại các dữ liệu thực tế.

224
00:11:59,590 --> 00:12:04,910
Vì vậy, nếu chúng ta chạy này, điều này cho
dữ liệu chúng tôi định hướng các tài liệu.

225
00:12:04,910 --> 00:12:08,040
Những vòng tròn dựa
trong mối quan hệ position--

226
00:12:08,040 --> 00:12:11,120
họ căn cứ như là một chức năng của dữ liệu.

227
00:12:11,120 --> 00:12:13,100
>> Vì vậy, đối với các vòng tròn đầu tiên,
D3 đặt một vòng tròn.

228
00:12:13,100 --> 00:12:16,770
Và sau đó D3 đòi hỏi chúng ta, những gì làm
bạn muốn trình bày được.

229
00:12:16,770 --> 00:12:19,620
Và chúng ta chỉ nói rằng, bất cứ dữ liệu được.

230
00:12:19,620 --> 00:12:21,185
Hãy giải trình 10.

231
00:12:21,185 --> 00:12:26,320
>> Sau đó nó sẽ hỏi, những gì bạn muốn
Tờ trình được cho vòng tròn thứ hai.

232
00:12:26,320 --> 00:12:27,270
Và chúng tôi trả lời, 45.

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

234
00:12:30,000 --> 00:12:32,230
Và chúng ta, tất nhiên, có thể
thực hiện một số tính toán ở đây.

235
00:12:32,230 --> 00:12:35,510
Tôi thấy rằng những vòng tròn
là loại squished lên.

236
00:12:35,510 --> 00:12:38,965
>> Vì vậy, nhân nó bằng 3, nhân dữ liệu bằng 3.

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

238
00:12:41,870 --> 00:12:43,840
Vòng tròn của chúng tôi chỉ cần được mở rộng ra.

239
00:12:43,840 --> 00:12:46,730
Giá trị của chúng tôi đã tăng gấp ba lần.

240
00:12:46,730 --> 00:12:51,010
>> Các vòng tròn thực sự trên các cạnh,
vì vậy chúng ta có thể loại bù đắp nó.

241
00:12:51,010 --> 00:12:53,632
Hãy nói rằng, bằng 20.

242
00:12:53,632 --> 00:12:56,070
Ở đây bạn đi.

243
00:12:56,070 --> 00:12:57,590
>> Đây là một hình dung dữ liệu.

244
00:12:57,590 --> 00:13:01,767
Đó là một trong rất cơ bản, nhưng điều này
cung cấp cho chúng tôi một số cái nhìn sâu sắc vào dữ liệu của chúng tôi.

245
00:13:01,767 --> 00:13:04,600
Nó cho chúng ta biết rằng, ví dụ, chúng tôi
có một cụm nhỏ của yếu tố.

246
00:13:04,600 --> 00:13:06,340
Và chúng tôi có một outlier lớn ở đây.

247
00:13:06,340 --> 00:13:10,830
Điều này mang lại cho chúng tôi một số thông tin
về phân phối.

248
00:13:10,830 --> 00:13:20,830
>> Nếu chúng ta, ví dụ, để thay đổi
các dữ liệu đến 150 ở đây và làm mới,

249
00:13:20,830 --> 00:13:22,630
visualization của chúng tôi là thay đổi.

250
00:13:22,630 --> 00:13:24,285
Tài liệu này là hướng dữ liệu.

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

252
00:13:32,640 --> 00:13:36,180
>> Vì vậy, tất nhiên, tất cả những yếu tố này,
tất cả các thuộc tính ở đây,

253
00:13:36,180 --> 00:13:38,430
chúng ta có thể sử dụng một chức năng, không
chỉ số, không chỉ

254
00:13:38,430 --> 00:13:39,900
x và vị trí y.

255
00:13:39,900 --> 00:13:42,120
Vì vậy, chúng ta có thể sử dụng một chức năng cho màu sắc.

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

257
00:13:45,260 --> 00:13:46,360
Vì vậy, chúng tôi sẽ làm như vậy.

258
00:13:46,360 --> 00:13:49,360
Chúng tôi sẽ cung cấp cho nó một chức năng.

259
00:13:49,360 --> 00:13:52,320
>> Và chúng ta hãy nói, chúng ta có thể có
điều kiện trong hàm của chúng ta.

260
00:13:52,320 --> 00:13:54,770
Chức năng này có thể được
hàng trăm hàng dài.

261
00:13:54,770 --> 00:13:57,150
Nó có thể làm những việc rất, rất phức tạp.

262
00:13:57,150 --> 00:13:59,080
>> Vì vậy, chúng ta hãy đặt một tuyên bố nếu đây.

263
00:13:59,080 --> 00:14:03,420
Hãy nói rằng, nếu dữ liệu của chúng tôi là ít
50, đó là một số ngưỡng

264
00:14:03,420 --> 00:14:05,817
mà chúng tôi quan tâm
ở cho một số lý do.

265
00:14:05,817 --> 00:14:06,650
Hãy làm cho nó màu xanh lá cây.

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

267
00:14:09,830 --> 00:14:15,320
Nếu không, chúng ta hãy làm cho nó màu đỏ.

268
00:14:15,320 --> 00:14:16,110
Làm thế nào vậy?

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
>> Vì vậy, trực quan dữ liệu của chúng tôi được bắt đầu
để truyền đạt thông tin thú vị hơn

272
00:14:24,860 --> 00:14:26,727
trên nhiều kênh.

273
00:14:26,727 --> 00:14:28,560
Vì vậy, bây giờ chúng ta biết một chút
về phân phối.

274
00:14:28,560 --> 00:14:31,768
Và chúng ta biết rằng có một số loại
cắt ở 50 mà chúng tôi quan tâm.

275
00:14:31,768 --> 00:14:35,630
Chúng tôi biết rằng có hai điểm dữ liệu
dưới ngưỡng đó và hầu hết trong số họ

276
00:14:35,630 --> 00:14:36,130
trên.

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

278
00:14:41,510 --> 00:14:46,160
>> Vì vậy, như một bước cuối cùng, dữ liệu này ở đây,
nó rất hiếm khi thấy điều này như thế.

279
00:14:46,160 --> 00:14:52,610
Vì vậy, chúng ta hãy di chuyển nó ra một biến
bởi vì đó là sạch hơn, như thế này.

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

281
00:15:02,980 --> 00:15:05,197
Và sau đó chúng tôi sử dụng biến ở đây.

282
00:15:05,197 --> 00:15:06,280
Đó là điều chính xác.

283
00:15:06,280 --> 00:15:07,280
Nó chỉ là một chút bụi.

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

285
00:15:25,300 --> 00:15:35,300
>> Tiếp theo, Act III, Scales--
Vì vậy, một vấn đề ngay

286
00:15:35,300 --> 00:15:38,920
ở đây là, nếu chúng ta thay đổi của chúng tôi
dữ liệu trong 200 value-- này

287
00:15:38,920 --> 00:15:41,685
nếu chúng ta thay đổi nó để 400
hoặc một cái gì đó và làm mới,

288
00:15:41,685 --> 00:15:44,540
sau đó giá trị này chỉ cần đi offscreen.

289
00:15:44,540 --> 00:15:49,040
Vì vậy, logic của chúng tôi ngay tại đây
làm thế nào chúng ta làm lần 3

290
00:15:49,040 --> 00:15:52,570
và 20, để truyền bá nó ra và sau đó
bù lại nó một chút thực sự là phiền phức.

291
00:15:52,570 --> 00:15:54,150
>> Làm những con số có ý nghĩa gì?

292
00:15:54,150 --> 00:15:55,400
Họ chỉ cứng mã hoá đó.

293
00:15:55,400 --> 00:15:58,830
Và chúng tôi rất nhiều ràng buộc với các dữ liệu.

294
00:15:58,830 --> 00:16:00,550
Chúng tôi muốn có một tài liệu hướng dữ liệu.

295
00:16:00,550 --> 00:16:05,460
Chúng tôi muốn có một tài liệu rất linh hoạt,
rằng dữ liệu nhất định, thích nghi với nó

296
00:16:05,460 --> 00:16:07,900
và đại diện cho nó.

297
00:16:07,900 --> 00:16:11,330
>> , Những gì chúng ta cần là về cơ bản chúng tôi
có phạm vi này của con số 10.

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

299
00:16:12,640 --> 00:16:17,630
Và chúng tôi muốn bản đồ đó ra vào
chiều rộng, chiều rộng đầy đủ ở đây.

300
00:16:17,630 --> 00:16:20,620
Vì vậy, chúng tôi luôn có đủ các
số đi 0-100.

301
00:16:20,620 --> 00:16:24,980
Và chúng tôi có cơ sở này tôi đi
20-700, trong trường hợp này.

302
00:16:24,980 --> 00:16:26,515
>> Chúng tôi loại muốn bản đồ đó vào.

303
00:16:26,515 --> 00:16:30,002
Chúng tôi muốn quy mô mà lên và
sau đó bù đắp cho nó một chút.

304
00:16:30,002 --> 00:16:33,165
Nó chỉ ra rằng có những D3.

305
00:16:33,165 --> 00:16:34,220
Nó được gọi là quy mô.

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

307
00:16:37,410 --> 00:16:38,250
Vì vậy, hãy sử dụng nó.

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

309
00:16:46,300 --> 00:16:49,670
>> Cách mà works-- tôi sẽ
gõ này và sau đó giải thích nó.

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

311
00:17:01,530 --> 00:17:02,450
Đây là một quy mô.

312
00:17:02,450 --> 00:17:08,670
Những gì nó sẽ làm được, nó sẽ vạch ra
giá trị 1-200 vào 20-600.

313
00:17:08,670 --> 00:17:10,990
Chúng tôi có thể kiểm tra xem.

314
00:17:10,990 --> 00:17:13,329
Chúng ta có thể thấy rằng ở đây.

315
00:17:13,329 --> 00:17:21,704
>> Vì vậy, nếu tôi ăn nó 1-- một thời điểm.

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

317
00:17:47,764 --> 00:17:48,555
Hãy cho tôi một giây.

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

319
00:17:53,680 --> 00:17:55,080
Tôi phải gõ sai nó.

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

321
00:18:15,320 --> 00:18:15,990
Có bạn đi.

322
00:18:15,990 --> 00:18:17,930
Tôi xin lỗi về điều đó.

323
00:18:17,930 --> 00:18:22,050
>> Vì vậy, những gì một quy mô sẽ làm
được, nó sẽ mất một giá trị

324
00:18:22,050 --> 00:18:24,930
và sau đó chuyển đổi đó,
mở rộng mà ra, vì vậy nó

325
00:18:24,930 --> 00:18:27,320
điền đầy đủ bạn đang xin.

326
00:18:27,320 --> 00:18:32,910
Vì vậy, trong trường hợp này, nếu chúng ta cung cấp cho nó một,
nó sẽ ra bản đồ đó lên 20.

327
00:18:32,910 --> 00:18:37,750
Và nếu chúng ta cung cấp cho nó 200, đó là
đi đến bản đồ đó vào 600.

328
00:18:37,750 --> 00:18:40,460
Và ở đâu đó ở giữa,
nếu chúng tôi nhận được 100, đó là

329
00:18:40,460 --> 00:18:44,610
đi đến một nơi nào đó
ở giữa 20 và 600.

330
00:18:44,610 --> 00:18:51,480
>> Và tất nhiên, bây giờ điều này là những gì
chúng ta cần phải loại bỏ những mã hoá cứng

331
00:18:51,480 --> 00:18:53,402
điều chúng ta có quyền đó.

332
00:18:53,402 --> 00:18:55,950
Vì vậy, những gì chúng tôi muốn làm là
mất dữ liệu mà chúng tôi

333
00:18:55,950 --> 00:19:00,950
đưa ra, rằng dữ liệu cá nhân
phần tử, và vượt qua nó để mở rộng quy mô đầu tiên.

334
00:19:00,950 --> 00:19:02,635
Vì vậy, quy mô sẽ có quy mô nó lên.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- Oh, chúng tôi có một lỗi nhỏ ở đây.

337
00:19:48,880 --> 00:19:50,120
Chúng tôi đang thiếu dữ liệu.

338
00:19:50,120 --> 00:19:51,290
Có bạn đi.

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

340
00:19:58,550 --> 00:19:59,550
Và đó mở rộng nó ra.

341
00:19:59,550 --> 00:20:01,383
>> Điều đó cho chúng ta cùng
Kết quả chúng ta có trước,

342
00:20:01,383 --> 00:20:04,030
nhưng thay vì có những
cứng mã hoá hạn chế.

343
00:20:04,030 --> 00:20:07,790
Và nếu kích thước của chúng tôi
thay đổi vải, ví dụ,

344
00:20:07,790 --> 00:20:11,790
nếu chúng ta muốn có hơn này
400 pixel và nó squishes ra,

345
00:20:11,790 --> 00:20:15,440
chúng ta có thể có nó over--
chúng ta có thể mở rộng nó, hoặc chúng tôi

346
00:20:15,440 --> 00:20:21,890
có thể giảm lề trái này để
một cái gì đó ít hơn hoặc nhiều hơn so với 20.

347
00:20:21,890 --> 00:20:25,470
Những con số, những khó mã hoá
số doanh nghiệp có ý nghĩa đối với chúng tôi.

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

349
00:20:28,110 --> 00:20:30,520
>> Và chúng ta có thể làm nhiều hơn
điều thú vị là tốt.

350
00:20:30,520 --> 00:20:35,990
Vì vậy, thay vì có một tuyến tính
quy mô, chúng ta có thể muốn ghi lại một quy mô.

351
00:20:35,990 --> 00:20:37,840
Và đó sẽ cung cấp cho chúng ta một thang logarit.

352
00:20:37,840 --> 00:20:41,269
>> Vì vậy, hiện nay quy mô của chúng tôi, thay vì
chỉ mở rộng ra phạm vi đó,

353
00:20:41,269 --> 00:20:42,810
nó làm những việc phức tạp hơn.

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

355
00:20:48,790 --> 00:20:53,790
Thay vì có nhiều khó khăn này
mã hóa, và thay vì có mà 600,

356
00:20:53,790 --> 00:20:58,465
chúng ta có thể muốn chỉ sử dụng chiều rộng,
do đó, từ 20 đến chiều rộng trừ đi 40,

357
00:20:58,465 --> 00:21:02,392
2 lần mức ở phía bên kia.

358
00:21:02,392 --> 00:21:05,350
Và điều này làm cho rất nhiều ý nghĩa hơn
ai đó có thể nhìn vào các mã.

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

360
00:21:08,080 --> 00:21:11,850
>> Điều thú vị là, các thang được
rất, rất tinh vi là tốt.

361
00:21:11,850 --> 00:21:13,350
Họ làm rất nhiều điều thú vị.

362
00:21:13,350 --> 00:21:17,620
Vì vậy, quy mô không nhất thiết phải có
để hoạt động giống với các con số.

363
00:21:17,620 --> 00:21:18,955
Hãy làm một thang màu.

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

365
00:21:23,120 --> 00:21:26,120
>> Vì vậy, phạm vi của chúng tôi có thể be--
miền của chúng tôi là 1-200.

366
00:21:26,120 --> 00:21:28,220
Đó là điều đầu vào.

367
00:21:28,220 --> 00:21:33,793
Nhưng chúng ta có thể muốn để bản đồ từ
màu xanh lá cây sang màu đỏ, cho ví dụ.

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

369
00:21:39,710 --> 00:21:42,910
Và bây giờ, nếu chúng ta vượt qua nó 1,
chúng ta sẽ có được màu xanh lá cây.

370
00:21:42,910 --> 00:21:45,110
Nếu chúng ta cho nó 200, chúng tôi sẽ có được màu đỏ.

371
00:21:45,110 --> 00:21:49,480
Và nếu chúng ta vượt qua nó một cái gì đó ở giữa,
nó sẽ là một sự pha trộn đó,

372
00:21:49,480 --> 00:21:52,520
ở đâu đó trên gradient
giữa màu xanh lá cây và đỏ.

373
00:21:52,520 --> 00:21:55,210
>> Và thay vì phải
loại logic clunky

374
00:21:55,210 --> 00:21:58,550
chúng tôi có ở đây với
điều kiện phải có,

375
00:21:58,550 --> 00:22:03,250
chúng ta có thể có một something--
quy mô tuyến tính giữa những người.

376
00:22:03,250 --> 00:22:07,100
Vì vậy, chúng tôi muốn sử dụng quy mô chúng ta chỉ
tạo ra, mà chúng ta gọi là màu sắc.

377
00:22:07,100 --> 00:22:09,060
Và chúng tôi muốn cung cấp cho nó d, mà
là phần tử dữ liệu của chúng tôi.

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

379
00:22:14,250 --> 00:22:15,060
Và ở đó chúng ta đi.

380
00:22:15,060 --> 00:22:18,070
Chúng tôi có một thang màu.

381
00:22:18,070 --> 00:22:18,940
>> Vì vậy, đây là bản đồ.

382
00:22:18,940 --> 00:22:20,960
Vì vậy, bên trái là hoàn toàn màu xanh lá cây.

383
00:22:20,960 --> 00:22:22,560
Bên phải là hoàn toàn màu đỏ.

384
00:22:22,560 --> 00:22:24,828
Và tất cả mọi thứ ở giữa
là một chức năng của d.

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

386
00:22:33,369 --> 00:22:35,160
Chúng tôi có một thú vị
visualizations đây.

387
00:22:35,160 --> 00:22:36,952
Nhưng dữ liệu của chúng tôi là loại nhàm chán.

388
00:22:36,952 --> 00:22:39,410
Hãy xem những gì chúng tôi có thể làm gì nếu
chúng tôi đã có dữ liệu thú vị hơn.

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

390
00:22:44,420 --> 00:22:50,500
>> Act IV, Làm việc với
Data-- điều đầu tiên

391
00:22:50,500 --> 00:22:53,560
chúng tôi sẽ muốn làm gì để làm cho chúng tôi
visualization thú vị hơn

392
00:22:53,560 --> 00:22:56,140
là để di chuyển dữ liệu ở một nơi khác.

393
00:22:56,140 --> 00:22:58,310
Nó rất cồng kềnh để có
các dữ liệu được mã hóa cứng ở đây.

394
00:22:58,310 --> 00:23:01,220
Và nói chung, chúng tôi sẽ yêu cầu
người khác cho dữ liệu.

395
00:23:01,220 --> 00:23:05,400
Chúng tôi sẽ có thể yêu cầu chính phủ,
Cục điều tra dân số, dữ liệu của bạn là gì

396
00:23:05,400 --> 00:23:10,170
và sau đó âm mưu đó hoặc yêu cầu
một số thực thể của bên thứ ba đối với một số dữ liệu

397
00:23:10,170 --> 00:23:13,330
và sau đó xây dựng một
visualization trên đó.

398
00:23:13,330 --> 00:23:17,170
>> Vì vậy, điều đầu tiên chúng tôi muốn làm
là di chuyển mà đến một nơi khác.

399
00:23:17,170 --> 00:23:24,130
Vì vậy, tôi sẽ tạo ra một
nộp ở đây được gọi là data.json.

400
00:23:24,130 --> 00:23:25,600
JSON là định dạng dữ liệu.

401
00:23:25,600 --> 00:23:29,210
Bạn không cần phải biết nhiều về điều đó.

402
00:23:29,210 --> 00:23:33,210
Và chúng ta sẽ sao chép
ít dữ liệu chúng tôi có ở đó,

403
00:23:33,210 --> 00:23:40,330
dán nó vào có đúng nguyên văn, đi
lại mã trực quan của chúng tôi

404
00:23:40,330 --> 00:23:45,362
ở đây, và sử dụng chức năng này ngay tại đây.

405
00:23:45,362 --> 00:23:46,820
Bạn không cần phải biết các chi tiết.

406
00:23:46,820 --> 00:23:49,800
Nhưng điều này sẽ làm là,
nó sẽ tìm tập tin đó,

407
00:23:49,800 --> 00:23:51,780
lấy nó, và gửi lại cho chúng tôi.

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

409
00:24:11,660 --> 00:24:15,220
Vì vậy, điều này không là, nó đi
và nhận được các tập tin data.json.

410
00:24:15,220 --> 00:24:18,570
Và sau đó tất cả các mã số đó là
thụt inside-- cơ bản,

411
00:24:18,570 --> 00:24:21,800
tất cả các mã có there-- sẽ
chỉ chạy khi chúng tôi nhận được dữ liệu trở lại.

412
00:24:21,800 --> 00:24:25,760
Và sau đó nó sẽ chạy mà
mã với các dữ liệu đã có.

413
00:24:25,760 --> 00:24:28,870
Tuyệt vời, chúng tôi có một
hình dung rằng các truy vấn

414
00:24:28,870 --> 00:24:31,390
cho một số mã ở đâu đó
khác, mà thường là

415
00:24:31,390 --> 00:24:36,110
nơi nó truy vấn một số dữ liệu từ
ở một nơi khác, mà thường là

416
00:24:36,110 --> 00:24:38,656
cách trực quan làm việc.

417
00:24:38,656 --> 00:24:41,400
>> Nhưng tôi muốn quay trở lại các dữ liệu.

418
00:24:41,400 --> 00:24:48,030
Vì vậy, các dữ liệu cơ bản trong D3-- D3
tiêu thụ dữ liệu đó là một danh sách những thứ.

419
00:24:48,030 --> 00:24:53,000
D3 hy vọng các dữ liệu chỉ là một danh sách
của sự vật, một mảng của sự vật.

420
00:24:53,000 --> 00:24:58,780
Nó không có vấn đề gì với những điều
được, miễn là nó là một mảng của họ.

421
00:24:58,780 --> 00:25:02,460
>> Vì vậy, ở đây, ví dụ, chúng ta có thể của
Tất nhiên đã nổi giá trị điểm.

422
00:25:02,460 --> 00:25:04,830
Chúng ta có thể có tiêu cực.

423
00:25:04,830 --> 00:25:09,400
D3 không quan tâm, miễn
vì nó là một danh sách những thứ.

424
00:25:09,400 --> 00:25:13,270
>> Điều thú vị là chúng tôi
có thể có, chúng ta cũng có thể

425
00:25:13,270 --> 00:25:19,410
có một danh sách các chuỗi như thế.

426
00:25:19,410 --> 00:25:25,440
Vì vậy, đây là những tiêu đề Crimson
Tôi nhặt một vài ngày trước.

427
00:25:25,440 --> 00:25:29,220
Và có lẽ bạn có thể tìm thấy một số thú vị
điều về những một tiêu đề.

428
00:25:29,220 --> 00:25:30,970
>> Vì vậy, một lần nữa, đây là một danh sách những thứ.

429
00:25:30,970 --> 00:25:32,360
D3 không quan tâm.

430
00:25:32,360 --> 00:25:35,572
Những xảy ra được một chuỗi.

431
00:25:35,572 --> 00:25:36,530
Chúng tôi đã thay đổi dữ liệu của chúng tôi.

432
00:25:36,530 --> 00:25:38,210
>> Hãy quay trở lại hình dung của chúng tôi.

433
00:25:38,210 --> 00:25:42,495
Bây giờ, sự hình dung của chúng tôi hy vọng
đầu vào là số.

434
00:25:42,495 --> 00:25:44,370
Vì vậy, chúng ta sẽ có
để thực hiện một vài thay đổi.

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

436
00:25:47,180 --> 00:25:52,180
Vì vậy, ví dụ, trước hết, có lẽ
chúng tôi muốn đặt những vòng tròn này cùng

437
00:25:52,180 --> 00:25:56,870
bởi chiều dài của tiêu đề,
số ký tự trong tiêu đề.

438
00:25:56,870 --> 00:26:03,600
>> Vì vậy, những gì chúng tôi sẽ làm is-- mỗi lần chúng tôi
hàm được gọi với một chuỗi,

439
00:26:03,600 --> 00:26:09,095
chúng ta sẽ thấy nó dài Và
sau đó qua đó để quy mô.

440
00:26:09,095 --> 00:26:11,550
Các màu sắc, tôi sẽ trở lại
mà để màu xanh thép.

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

442
00:26:19,060 --> 00:26:20,420
Và ở đó chúng ta đi.

443
00:26:20,420 --> 00:26:23,190
Chúng tôi có một hình dung
tiêu đề của Crimson.

444
00:26:23,190 --> 00:26:25,500
>> Quy mô của chúng tôi là một off bit.

445
00:26:25,500 --> 00:26:29,680
Hãy giả định rằng lâu nhất
Tiêu đề là dài 100 ký tự,

446
00:26:29,680 --> 00:26:32,244
vì vậy mà kéo dài ra một chút.

447
00:26:32,244 --> 00:26:33,410
Và chúng ta có một hình dung.

448
00:26:33,410 --> 00:26:36,710
Vì vậy, nó dường như hầu hết các tiêu đề
là khá gần nhau,

449
00:26:36,710 --> 00:26:38,750
về dòng nhân vật.

450
00:26:38,750 --> 00:26:41,200
Nhưng ai ở đó thực sự đứng ra.

451
00:26:41,200 --> 00:26:46,660
>> Chúng tôi có thể xây dựng một số công cụ
để khám phá mà hơn.

452
00:26:46,660 --> 00:26:50,710
Nhưng khi tôi đã làm việc này, tôi đã
tò mò liệu trong tập dữ liệu này,

453
00:26:50,710 --> 00:26:53,880
tiêu đề với một dấu hai chấm
trong số họ sẽ được lâu hơn.

454
00:26:53,880 --> 00:26:55,770
Tôi giả định rằng họ sẽ.

455
00:26:55,770 --> 00:26:56,660
>> Vì vậy, chúng ta hãy tìm hiểu.

456
00:26:56,660 --> 00:27:00,650
Hãy sử dụng các màu sắc
kênh như chúng ta đã làm trước đây,

457
00:27:00,650 --> 00:27:04,540
để mã hóa một số về việc liệu
có một tràng hoặc không có.

458
00:27:04,540 --> 00:27:07,220
Vì vậy, chúng tôi sẽ sử dụng một điều kiện nữa.

459
00:27:07,220 --> 00:27:09,350
Bạn không cần phải biết
các chi tiết này,

460
00:27:09,350 --> 00:27:14,260
nhưng đây là cách chúng tôi kiểm tra một
chuỗi cho một nhân vật đặc biệt

461
00:27:14,260 --> 00:27:16,355
trong JavaScript, một lần nữa, không có liên quan.

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

463
00:27:18,910 --> 00:27:23,270
>> Nhưng nếu chúng ta không tìm thấy một
ruột kết, chúng tôi sẽ trở lại màu xanh lá cây.

464
00:27:23,270 --> 00:27:26,100
Và nếu chúng ta làm, chúng tôi sẽ trở lại màu đỏ.

465
00:27:26,100 --> 00:27:29,010
Vì vậy, một lần nữa, rút ​​tít mà
đã một tràng sẽ có màu đỏ.

466
00:27:29,010 --> 00:27:34,980
Đây là những gì này means-- đẹp.

467
00:27:34,980 --> 00:27:38,040
>> Vì vậy, có vẻ như tôi
Giả thuyết được va đập.

468
00:27:38,040 --> 00:27:39,360
Có người chỉ có hai.

469
00:27:39,360 --> 00:27:42,380
Chúng tôi chỉ có sáu điểm dữ liệu
và chỉ có hai người đã có dấu hai chấm.

470
00:27:42,380 --> 00:27:45,510
Nhưng có vẻ như nhiều hơn một chút
vào cuối thấp hơn, trong thực tế.

471
00:27:45,510 --> 00:27:47,830
Headlines với dấu hai chấm có vẻ
để thường ngắn hơn,

472
00:27:47,830 --> 00:27:52,370
ít nhất là trong dữ liệu của chúng tôi set-- thú vị.

473
00:27:52,370 --> 00:27:55,830
>> Hãy quay trở lại đó để
xanh thép và sau đó xem

474
00:27:55,830 --> 00:28:00,601
những gì chúng ta có thể làm cho ngay cả với
dữ liệu thú vị hơn.

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

476
00:28:04,370 --> 00:28:09,070
Vì vậy, một lần nữa, tôi đã đề cập rằng
dữ liệu trong D3 là một danh sách những thứ.

477
00:28:09,070 --> 00:28:11,080
Chúng tôi đã nhìn thấy con số của nhiều loại.

478
00:28:11,080 --> 00:28:12,810
Chúng tôi đã nhìn thấy chuỗi.

479
00:28:12,810 --> 00:28:15,700
Nhưng điều này cũng có thể là đối tượng.

480
00:28:15,700 --> 00:28:20,080
>> Họ có thể là những thứ phức tạp
bao gồm rất nhiều thứ.

481
00:28:20,080 --> 00:28:24,510
Để nói rằng rõ ràng hơn,
trong hầu hết các trường hợp, chúng tôi

482
00:28:24,510 --> 00:28:28,384
muốn xây dựng mỗi điểm dữ liệu như
phức tạp hơn so với chỉ một giá trị.

483
00:28:28,384 --> 00:28:30,175
Nếu bạn tưởng tượng một
cơ sở dữ liệu về sinh viên,

484
00:28:30,175 --> 00:28:32,470
có thể là một sinh viên
tên, một thẻ sinh viên,

485
00:28:32,470 --> 00:28:36,370
và rất nhiều thứ liên quan
với một hồ sơ cụ thể,

486
00:28:36,370 --> 00:28:39,834
không chỉ là một chuỗi hoặc một số.

487
00:28:39,834 --> 00:28:40,750
Vì vậy, chúng ta hãy nhìn vào đó.

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

489
00:28:55,180 --> 00:28:56,760
>> Đây là một trong những dữ liệu đó được thiết lập.

490
00:28:56,760 --> 00:28:59,090
Đây là một tập hợp dữ liệu về động đất.

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

492
00:29:01,910 --> 00:29:08,430
Vì vậy, tất cả mọi thứ ở đây trên danh sách hoặc mảng của chúng tôi
thứ chứa nhiều điều bản thân.

493
00:29:08,430 --> 00:29:11,380
Vì vậy, mỗi điểm dữ liệu có một
độ lớn và phối hợp.

494
00:29:11,380 --> 00:29:13,425
Và tọa độ bản thân
chứa hai thứ.

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

496
00:29:15,960 --> 00:29:20,450
>> Vì vậy, mỗi ngày hiện nay là rất nhiều
phức tạp và rất nhiều chi tiết thú vị

497
00:29:20,450 --> 00:29:22,700
và chứa nhiều
thông tin thú vị.

498
00:29:22,700 --> 00:29:26,730
Hãy xem chúng tôi có thể xây dựng ra khỏi đó.

499
00:29:26,730 --> 00:29:36,130
Quay trở lại đây, một lần nữa, sử dụng
visualization vòng tròn biểu đồ của chúng tôi

500
00:29:36,130 --> 00:29:42,110
chúng tôi đã xây dựng, chúng ta hãy xem nếu chúng ta có thể xây dựng một
hình dung về phân phối độ

501
00:29:42,110 --> 00:29:43,305
trong tập dữ liệu của chúng tôi.

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

503
00:29:45,850 --> 00:29:48,660
>> Vì vậy, ở đây, đó là một khái niệm.

504
00:29:48,660 --> 00:29:51,920
Nhưng bây giờ, d chứa nhiều điều.

505
00:29:51,920 --> 00:29:54,780
d chứa nhiều thành phần dữ liệu.

506
00:29:54,780 --> 00:29:57,946
Vì vậy, chúng tôi nhận được trở lại d.

507
00:29:57,946 --> 00:29:59,670
D3 cho chúng ta d.

508
00:29:59,670 --> 00:30:06,080
Và chúng ta phản ứng bằng cách tìm độ lớn
của d và sau đó đi qua đó để quy mô.

509
00:30:06,080 --> 00:30:08,490
>> Và sau đó chúng ta cần phải thay đổi
quy mô của chúng tôi, tất nhiên.

510
00:30:08,490 --> 00:30:12,980
Vì vậy, chỉ cần làm độ lớn không
đi nhiều hơn 10.

511
00:30:12,980 --> 00:30:15,485
Trên thực tế, có bao giờ được
một trận động đất 10 độ richter.

512
00:30:15,485 --> 00:30:19,360
Nhưng đó là loại thượng của chúng tôi
kết thúc, phổ thượng của chúng tôi.

513
00:30:19,360 --> 00:30:20,240
>> Hãy làm mới.

514
00:30:20,240 --> 00:30:22,990
Nice, chúng tôi có một hình dung.

515
00:30:22,990 --> 00:30:25,490
Thật thú vị khi note-- vậy
có hai điểm dữ liệu

516
00:30:25,490 --> 00:30:29,010
là gần như chính xác trên đầu trang của mỗi
khác, xét về độ lớn.

517
00:30:29,010 --> 00:30:31,350
Bạn thấy điều này bằng các opacity chúng ta đang sử dụng.

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

519
00:30:40,810 --> 00:30:42,690
>> Chúng tôi có dữ liệu địa lý hiện nay.

520
00:30:42,690 --> 00:30:44,710
Chúng tôi có vĩ độ và kinh độ.

521
00:30:44,710 --> 00:30:47,549
Có lẽ chúng ta có thể làm một cái gì đó
rất nhiều thú vị hơn với điều đó.

522
00:30:47,549 --> 00:30:49,590
Hãy tìm một số chi tiết
cách thú vị để hình dung

523
00:30:49,590 --> 00:30:53,500
này phức tạp hơn
dữ liệu chúng ta có thể truy cập.

524
00:30:53,500 --> 00:31:04,950
>> Act V, Mapping-- cơ bản,
chúng tôi muốn đặt chúng trên bản đồ.

525
00:31:04,950 --> 00:31:07,690
Ý tôi là, đây là nơi này là đi.

526
00:31:07,690 --> 00:31:13,130
Chúng tôi muốn mã hóa các thông tin về
vị trí của các bài đọc trận động đất,

527
00:31:13,130 --> 00:31:16,350
cũng độ lớn của họ,
bởi vì chúng tôi có bây giờ.

528
00:31:16,350 --> 00:31:21,310
Chúng tôi hiểu làm thế nào để tiêu thụ
dữ liệu phức tạp hơn.

529
00:31:21,310 --> 00:31:26,200
>> Điều đầu tiên chúng tôi sẽ làm là
tạo ra một bản đồ, bản đồ nền.

530
00:31:26,200 --> 00:31:29,360
Tôi sẽ đi qua
này rất nhanh chóng.

531
00:31:29,360 --> 00:31:30,560
Đây là mã khéo léo.

532
00:31:30,560 --> 00:31:33,110
Đó là một trong những người khác
công thức nấu ăn bạn không thực sự

533
00:31:33,110 --> 00:31:35,690
có hiểu biết đầy đủ để bạn có thể sử dụng.

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

535
00:31:38,510 --> 00:31:39,740
Nhưng đây là code.

536
00:31:39,740 --> 00:31:43,580
Mã này đúng ở đây tạo ra một bản đồ.

537
00:31:43,580 --> 00:31:45,730
>> Chúng tôi sẽ không đi vào chi tiết.

538
00:31:45,730 --> 00:31:54,210
Nhưng bề ngoài, những gì nó làm là,
nó truy vấn tập us.json này, mà

539
00:31:54,210 --> 00:31:57,150
là một tập tin dữ liệu như
mà chúng ta có trước đây.

540
00:31:57,150 --> 00:31:59,150
Nó phức tạp hơn, tất nhiên.

541
00:31:59,150 --> 00:32:02,920
Nhưng trong trường hợp này, tất cả mọi thứ,
mỗi điểm dữ liệu là trạng thái này

542
00:32:02,920 --> 00:32:05,420
và có một danh sách các
vĩ độ và kinh độ

543
00:32:05,420 --> 00:32:10,500
xác định các đa giác,
mà hình thức, trạng thái đó.

544
00:32:10,500 --> 00:32:13,280
>> Vì vậy, những gì D3 sẽ làm tương tự
với những gì chúng tôi đã làm trước đây.

545
00:32:13,280 --> 00:32:18,140
Nó sẽ yêu cầu và
ràng buộc rằng một phần tử.

546
00:32:18,140 --> 00:32:20,890
Và có một chức năng mà
sẽ map yếu tố đó ra,

547
00:32:20,890 --> 00:32:23,410
dựa trên các vĩ độ và kinh độ.

548
00:32:23,410 --> 00:32:24,580
Bạn có thể đọc thêm về điều đó.

549
00:32:24,580 --> 00:32:27,385
Và tôi khuyên bạn nên nó.

550
00:32:27,385 --> 00:32:30,090
>> Có liên kết ở
cuối của mã này được đăng.

551
00:32:30,090 --> 00:32:31,570
Và mã là nhận xét.

552
00:32:31,570 --> 00:32:34,050
Trong đó là các liên kết để biết thêm về điều này.

553
00:32:34,050 --> 00:32:36,590
Tôi khuyên bạn nên nhìn nó lên.

554
00:32:36,590 --> 00:32:39,460
Nhưng những gì chúng tôi quan tâm là
chức năng chiếu này.

555
00:32:39,460 --> 00:32:41,210
Tôi muốn đi qua đó.

556
00:32:41,210 --> 00:32:43,522
>> Trước hết, hãy để tôi chỉ cho
bạn rằng, vâng, chúng ta có một bản đồ.

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

558
00:32:47,300 --> 00:32:49,970
Maps là mát mẻ.

559
00:32:49,970 --> 00:32:52,330
Vì vậy, chúng ta hãy xem xét điều này
hàm sản xuất.

560
00:32:52,330 --> 00:32:56,481
>> Chiếu là rất nhiều
như một quy mô, quy mô một lần nữa.

561
00:32:56,481 --> 00:32:59,210
Vì vậy, những gì sản xuất
chức năng chiếu này

562
00:32:59,210 --> 00:33:06,610
không có gì, chúng ta có thể vượt qua nó kinh độ
và latitudes-- trong trường hợp này,

563
00:33:06,610 --> 00:33:09,590
các giá trị ở đây là
lat-chờ đợi của tòa nhà

564
00:33:09,590 --> 00:33:13,990
chúng ta đang ngồi ở bên phải
now-- để chiếu.

565
00:33:13,990 --> 00:33:20,560
Và dự đoán sẽ chuyển đổi
đó vào x và y các giá trị pixel.

566
00:33:20,560 --> 00:33:23,300
>> Vì vậy, những gì được làm chiếu
rất giống với quy mô của chúng tôi.

567
00:33:23,300 --> 00:33:27,270
Nó lấy vĩ tuyến của chúng tôi và
kinh độ đại diện cho một thế giới toàn

568
00:33:27,270 --> 00:33:31,390
và co lại và định cỡ đó
xuống quảng trường mà chúng ta muốn,

569
00:33:31,390 --> 00:33:33,510
rằng chúng tôi đã cho nó.

570
00:33:33,510 --> 00:33:35,220
Trong trường hợp này, chúng tôi
đi qua những giá trị này.

571
00:33:35,220 --> 00:33:41,370
Và nó đem lại cho chúng ta, tốt, mà
trên màn hình của bạn có nghĩa là 640 pixels.

572
00:33:41,370 --> 00:33:46,250
Toàn bộ màn hình này là 700 pixels
rộng, vì vậy mà làm cho chúng tôi về đây,

573
00:33:46,250 --> 00:33:53,310
và 154 pixels, mà tôi sẽ
ước tính là khá nhiều ở đây.

574
00:33:53,310 --> 00:33:57,250
>> Vì vậy, tham gia những lat-chờ đợi, mà
đại diện cho một cái gì đó trên toàn thế giới

575
00:33:57,250 --> 00:34:02,850
và nứt và di chuyển xung quanh mà
để cho chúng ta giá trị x và y pixel,

576
00:34:02,850 --> 00:34:05,450
đây là điều đầu tiên đó là
thực hiện trong mã lập bản đồ này.

577
00:34:05,450 --> 00:34:07,920
Và sau đó phần còn lại của
đang tiêu thụ dữ liệu

578
00:34:07,920 --> 00:34:14,310
và sau đó ánh xạ những lat-chờ đợi
lên cái gì trên màn hình của bạn.

579
00:34:14,310 --> 00:34:18,380
>> Nhưng chúng ta sẽ sử dụng phép chiếu này
chức năng, vì thực ra

580
00:34:18,380 --> 00:34:20,270
chúng tôi có lat-chờ đợi chờ đợi là tốt.

581
00:34:20,270 --> 00:34:24,509
Nhìn lại dữ liệu của chúng tôi, chúng tôi có
vĩ độ và kinh độ

582
00:34:24,509 --> 00:34:25,425
cho mỗi quan sát.

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

584
00:34:28,131 --> 00:34:29,130
Vì vậy, hãy sử dụng chiếu.

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

586
00:34:33,250 --> 00:34:37,639
>> Vì vậy, nhìn vào triển lãm của chúng tôi,
chúng tôi muốn exposition-- của chúng tôi

587
00:34:37,639 --> 00:34:39,590
chúng ta có một vĩ độ và kinh độ.

588
00:34:39,590 --> 00:34:40,770
Nhưng chúng tôi muốn các giá trị pixel.

589
00:34:40,770 --> 00:34:43,510
Và hóa ra, chúng tôi có chính xác
những gì chúng ta want-- chiếu.

590
00:34:43,510 --> 00:34:46,239
Rất giống như chúng tôi đã
sử dụng quy mô ngay tại đây,

591
00:34:46,239 --> 00:34:52,075
nay chúng tôi sẽ sử dụng chiếu
và vượt qua nó tọa độ.

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

593
00:34:55,241 --> 00:34:56,949
Vì vậy, điều đầu tiên
chúng tôi đang doing-- vì vậy chúng tôi

594
00:34:56,949 --> 00:35:01,520
d nhận được, đó là một dữ liệu cá nhân
yếu tố của một trận động đất cá nhân

595
00:35:01,520 --> 00:35:02,370
đọc.

596
00:35:02,370 --> 00:35:04,640
Điều đầu tiên chúng tôi làm
là có được các tọa độ.

597
00:35:04,640 --> 00:35:06,150
Được rồi, chúng ta có tọa độ.

598
00:35:06,150 --> 00:35:09,160
>> Điều thứ hai chúng tôi làm là
qua đó để chiếu.

599
00:35:09,160 --> 00:35:13,440
Projection chuyển đổi những tọa độ
vào giá trị pixel, x và y.

600
00:35:13,440 --> 00:35:16,680
Và sau đó là điều cuối cùng chúng tôi
muốn làm là chỉ cần có được x,

601
00:35:16,680 --> 00:35:19,342
mà trường hợp này là một trong những đầu tiên.

602
00:35:19,342 --> 00:35:22,050
Đó là lần đầu tiên của hai điều
được trả về bởi chiếu.

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

604
00:35:27,840 --> 00:35:29,630
>> Chúng tôi sẽ làm tương tự cho y.

605
00:35:29,630 --> 00:35:34,960
Nhưng thay vào đó, chúng tôi sẽ trở lại
yếu tố thứ hai, các y.

606
00:35:34,960 --> 00:35:35,980
Hãy sẵn sàng để làm mới.

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

608
00:35:39,830 --> 00:35:46,450
Ooh, nhân vật phụ
here-- tốt đẹp, chúng ta có

609
00:35:46,450 --> 00:35:51,730
một tài liệu hướng dữ liệu đó là
che giấu tập tin JSON này của các đối tượng,

610
00:35:51,730 --> 00:35:57,560
vẽ bản đồ, và thay đổi
thuộc tính liên quan đến các dữ liệu

611
00:35:57,560 --> 00:35:59,600
để dự án đó trên bản đồ.

612
00:35:59,600 --> 00:36:00,840
Điều này thực sự thú vị.

613
00:36:00,840 --> 00:36:03,770
Điều này là mát mẻ.

614
00:36:03,770 --> 00:36:05,640
>> Hãy đưa nó lên một notch.

615
00:36:05,640 --> 00:36:08,795
Tôi có nghĩa là, chúng ta có hai mảnh
thông tin với tất cả các điểm dữ liệu.

616
00:36:08,795 --> 00:36:10,000
Ý tôi là, ba.

617
00:36:10,000 --> 00:36:12,540
Chúng tôi có tọa độ,
đó là một x và y.

618
00:36:12,540 --> 00:36:15,700
Và chúng tôi có độ lớn.

619
00:36:15,700 --> 00:36:17,420
>> Chúng tôi cần mã hóa cường độ bằng cách nào đó.

620
00:36:17,420 --> 00:36:18,920
Chúng tôi có rất nhiều kênh.

621
00:36:18,920 --> 00:36:20,370
Chúng tôi có thể sử dụng màu sắc.

622
00:36:20,370 --> 00:36:21,890
Chúng tôi có thể sử dụng bán kính.

623
00:36:21,890 --> 00:36:23,040
Chúng ta có thể sử dụng opacity.

624
00:36:23,040 --> 00:36:25,540
Chúng ta có thể sử dụng nhiều thứ trong mã.

625
00:36:25,540 --> 00:36:29,180
Bất kỳ của các thuộc tính và nhiều
hơn mà không được liệt kê ở đó,

626
00:36:29,180 --> 00:36:33,065
bởi vì họ không bắt buộc, chúng ta có thể
sử dụng để mã hóa dữ liệu này, các cơn đột quỵ

627
00:36:33,065 --> 00:36:35,670
và tất cả những điều tôi đã đề cập.

628
00:36:35,670 --> 00:36:36,690
>> Hãy làm bán kính.

629
00:36:36,690 --> 00:36:38,830
Tôi nghĩ rằng bán kính là trực quan nhất.

630
00:36:38,830 --> 00:36:46,210
Vì vậy, một lần nữa, chúng tôi sẽ thay thế cho mã hóa cứng
40 và thực hiện một số tính toán.

631
00:36:46,210 --> 00:36:48,810
Chúng tôi sẽ sử dụng quy mô yêu thích của chúng tôi một lần nữa.

632
00:36:48,810 --> 00:36:50,290
Và chúng tôi đang trong quá khứ d.

633
00:36:50,290 --> 00:36:55,850
Nhưng không phải vì chúng tôi muốn d độ lớn
d. d chỉ là các điểm dữ liệu.

634
00:36:55,850 --> 00:36:57,430
Chúng tôi sẽ vượt qua được mức độ quy mô.

635
00:36:57,430 --> 00:36:58,470
>> Hãy thử lại.

636
00:36:58,470 --> 00:37:00,230
Ooh, nó không hoạt động.

637
00:37:00,230 --> 00:37:02,940
Tại sao nó không làm việc?

638
00:37:02,940 --> 00:37:04,387
>> Vì vậy, hãy nhớ những gì quy mô nào.

639
00:37:04,387 --> 00:37:05,470
Hãy nhìn vào quy mô một lần nữa.

640
00:37:05,470 --> 00:37:10,800
Bản đồ quy mô 1-10 trên
đến 22-600, nhiều hơn hoặc ít hơn.

641
00:37:10,800 --> 00:37:12,030
600 là rất lớn.

642
00:37:12,030 --> 00:37:14,730
Đây là lý do tại sao chúng tôi đang nhận được điều này.

643
00:37:14,730 --> 00:37:18,420
>> Vì vậy, chúng tôi muốn thay đổi quy mô của chúng tôi
một cái gì đó hợp lý hơn.

644
00:37:18,420 --> 00:37:22,610
Hãy nói rằng, chúng tôi muốn 0-60.

645
00:37:22,610 --> 00:37:25,340
60 là lớn, nhưng 10 trận động đất
là cực kỳ hiếm.

646
00:37:25,340 --> 00:37:27,880
Trong thực tế, họ đã không bao giờ xảy ra.

647
00:37:27,880 --> 00:37:31,830
>> Vì vậy, điều này sẽ làm được, nó sẽ mất
độ lớn của chúng tôi mà đi 1-10

648
00:37:31,830 --> 00:37:34,490
và bản đồ nó vào để mở rộng nó ra.

649
00:37:34,490 --> 00:37:37,370
Và bản đồ này vào 0-60.

650
00:37:37,370 --> 00:37:38,840
Hãy làm mới.

651
00:37:38,840 --> 00:37:41,850
>> Nice, chúng tôi có một hình dung.

652
00:37:41,850 --> 00:37:42,500
Điều này là rất tốt.

653
00:37:42,500 --> 00:37:43,736
Đây là dữ liệu thực tế.

654
00:37:43,736 --> 00:37:46,360
Bạn sẽ nhận thấy, trong đồ chơi nhỏ của tôi
Ví dụ, các trận động đất lớn nhất

655
00:37:46,360 --> 00:37:49,417
là ngay trên đầu của chúng tôi.

656
00:37:49,417 --> 00:37:50,000
Nhưng đó là nó.

657
00:37:50,000 --> 00:37:54,422
Chúng tôi có một ngày lái xe trực quan
mà tiêu thụ dữ liệu

658
00:37:54,422 --> 00:37:56,255
và cho chúng ta thực sự
thông tin thú vị.

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

660
00:38:02,600 --> 00:38:06,420
Vâng, chúng ta hãy thêm một số
tương tác với nó.

661
00:38:06,420 --> 00:38:08,675
Tôi đề cập đến đó là
lực lượng mạnh mẽ của D3.

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

663
00:38:11,490 --> 00:38:15,060
>> Vì vậy, ở đây, cho từng yếu tố, chúng tôi
mô tả một loạt các thuộc tính.

664
00:38:15,060 --> 00:38:20,230
Nhưng chúng ta cũng có thể mô tả những gì chúng ta muốn
xảy ra với các yếu tố tương tác.

665
00:38:20,230 --> 00:38:26,190
Ví dụ, chúng ta có thể mô tả
những gì sẽ xảy ra khi chúng ta rê chuột qua.

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

667
00:38:28,740 --> 00:38:33,640
Và rất tương tự,
mà sẽ đưa một chức năng,

668
00:38:33,640 --> 00:38:36,700
rất giống với
thuộc tính chúng ta có trước,

669
00:38:36,700 --> 00:38:44,650
nơi chúng tôi làm điều gì đó để các
phần tử khi chúng ta di chuột qua nó.

670
00:38:44,650 --> 00:38:47,100
>> Vì vậy, điều đầu tiên chúng ta cần phải
làm là chọn phần tử đó,

671
00:38:47,100 --> 00:38:49,435
để tìm nó về cơ bản, trong trình duyệt.

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

673
00:38:57,090 --> 00:39:00,920
và sau đó chúng ta có thể thiết lập
một thuộc tính cho nó.

674
00:39:00,920 --> 00:39:06,870
Vì vậy, những gì tôi đang làm ở đây là, khi chúng ta di chuột
trên một cái gì đó, chúng ta sẽ có được yếu tố đó

675
00:39:06,870 --> 00:39:11,197
và sau đó thiết lập Opacity của nó lại
1, để hoàn toàn mờ đục.

676
00:39:11,197 --> 00:39:12,488
Hãy xem những gì trông giống như.

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

678
00:39:29,430 --> 00:39:39,080
>> Dường như chúng ta có một
thêm dấu chấm phẩy ở đây.

679
00:39:39,080 --> 00:39:42,420
Vì vậy, nếu chúng ta di chuột qua đây, nó được đầy đủ.

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

681
00:39:46,530 --> 00:39:48,960
Nhưng bây giờ, tất nhiên, nó
vẫn đầy đủ, bởi vì chúng tôi

682
00:39:48,960 --> 00:39:53,240
phải mô tả những gì xảy ra
khi bỏ con trỏ của chúng tôi.

683
00:39:53,240 --> 00:39:59,990
Vì vậy, chúng ta hãy làm chính xác điều đó trên
mouseout, như trái ngược với di chuột lên.

684
00:39:59,990 --> 00:40:06,399
>> Và chúng tôi sẽ thiết lập lại nó để
những gì chúng tôi đã có before-- 0.5.

685
00:40:06,399 --> 00:40:10,260
Và bây giờ, mỗi lần chúng tôi
hover, chúng tôi nhận được một vòng tròn đầy đủ.

686
00:40:10,260 --> 00:40:13,468
Nó giúp chúng ta thấy những gì chúng tôi
chúng tôi đang lựa chọn cơ bản.

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

688
00:40:19,210 --> 00:40:22,860
>> Và bây giờ chúng ta hãy làm điều này thực sự tuyệt vời.

689
00:40:22,860 --> 00:40:26,210
Hãy kết nối này vào dữ liệu thực tế.

690
00:40:26,210 --> 00:40:30,890
Vì vậy, hãy hỏi thể
USGS về dữ liệu của họ.

691
00:40:30,890 --> 00:40:35,630
Vì vậy, khảo sát địa chất Mỹ
có dữ liệu về động đất.

692
00:40:35,630 --> 00:40:41,460
Họ có một API nào đó là có thể
được tiêu thụ ở định dạng JSON.

693
00:40:41,460 --> 00:40:42,548
Vì vậy, chúng ta hãy làm điều đó.

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

695
00:40:49,730 --> 00:40:55,900
>> Vì vậy, đây là một chút mã mà
kết nối với các API USGS.

696
00:40:55,900 --> 00:40:57,990
Và có một chút chế biến trên nó.

697
00:40:57,990 --> 00:41:02,200
Đây không phải là liên quan, nhưng đơn giản hoá nó
để một định dạng dữ liệu đơn giản như một trong những

698
00:41:02,200 --> 00:41:03,800
chúng tôi đã có trước đây.

699
00:41:03,800 --> 00:41:08,140
Vì vậy, tôi thoát khỏi cuộc gọi của chúng tôi để
data.json giả của chúng tôi trên file.

700
00:41:08,140 --> 00:41:13,110
Và thay vào đó, tôi gọi điện thoại
USGS cơ bản.

701
00:41:13,110 --> 00:41:16,700
>> Hãy làm mới, tốt đẹp.

702
00:41:16,700 --> 00:41:21,260
Đây là thực tế, dữ liệu thực tế cuộc sống
từ tuần này với động đất.

703
00:41:21,260 --> 00:41:23,217
Điều này thực sự thú vị.

704
00:41:23,217 --> 00:41:25,050
Đây không phải là đáng ngạc nhiên
cho chúng ta, nhưng có

705
00:41:25,050 --> 00:41:27,909
rất nhiều trận động đất trên
Bờ biển phía tây ở California.

706
00:41:27,909 --> 00:41:30,950
Nhưng tôi nghĩ rằng nó là rất thú vị
rằng có quá nhiều trận động đất

707
00:41:30,950 --> 00:41:34,350
ở Alaska, và dường như,
đây ở Midwest.

708
00:41:34,350 --> 00:41:37,630
Ý tôi là, thú vị, và chúng tôi đang tốt.

709
00:41:37,630 --> 00:41:40,410
Đó là kết luận.

710
00:41:40,410 --> 00:41:43,760
>> Nhưng về cơ bản, điều này
là những gì D3 giúp chúng ta làm.

711
00:41:43,760 --> 00:41:48,030
Nó giúp chúng ta lấy dữ liệu, ràng buộc
nó đến các yếu tố trong DOM,

712
00:41:48,030 --> 00:41:51,620
và có những yếu tố thay đổi
như là một chức năng của dữ liệu,

713
00:41:51,620 --> 00:41:54,780
có những đặc tính đó, tất cả các
nhiều thuộc tính của các yếu tố,

714
00:41:54,780 --> 00:41:57,393
tất cả các thể hữu ích cho các kênh
để truyền đạt thông tin.

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

716
00:42:05,440 --> 00:42:09,290
>> D3 là một sức mạnh không tưởng
thư viện và cũng ngạc chạy.

717
00:42:09,290 --> 00:42:12,260
Đây là một số công cụ mạnh mẽ.

718
00:42:12,260 --> 00:42:15,960
Trực quan dữ liệu là một
công cụ rất mạnh

719
00:42:15,960 --> 00:42:21,530
để truyền đạt đến người sâu
những hiểu biết đó để được cốt lõi của họ

720
00:42:21,530 --> 00:42:25,430
và giúp họ hiểu, trong
cách này sâu sắc và trực quan,

721
00:42:25,430 --> 00:42:29,760
cách dữ liệu công trình và làm thế nào
dữ liệu thay đổi cuộc sống của chúng tôi.

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