[Грає музика] 

DAVID Chouinard: Я David Chouinard, і це D3. Ласкаво просимо. Ми збираємося, щоб дізнатися про D3 сьогодні. D3 є основою JavaScript для створення високої якості інтерактивні візуалізації для веб-сайтів. Такі речі, як те, що ми бачачи в задній частині мене, ми збираємося навчитися робити ті, речі, на зразок основам нього. Але це буде здорово. Давайте почнемо робить красиві фотографії. У нас є кілька демо перспектив доступні. Давай зробимо це. 

Акт I, DOM manipulation-- ми збираємося почати прямо зараз робить цікаві речі. Перш за все, на лівій стороні, ми маємо код. Праворуч, у нас є Результат нашого коду. Давайте через нього. 

Давайте зробимо коло. Як це звучить? svg.append circle-- Ми просто зробили коло. Ви мені не вірите, чи не так? Це не там. 

Отже, що ми зробили тут є, SVG є масштабованої векторної графіки. Це, як ми говоримо браузеру, щоб зробити векторну графіку в браузері. Те, що ми тільки що зробили зараз додається коло, щоб переглянути. 

Обіцянку, що коло потрібно небагато основних атрибутів перш ніж ми зможемо реально побачити його. Ми повинні сказати йому, його позицію X, його у посаду, радіус. Ми не сказати йому нічого з цього, так що ми не бачимо його зараз. Але давайте скажемо це таке. 

Отже, перш за все, у вас є щоб дати наше коло ім'я. Так що давайте називати його коло. Наша коло має ім'я зараз. І давай кілька атрибутів. Як щодо CX б Центр X, так центр х положенні. Скажімо, 200 на 200 пікселів. 

Давайте йому у 200 пікселів, а також. І г, радіус, близько 40 пікселів. Тепер давайте подивимося. Я не можу записати. 

Там ви йдете. У нас є коло в положенні 200 пікселів, 200 пікселів, радіус 40 пікселів. Вид здорово, чи не так? У нас є коло. Так. 

Так що не треба слідувати уздовж. Всі ці приклади, все Код я роблю сьогодні буде надана на сайті наприкінці у вигляді інтерактивних прикладів з контрольно-пропускних пунктів на кожен акт, і так далі. 

Давайте робити більше речей. Цей чорний коло дійсно некрасиво. Я вибачаюся за цю помилку Повідомлення прямо там. Там ми йдемо. 

Давайте дамо йому колір. Як це? Мені подобається Steel Blue. Ну, наше коло змінив колір. Чудово. Давайте зробимо його напівпрозорим too-- напівпрозорими. 

Таким чином, ці атрибути ми визначаємо по колу. Перше, що ми зробили, ми покласти кружок на сторінці. А потім ми визначаємо купа атрибутів. Деякі з них є обов'язковими, як CX, CY, і радіус. А інші не є обов'язковими. 

Є багато більш атрибутів. Там дуже багато з них. Наприклад, ми могли б ходу, також, хід червоним. Але давайте приберемо це. Ми повернулися до кола, синій круг. 

Так давайте зробимо більше кіл. Як це? Давайте зробимо ще одне коло. Це цікаво, чи не так? 

Так сказати, що я просто скопіювати вставили те, що ми вже. Давайте назвемо це circle2. І давайте зробимо точний Те ж саме і дати йому атрибути, враховуючи х становище 300. Ура, у нас є дві окружності зараз. 

І, звичайно, ми могли б оновити ці значення. Я міг би поставити його на 400, і тепер він рухається. І так як це дратує, давайте видаляти її, так circle2.remove. Це вже ні. 

Отже, що ми робимо, і це просто дуже, very-- це дуже схожих на ті, могли б зробити в JQuery, наприклад. Ми просто маніпулювати DOM, як це називається. Ви, напевно, чули це слово раніше. Ми створюємо речі, установка атрибути на речі, видаляючи матеріал. 

