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

2
00:00:00,780 --> 00:00:11,880
>> [השמעת מוסיקה]

3
00:00:11,880 --> 00:00:16,480
>> DAVID CHOUINARD: אני דוד
Chouinard, וזה D3.

4
00:00:16,480 --> 00:00:17,700
ברוך הבא.

5
00:00:17,700 --> 00:00:21,270
אנחנו הולכים ללמוד על D3 היום.

6
00:00:21,270 --> 00:00:25,020
D3 הוא מסגרת JavaScript
לבנייה באיכות גבוהה

7
00:00:25,020 --> 00:00:28,110
פריטים חזותיים אינטראקטיביים לאינטרנט.

8
00:00:28,110 --> 00:00:30,870
דברים כמו מה שאנחנו
לראות בחלק האחורי שלי,

9
00:00:30,870 --> 00:00:34,230
אנחנו הולכים ללמוד לעשות אותם
דברים, סוג של היסודות שלו.

10
00:00:34,230 --> 00:00:36,452
אבל זה הולך להיות מגניב.

11
00:00:36,452 --> 00:00:38,160
בואו נתחיל
מה שהופך את תמונות יפות.

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

13
00:00:41,108 --> 00:00:44,350
יש לנו יותר הדגמות
של לקוחות פוטנציאליים זמינים.

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

15
00:00:48,040 --> 00:00:50,760
בואו נעשה את זה.

16
00:00:50,760 --> 00:00:58,700
>> המערכה הראשונה, DOM manipulation-- אנחנו הולכים
כדי להתחיל מייד עושים דברים מגניבים.

17
00:00:58,700 --> 00:01:01,240
קודם כל, בצד השמאל, יש לנו קוד.

18
00:01:01,240 --> 00:01:03,470
מימין, יש לנו
התוצאה של הקוד שלנו.

19
00:01:03,470 --> 00:01:04,900
בואו נעבור את זה.

20
00:01:04,900 --> 00:01:05,780
>> בואו נעשה את המעגל.

21
00:01:05,780 --> 00:01:08,570
איך זה נשמע?

22
00:01:08,570 --> 00:01:14,934
svg.append circle--
רק עשינו מעגל.

23
00:01:14,934 --> 00:01:16,100
אתה לא מאמין לי, נכון?

24
00:01:16,100 --> 00:01:18,190
זה לא שם.

25
00:01:18,190 --> 00:01:21,830
>> אז מה שעשינו כאן הוא,
SVG הוא גרפיקה וקטורית מדורגת.

26
00:01:21,830 --> 00:01:27,530
זו הדרך שאנחנו מספרים לדפדפן
להפוך את הגרפיקה וקטורית בדפדפן.

27
00:01:27,530 --> 00:01:30,740
מה בדיוק עשינו עכשיו
הוא הוסיף מעגל לגלוש.

28
00:01:30,740 --> 00:01:34,790
>> ההבטחה היא שהמעגל
דורש קצת תכונות בסיסיות

29
00:01:34,790 --> 00:01:36,850
לפני שאנחנו באמת יכולים לראות את זה.

30
00:01:36,850 --> 00:01:40,045
אנחנו צריכים להגיד את זה עמדת x,
עמדתה y, הרדיוס שלה.

31
00:01:40,045 --> 00:01:43,310
אנחנו לא אומרים את זה מכל זה,
ולכן אנחנו לא רואים את זה עכשיו.

32
00:01:43,310 --> 00:01:46,210
אבל בואו נגיד לה דברים.

33
00:01:46,210 --> 00:01:49,510
>> אז קודם כל, יש לך
לתת המעגל שלנו שם.

34
00:01:49,510 --> 00:01:53,070
אז בואו נקראים לזה המעגל.

35
00:01:53,070 --> 00:01:54,406
יש המעגל שלנו שם עכשיו.

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

37
00:01:57,230 --> 00:01:59,490
ובואו לתת לו כמה תכונות.

38
00:01:59,490 --> 00:02:03,690
מה דעתך על CX יתרכז x, כך
מרכז עמדת x.

39
00:02:03,690 --> 00:02:06,730
נניח, 200 עבור 200 פיקסלים.

40
00:02:06,730 --> 00:02:10,220
>> בואו לתת אותו 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
בואו נקראים לזה circle2.

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
Yay, יש לנו שני עיגולים עכשיו.

86
00:04:24,140 --> 00:04:27,240
>> וכמובן, שיכולנו
לעדכן ערכים אלה.

87
00:04:27,240 --> 00:04:31,640
אני יכול לשים אותו ב 400, וכעת הוא נע.

88
00:04:31,640 --> 00:04:35,470
ומכיוון שזה מעצבן, בוא
להסיר אותו, כך circle2.remove.

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

90
00:04:39,000 --> 00:04:40,730
עכשיו הוא נעלם.

91
00:04:40,730 --> 00:04:43,170
>> אז מה שאנחנו עושים ו
הוא פשוט מאוד, very-- זה

92
00:04:43,170 --> 00:04:46,030
דומה מאוד למה שאתה
יכול לעשות בjQuery, למשל.

93
00:04:46,030 --> 00:04:48,240
אנחנו רק מניפולציה
DOM, שזה נקרא.

94
00:04:48,240 --> 00:04:50,040
אולי שמע את המילה הזאת לפני.

95
00:04:50,040 --> 00:04:53,255
אנחנו יוצרים דברים, הגדרה
תכונות על דברים, הסרת חומר.

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

97
00:04:58,950 --> 00:05:02,360
>> עכשיו, כאן זה נהיה מעניין.

98
00:05:02,360 --> 00:05:07,250
אז מאוחר יותר בקוד, אנחנו עדיין יכולים
מתייחס למעגל המקורי כאן.

99
00:05:07,250 --> 00:05:14,100
אז בואו לאפס תכונתה לCX.

100
00:05:14,100 --> 00:05:18,260
נניח, עמדת x ל -400.

101
00:05:18,260 --> 00:05:22,406
ואני הולך למעבר
ש, כך שזה ברור.

102
00:05:22,406 --> 00:05:23,360
יש לנו ללכת.

103
00:05:23,360 --> 00:05:24,780
>> אז הוספנו מעגל.

104
00:05:24,780 --> 00:05:26,440
אנו קובעים כמה תכונות.

105
00:05:26,440 --> 00:05:28,210
הוספנו עוד מעגל, הסרתי אותו.

106
00:05:28,210 --> 00:05:31,650
ואז אנחנו שינוי
המעגל המקורי.

107
00:05:31,650 --> 00:05:35,400
>> אבל כאן זה נהיה
הרבה יותר מעניין.

108
00:05:35,400 --> 00:05:39,070
לא רק אנחנו יכולים להגדיר תכונות
כרק ערכים, אנו יכולים לומר,

