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: Я David
Chouinard, и это D3.

4
00:00:16,480 --> 00:00:17,700
Добро пожаловать.

5
00:00:17,700 --> 00:00:21,270
Мы собираемся, чтобы узнать о D3 сегодня.

6
00:00:21,270 --> 00:00:25,020
D3 является основой JavaScript
для создания высокого качества

7
00:00:25,020 --> 00:00:28,110
интерактивные визуализации для веб-сайтов.

8
00:00:28,110 --> 00:00:30,870
Такие вещи, как то, что мы
видя в задней части меня,

9
00:00:30,870 --> 00:00:34,230
мы собираемся научиться делать те,
вещи, вроде основам него.

10
00:00:34,230 --> 00:00:36,452
Но это будет здорово.

11
00:00:36,452 --> 00:00:38,160
Давайте начнем
делает красивые фотографии.

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

13
00:00:41,108 --> 00:00:44,350
У нас есть несколько демо
перспектив доступны.

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

15
00:00:48,040 --> 00:00:50,760
Давай сделаем это.

16
00:00:50,760 --> 00:00:58,700
>> Акт 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
Мы должны сказать ему, его позицию X,
его у должность, радиус.

31
00:01:40,045 --> 00:01:43,310
Мы не сказать ему ничего из этого,
так что мы не видим его сейчас.

32
00:01:43,310 --> 00:01:46,210
Но давайте скажем это такое.

33
00:01:46,210 --> 00:01:49,510
>> Итак, прежде всего, у вас есть
чтобы дать наш круг имя.

34
00:01:49,510 --> 00:01:53,070
Так что давайте называть его круг.

35
00:01:53,070 --> 00:01:54,406
Наша круг имеет имя сейчас.

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

37
00:01:57,230 --> 00:01:59,490
И давай несколько атрибутов.

38
00:01:59,490 --> 00:02:03,690
Как насчет CX бы Центр X, так
центр х положении.

39
00:02:03,690 --> 00:02:06,730
Скажем, 200 на 200 пикселей.

40
00:02:06,730 --> 00:02:10,220
>> Давайте ему у 200 пикселей, а также.

41
00:02:10,220 --> 00:02:16,032
И г, радиус, около 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
Мне нравится Steel Blue.

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

63
00:03:13,280 --> 00:03:16,030
Ну, наш круг изменил цвет.

64
00:03:16,030 --> 00:03:17,320
Замечательно.

65
00:03:17,320 --> 00:03:31,330
Давайте сделаем его полупрозрачным
too-- полупрозрачными.

66
00:03:31,330 --> 00:03:33,670
>> Таким образом, эти атрибуты
мы определяем по кругу.

67
00:03:33,670 --> 00:03:36,774
Первое, что мы сделали,
мы положить кружок на странице.

68
00:03:36,774 --> 00:03:38,690
А потом мы определяем
куча атрибутов.

69
00:03:38,690 --> 00:03:41,610
Некоторые из них являются обязательными,
как CX, CY, и радиус.

70
00:03:41,610 --> 00:03:42,680
А другие не являются обязательными.

71
00:03:42,680 --> 00:03:44,730
>> Есть много более атрибутов.

72
00:03:44,730 --> 00:03:46,760
Там очень много из них.

73
00:03:46,760 --> 00:03:53,070
Например, мы могли бы
хода, также, ход красным.

74
00:03:53,070 --> 00:03:55,630
Но давайте уберем это.

75
00:03:55,630 --> 00:04:00,450
Мы вернулись к окружности, синий круг.

76
00:04:00,450 --> 00:04:01,600
>> Так давайте сделаем больше кругов.

77
00:04:01,600 --> 00:04:02,810
Как это?

78
00:04:02,810 --> 00:04:04,665
Давайте сделаем еще один круг.

79
00:04:04,665 --> 00:04:05,985
Это интересно, не так ли?

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

81
00:04:09,630 --> 00:04:12,300
>> Так сказать, что я просто скопировать вставили
то, что мы уже.

82
00:04:12,300 --> 00:04:13,570
Давайте назовем это circle2.

83
00:04:13,570 --> 00:04:15,840
И давайте сделаем точный
То же самое и дать ему