Тепер, ось, де це стає цікавим. Так пізніше в коді, ми могли б ще ставляться до вихідної окружності тут. Отже, давайте скинути його атрибут сх. Скажімо, його х становище 400. І я збираюся перейти що, так це очевидно. Там ми йдемо. 

Тому ми додали в коло. Ми встановлюємо деякі атрибути. Ми додали ще одне коло, зняв її. А потім ми зміни Оригінальний коло. 

Але ось де він отримує набагато цікавіше. Ми не тільки можемо встановлювати атрибути як тільки значення, ми можемо говорити, агов, круг, перейти в положення 200. Ми також можемо встановити їх в якості функцій. 

Так замість того, 400 тут, ми можемо зробити деякі розрахунки на льоту те, що ми хочу, щоб атрибут бути. Так що це, як ви б виразити це. Ми говоримо, що замість того, щоб 400, дозвольте мені дати вам функцію замість. І тут, всередині цієї функції, ми можемо зробити будь божевільний розрахунок. 

Ми могли б витрачати час і шукати в якийсь інший речі і динамічно вирішувати Коло, яке значення ми хочемо. Як щодо того, щоб просто дати це випадкова х позиція? Так ось, що. 

Ну і що що говорить, для кожні х, запустити цю функцію. І те, що ми робимо, розрахунку деякі речі, випадкове раз ширина і повернення цього. Таким чином, кожен раз ми запустили, що ми отримуємо круг, який йде у випадковому місці. Це круто. Я відчуваю, що я міг дивитися на це для трохи. Ми починаємо, щоб дістатися до щось цікаве тут. Давайте зробимо це керовані даними зараз. Там немає ніяких даних тут. Давайте змінимо це. 

Акт II, керовані даними Documents-- Так давайте повернемося сюди. І давайте просто позбутися circle2, тому що ми просто додавання та видалення це. Таким чином, ми дійсно не потрібно. Ми повинні бути набагато розумніші тут. Скажімо, у нас є деякі дані якого-небудь роду. Один moment-- скажімо, ми мали дані цієї форми. У нас було безліч, просто купа цифр. У нас є сім цифр тут, якими б вони represent-- кількість на банківський рахунок народу, як скільки вони важать, бог знає що. 

Це номери, і ми хочете використовувати наші кола представляти ці цифри якось. Ми хочемо, щоб зв'язати нам круги на ці номери. Так, що ми робимо. Скажімо, ми хочемо коло для кожного номера. Ми могли б зробити старий що ми були doing-- Коло додавати і circle2 і circle3. Але це виходить з під контролю, і є багато повторюваних логіки. 

Отже, давайте більш розумний з цим. Замість використання VaR коло svg.append, що ми просто використовували, ми збираємося використовувати це невеликий блок тут. Я не хочу йти в поглиблене в те, що всі ці частини. І це свого роду складна тема. І я хотів би. 

Але ключова річ, щоб recognize-- і ви побачите дуже часто в D3 коду. Цей блок тексту Basic створює стільки гуртків як є елементи даних в цьому масиві прямо тут. Так що це створює стільки колах як є елементи. Це створюватиме нам сім кіл. І це робить дуже, дуже ключову річ. Так що давайте працювати це. Давайте знімемо наші інші круг. Давайте просто коментарі тільки розлучитися, і запустити це знову. 

Там ми йдемо. Таким чином, наше коло тут багато темніше, тому що ми є сім кіл, один поверх іншої. Ми тільки що створили сім кіл, один кожен для кожного з цих елементів даних. Але є ключ, що сталося з цього фрагмента прямо тут. 

Це що дані пов'язані. Так кожен з ці елементи даних, 10, 45, 105, був пов'язаний зокрема окружності. Так вони не тільки створили купа кіл але пов'язує ці дві речі разом. 

І в майбутньому, тому що ми створили ці кола за допомогою цієї функції D3, якщо я дам вам круг, ви можете дайте мені дані, пов'язані з ним. Так ми можемо запитати D3. Гей, D3, у мене є це коло. Що дані, які має коло? І D3 б розповісти нам 10 чи 45 або 105. 

Ці речі пов'язані. Це дуже, дуже фундаментальне поняття. Давайте подивимося на це. 