109
00:05:39,070 --> 00:05:41,610
היי, המעגל, ללכת למצב את 200.

110
00:05:41,610 --> 00:05:44,540
אנחנו גם יכולים להגדיר אותם כפונקציות.

111
00:05:44,540 --> 00:05:48,850
>> אז במקום לתת 400 כאן,
אנחנו יכולים לעשות את חישוב כמה

112
00:05:48,850 --> 00:05:53,950
על לטוס למה שאנחנו
רוצה תכונה שכדי להיות.

113
00:05:53,950 --> 00:05:56,580
אז ככה היית לבטא את זה.

114
00:05:56,580 --> 00:06:00,660
אנחנו אומרים, במקום 400, תנו לי
אתן לך פונקציה במקום.

115
00:06:00,660 --> 00:06:04,180
והנה, בתוך פונקציה זו,
אנחנו יכולים לעשות את כל חישוב מטורף.

116
00:06:04,180 --> 00:06:06,820
>> אנחנו יכולים לקחת את הזמן ו
מסתכל על משהו אחר

117
00:06:06,820 --> 00:06:11,230
ודינמי להחליט ב
המעגל מה ערך שאנחנו רוצים.

118
00:06:11,230 --> 00:06:15,266
מה דעתך עלינו רק לתת לי
היא מחזיקה בעמדת x אקראית?

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

120
00:06:20,360 --> 00:06:21,120
אז זהו זה.

121
00:06:21,120 --> 00:06:25,490
>> אז מה שאומר הוא, ל
כל x, לרוץ בפונקציה זו.

122
00:06:25,490 --> 00:06:29,340
ומה שאנחנו עושים הוא חישוב
כמה דברים, זמנים אקראיים הרוחב

123
00:06:29,340 --> 00:06:30,410
וחוזר ש.

124
00:06:30,410 --> 00:06:34,765
אז בכל פעם שאנו נתקלים ש, אנחנו מקבלים
המעגל שהולך למקום אקראי.

125
00:06:34,765 --> 00:06:36,394
זה סוג של מגניב.

126
00:06:36,394 --> 00:06:38,310
אני מרגיש כאילו אני יכול להסתכל
בשלב זה לקטן.

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

128
00:06:44,274 --> 00:06:46,440
אנחנו מתחילים להגיע ל
משהו מעניין כאן.

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

130
00:06:49,120 --> 00:06:51,390
בואו נעשה את זה מונע נתונים כעת.

131
00:06:51,390 --> 00:06:53,420
אין נתונים כאן.

132
00:06:53,420 --> 00:06:54,482
בואו לשנות את זה.

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

134
00:06:57,440 --> 00:07:12,140
>> Documents-- מערכה השני, הנתונים מונעים
אז בואו נחזור לכאן.

135
00:07:12,140 --> 00:07:15,340
ובואו פשוט להיפטר מcircle2,
כי אנחנו רק הוספה והסרה

136
00:07:15,340 --> 00:07:15,840
זה.

137
00:07:15,840 --> 00:07:17,382
אז אנחנו לא באמת צריכים את זה.

138
00:07:17,382 --> 00:07:21,421
אנחנו צריכים להיות חכמים הרבה יותר כאן.

139
00:07:21,421 --> 00:07:23,170
בואו נגיד, שיש לנו
כמה נתונים מסוג כלשהו.

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

141
00:07:31,540 --> 00:07:40,020
אחד moment-- נניח,
היו לנו נתונים של טופס זה.

142
00:07:40,020 --> 00:07:41,800
היו לנו מערך, רק
חבורה של מספרים.

143
00:07:41,800 --> 00:07:45,750
יש לנו שבעה מספרים כאן,
כל סכום represent-- אלה

144
00:07:45,750 --> 00:07:48,810
בחשבון הבנק של אנשים, איך
כמה הם שוקלים, אלוהים יודע מה.

145
00:07:48,810 --> 00:07:51,310
>> אלה הם מספרים, ואנחנו
רוצה להשתמש בחוגים שלנו

146
00:07:51,310 --> 00:07:53,240
כדי לייצג את המספרים האלה איכשהו.

147
00:07:53,240 --> 00:07:55,515
אנחנו רוצים לקשור אותנו
חוגים למספרים האלה.

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

149
00:07:58,750 --> 00:07:59,626
אז מה שאנחנו עושים.

150
00:07:59,626 --> 00:08:01,500
בואו נגיד, שאנחנו רוצים
המעגל עבור כל מספר.

151
00:08:01,500 --> 00:08:03,590
אנחנו יכולים לעשות את הישן
דבר היינו doing--

152
00:08:03,590 --> 00:08:06,020
צרף המעגל וcircle2 וcircle3.

153
00:08:06,020 --> 00:08:10,020
אבל זה יוצא מכלל שליטה, ו
יש הרבה היגיון לחזור.

154
00:08:10,020 --> 00:08:12,760
>> אז בואו לקבל חכם יותר עם זה.

155
00:08:12,760 --> 00:08:17,810
במקום להשתמש במעגל var
svg.append שרק משתמשים ב,

156
00:08:17,810 --> 00:08:21,580
אנחנו הולכים להשתמש ב
הבלוק הקטן הזה כאן.

157
00:08:21,580 --> 00:08:24,510
אני לא רוצה ללכת לעומק
למה שכל החלקים האלה לעשות.

158
00:08:24,510 --> 00:08:26,020
וזה סוג של נושא מתקדם.

159
00:08:26,020 --> 00:08:27,830
ולוואי שיכולתי.

160
00:08:27,830 --> 00:08:31,370
>> אבל דבר המפתח לrecognize-- ו
תראה הוא לעתים קרובות מאוד בקוד D3.

161
00:08:31,370 --> 00:08:36,840
בלוק זה של טקסט בסיסי
יוצר מעגלים רבים

162
00:08:36,840 --> 00:08:41,360
כפי שיש אלמנטי נתונים
במערך זה ממש כאן.

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

164
00:08:53,420 --> 00:08:55,780
אז זה יוצר כמה שיותר
חוגים כמו שיש אלמנטים.

165
00:08:55,780 --> 00:08:58,520
זה הולך ליצור לנו שבעה מדורים.

166
00:08:58,520 --> 00:09:01,710
והיא עושה את דבר באמת, באמת מפתח.

167
00:09:01,710 --> 00:09:02,460
אז בואו לרוץ ש.

168
00:09:02,460 --> 00:09:05,460
בואו להסיר המעגל האחר שלנו.

169
00:09:05,460 --> 00:09:09,565
בואו רק להגיב זה
להיפרד החוצה ולהפעיל את זה שוב.

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

171
00:09:13,840 --> 00:09:15,260
>> יש לנו ללכת.

