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