Так як ми б запитати D3-- так це не має значення для цього, але просто повірте мені на це. Це, як ми просимо D3. Гей, D3, дайте мені спочатку круг, який ви можете знайти. Дайте мені перше коло ви можете знайти. І тоді ми могли б запитати D3, що дані про те, що, як це, 10. 

Так що ми просто просимо D3, знайти мене Перше коло ви можете знайти. Що його дані? 10, які дійсно наш Перший елемент даних. Ми могли б запитати його, гей, D3, знайти нам наш третє коло. 105. Чому це дуже важливо? 

Так прямо тут, я вже згадував що ми можемо використовувати функції. І я згадував, що був дуже сильна річ. Так що не тільки може наші функції робити речі, як зробити деякі обчислення, наприклад, повертати випадкове число, це може також зробити щось на основі даних. Це те, що означає, керовані даними документи. Ось що D3 варто. 

Так що це х postition-- замість просто сказати, всі кола, отримати позицію X 200, ми може дати йому функцію. І тут, ми можемо зробити деякі розрахунки. і d тут стоїть на місці для даних. Таким чином, кожен раз, коли ми Коло, в основному, D3 буде створювати ці сім кіл. І тоді для кожного 

круг, він збирається йти, гей, circle1, що ваш X позиція. Раніше ми були завжди відповідаючи 200. Але тепер, кожен раз, D3 запитує нам, що ваше х позиція, це збирається дати us-- у нас є що коло, так що ми маємо дані. Це збирається дати нам дані і сказати, що ви хочете Експозиція бути, на основі цих даних. 

Давайте просто повернути фактичні дані. Так що, якщо ми запустимо це, це дає Дані компанії приводом документів. Ці кола основі У зв'язку position-- вони підстав, як в залежності від даних. 

Таким чином, для першого кола, D3 ставить коло. А потім D3 просить нас, що робити Ви хочете Експозиція буде. І ми просто говоримо, що б дані. Зробіть експозицію 10. 

Тоді він питає, що ви хочете Експозиція буде на друге коло. І ми відповідаємо, 45. І ми, звичайно, може зробити деякі обчислення тут. Я вважаю, що ті кола є свого роду сплющені до. 

Так помножити його на 3, помножити дані по 3. Коло наших тільки що виріс із. Втричі Наша цінність. 

Коло насправді на краю, так що давайте, може бути, свого роду компенсувати це. Скажімо, на 20. Ну от. 

Це візуалізації даних. Це дуже основна, але це дає нам деяке уявлення про наших даних. Це говорить нам про те, що, наприклад, ми є трохи кластер елементів. І у нас є великий викид тут. Це дає нам деяку інформацію про розподіл. 

Якщо ми, наприклад, щоб змінити дані до 150 тут і оновлення, наша візуалізація змінилося. Цей документ управляється даними. 

Тому, звичайно, всі ці елементи, всі ці атрибути тут, ми можемо використовувати функцію, не тільки числа, а не тільки х і у позиції. Отже, ми можемо використовувати функцію для кольору. Таким чином, ми будемо робити те ж саме. Ми дамо йому функцію. 

І давайте говорити, що ми могли б умовні оператори в нашій функції. Ця функція може бути сто рядків довжиною. Це можна зробити дуже, дуже складні речі. 

Так що давайте покласти, якщо заява тут. Скажімо, якщо наші дані менш ніж 50, це деякий поріг що ми зацікавлені в з деяких причин. Давайте зробимо це зелений. В іншому випадку, давайте зробимо його червоним. Як це? Nice. 

Таким чином, наша візуалізація даних починаючи для забезпечення більш цікаву інформацію на багатьох каналах. Отже, тепер ми знаємо небагато про розподіл. І ми знаємо, що є якась обрізається на 50, який нам потрібен в. Ми знаємо, що є дві точки даних нижче цього порога, і більшість з них вище. 