172
00:09:15,260 --> 00:09:18,030
אז המעגל שלנו כאן הוא
כהה יותר הרבה, בגלל שאנחנו

173
00:09:18,030 --> 00:09:20,720
יש שבעה מעגלים, אחד
על גבי השני.

174
00:09:20,720 --> 00:09:25,425
אנחנו פשוט יצרנו שבעה מעגלים, אחד
כל אחד עבור כל אחד מרכיבי נתונים אלה.

175
00:09:25,425 --> 00:09:28,860
אבל יש דבר מרכזי שקרה
עם קטע זה ממש כאן.

176
00:09:28,860 --> 00:09:31,030
>> זה שהנתונים היו קשור.

177
00:09:31,030 --> 00:09:33,440
אז כל אחד ואחד
רכיבי נתונים אלה,

178
00:09:33,440 --> 00:09:38,830
10, 45, 105, היה כבול
למעגל מסוים.

179
00:09:38,830 --> 00:09:40,960
אז אלה לא נוצרו רק
חבורה של חוגים

180
00:09:40,960 --> 00:09:43,420
אבל קושר שני הדברים האלה יחד.

181
00:09:43,420 --> 00:09:48,740
>> ובעתיד, משום שיצרנו
אותם חוגים עם פונקצית D3 זה,

182
00:09:48,740 --> 00:09:52,430
אם אני נותן לך מעגל, אתה יכול
תן לי את הנתונים הקשורים אליו.

183
00:09:52,430 --> 00:09:53,280
אז אנחנו יכולים לשאול D3.

184
00:09:53,280 --> 00:09:54,840
היי, D3, יש לי את המעגל הזה.

185
00:09:54,840 --> 00:09:57,350
מה הנתונים שיש לו את המעגל?

186
00:09:57,350 --> 00:10:01,290
וD3 היה אומר לנו 10 או 45 או 105.

187
00:10:01,290 --> 00:10:02,380
>> הדברים האלה חייבים.

188
00:10:02,380 --> 00:10:04,490
זה רעיון מאוד, מאוד בסיסי.

189
00:10:04,490 --> 00:10:06,070
בואו נסתכל על זה.

190
00:10:06,070 --> 00:10:12,210
>> אז הדרך היינו שואלת D3-- כך
זה אינו רלוונטי לכך,

191
00:10:12,210 --> 00:10:16,620
אבל רק תאמין לי על זה.

192
00:10:16,620 --> 00:10:17,620
כך אנו מבקשים D3.

193
00:10:17,620 --> 00:10:21,312
היי, D3, תן לי הראשון
המעגל שאתה יכול למצוא.

194
00:10:21,312 --> 00:10:23,580
תן לי את המעגל הראשון שאתה יכול למצוא.

195
00:10:23,580 --> 00:10:29,660
ואז נוכל לשאול D3, מה
נתונים על ש, כמו זה, 10.

196
00:10:29,660 --> 00:10:33,380
>> אז אנחנו פשוט לשאול D3, למצוא אותי
המעגל הראשון שאתה יכול למצוא.

197
00:10:33,380 --> 00:10:34,400
מה הנתונים שלה?

198
00:10:34,400 --> 00:10:36,650
10, כי הוא אכן שלנו
אלמנט נתונים ראשון.

199
00:10:36,650 --> 00:10:42,150
אנחנו יכולים לשאול אותו, היי, D3,
תמצא אותנו המעגל השלישי שלנו.

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

201
00:10:44,450 --> 00:10:45,740
למה זה באמת חשוב?

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

203
00:10:49,790 --> 00:10:52,250
>> אז כאן, שציינתי
שאנחנו יכולים להשתמש בפונקציות.

204
00:10:52,250 --> 00:10:54,910
ואני ציינו שהיה
דבר חזק מאוד.

205
00:10:54,910 --> 00:11:03,070
אז לא רק יכולים הפונקציות שלנו לעשות דברים
כמו לעשות קצת חישוב, למשל,

206
00:11:03,070 --> 00:11:09,170
לחזור מספר אקראי, זה יכול
גם לעשות דברים המבוססים על הנתונים.

207
00:11:09,170 --> 00:11:11,550
זה מה שמסמכי הנתונים מונעים אומר.

208
00:11:11,550 --> 00:11:13,750
זה מה שעומד D3 ל.

209
00:11:13,750 --> 00:11:17,800
>> אז זה x postition-- במקום
של רק אומר, כל החוגים,

210
00:11:17,800 --> 00:11:21,735
לקבל את עמדת x 200, אנחנו
יכול לתת לו תפקיד.

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

212
00:11:26,140 --> 00:11:30,140
וכאן, אנחנו יכולים לעשות את החישוב כמה.

213
00:11:30,140 --> 00:11:33,710
וד כאן עומד במקום לנתונים.

214
00:11:33,710 --> 00:11:36,120
אז בכל פעם שיש לנו
מעגל, בעצם,

215
00:11:36,120 --> 00:11:37,750
D3 ייצור שבעת חוגים אלה.

216
00:11:37,750 --> 00:11:38,500
ולאחר מכן לכל

217
00:11:38,500 --> 00:11:41,920
>> המעגל, זה הולך ללכת, היי,
circle1 מה העמדה שלך x.

218
00:11:41,920 --> 00:11:45,210
בעבר, היינו
תמיד לענות 200.

219
00:11:45,210 --> 00:11:48,630
אבל עכשיו, בכל פעם ששואל D3
שלנו מה העמדה שלך x,

220
00:11:48,630 --> 00:11:51,790
זה הולך לתת us-- יש לנו
כי המעגל, אז יש לנו את הנתונים.

221
00:11:51,790 --> 00:11:55,290
זה הולך לתת לנו את הנתונים ואומרים,
מה אתה רוצה להיות האקספוזיציה,

222
00:11:55,290 --> 00:11:57,120
בהתבסס על נתונים ש.

223
00:11:57,120 --> 00:11:59,590
>> בואו פשוט להחזיר את הנתונים בפועל.

224
00:11:59,590 --> 00:12:04,910
אז אם אנחנו רצים זה, זה נותן לי
הנתונים מונעים על מסמכים.

225
00:12:04,910 --> 00:12:08,040
חוגים אלה מבוססים
בposition-- ביחס

226
00:12:08,040 --> 00:12:11,120
הם בסיסים כפונקציה של נתונים.

227
00:12:11,120 --> 00:12:13,100
>> אז למעגל הראשון,
D3 מעמיד. מעגל

228
00:12:13,100 --> 00:12:16,770
ולאחר מכן D3 שואל אותנו, מה לעשות
אתה רוצה להיות האקספוזיציה.

229
00:12:16,770 --> 00:12:19,620
ואנחנו רק אומרים, הנתונים כל מה ש.