84
00:04:15,840 --> 00:04:20,450
атрибуты, учитывая х положение 300.

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
Итак, давайте сбросить его атрибут сх.

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
>> Ну и что что говорит, для
каждые х, запустить эту функцию.

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
>> Акт II, управляемые данными 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
Этот блок текста Basic
создает столько кружков

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
получить позицию X 200, мы
может дать ему функцию.

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

212
00:11:26,140 --> 00:11:30,140
И здесь, мы можем сделать некоторые расчеты.

213
00:11:30,140 --> 00:11:33,710
и d здесь стоит на месте для данных.

214
00:11:33,710 --> 00:11:36,120
Таким образом, каждый раз, когда мы
Круг, в основном,

215
00:11:36,120 --> 00:11:37,750
D3 будет создавать эти семь кругов.

216
00:11:37,750 --> 00:11:38,500
И тогда для каждого

217
00:11:38,500 --> 00:11:41,920
>> круг, он собирается идти, эй,
circle1, что ваш X позиция.

218
00:11:41,920 --> 00:11:45,210
Ранее мы были
всегда отвечая 200.

219
00:11:45,210 --> 00:11:48,630
Но теперь, каждый раз, D3 спрашивает
нам, что ваше х позиция,

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
Nice.

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
И у нас есть это кампус я идет
от 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 пикселей, и это хлюпает в аренду,

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
>> Акт 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
Отлично, у нас есть
визуализации, запросов

414
00:24:28,870 --> 00:24:31,390
по какой-то код где
то, что, как правило,

415
00:24:31,390 --> 00:24:36,110
где он запрашивает некоторые данные из
где-то еще, что, как правило,

416
00:24:36,110 --> 00:24:38,656
как визуализация работать.

417
00:24:38,656 --> 00:24:41,400
>> Но я хочу вернуться к данным.

418
00:24:41,400 --> 00:24:48,030
Так что данные принципиально в D3-- D3
потребляет данные, находящиеся список вещей.

419
00:24:48,030 --> 00:24:53,000
D3 ожидает, что данные просто список
вещей, набор вещей.

420
00:24:53,000 --> 00:24:58,780
Это не имеет значения, что те вещи,
являются, при условии, что это массив из них.

421
00:24:58,780 --> 00:25:02,460
>> Так вот, к примеру, мы могли бы из
курс, значения с плавающей точкой.

422
00:25:02,460 --> 00:25:04,830
Мы могли бы негативы.

423
00:25:04,830 --> 00:25:09,400
D3 не волнует, так долго
как это список вещей.

424
00:25:09,400 --> 00:25:13,270
>> Как интересные вещи, которые мы
может иметь, мы могли бы также

425
00:25:13,270 --> 00:25:19,410
есть список строк, как это.

426
00:25:19,410 --> 00:25:25,440
Таким образом, эти заголовки Багровые
Я взял несколько дней назад.

427
00:25:25,440 --> 00:25:29,220
А может быть, вы можете найти некоторые интересные
все об этих Через заголовки.

428
00:25:29,220 --> 00:25:30,970
>> Итак, еще раз, это список вещей.

429
00:25:30,970 --> 00:25:32,360
D3 не волнует.

430
00:25:32,360 --> 00:25:35,572
Это случается, строка.

431
00:25:35,572 --> 00:25:36,530
Мы изменили наши данные.

432
00:25:36,530 --> 00:25:38,210
>> Давайте вернемся к нашей визуализации.

433
00:25:38,210 --> 00:25:42,495
Теперь, наша визуализация ожидает
входного сигнала для номера.

434
00:25:42,495 --> 00:25:44,370
Таким образом, мы будем иметь
сделать несколько изменений.

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

436
00:25:47,180 --> 00:25:52,180
Так, например, в первую очередь, может быть,
мы хотим положить эти круги по

437
00:25:52,180 --> 00:25:56,870
на длину заголовка,
Количество символов в заголовке.

438
00:25:56,870 --> 00:26:03,600
>> Так что мы будем делать is-- каждый раз, когда наши
Функция вызывается с строки,

439
00:26:03,600 --> 00:26:09,095
мы найдем это длина и
затем передать, что в масштабе.

440
00:26:09,095 --> 00:26:11,550
Цвет, я вернусь
что стальной синий.

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

442
00:26:19,060 --> 00:26:20,420
И там мы идем.

443
00:26:20,420 --> 00:26:23,190
У нас есть визуализация
малиновых заголовки.

444
00:26:23,190 --> 00:26:25,500
>> Наша масштаб откусил.