Так як останній крок, ці дані тут, це дуже рідко можна побачити в цьому роді. Так що давайте просто перемістити його в змінну тому що це чистіше, як це. І тоді ми використовуємо цю змінну тут. Це точно така ж річ. Це просто трохи чистіше. 

Потім, Акт III, Scales-- Так одна проблема право тут є, якщо ми міняємо Дані в цій 200 value-- якщо ми змінимо його до 400 або щось і оновлення, то це значення просто пішов за кадром. Таким чином, наша логіка тут про те, як ми робимо раз 3 і 20, щоб поширювати його, а потім змістити його трохи дійсно незграбним. 

Що означають ці цифри? Вони просто жорстко там. І вони дуже прив'язані до даних. Ми хочемо, щоб дані документа наводиться. Ми хочемо, дуже гнучкий документ, що наведених даних, адаптується до неї і представляє його. 

Те, що ми в основному повинні, ми Тобто цей діапазон чисел 10. 45, 105. І ми хочемо, щоб карти, які виходять на ширина, повна ширина тут. Таким чином, ми маємо ряд номери, що йдуть від 0 до 100. І у нас є це кампус я йде від 20 до 700, в цьому випадку. 

Ми начебто хочете відобразити, що. Ми хочемо, щоб масштабувати, що і то компенсувати це небагато. Виявляється, що D3 має це. Це називається масштаб. Так що давайте використовувати його. 

Так, що works-- я збираюся типу це, а потім пояснити його. Це масштаб. Що він буде робити, воно буде намітити Значення від 1 до 200 на 20 до 600. Ми можемо перевірити це. Ми бачимо, що тут. 

Так що, якщо я годую його 1-- один момент. Дайте мені одну секунду. Мабуть, я помилився при введенні його. Там ви йдете. Я шкодую про це. 

Так що масштаб буде робити Тобто, це займе значення а потім перетворити, що, розширити, що, так що вона заповнює весь спектр ви просите. Таким чином, в цьому випадку, якщо ми даємо йому один, це буде карта, яка виходить на 20. І якщо ми даємо йому 200, це збирається на карті, що на 600. І десь між ними, якщо ми отримаємо 100, це буде десь в межах від 20 до 600. 

І, звичайно, зараз це те, що ми повинні видалити ці жорстко закодовані речі, які ми повинні прямо там. Отже, що ми хочемо зробити, це взяти дані, які ми враховуючи, що особисті дані елемент, і передати його в масштабі в першу чергу. Так шкала масштабування його. 

Well-- О, у нас є трохи тут помилку. Ми не вистачає даних. Там ви йдете. І, що розширює його. 

Це дає нам же Результат, який ми мали раніше, але замість того, ті, жорстко обмежень. І якщо розмір нашої зміни Полотно, наприклад, Якщо ми хочемо мати це знову 400 пікселів, і це хлюпає в оренду, Ми можемо її мати over-- ми можемо розширити його, або ми може зменшити цей ліву смугу для то більше або менше 20. Ці цифри, це жорстко Номери тепер сенс для нас. 

І ми могли б зробити набагато більше, цікаві речі. Таким чином, замість того, щоб мати лінійну масштаб, ми могли б увійти масштаб. І це дасть нам логарифмічною шкали. 

Так що тепер наша шкала, замість того, просто розширювати, що діапазон, він робить більш складні речі. Замість того, щоб цей діапазон важко кодується, і замість того, що 600, ми могли б просто використовувати ширину, тому з 20 по ширині мінус 40, 2 рази націнка на іншій стороні. І це робить набагато більше сенсу для хтось, хто міг би поглянути на код. 

Цікаво, що ваги отримати дуже, дуже складний, а також. Вони роблять багато цікавих речей. Так ваги не обов'язково працювати тільки з числами. Давайте зробимо колірну гамму. 

Таким чином, наш діапазон може be-- наш домен 1 до 200. Це вхід річ. Але ми могли б зіставити з зеленого до червоного, наприклад. І тепер, якщо ми проходимо його 1, ми збираємося, щоб отримати зелений. Якщо ми дамо йому 200, то ми отримаємо червоний колір. І якщо ми передати йому щось між ними, це буде якийсь мікс, що, десь на градієнт між зеленим і червоним. 