230
00:12:19,620 --> 00:12:21,185
הפוך את התערוכה 10.

231
00:12:21,185 --> 00:12:26,320
>> ואז זה שואל, מה אתה רוצה
אקספוזיציה להיות למעגל השני.

232
00:12:26,320 --> 00:12:27,270
ואנחנו תענו, 45.

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

234
00:12:30,000 --> 00:12:32,230
ואנחנו, כמובן, יכולים
לעשות כמה חישובים כאן.

235
00:12:32,230 --> 00:12:35,510
אני מוצא שחוגים אלה
הם סוג של נמעך עד.

236
00:12:35,510 --> 00:12:38,965
>> אז הכפיל אותו ב 3, להכפיל את הנתונים על ידי 3.

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

238
00:12:41,870 --> 00:12:43,840
רק המעגל שלנו יש הרחיב החוצה.

239
00:12:43,840 --> 00:12:46,730
הערך שלנו שולש.

240
00:12:46,730 --> 00:12:51,010
>> המעגל הוא באמת על הקצה,
אז בואו אולי סוג של קיזוז זה.

241
00:12:51,010 --> 00:12:53,632
נניח, ב -20.

242
00:12:53,632 --> 00:12:56,070
הנה לך.

243
00:12:56,070 --> 00:12:57,590
>> זה נתונים להדמיה.

244
00:12:57,590 --> 00:13:01,767
זה מאוד בסיסי, אבל זה
נותן לנו כמה תובנות הנתונים שלנו.

245
00:13:01,767 --> 00:13:04,600
הוא אומר לנו, למשל, אנחנו
יש לקבוצה קטנה של אלמנטים.

246
00:13:04,600 --> 00:13:06,340
ויש לנו נתון חריג גדול כאן.

247
00:13:06,340 --> 00:13:10,830
זה נותן לנו קצת מידע
על ההפצה.

248
00:13:10,830 --> 00:13:20,830
>> אם היינו, למשל, לשנות
נתונים 150 כאן ורענון ל,

249
00:13:20,830 --> 00:13:22,630
ההדמיה שלנו משתנה.

250
00:13:22,630 --> 00:13:24,285
מסמך זה הוא הנתונים מונעים.

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

252
00:13:32,640 --> 00:13:36,180
>> אז כמובן, כל האלמנטים האלה,
כל התכונות הללו כאן,

253
00:13:36,180 --> 00:13:38,430
אנחנו יכולים להשתמש בפונקציה, לא
רק המספרים, לא רק

254
00:13:38,430 --> 00:13:39,900
x ועמדות y.

255
00:13:39,900 --> 00:13:42,120
כדי שנוכל להשתמש בפונקציה של הצבע.

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

257
00:13:45,260 --> 00:13:46,360
כך תהיה לנו לעשות את אותו הדבר.

258
00:13:46,360 --> 00:13:49,360
אנחנו ניתן לו תפקיד.

259
00:13:49,360 --> 00:13:52,320
>> ונניח, שיש לנו יכולים
תניות בתפקוד שלנו.

260
00:13:52,320 --> 00:13:54,770
פונקציה זו יכולה להיות
מאה מתורים ארוכים.

261
00:13:54,770 --> 00:13:57,150
הוא יכול לעשות דברים מאוד, מאוד מסובכים.

262
00:13:57,150 --> 00:13:59,080
>> אז בואו לשים אם הצהרה כאן.

263
00:13:59,080 --> 00:14:03,420
נניח, אם הנתונים שלנו הוא פחות
מ -50, זה סף מסוים

264
00:14:03,420 --> 00:14:05,817
כי אנחנו מתעניינים
מסיבה כלשהי.

265
00:14:05,817 --> 00:14:06,650
בואו נעשה את זה ירוק.

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

267
00:14:09,830 --> 00:14:15,320
אחרת, בואו נעשה את זה אדום.

268
00:14:15,320 --> 00:14:16,110
איך זה?

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

270
00:14:19,630 --> 00:14:21,220
נחמד.

271
00:14:21,220 --> 00:14:24,860
>> אז נתונים להדמיה שלנו מתחילה
כדי להעביר מידע מעניין יותר

272
00:14:24,860 --> 00:14:26,727
בערוצים רבים.

273
00:14:26,727 --> 00:14:28,560
אז עכשיו אנחנו יודעים קצת
על ההפצה.

274
00:14:28,560 --> 00:14:31,768
ואנחנו יודעים שיש איזה סוג של
מנותק בגיל 50 שאנחנו מעוניינים בו.

275
00:14:31,768 --> 00:14:35,630
אנחנו יודעים שיש שתי נקודות נתונים
מתחת לסף ושרובם

276
00:14:35,630 --> 00:14:36,130
לעיל.

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

278
00:14:41,510 --> 00:14:46,160
>> אז כצעד סופי, נתונים זה כאן,
זה מאוד נדיר לראות את זה ככה.

279
00:14:46,160 --> 00:14:52,610
אז בואו פשוט להעביר את זה למשתנה
כי זה נקי יותר, כמו זה.

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

281
00:15:02,980 --> 00:15:05,197
ולאחר מכן אנו משתמשים משתנים שכאן.

282
00:15:05,197 --> 00:15:06,280
זה בדיוק אותו דבר.

283
00:15:06,280 --> 00:15:07,280
זה רק קצת יותר נקי.

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

285
00:15:25,300 --> 00:15:35,300
>> בשלב הבא, מערכה שלישית, Scales--
אז בעיה אחת נכון

286
00:15:35,300 --> 00:15:38,920
כאן הוא, אם נשנינו
הנתונים בvalue-- 200 זה

287
00:15:38,920 --> 00:15:41,685
אם נשנינו אותו ל -400
או משהו ורענון,

288
00:15:41,685 --> 00:15:44,540
לאחר מכן ערך זה פשוט הלך מחוץ למסך.

289
00:15:44,540 --> 00:15:49,040
אז ההיגיון שלנו ממש כאן
של איך אנחנו עושים 3 הפעמים

290
00:15:49,040 --> 00:15:52,570
ו -20, כדי להפיץ את זה ואז
קיזוז זה קצת הוא באמת מגושם.

291
00:15:52,570 --> 00:15:54,150
>> מה מספרים אלה מתכוונים?

292
00:15:54,150 --> 00:15:55,400
הם פשוט קשים מקודדים שם.

293
00:15:55,400 --> 00:15:58,830
והם מאוד קשורים לנתונים.

294
00:15:58,830 --> 00:16:00,550
אנחנו רוצים מסמך נתונים מונעים.

295
00:16:00,550 --> 00:16:05,460
אנחנו רוצים מסמך גמיש מאוד,
שנתונים המתקבלים, מתאים את עצמו אליו