445
00:26:25,500 --> 00:26:29,680
Давайте предположим, что длинная
заголовок длиной 100 символов,

446
00:26:29,680 --> 00:26:32,244
так чистоте Это немного.

447
00:26:32,244 --> 00:26:33,410
И у нас есть визуализации.

448
00:26:33,410 --> 00:26:36,710
Так что, похоже, что большинство газет
довольно близко друг к другу,

449
00:26:36,710 --> 00:26:38,750
с точки зрения характера линии.

450
00:26:38,750 --> 00:26:41,200
Но там действительно выделяется.

451
00:26:41,200 --> 00:26:46,660
>> Мы могли бы построить несколько инструментов
исследовать, что больше.

452
00:26:46,660 --> 00:26:50,710
Но, когда я работал над этим, я был
Любопытно ли в этом наборе данных,

453
00:26:50,710 --> 00:26:53,880
заголовки с толстой кишки
в них будет больше.

454
00:26:53,880 --> 00:26:55,770
Я предполагает, что они бы.

455
00:26:55,770 --> 00:26:56,660
>> Итак, давайте выясним.

456
00:26:56,660 --> 00:27:00,650
Давайте использовать цвет
канал, как мы делали раньше,

457
00:27:00,650 --> 00:27:04,540
для кодирования некоторых о том,
нет толстой или нет.

458
00:27:04,540 --> 00:27:07,220
Таким образом, мы будем использовать условное снова.

459
00:27:07,220 --> 00:27:09,350
Вы не должны знать,
Детали этого,

460
00:27:09,350 --> 00:27:14,260
но это, как мы проверяем
Строка для конкретного характера

461
00:27:14,260 --> 00:27:16,355
В JavaScript, опять же, не имеет значения.

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

463
00:27:18,910 --> 00:27:23,270
>> Но если мы не найдем
толстой кишки, мы вернемся зеленый.

464
00:27:23,270 --> 00:27:26,100
И если мы это сделаем, мы вернемся в красный цвет.

465
00:27:26,100 --> 00:27:29,010
Итак, еще раз, заголовки, что
которые толстой кишки будет красным.

466
00:27:29,010 --> 00:27:34,980
Это то, что это означает: хорошо.

467
00:27:34,980 --> 00:27:38,040
>> Так что, похоже, что мой
гипотеза ударе.

468
00:27:38,040 --> 00:27:39,360
Там только два.

469
00:27:39,360 --> 00:27:42,380
У нас есть только шесть точек данных
и только двое двоеточие.

470
00:27:42,380 --> 00:27:45,510
Но, кажется, немного больше
на нижнем конце, на самом деле.

471
00:27:45,510 --> 00:27:47,830
Последние новости с двоеточия, кажется,
в общем быть короче,

472
00:27:47,830 --> 00:27:52,370
по крайней мере, в наших данных set-- интересно.

473
00:27:52,370 --> 00:27:55,830
>> Давайте вернемся, что
стальной синий, а затем увидеть

474
00:27:55,830 --> 00:28:00,601
что мы можем сделать с еще
более интересные данные.

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

476
00:28:04,370 --> 00:28:09,070
Итак, еще раз, я упомянул, что
Данные в D3 является список вещей.

477
00:28:09,070 --> 00:28:11,080
Мы видели численность многих видов.

478
00:28:11,080 --> 00:28:12,810
Мы видели строк.

479
00:28:12,810 --> 00:28:15,700
Но то, что также могут быть объектами.

480
00:28:15,700 --> 00:28:20,080
>> Они могут быть сложные вещи
которые включают в себя много вещей.

481
00:28:20,080 --> 00:28:24,510
Сказать, что более четко,
В большинстве случаев мы

482
00:28:24,510 --> 00:28:28,384
хотят построить каждую точку данных в качестве
сложнее, чем только одно значение.

483
00:28:28,384 --> 00:28:30,175
Если вы хотите представить
базы данных о студентах,

484
00:28:30,175 --> 00:28:32,470
там может быть студент
имя, студенческий билет,

485
00:28:32,470 --> 00:28:36,370
и многое связано
с конкретной записи,

486
00:28:36,370 --> 00:28:39,834
не только строка или число.

487
00:28:39,834 --> 00:28:40,750
Итак, давайте посмотрим на это.

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

489
00:28:55,180 --> 00:28:56,760
>> Это одна из таких набора данных.

