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
>> Act I, 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
Ние трябва да го кажа на своя х позиция,
неговата 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 ще центрирате х, така
центъра на позицията на х.

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, и Radius.

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
>> Да предположим, че аз просто Copy и замазка
това, което вече имаме.

82
00:04:12,300 --> 00:04:13,570
Нека го наречем circle2.

83
00:04:13,570 --> 00:04:15,840
И нека да направи точно
едно и също нещо и да му дадете

84
00:04:15,840 --> 00:04:20,450
атрибути, дадена х позиция на 300.

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
Да речем, неговото х позиция до 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
Какво ще кажеш да просто да даде
тя случаен х позиция?

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
И нека просто да се отървем от 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
>> Така че тази х postition-- вместо
от просто казвам, всички кръгове,

210
00:11:17,800 --> 00:11:21,735
получите х позиция 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 какво е вашето х позиция.

218
00:11:41,920 --> 00:11:45,210
Преди това ние бяхме
Винаги отговора 200.

219
00:11:45,210 --> 00:11:48,630
Но сега, всеки път, D3 пита
ни какво е вашето х позиция,

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
Х и У позиции.

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
След това тази стойност просто отиде извън екрана.

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
И ние имаме този кампус I отива
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
И всичко между тях
е функция на г.

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
Това е много неудобен за да получите
данните трудно кодирани тук.

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
Great, ние имаме
визуализация, която запитва

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
I поема искаха.

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
може да има един студент
име, ID студент,

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
Nice, имаме визуализация.

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
>> Act 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
Но повърхностно, това, което той прави, е,
го запитва този 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
Maps са готини.

559
00:32:49,970 --> 00:32:52,330
Така че нека да погледнем на това
производствена функция.

560
00:32:52,330 --> 00:32:56,481
>> Projection е много
като скала, везни отново.

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
И проекция ще конвертирате
че в х и у стойностите на пикселите.

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
и стиска и движещи се, че около
да ни х и у пикселни стойности даде,

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
Projection конвертира тези координати
в стойностите на пикселите, х и у.

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
Но вместо това, ние ще се върне
вторият елемент, на база.

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
В момента има координатите,
който е х и у.

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
Но не По- защото искаме величината
от г. г е само точка от данни.

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
Scale карти от 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
>> Nice, имаме визуализация.

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
И сега, всеки път, когато
Hover, получаваме пълен кръг.

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
много земетресения върху
West Coast в Калифорния.

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