296
00:16:05,460 --> 00:16:07,900
ומייצג אותה.

297
00:16:07,900 --> 00:16:11,330
>> מה אנחנו בעצם צריכים זה, אנחנו
יש לי טווח זה של מספרים 10.

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

299
00:16:12,640 --> 00:16:17,630
ואנחנו רוצים למפות את זה על גבי
הרוחב, הרוחב המלא כאן.

300
00:16:17,630 --> 00:16:20,620
אז יש לנו מגוון רחב של
מספרים הולכים 0-100.

301
00:16:20,620 --> 00:16:24,980
ויש לנו אני הקמפוס הזה הולך
20-700, במקרה זה.

302
00:16:24,980 --> 00:16:26,515
>> אנחנו סוג של רוצים למפות שעל.

303
00:16:26,515 --> 00:16:30,002
אנחנו רוצים בהיקף של עד וש
אז לקזז את זה קצת.

304
00:16:30,002 --> 00:16:33,165
מתברר שיש D3 אלה.

305
00:16:33,165 --> 00:16:34,220
זה נקרא בקנה מידה.

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

307
00:16:37,410 --> 00:16:38,250
אז בואו נשתמש בו.

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

309
00:16:46,300 --> 00:16:49,670
>> הדרך שworks-- אני הולך
הקלד את זה ולאחר מכן להסביר את זה.

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

311
00:17:01,530 --> 00:17:02,450
זהו קנה מידה.

312
00:17:02,450 --> 00:17:08,670
מה הוא יעשה, זה ימפה את
ערכי 1-200 על 20 עד 600.

313
00:17:08,670 --> 00:17:10,990
אנחנו יכולים לבדוק את זה.

314
00:17:10,990 --> 00:17:13,329
אנחנו יכולים לראות את זה כאן.

315
00:17:13,329 --> 00:17:21,704
>> אז אם אני מאכיל אותו 1-- רגע אחד.

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

317
00:17:47,764 --> 00:17:48,555
תן לי שנייה אחת.

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

319
00:17:53,680 --> 00:17:55,080
אני חייב לו הוקלדתי בטעות.

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

321
00:18:15,320 --> 00:18:15,990
הנה לך.

322
00:18:15,990 --> 00:18:17,930
אני מצטער על זה.

323
00:18:17,930 --> 00:18:22,050
>> אז מה יעשה בקנה מידה
הוא, זה ייקח ערך

324
00:18:22,050 --> 00:18:24,930
ולאחר מכן להמיר את זה,
להרחיב את זה, אז זה

325
00:18:24,930 --> 00:18:27,320
ממלא את מגוון הרחב שאתה מבקש.

326
00:18:27,320 --> 00:18:32,910
אז במקרה הזה, אם אנחנו נותנים אותו לאחד,
זה הולך למפות את זה על גבי 20.

327
00:18:32,910 --> 00:18:37,750
ואם אנחנו נותנים לו 200, זה
הולך מפה שעל 600.

328
00:18:37,750 --> 00:18:40,460
ואי שם באמצע,
אם אנחנו מקבלים 100, זה

329
00:18:40,460 --> 00:18:44,610
הולך להיות איפשהו
בין 20 ו -600.

330
00:18:44,610 --> 00:18:51,480
>> וכמובן, עכשיו זה מה ש
אנחנו צריכים להסיר קידוד הקשיח אלה

331
00:18:51,480 --> 00:18:53,402
דברים שיש לנו ממש שם.

332
00:18:53,402 --> 00:18:55,950
אז מה אנחנו רוצים לעשות הוא
לקחת את הנתונים שאנחנו

333
00:18:55,950 --> 00:19:00,950
נתנו, שנתונים אישיים
אלמנט, ולהעביר אותו לקנה מידה ראשונה.

334
00:19:00,950 --> 00:19:02,635
אז בקנה מידה תהיה בסדר גודל זה.

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

336
00:19:27,020 --> 00:19:48,880
>> Well-- אה, יש לנו קצת שגיאה כאן.

337
00:19:48,880 --> 00:19:50,120
אנחנו נתונים חסרים.

338
00:19:50,120 --> 00:19:51,290
הנה לך.

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

340
00:19:58,550 --> 00:19:59,550
וזה מרחיב אותו.

341
00:19:59,550 --> 00:20:01,383
>> זה נותן לנו את אותו
תוצאה שהיו לנו לפני,

342
00:20:01,383 --> 00:20:04,030
אבל במקום שיש אלה
מקודד קשה אילוצים.

343
00:20:04,030 --> 00:20:07,790
ואם בגודל שלנו
שינויי בד, למשל,

344
00:20:07,790 --> 00:20:11,790
אם אנחנו רוצים שנהיה לי על זה
400 פיקסלים והוא squishes החוצה,

345
00:20:11,790 --> 00:20:15,440
אנחנו יכולים לקבל את זה over--
אנו יכולים להרחיב אותו, או ש

346
00:20:15,440 --> 00:20:21,890
יכול להפחית את השוליים שמאליים זה ל
משהו פחות או יותר מ -20.

347
00:20:21,890 --> 00:20:25,470
מספרים אלה, אלה מקודדים קשים
מספרים עכשיו הגיוניים לנו.

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

349
00:20:28,110 --> 00:20:30,520
>> ואנחנו יכולים לעשות הרבה יותר
דברים מעניינים גם כן.

350
00:20:30,520 --> 00:20:35,990
אז במקום שיש ליניארי
קנה מידה, שאולי רוצה להיכנס בקנה מידה.

351
00:20:35,990 --> 00:20:37,840
וזה ייתן לנו קנה מידת יומן.

352
00:20:37,840 --> 00:20:41,269
>> אז עכשיו בקנה מידה שלנו, במקום
רק הרחבת את מגוון ש,

353
00:20:41,269 --> 00:20:42,810
הוא עושה דברים מתוחכמים יותר.

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

355
00:20:48,790 --> 00:20:53,790
במקום שיש טווח זה קשה
מקודד, ובמקום שיש כי 600,

356
00:20:53,790 --> 00:20:58,465
אנו עשויים רוצים רק כדי להשתמש ברוחב,
כך בין 20 ל הרוחב מינוס 40,

357
00:20:58,465 --> 00:21:02,392
2 פעמים השוליים בצד השני.

358
00:21:02,392 --> 00:21:05,350
וזה עושה הרבה יותר הגיוני
מישהו שאולי לעיין בקוד.

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

360
00:21:08,080 --> 00:21:11,850
>> מעניין, את הכף לקבל
מאוד, מאוד מתוחכם, כמו גם.

361
00:21:11,850 --> 00:21:13,350
הם עושים הרבה דברים מעניינים.

362
00:21:13,350 --> 00:21:17,620
אז אין לי קשקשים בהכרח
לפעול רק במספרים.

