[Играет музыка] 

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 является невероятно мощным библиотека и удивительно хорошо работать. Это некоторые мощная штука. Визуализация данных является невероятно мощный инструмент для транспортировки людей глубоких идеи, которые получает их основе и помогает им понять, в Это глубокое и интуитивно понятный способ, как данные работы, и как Данные меняет нашу жизнь.