І замість того, Цей вид незграбних логіки ми маємо тут з умовне право там, ми могли б something-- лінійна шкала між них. Таким чином, ми б використовувати шкалу ми просто створений, яку ми назвали колір. І ми дали б вона D, який це наша стихія даних. І там ми йдемо. У нас є колірну гамму. 

Так що це відображення. Так далеко залишилося, це повністю зеленим. Правого краю повністю червоним. І все між ними є функцією D. У нас є цікаве візуалізації тут. Але наші дані були нудні. Давайте подивимося, що ми можемо зробити, якщо у нас було більше цікавих даних. 

Акт IV, Робота з Data-- першим ділом ми хочемо зробити, щоб наші візуалізація більш цікавим , Щоб перемістити дані в іншому місці. Це дуже незграбним, щоб мати дані жорстко тут. І взагалі, ми будемо просити хтось інший для даних. Ми будемо, можливо, просять уряд, Бюро перепису населення, що ваші дані а потім у змові, що або просити деякий ПО сторонніх особа для деяких даних а потім будівлю візуалізація на що. 

Тому перше, що ми хочемо зробити, це крок, який десь в іншому місці. Так що я збираюся створити подати тут під назвою data.json. JSON є формат даних. Ви не повинні багато знати про це. І ми збираємося, щоб скопіювати мало даних у нас там, вставте його в там дослівно, перейдіть Повернутися до нашого коду візуалізації тут, і використовувати цю функцію прямо тут. Ви не повинні знати деталі. Але те, що це буде зробити, це, він знайде цей файл, скачати його і повернути його до нас. Так що ж це робить, він йде і отримати файл data.json. А потім все код, який відступ inside-- по суті, всі код, який ми повинні there-- буде працювати тільки, коли ми отримуємо дані назад. І тоді це буде працювати, що код з даними, які ми маємо. Відмінно, у нас є візуалізації, запитів з якоїсь код де те, що, як правило, де він запитує деякі дані з десь ще, що, як правило, як візуалізація працювати. 

Але я хочу повернутися до даних. Так що дані принципово в D3-- D3 споживає дані, що знаходяться список речей. D3 очікує, що дані просто список речей, набір речей. Це не має значення, що ті речі, є, за умови, що це масив з них. 

Так от, приміром, ми могли б з курс, значення з плаваючою точкою. Ми могли б негативи. D3 не хвилює, так довго як це список речей. 

Як цікаві речі, які ми може мати, ми могли б також є список рядків, як це. Таким чином, ці заголовки Багряні Я взяв кілька днів тому. А може бути, ви можете знайти деякі цікаві все про ці Через заголовки. 

Отже, ще раз, це список речей. D3 не хвилює. Це трапляється, рядок. Ми змінили наші дані. 

Давайте повернемося до нашої візуалізації. Тепер, наша візуалізація очікує вхідного сигналу для номера. Таким чином, ми будемо мати зробити кілька змін. Так, наприклад, в першу чергу, може бути, ми хочемо покласти ці кола по на довжину заголовка, Кількість символів у заголовку. 

Так що ми будемо робити is-- кожен раз, коли наші Функція викликається з рядка, ми знайдемо це довжина і потім передати, що в масштабі. Колір, я повернуся що сталевий синій. І там ми йдемо. У нас є візуалізація малинових заголовки. 

Наша масштаб відкусив. Давайте припустимо, що довга заголовок довжиною 100 символів, так чистоті Це небагато. І у нас є візуалізації. Так що, схоже, що більшість газет досить близько один до одного, з точки зору характеру лінії. Але там дійсно виділяється. 

Ми могли б побудувати кілька інструментів дослідити, що більше. Але, коли я працював над цим, я був Цікаво чи в цьому наборі даних, заголовки з товстої кишки в них буде більше. Я припускає, що вони б. 