363
00:21:17,620 --> 00:21:18,955
בואו נעשה את סולם צבעים.

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

365
00:21:23,120 --> 00:21:26,120
>> אז הטווח שלנו יכול be--
התחום שלנו הוא 1 ל 200.

366
00:21:26,120 --> 00:21:28,220
זה דבר הקלט.

367
00:21:28,220 --> 00:21:33,793
אבל יתכן שעלינו למפות מ
מירוק לאדום, למשל.

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

369
00:21:39,710 --> 00:21:42,910
ועכשיו, אם אנחנו עוברים אותו 1,
אנחנו הולכים לקבל ירוקים.

370
00:21:42,910 --> 00:21:45,110
אם אנחנו נותנים לו 200, נקבל אדומים.

371
00:21:45,110 --> 00:21:49,480
ואם אנחנו עוברים את זה משהו באמצע,
זה הולך להיות קצת תערובת של ש,

372
00:21:49,480 --> 00:21:52,520
אי שם בשיפוע
בין ירוק ואדום.

373
00:21:52,520 --> 00:21:55,210
>> ובמקום שיש
היגיון מגושם סוג זה

374
00:21:55,210 --> 00:21:58,550
יש לנו כאן עם
מותנה ממש שם,

375
00:21:58,550 --> 00:22:03,250
יש לנו יכול something--
קנה מידה ליניארי בין אלה.

376
00:22:03,250 --> 00:22:07,100
אז היינו משתמש בקנה המידה שרק
נוצר, שבו אנו נקראים צבע.

377
00:22:07,100 --> 00:22:09,060
והיינו נותנים לו D, ש
הוא אלמנט הנתונים שלנו.

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

379
00:22:14,250 --> 00:22:15,060
ויש לנו ללכת.

380
00:22:15,060 --> 00:22:18,070
יש לנו בקנה מידה צבע.

381
00:22:18,070 --> 00:22:18,940
>> אז זה מיפוי.

382
00:22:18,940 --> 00:22:20,960
אז השמאל הקיצוני הוא ירוק לחלוטין.

383
00:22:20,960 --> 00:22:22,560
ימין הקיצוני הוא אדום לגמרי.

384
00:22:22,560 --> 00:22:24,828
וכל מה שבין
היא פונקציה של d.

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

386
00:22:33,369 --> 00:22:35,160
יש לנו מעניין
פריטים חזותיים כאן.

387
00:22:35,160 --> 00:22:36,952
אבל הנתונים שלנו היו די משעמם.

388
00:22:36,952 --> 00:22:39,410
בואו לראות מה אנחנו יכולים לעשות אם
היו לנו נתונים מעניינים יותר.

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

390
00:22:44,420 --> 00:22:50,500
>> המערכה הרביעית, עבודה עם
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
זה מאוד מסורבל ליש לי
נתונים מקודדים קשה כאן.

394
00:22:58,310 --> 00:23:01,220
ובאופן כללי, נהיה לשאול
מישהו לנתונים אחר.

395
00:23:01,220 --> 00:23:05,400
אנחנו נהיה אולי מבקשים מהממשלה,
הלשכה לסטטיסטיקה, מה הנתונים שלך

396
00:23:05,400 --> 00:23:10,170
ולאחר מכן קשירת קשר זה או שואל
איזו ישות של צד שלישי לחלק מנתונים

397
00:23:10,170 --> 00:23:13,330
ולאחר מכן בנייה
הדמיה שב.

398
00:23:13,330 --> 00:23:17,170
>> אז הדבר הראשון שאנחנו רוצים לעשות
הוא להעביר את זה למקום אחר.

399
00:23:17,170 --> 00:23:24,130
אז אני הולך ליצור
להגיש data.json כאן בשם.

400
00:23:24,130 --> 00:23:25,600
JSON הוא תבנית נתונים.

401
00:23:25,600 --> 00:23:29,210
אתה לא צריך לדעת על זה יותר מדי.

402
00:23:29,210 --> 00:23:33,210
ואנחנו הולכים להעתיק
נתונים קטנים שיש לנו שם,

403
00:23:33,210 --> 00:23:40,330
הדבק אותו לשם מילה במילה, ללכת
בחזרה לקוד ההדמיה שלנו

404
00:23:40,330 --> 00:23:45,362
כאן, ולהשתמש בפונקציה זו ממש כאן.

405
00:23:45,362 --> 00:23:46,820
אתה לא צריך לדעת את הפרטים.

406
00:23:46,820 --> 00:23:49,800
אבל מה זה יעשה הוא,
היא תמצא את הקובץ ש,

407
00:23:49,800 --> 00:23:51,780
להביא אותו, ולהחזיר אותו אלינו.

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

409
00:24:11,660 --> 00:24:15,220
אז מה המשמעות של זה הוא, זה הולך
ולקבל את קובץ data.json.

410
00:24:15,220 --> 00:24:18,570
ולאחר מכן את כל הקוד זה
מסוכסך inside-- במהות,

411
00:24:18,570 --> 00:24:21,800
כל הקוד שיש לנו there-- יהיה
לפעול רק כאשר אנחנו מקבלים את הנתונים בחזרה.

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
אז אלה הם כותרות Crimson
הרמתי לפני כמה ימים.

427
00:25:25,440 --> 00:25:29,220
ואולי אתה יכול למצוא כמה מעניין
דברים על כותרות הללו.

428
00:25:29,220 --> 00:25:30,970
>> אז שוב, זה רשימה של דברים.

429
00:25:30,970 --> 00:25:32,360
לא אכפת לי D3.

430
00:25:32,360 --> 00:25:35,572
אלה יקרו להיות מחרוזת.

431
00:25:35,572 --> 00:25:36,530
אנחנו כבר שינו את הנתונים שלנו.

432
00:25:36,530 --> 00:25:38,210
>> בואו נחזור להדמיה שלנו.

433
00:25:38,210 --> 00:25:42,495
עכשיו, להדמיה שלנו מצפה
הקלט להיות מספרים.

434
00:25:42,495 --> 00:25:44,370
אז אנחנו הולכים ליש לי
כדי לעשות כמה שינויים.

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

436
00:25:47,180 --> 00:25:52,180
כך למשל, קודם כל, אולי
אנחנו רוצים לשים חוגים אלה יחד

437
00:25:52,180 --> 00:25:56,870
לפי אורך הכותרת,
מספר התווים בכותרת.

438
00:25:56,870 --> 00:26:03,600
>> אז מה אנחנו נעשה is-- כל זמן שלנו
פונקציה נקראת עם מחרוזת,

439
00:26:03,600 --> 00:26:09,095
אנחנו תמצאו שזה אורך ו
לאחר מכן להעביר את זה לקנה מידה.

