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