490
00:28:56,760 --> 00:28:59,090
Это установлено о землетрясениях данных.

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

492
00:29:01,910 --> 00:29:08,430
Так что все здесь, на нашем списке или массива
вещей содержит много вещей самостоятельно.

493
00:29:08,430 --> 00:29:11,380
Таким образом, каждый точка данных имеет
Величина и координат.

494
00:29:11,380 --> 00:29:13,425
И координирует себя
содержат две вещи.

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

496
00:29:15,960 --> 00:29:20,450
>> Таким образом, каждый день теперь намного больше
сложной и гораздо интереснее,

497
00:29:20,450 --> 00:29:22,700
и содержит гораздо больше
Интересная информация.

498
00:29:22,700 --> 00:29:26,730
Давайте посмотрим, мы могли бы построить из этого.

499
00:29:26,730 --> 00:29:36,130
Возвращаясь сюда, опять же, с помощью
наша визуализация гистограмма круг

500
00:29:36,130 --> 00:29:42,110
мы построили, давайте посмотрим, если мы можем построить
визуализация распределения величины

501
00:29:42,110 --> 00:29:43,305
в нашем наборе данных.

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

503
00:29:45,850 --> 00:29:48,660
>> Так вот, это то же самое понятие.

504
00:29:48,660 --> 00:29:51,920
Но теперь, d содержит больше вещей.

505
00:29:51,920 --> 00:29:54,780
d содержит множество элементов данных.

506
00:29:54,780 --> 00:29:57,946
Итак, мы получаем D назад.

507
00:29:57,946 --> 00:29:59,670
D3 дает нам D.

508
00:29:59,670 --> 00:30:06,080
И мы отвечаем отыскания величины
Д а затем попутно, что в масштабе.

509
00:30:06,080 --> 00:30:08,490
>> И тогда мы должны изменить
наш масштаб, конечно.

510
00:30:08,490 --> 00:30:12,980
Так величины просто не
пойти гораздо больше, чем 10.

511
00:30:12,980 --> 00:30:15,485
На самом деле, там никогда не было
10 Землетрясение магнитудой.

512
00:30:15,485 --> 00:30:19,360
Но это своего рода наша верхняя
конец, наша верхний спектр.

513
00:30:19,360 --> 00:30:20,240
>> Давайте освежить.

514
00:30:20,240 --> 00:30:22,990
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
>> Акт 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
Карты прохладно.

559
00:32:49,970 --> 00:32:52,330
Итак, давайте посмотрим на это
Производственная функция.

560
00:32:52,330 --> 00:32:56,481
>> Проекция очень
как в масштабе, весы снова.

561
00:32:56,481 --> 00:32:59,210
Так что производство для
Эта проекция функция

562
00:32:59,210 --> 00:33:06,610
делает это, мы могли бы передать ему долготы
и latitudes-- в этом случае,

563
00:33:06,610 --> 00:33:09,590
Эти значения здесь
LAT-тоскует здания

564
00:33:09,590 --> 00:33:13,990
мы сидим в праве
now-- для проекции.

565
00:33:13,990 --> 00:33:20,560
И проекция преобразует
что в х и у значений пикселей.

566
00:33:20,560 --> 00:33:23,300
>> Так что проекция делает
очень похож на нашей шкале.

567
00:33:23,300 --> 00:33:27,270
Это занимает наших широтах и
долгота, что представляет собой весь земной шар

568
00:33:27,270 --> 00:33:31,390
и сокращение и калибровки, что
до площади, которую мы хотим,

569
00:33:31,390 --> 00:33:33,510
что мы дали его.

570
00:33:33,510 --> 00:33:35,220
В этом случае, мы
передачи этих значений.

571
00:33:35,220 --> 00:33:41,370
И это дает нам, хорошо, что
на экране означает 640 пикселей.

572
00:33:41,370 --> 00:33:46,250
Весь этот экран 700 пикселей
широкий, так что делает нас о здесь,

573
00:33:46,250 --> 00:33:53,310
и 154 пикселей вниз, который я бы
оценка в значительной степени здесь.

574
00:33:53,310 --> 00:33:57,250
>> Так что, те LAT-лонги, которые
представляют что-то на всем земном шаре

575
00:33:57,250 --> 00:34:02,850
и хлюпающие и перемещение, что около
чтобы дать нам X и Y. пикселей,