440
00:26:09,095 --> 00:26:11,550
הצבע, אני אחזור
כי לפלדה כחולה.

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

442
00:26:19,060 --> 00:26:20,420
ויש לנו ללכת.

443
00:26:20,420 --> 00:26:23,190
יש לנו הדמיה
כותרות של Crimson.

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
לפחות בנתונים שלנו set-- מעניין.

473
00:27:52,370 --> 00:27:55,830
>> בואו נחזור של
פלדה כחולה ואז לראות

474
00:27:55,830 --> 00:28:00,601
מה אנחנו יכולים לעשות עם אף
נתונים מעניינים נוסף.

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

476
00:28:04,370 --> 00:28:09,070
אז שוב, אני ציינו ש
הנתונים בD3 הוא רשימה של דברים.

477
00:28:09,070 --> 00:28:11,080
ראינו מספרים מסוגים רבים.

478
00:28:11,080 --> 00:28:12,810
ראינו מחרוזות.

479
00:28:12,810 --> 00:28:15,700
אבל הדברים יכולים להיות גם אובייקטים.

480
00:28:15,700 --> 00:28:20,080
>> הם יכולים להיות דברים מסובכים
שכולל הרבה דברים.

481
00:28:20,080 --> 00:28:24,510
לומר שבצורה ברורה יותר,
ברוב המקרים, אנחנו

482
00:28:24,510 --> 00:28:28,384
רוצה לבנות בכל נקודת נתונים כ
יותר מסובך מסתם ערך אחד.

483
00:28:28,384 --> 00:28:30,175
אם היית לדמיין
מסד הנתונים על תלמידים,

484
00:28:30,175 --> 00:28:32,470
ייתכן שיש תלמיד
שם, תעודת סטודנט,

485
00:28:32,470 --> 00:28:36,370
והרבה דברים הקשורים
עם רקורד מסוים,

486
00:28:36,370 --> 00:28:39,834
לא רק מחרוזת או מספר.

487
00:28:39,834 --> 00:28:40,750
אז בואו נסתכל על זה.

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

489
00:28:55,180 --> 00:28:56,760
>> זה נתונים אחד כזה להגדיר.

490
00:28:56,760 --> 00:28:59,090
זה נתונים שנקבעו על רעידות אדמה.

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

492
00:29:01,910 --> 00:29:08,430
אז כל מה שכאן ברשימה או המערך שלנו
דברים מכיל הרבה דברים עצמו.

493
00:29:08,430 --> 00:29:11,380
אז כל נקודת נתונים יש
גודל ולתאם.

494
00:29:11,380 --> 00:29:13,425
ומרכז את עצמם
מכיל שני דברים.

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

496
00:29:15,960 --> 00:29:20,450
>> אז כל יום הוא עכשיו הרבה יותר
מסובך ומעניין הרבה יותר

497
00:29:20,450 --> 00:29:22,700
והוא מכיל הרבה יותר
מידע מעניין.

498
00:29:22,700 --> 00:29:26,730
בואו לראות שאנחנו יכולים לבנות את זה.

499
00:29:26,730 --> 00:29:36,130
חוזר חזרה לכאן, שוב, באמצעות
ההדמיה מעגל היסטוגרמה שלנו

500
00:29:36,130 --> 00:29:42,110
בנינו, בואו נראה אם ​​אנחנו יכולים לבנות
הדמיה של הפצת גודל

501
00:29:42,110 --> 00:29:43,305
בקבוצת הנתונים שלנו.

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

503
00:29:45,850 --> 00:29:48,660
>> אז הנה, זה אותו הרעיון.

504
00:29:48,660 --> 00:29:51,920
אבל עכשיו, ד מכיל יותר דברים.

505
00:29:51,920 --> 00:29:54,780
ד מכיל אלמנטי נתונים רבים.

506
00:29:54,780 --> 00:29:57,946
אז אנחנו מקבלים ד בחזרה.

507
00:29:57,946 --> 00:29:59,670
D3 נותן לנו ד.

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
>> המערכה החמישית, Mapping-- ביסוד,
אנחנו רוצים לשים את אלה על מפה.

525
00:31:04,950 --> 00:31:07,690
אני מתכוון, זה לאן זה הולך.

526
00:31:07,690 --> 00:31:13,130
אנחנו רוצים לקודד מידע על
עמדה של קריאות רעידת האדמה הבאות,

527
00:31:13,130 --> 00:31:16,350
כמו גם הגודל שלהם,
כי יש לנו את זה עכשיו.

528
00:31:16,350 --> 00:31:21,310
אנו מבינים כיצד לצרוך
נתונים מסובכים יותר.

529
00:31:21,310 --> 00:31:26,200
>> הדבר הראשון שנעשינו הוא
ליצור מפה, מפת רקע.

530
00:31:26,200 --> 00:31:29,360
אני הולך לעבור
זה מהר מאוד.

531
00:31:29,360 --> 00:31:30,560
זהו קוד מסובך.

532
00:31:30,560 --> 00:31:33,110
זה עוד אחד מאותם
מתכונים שאתה עושה לא ממש

533
00:31:33,110 --> 00:31:35,690
צריך להבין באופן מלא כדי שתוכלו להשתמש.

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

535
00:31:38,510 --> 00:31:39,740
אבל זה קוד.

536
00:31:39,740 --> 00:31:43,580
קוד זה ממש כאן יוצר מפה.

537
00:31:43,580 --> 00:31:45,730
>> אנחנו לא מתכוונים ללכת בפירוט.

538
00:31:45,730 --> 00:31:54,210
אבל באופן שטחי, מה שהיא עושה הוא,
זה שאילתות בקובץ זה us.json, ש

539
00:31:54,210 --> 00:31:57,150
מקורו של קובץ נתונים כמו
שהיינו לנו בעבר.

540
00:31:57,150 --> 00:31:59,150
זה יותר מורכב, כמובן.

541
00:31:59,150 --> 00:32:02,920
אבל במקרה הזה, כל מה ש,
כל נקודת נתונים היא מצב זה

542
00:32:02,920 --> 00:32:05,420
ויש לו רשימה של
קווי רוחב והאורך

543
00:32:05,420 --> 00:32:10,500
המגדירים את המצולע,
טופס ש, מדינה ש.

544
00:32:10,500 --> 00:32:13,280
>> אז מה D3 יעשה דומה
למה שעשינו בעבר.

545
00:32:13,280 --> 00:32:18,140
זה יבקש וש
לאגד כי לאלמנט.

546
00:32:18,140 --> 00:32:20,890
ויש פונקציה ש
ימפה אלמנט שיצא,

547
00:32:20,890 --> 00:32:23,410
המבוסס על קווי הרוחב והאורך.

548
00:32:23,410 --> 00:32:24,580
אתה יכול לקרוא עוד על כך ב.

