Автор оригинала: FreeCodeCamp Community Member.
Патрик Феррис
ДАННЫЕ ДАННЫЕ ДОКУМЕНТЫ (D3) – это библиотека JavaScript для создания мощной графики для передачи информации в набора данных. Также справедливо сказать, что для многих, я включал, он имеет нестандартный подход к созданию графики. Часто кривая обучения может чувствовать себя крутой.
В этом посте мы посмотрим на использование Networkx – библиотека Python для изучения графовых структур – сделать некоторые из исходных данных для нас. Затем мы добавим художественные заканчивающие штрихи в JavaScript с D3. Полный код можно найти на моем Github и интерактивная версия можно найти здесь Отказ
Данные
Я помню, когда я впервые представил Cia World Facebook И я любил это. Он держит сокровищную пользу информации обо всех странах мира. Это просто кричать для визуализаций данных, которые должны быть сделаны. На вершине этого он был преобразован в разные форматы на Github И – самое главное для нас – к JSON.
Данные даны на страну, используя их два символа кодирования ISO. Нам понадобится континент, в которой находится каждая страна для доступа к данным. Сначала мы создадим этот словарь:
Словарь делает вещи намного проще, когда мы хотим получить доступ к URL для данных каждой страны.
Следующим шагом является определение простого Страна класс, чтобы держать данные. Пока мы у нас на этом, он улучшит визуализацию, если бы мы могли использовать фактические названия стран – не их два символа – поэтому мы можем найти эту информацию и хранить ее для последующего использования.
И теперь мы наконец готовы добавить экспортерную информацию – этот метод не идеален, но он получает большинство информации.
Не волнуйтесь слишком много о Сплит () Функции на экспортных партнерах. Это просто убирает некоторые данные, поэтому мы получаем только имена, и проценты, которые мы хотим. Проверьте страницу GitHub, чтобы увидеть дополнительные имена, которые мне нужно было добавить для построения графов на работу.
Networkx.
Ettewxx является довольно сложной библиотекой Python для построения, анализа и – в определенную степень – структуры данных экспорта графика. Это также действительно просто использовать.
Теперь, когда у нас есть данные, которые мы хотим хранить в наших Страна Объекты, код для создания нашего направленного графика очень прост.
Мы также можем добавить атрибуты нашим узлам, как степень узла и имя (не код ISO). После того, как мы имеем структуру данных, мы можем экспортировать ее в формат JSON и выбросить его в файл, готовый к использованию с D3.
Что отличается от D3?
С самого начала Mike Bostock (основатель D3) хотел создать «многоразовую диаграмму». В его пост На эту тему он подчеркивает ключевые цели и миссии для проекта D3. Они могут помочь нам понять синтаксическую структуру.
Первый, а самое важное Выбавка – это то, что графики должны быть реализованы «в качестве закрытия с методами сеттера Getter». Если вы новичок в программировании, вы можете быть запутаны относительно того, что A закрытие является. Не волнуйся! Большая концепция, связанная с замыканиями, является лексической охваткой, которая звучит намного пугающим, чем это действительно. Основная идея за ней все вложенные функции и как внутренняя функция имеет доступ к переменным внешней функции.
Посмотрите на Пример 1 в коде ниже. Здесь мы просто вернем внутреннюю функцию, которая имеет доступ к аргументам, переданным внешней функции. Переменная мы объявляем, Closeureone , это функция, и когда мы его выполняем с Closeureone () Мы console.log (config.name) Отказ
В Пример 2 Мы объявляем переменные в рамках внешней функции, позволяющей внутреннему мой функция, чтобы иметь доступ к нему. В Funnname Функция, связанная с мой Функция – метод – мы можем либо установить или получить nameofperson В зависимости от него пропускаются любые аргументы. Обратите внимание, как разработчик не имеет доступа к переменной nameofperson Отказ Разработчик вынужден использовать наши определенные методы для обновления и доступа к нему, обеспечивая уровень безопасности нашей функции.
Этот метод использования закрытий – это то, как D3 кодируется. Посмотрите на линия функция, чтобы увидеть это в действии. Это видео Может также пролить свет на тему.
Программирование в D3.
К счастью, ты Не нужно быть мастером закрытия и D3 создать визуализацию. На самом деле, пока вы можете скопировать и вставить, вы обычно можете получить что-то без работы в кратчайшие сроки, спасибо Блоки Mike Bostock Отказ Этот сайт имеет много примеров открытых источников визуализации визуализации построения данных в D3. Вы можете использовать код, чтобы создать свои данные с вашими данными.
Чтобы создать сеть для этого руководства, я использовал Этот пример Отказ Чтобы запустить его на экране, все, что мне нужно изменить, было название файла .csv.
Давайте посмотрим на некоторые из Ключевые строки кода Делать эту работу визуализации, а также части, которые я добавил, чтобы, надеюсь, улучшит его дальше.
Незадолго до того, как мы погрузимся, Эндрю Данкман написал отличную статью, помогаю объяснить Выбор D3 которые я рекомендую прочитать.
Чтобы увидеть функции, которые мы называем как DragStarted , масштабируется или Мышешь Обязательно посмотрите на полный код здесь Отказ В качестве примера давайте посмотрим, что происходит, когда мы нажимаем на узел.
Вывод
Код грязный, визуализация не идеальна, и есть так много, чтобы обсудить и учиться.
Но это рядом с точкой. Надеюсь, этот пост смог позволить вам намочить ноги с Networkx и D3, не бросив на вас слишком много. Мы все должны начать где-то, и это может быть ваше начало, чтобы создавать проницательные и мощные визуализации данных.
Если вы застряли, интересно, что дальше, вот несколько предложений:
- Майк Босток к многоразовым диаграммам – Это отличный пример того, как кто-то объясняет их мыслительный процесс, а затем их реализацию. Это показывает, как его цели для проекта повлияли на его реализацию.
- D3 и реагируют – Две библиотеки, сражающиеся над домом, в настоящее время я читаю, и вижу, какие лучшие способы использовать как на проекте.
- Elijah Mekes, старший инженер визуализации данных в Netflix – Состояние постов Elijah Mekss – это отличный ресурс и часто проливает свет на мир визуализации данных.
Спасибо за прилипание ко мне до конца. Счастливого визуализации!