576
00:34:02,850 --> 00:34:05,450
это первое, что это
сделано в этом отображения кода.

577
00:34:05,450 --> 00:34:07,920
И тогда остальные
Код потребляет данные

578
00:34:07,920 --> 00:34:14,310
а затем отображает эти LAT-лонги
на что-то на экране.

579
00:34:14,310 --> 00:34:18,380
>> Но мы собираемся использовать эту проекцию
функции, потому что оказывается

580
00:34:18,380 --> 00:34:20,270
у нас есть LAT-лонги лонги, а также.

581
00:34:20,270 --> 00:34:24,509
Оглядываясь назад на наши данные, мы имеем
широты и долготы

582
00:34:24,509 --> 00:34:25,425
для каждого наблюдения.

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

584
00:34:28,131 --> 00:34:29,130
Итак, давайте использовать проекцию.

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

586
00:34:33,250 --> 00:34:37,639
>> Так, глядя на нашей экспозиции,
мы хотим, чтобы наш exposition--

587
00:34:37,639 --> 00:34:39,590
мы имеем широту и долготу.

588
00:34:39,590 --> 00:34:40,770
Но мы хотим, значения пикселей.

589
00:34:40,770 --> 00:34:43,510
И оказывается, у нас есть точно
то, что мы want-- проекции.

590
00:34:43,510 --> 00:34:46,239
Очень, как мы были
по шкале прямо здесь,

591
00:34:46,239 --> 00:34:52,075
Теперь мы собираемся использовать проекцию
и передать его координаты.

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

593
00:34:55,241 --> 00:34:56,949
Поэтому первое, что
мы doing-- поэтому мы

594
00:34:56,949 --> 00:35:01,520
получение д, которая является индивидуальной данные
элемент отдельного землетрясения

595
00:35:01,520 --> 00:35:02,370
чтение.

596
00:35:02,370 --> 00:35:04,640
Первое, что мы делаем
это получить координаты.

597
00:35:04,640 --> 00:35:06,150
Ладно, у нас есть координаты.

598
00:35:06,150 --> 00:35:09,160
>> Вторая вещь, которую мы делаем,
передать это проекции.

599
00:35:09,160 --> 00:35:13,440
Проекция преобразует эти координаты
в значений пикселов, х и у.

600
00:35:13,440 --> 00:35:16,680
И тогда последняя вещь, которую мы
хочу сделать, это просто получить х,

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
И мы мимо D.

633
00:36:50,290 --> 00:36:55,850
Но не D, потому что мы хотим величину
из D. d просто точка данных.

634
00:36:55,850 --> 00:36:57,430
Мы проедем величина в масштабе.

635
00:36:57,430 --> 00:36:58,470
>> Давайте попробуем это снова.

636
00:36:58,470 --> 00:37:00,230
Ох, это не работает.

637
00:37:00,230 --> 00:37:02,940
Почему она не работает?

638
00:37:02,940 --> 00:37:04,387
>> Так что помните, что масштаб делает.

639
00:37:04,387 --> 00:37:05,470
Давайте посмотрим на шкале снова.

640
00:37:05,470 --> 00:37:10,800
Масштаб карты от 1 до 10 на
с 22 до 600, более или менее.

641
00:37:10,800 --> 00:37:12,030
600 огромен.

642
00:37:12,030 --> 00:37:14,730
Вот почему мы получаем это.

643
00:37:14,730 --> 00:37:18,420
>> Таким образом, мы хотим изменить нашу шкалу
что-то более подходящее.

644
00:37:18,420 --> 00:37:22,610
Скажем, мы хотим от 0 до 60.

645
00:37:22,610 --> 00:37:25,340
60 большой, но 10 землетрясений
невероятно редко.

646
00:37:25,340 --> 00:37:27,880
В самом деле, они никогда не произошло.

647
00:37:27,880 --> 00:37:31,830
>> Так что же это будет сделать, это, это займет
наша величина, которая идет от 1 до 10

648
00:37:31,830 --> 00:37:34,490
и отобразить его на расширение его.

649
00:37:34,490 --> 00:37:37,370
И отобразить его на 0 до 60 лет.

650
00:37:37,370 --> 00:37:38,840
Давайте освежить.

651
00:37:38,840 --> 00:37:41,850
>> 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
И теперь, каждый раз, когда мы
наведите, мы получаем полный круг.

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
Так давайте спросим мог
Геологическая служба США о своих данных.

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