549
00:32:24,580 --> 00:32:27,385
ואני ממליץ עליו.

550
00:32:27,385 --> 00:32:30,090
>> ישנם קישורים ב
סוף הקוד זה פורסם.

551
00:32:30,090 --> 00:32:31,570
והקוד הגיב.

552
00:32:31,570 --> 00:32:34,050
ביש קישורים לעוד על זה.

553
00:32:34,050 --> 00:32:36,590
אני ממליץ לך לבדוק את זה.

554
00:32:36,590 --> 00:32:39,460
אבל מה אכפת לנו הוא
פונקצית הקרנה זו.

555
00:32:39,460 --> 00:32:41,210
אני רוצה לעבור את זה.

556
00:32:41,210 --> 00:32:43,522
>> קודם כל, תן לי להראות
אתה, כן, יש לנו מפה.

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

558
00:32:47,300 --> 00:32:49,970
מפות הם מגניבים.

559
00:32:49,970 --> 00:32:52,330
אז בואו נסתכל על זה
פונקצית ייצור.

560
00:32:52,330 --> 00:32:56,481
>> הקרנה היא מאוד
כמו סולם, סולמות שוב.

561
00:32:56,481 --> 00:32:59,210
אז מה ייצור ל
פונקצית הקרנה זו

562
00:32:59,210 --> 00:33:06,610
אין הוא, אנחנו יכולים לעבור את זה קו אורך
וlatitudes-- במקרה זה,

563
00:33:06,610 --> 00:33:09,590
ערכים אלה הם כאן
לאט-משתוקק של הבניין

564
00:33:09,590 --> 00:33:13,990
אנחנו יושבים בימין
now-- להקרנה.

565
00:33:13,990 --> 00:33:20,560
והקרנה תהיה להמיר
כי לערכי פיקסל x ו- y.

566
00:33:20,560 --> 00:33:23,300
>> אז מה עושה הקרנה
דומה מאוד לקנה המידה שלנו.

567
00:33:23,300 --> 00:33:27,270
זה לוקח קווי הרוחב שלנו ו
קו אורך, המייצג את כל עולם

568
00:33:27,270 --> 00:33:31,390
ומתכווץ ואומד ש
עד לכיכר שאנחנו רוצים,

569
00:33:31,390 --> 00:33:33,510
שנתנו לו.

570
00:33:33,510 --> 00:33:35,220
במקרה זה, אנחנו
עובר את הערכים הללו.

571
00:33:35,220 --> 00:33:41,370
וזה נותן לנו, גם, ש
על המסך שלך אומר 640 פיקסלים.

572
00:33:41,370 --> 00:33:46,250
כל מסך זה הוא 700 פיקסלים
רחב, כך שגורם לנו עליו כאן,

573
00:33:46,250 --> 00:33:53,310
ו -154 פיקסלים למטה, שהייתי
הערכה היא פחות או יותר כאן.

574
00:33:53,310 --> 00:33:57,250
>> אז לקחת אותם לאט-מתגעגע, ש
מייצג משהו על הגלובוס כולו

575
00:33:57,250 --> 00:34:02,850
ולמעוך ומרגש שסביב
כדי לתת לנו x וערכי פיקסל y,

576
00:34:02,850 --> 00:34:05,450
זה הדבר הראשון זה
נעשה בקוד מיפוי זה.

577
00:34:05,450 --> 00:34:07,920
ולאחר מכן את שאר
קוד צורכת נתונים

578
00:34:07,920 --> 00:34:14,310
ואז לאט-מפות משתוקק אלה
עלה על משהו על המסך שלך.

579
00:34:14,310 --> 00:34:18,380
>> אבל אנחנו הולכים להשתמש בהקרנה זו
פונקציות, כי מתברר

580
00:34:18,380 --> 00:34:20,270
יש לנו משתוקק לאט-משתוקק גם כן.

581
00:34:20,270 --> 00:34:24,509
במבט לאחור על נתונים שלנו, יש לנו
קווי רוחב ואורך

582
00:34:24,509 --> 00:34:25,425
לכל תצפית.

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

584
00:34:28,131 --> 00:34:29,130
אז בואו להשתמש הקרנה.

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

586
00:34:33,250 --> 00:34:37,639
>> אז מסתכל על התערוכה שלנו,
אנחנו רוצים exposition--

587
00:34:37,639 --> 00:34:39,590
יש לנו קו רוחב וקו אורך.

588
00:34:39,590 --> 00:34:40,770
אבל אנחנו רוצים ערכי פיקסל.

589
00:34:40,770 --> 00:34:43,510
ומתברר, שיש לנו בדיוק
מה שאנחנו want-- הקרנה.

590
00:34:43,510 --> 00:34:46,239
ממש כמו שהיינו
באמצעות קנה מידה ממש כאן,

591
00:34:46,239 --> 00:34:52,075
עכשיו אנחנו הולכים להשתמש הקרנה
ולהעביר אותו המרכזת.

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

593
00:34:55,241 --> 00:34:56,949
אז הדבר הראשון
אנחנו doing-- כך שאנחנו

594
00:34:56,949 --> 00:35:01,520
ד מקבל, שהוא נתונים אישיים
אלמנט של רעידת אדמה בודדת

595
00:35:01,520 --> 00:35:02,370
קריאה.

596
00:35:02,370 --> 00:35:04,640
הדבר הראשון שאנחנו עושים
הוא לקבל את הקואורדינטות.

597
00:35:04,640 --> 00:35:06,150
בסדר, יש לנו את הקואורדינטות.

598
00:35:06,150 --> 00:35:09,160
>> הדבר השני שאנחנו עושים הוא
להעביר את זה הלאה להקרנה.

599
00:35:09,160 --> 00:35:13,440
הקרנה ממירה קואורדינטות אלה
לערכי פיקסל, x ו- y.

600
00:35:13,440 --> 00:35:16,680
ואז הדבר האחרון שאנחנו
רוצה לעשות הוא פשוט לקבל את x,

601
00:35:16,680 --> 00:35:19,342
שמקרה זה הוא ראשון.

602
00:35:19,342 --> 00:35:22,050
זה הראשון של שני הדברים
שמוחזרים על ידי הקרנה.

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

604
00:35:27,840 --> 00:35:29,630
>> אנחנו נעשה את אותו הדבר עבור y.

605
00:35:29,630 --> 00:35:34,960
אבל במקום זה, נחזור
האלמנט השני, y.

606
00:35:34,960 --> 00:35:35,980
תתכונן לרענון.

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

608
00:35:39,830 --> 00:35:46,450
אוו, דמות נוספת
here-- נחמד, יש לנו

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
>> אז זה קצת קוד ש
מתחבר לAPI USGS.

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