Отже, давайте з'ясуємо. Давайте використовувати колір канал, як ми робили раніше, для кодування деяких про те, немає товстої чи ні. Таким чином, ми будемо використовувати умовне знову. Ви не повинні знати, Деталі цього, але це, як ми перевіряємо Рядок для конкретного характеру В JavaScript, знову ж таки, не має значення. 

Але якщо ми не знайдемо товстої кишки, ми повернемося зелений. І якщо ми це зробимо, ми повернемося в червоний колір. Отже, ще раз, заголовки, що які товстої кишки буде червоним. Це те, що це означає: добре. 

Так що, схоже, що мій гіпотеза ударі. Там тільки два. У нас є тільки шість точок даних і лише двоє двокрапка. Але, здається, трохи більше на нижньому кінці, насправді. Останні новини з двокрапки, здається, в загальному бути коротше, принаймні, в наших даних set-- цікаво. 

Давайте повернемося, що сталевий синій, а потім побачити що ми можемо зробити з ще більш цікаві дані. Отже, ще раз, я згадав, що Дані в D3 є список речей. Ми бачили чисельність багатьох видів. Ми бачили рядків. Але те, що також можуть бути об'єктами. 

Вони можуть бути складні речі які включають в себе багато речей. Сказати, що більш чітко, У більшості випадків ми хочуть побудувати кожну точку даних в якості складніше, ніж тільки одне значення. Якщо ви хочете представити бази даних про студентів, там може бути студент ім'я, студентський квиток, та багато пов'язано з конкретною записи, не тільки рядок або число. Отже, давайте подивимося на це. 

Це одна з таких набору даних. Це встановлено про землетруси даних. Так що все тут, на нашому списку або масиву речей містить багато речей самостійно. Таким чином, кожен точка даних має Величина і координат. І координує себе містять дві речі. 

Таким чином, кожен день тепер набагато більше складною і набагато цікавіше, і містить набагато більше Цікава інформація. Давайте подивимося, ми могли б побудувати з цього. Повертаючись сюди, знову ж таки, за допомогою наша візуалізація гістограма коло ми побудували, давайте подивимося, якщо ми можемо побудувати візуалізація розподілу величини в нашому наборі даних. 

Так от, це те ж саме поняття. Але тепер, d містить більше речей. d містить безліч елементів даних. Отже, ми отримуємо D тому. D3 дає нам D. І ми відповідаємо відшукання величини Д а потім принагідно, що в масштабі. 

І тоді ми повинні змінити наш масштаб, звичайно. Так величини просто не піти набагато більше, ніж 10. Насправді, там ніколи не було 10 Землетрус магнітудою. Але це свого роду наша верхня кінець, наша верхній спектр. 

Давайте освіжити. Nice, у нас є візуалізації. Це цікаво note-- так Є дві точки даних, які майже точно один над інші, з точки зору величини. Ви бачите це непрозорістю ми використовуємо. 

У нас є географічні дані тепер. У нас є широти і довготи. Може бути, ми могли б зробити щось набагато цікавіше з цим. Давайте знайти ще кілька Цікавий спосіб візуалізувати це складніше, Дані, які ми маємо доступ. 

Акт V, Mapping-- принципово, ми хочемо, щоб покласти їх на карті. Я маю на увазі, це, де це відбувається. Ми хочемо, щоб кодувати інформацію про Положення цих свідчень землетрусу, а також їх величина, тому що у нас це зараз. Ми розуміємо, як використовувати більш складні дані. 

Перше, що ми зробимо, це створити карту, фонову карту. Я збираюся пройти через це дуже швидко. Це складно код. Це ще один з тих, рецепти ви дійсно не повинні повністю зрозуміти, для вас використовувати. Але це код. Цей код прямо тут створює карту. 

Ми не збираємося йти в деталях. Але зовні, що вона робить, це, він запитує цей файл us.json, який це файл даних, як один, що було раніше. Це більш складне, звичайно. Але в цьому випадку, все, кожна точка даних це стан і має список широти і довготи які визначають багатокутник, що форма, що державою. 

