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