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 บอนี่: ฉันเดวิด
บอนี่และนี่คือ 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
Let 's go ผ่านมัน

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 วงกลม
เราเพิ่งทำวงกลม

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 ของ
และตำแหน่งของรัศมี

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
>> ขอให้มัน y ของ 200 พิกเซลเป็นอย่างดี

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
ขอเรียกว่าวงกลม 2

83
00:04:13,570 --> 00:04:15,840
และขอทำที่แน่นอน
สิ่งที่เหมือนกันและให้มัน

84
00:04:15,840 --> 00:04:20,450
คุณลักษณะที่ได้รับตำแหน่ง x 300

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
>> Act II, Data Driven Documents--
ดังนั้นขอให้กลับไปที่นี่

135
00:07:12,140 --> 00:07:15,340
และขอเพียงแค่ได้รับกำจัดของวงกลม 2,
เพราะเราเพียงแค่การเพิ่มและลบ

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
เรามีเจ็ดหมายเลขที่นี่
สิ่งเหล่านี้จำนวน 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
ผนวกวงกลมและวงกลม 2 และ 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
Hey, 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
>> วงกลมก็จะไปเดี๋ยวก่อน
วงกลม 1 สิ่งที่ตำแหน่ง 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
ผมพบว่าวงการเหล่านั้น
เป็นชนิดของ squished ขึ้น

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
>> ดังนั้นขอใส่ถ้ามีคำสั่งที่นี่

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
>> ถัดขึ้นไป, iii กระทำ 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
แล้วค่านี้เพิ่งไป Offscreen

289
00:15:44,540 --> 00:15:49,040
ดังนั้นตรรกะของเราที่นี่
ของวิธีการที่เราทำครั้งที่ 3

290
00:15:49,040 --> 00:15:52,570
และ 20 เพื่อกระจายมันออกมาแล้ว
ชดเชยมันบิตเป็น clunky จริงๆ

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
ดังนั้นในกรณีนี้ถ้าเราจะให้มันหนึ่ง
มันจะ map ที่ออกไปยัง 20

327
00:18:32,910 --> 00:18:37,750
และถ้าเราจะให้มัน 200 ก็
จะ map ว่าเมื่อวันที่ 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
>> สวยหน่อยโอ้เรามีข้อผิดพลาดเล็ก ๆ น้อย ๆ ที่นี่

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
>> และแทนที่จะต้อง
ชนิดของตรรกะ clunky นี้

374
00:21:55,210 --> 00:21:58,550
เรามีที่นี่ด้วย
เงื่อนไขที่นั่น

375
00:21:58,550 --> 00:22:03,250
เราอาจจะมีบางสิ่งบางอย่าง
ขนาดเชิงเส้นระหว่างผู้

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
และทุกสิ่งในระหว่าง
เป็นหน้าที่ของง

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
>> พระราชบัญญัติ IV, การทำงานกับ
Data-- สิ่งแรก

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
มันเป็น clunky มากที่จะมี
ข้อมูลรหัสยากที่นี่

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
และแล้วทุกรหัสที่
เยื้องตัวในเป็นหลัก

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
>> ดังนั้นสิ่งที่เราจะทำเท่าไหร่เวลาของเราทุกคน
ฟังก์ชั่นเรียกว่ามีสตริง

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
นี่คือสิ่งที่ means-- นี้มีความสุข

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
เรามีเพียงหกจุดข้อมูล
และมีเพียงสองมีทวิภาค

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
อย่างน้อยในข้อมูลของเราถึงตรงที่น่าสนใจ

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
กลับกลับไปที่นี่อีกครั้งโดยใช้
การสร้างภาพวงกลม histogram ของเรา

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
แต่ตอนนี้มีสิ่งที่ดีมากขึ้น

505
00:29:51,920 --> 00:29:54,780
งมีองค์ประกอบข้อมูลจำนวนมาก

506
00:29:54,780 --> 00:29:57,946
ดังนั้นเราจึงได้รับการ d กลับ

507
00:29:57,946 --> 00:29:59,670
D3 ทำให้เรา d

508
00:29:59,670 --> 00:30:06,080
และเราตอบสนองโดยการหาขนาด
งแล้วผ่านที่ขนาด

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
>> พระราชบัญญัติ V, 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
แต่เผิน ๆ สิ่งที่มันไม่เป็น
มัน queries ไฟล์ 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
>> ดังนั้นการผู้ lat-ปรารถนาซึ่ง
เป็นตัวแทนของบางสิ่งบางอย่างในโลกทั้ง

575
00:33:57,250 --> 00:34:02,850
และ squishing และการย้ายที่อยู่รอบ ๆ
เพื่อให้เรามี 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
แล้วแผนที่เหล่านั้น lat-ปรารถนา
บนบางสิ่งบางอย่างบนหน้าจอของคุณ

579
00:34:14,310 --> 00:34:18,380
>> แต่เรากำลังจะใช้การฉายภาพนี้
ฟังก์ชั่นเพราะมันจะเปิดออก

580
00:34:18,380 --> 00:34:20,270
เรามีปรารถนา lat-ปรารถนาเป็นอย่างดี

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
รับวันซึ่งเป็นข้อมูลของแต่ละบุคคล
องค์ประกอบของการเกิดแผ่นดินไหวแต่ละบุคคล

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
>> เราจะทำเช่นเดียวกันสำหรับปี

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 เพราะเราต้องการขนาด
ง งเป็นเพียงจุดข้อมูล

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
ดังนั้นเรามาทำตรงว่าเมื่อวันที่
mouseout เมื่อเทียบกับการวางเมาส์

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
และแทนฉันโทร
USGS เป็นหลัก

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