Так що D3 буде зробити, це схоже до того, що ми робили раніше. Він буде просити, щоб і зв'язати, що до елементу. І є функція, яка буде відображати цей елемент з, на основі широти і довготи. Ви можете дізнатися більше про те, що. І я рекомендую його. 

Є посилання на кінець цього коду в курсі. І код прокоментований. В є посилання для подальшого на це. Я рекомендую вам подивитися його. Але те, що ми дбаємо про те, Ця проекція функція. Я хочу, щоб пройти через це. 

Насамперед, дозвольте мені показати ти що, так, у нас є карта. Карти прохолодно. Отже, давайте подивимося на це Виробнича функція. 

Проекція дуже як у масштабі, ваги знову. Так що виробництво для Ця проекція функція робить це, ми могли б передати йому довготи і latitudes-- в цьому випадку, Ці значення тут LAT-тужить будівлі ми сидимо в праві now-- для проекції. І проекція перетворить що в х і у значень пікселів. 

Так що проекція робить дуже схожий на нашій шкалою. Це займає наших широтах і довгота, що являє собою всю земну кулю і скорочення і калібрування, що до площі, яку ми хочемо, що ми дали його. У цьому випадку, ми передачі цих значень. І це дає нам, добре, що на екрані означає 640 пікселів. Весь цей екран 700 пікселів широкий, так що робить нас про тут, і 154 пікселів вниз, який я б оцінка в значній мірі тут. 

Так що, ті LAT-лонги, які представляють щось на всій земній кулі і хлюпають і переміщення, що близько щоб дати нам X і Y. пікселів, це перше, що це зроблено в цьому відображення коду. І тоді інші Код споживає дані а потім відображає ці LAT-лонги на щось на екрані. 

Але ми збираємося використовувати цю проекцію функції, тому що виявляється у нас є LAT-лонги лонги, а також. Озираючись назад на наші дані, ми маємо широти і довготи для кожного спостереження. Отже, давайте використовувати проекцію. 

Так, дивлячись на нашій експозиції, ми хочемо, щоб наш exposition-- ми маємо широту і довготу. Але ми хочемо, значення пікселів. І виявляється, у нас є точно те, що ми want-- проекції. Дуже, як ми були за шкалою прямо тут, Тепер ми збираємося використовувати проекцію і передати його координати. Тому перше, що ми doing-- тому ми отримання д, яка є індивідуальною дані елемент окремого землетрусу читання. Перше, що ми робимо це отримати координати. Гаразд, у нас є координати. 

Друга річ, яку ми робимо, передати це проекції. Проекція перетворює ці координати в значень пікселів, х і у. І тоді остання річ, яку ми хочу зробити, це просто отримати х, який у цьому випадку є перший. Це перший з двох речей що повертаються проекції. 

Ми зробимо те ж саме для у. Але замість цього, ми повернемося другий елемент, у. Будьте готові, щоб оновити. Ох, зайвий символ here-- добре, у нас є управляється даними документа, це приховуючи цей файл JSON об'єктів, зробити карту, а також зміни атрибутів у відношенні даних проектувати на карті. Це дійсно цікаво. Це здорово. 

Давайте його на сходинку вище. Я маю на увазі, у нас є дві частини Інформація з кожною точкою даних. Я маю на увазі, три. У нас є координати, який х і у. І у нас є величину. 

Ми повинні кодувати величину якось. У нас є багато каналів. Ми можемо використовувати колір. Ми можемо використовувати радіус. Ми могли б використовувати непрозорість. Ми могли б використовувати багато речей в коді. Будь-який з цих атрибутів, і багато інші, які не в списку, тому що вони за бажанням, ми могли б використовувати, щоб кодувати ці дані, інсульту і всі ці речі, які я вже згадував. 

Давайте радіус робити. Я думаю, що радіус найбільш інтуїтивно зрозумілий. Отже, ще раз, ми замінимо, що жорстко 40 і зробити деякі розрахунки. Ми будемо використовувати наш улюблений масштаб знову. І ми повз D. Але не D, тому що ми хочемо величину з D. d просто точка даних. Ми проїдемо величина в масштабі. 

Давайте спробуємо це знову. Ох, це не працює. Чому вона не працює? 

Так що пам'ятайте, що масштаб робить. Давайте подивимося на шкалі знову. Масштаб карти від 1 до 10 на з 22 до 600, більш-менш. 600 величезний. Ось чому ми отримуємо це. 

Таким чином, ми хочемо змінити нашу шкалу щось більш підходяще. Скажімо, ми хочемо від 0 до 60. 60 великий, але 10 землетрусів неймовірно рідко. Справді, вони ніколи не сталося. 

Так що ж це буде зробити, це, це займе наша величина, яка йде від 1 до 10 і відобразити його на розширення його. І відобразити його на 0 до 60 років. Давайте освіжити. 

Nice, у нас є візуалізації. Це здорово. Це фактичні дані. Ви помітите, в моїй маленькій іграшки Наприклад, найбільший землетрус знаходиться прямо на верхній частині нас. Але це так. У нас є дата приводом візуалізації який споживає дані і дає нам дійсно Цікава інформація. Так, давайте додамо деякі інтерактивність до нього. Я згадав, що був сильний сила D3. 

Так от, для кожного елемента, ми опису купу атрибутів. Але ми також можемо описати те, що ми хочемо щоб це сталося з інтерактивністю елементів. Наприклад, ми могли б описати що відбувається, коли ми миші над. І дуже схоже, що, що візьму функцію, дуже схожий на атрибути, що було раніше, де ми робимо щось елемент, коли курсор миші над ним. 

Отже, спочатку, що нам потрібно зробити, це вибрати цей елемент, щоб знайти його в основному, в браузері. і тоді ми могли б встановити Атрибут з ним. Так, що я роблю тут, коли ми наведенні над чимось, то ми отримаємо, що елемент і потім встановіть його непрозорість назад 1, щоб повністю непрозорим. Давайте подивимося, як це виглядає. 

Схоже, у нас є додаткова крапка з комою тут. Так що, якщо ми наведенні тут, він отримує повний. Але тепер, звичайно, це залишається повному обсязі, тому що ми повинні описати, що відбувається коли прибираємо курсор. Так що давайте робити те, що MouseOut, на відміну від наведенні курсору миші. 

І ми скинемо його що ми мали before-- 0,5. І тепер, щоразу, коли ми наведіть, ми отримуємо повний круг. Це допомагає нам побачити, що ми ми виборі суті. 

А тепер давайте зробимо це дійсно здорово. Давайте з'єднаємо це з реальними даними. Так давайте запитаємо міг Геологічна служба США про своїх даних. Так Геологічної служби США є дані про землетруси. Вони мають суспільне API, що здатний для споживання у форматі JSON. Так давайте зробимо це. 

Так що це трохи коду, який підключається до API USGS. І є трохи обробки на ньому. Це не має значення, але спрощує його в простому форматі даних, як один у нас було раніше. Так що я позбутися нашого виклику Наші підроблені data.json у файлі. І замість цього, я дзвоню USGS по суті. 

Давайте освіжити, приємно. Це актуально, в реальному житті дані з цього тижня землетрусів. Це дійсно цікаво. Це не дивно, для нас, але є багато землетрусів на Західне узбережжя в Каліфорнії. Але я думав, що це було дуже цікаво що там було так багато землетрусів на Алясці, і судячи з усього, тут на Середньому Заході. Я маю на увазі, цікаво, і ми добре. Це висновок. 

Але головне, що ця це те, що D3 допомагає нам. Це допомагає нам отримувати дані, прив'язати це елементів в DOM, і мають зміні цих елементів в залежності від даних, Тобто ті атрибути, все багато атрибутів елементів, Всі бути корисно каналів для передачі інформації. 

D3 є неймовірно потужним бібліотека і дивно добре працювати. Це деякі потужна штука. Візуалізація даних є неймовірно потужний інструмент для транспортування людей глибоких ідеї, які отримує їх основі і допомагає їм зрозуміти, в Це глибоке і інтуїтивно зрозумілий спосіб, як дані роботи, і як Дані змінює наше життя.