Как визуализировать глобальную сеть экспорта с помощью NetworkX и D3

1656519368 kak vizualizirovat globalnuyu set eksporta s pomoshhyu networkx i d3

от Патрика Ферриса

1*OC42Ul4VREUunK-yjnOyA

Документы, управляемые данными (D3) – это библиотека JavaScript для создания мощной графики для передачи информации в наборах данных. Справедливо также сказать, что для многих, включая меня, у него есть нестандартный подход к созданию графики. Часто кривая обучения может казаться крутой.

В этой публикации мы рассмотрим использование NetworkX — библиотеки Python для изучения структур графов для выполнения части начальной обработки данных за нас. Затем мы добавим художественные завершающие штрихи в JavaScript с помощью D3. Полный код можно найти на моем GitHub, а интерактивную версию можно найти здесь.

Данные

Я помню, когда меня в первый раз познакомили с CIA World Factbook, и мне это понравилось. Он содержит кладезь информации обо всех странах мира. Он просто кричит о визуализации данных, которые нужно сделать. Кроме того, он был преобразован в разные форматы на GitHub и, что самое важное для нас, в JSON.

Данные приводятся для каждой страны с использованием двухсимвольного кодирования ISO. Для получения доступа к данным нам понадобится континент, на котором находится каждая страна. Сначала мы создадим этот словарь:

Словарь значительно упрощает работу, когда мы хотим получить доступ к URL-адресу данных каждой страны.

Следующим шагом является определение простого Country класс хранения данных. Пока мы на этом, была бы улучшена визуализация, если бы мы могли использовать фактические названия стран, а не их двузначный код, чтобы мы могли найти эту информацию и сохранить ее для дальнейшего использования.

И теперь мы наконец-то готовы добавить информацию об экспортере — этот метод не идеален, но он получает большинство информации.

Не волнуйтесь слишком много о split() функции на партнеров-экспортеров. Это просто очистка некоторых данных, и мы получаем только нужные имена и проценты. Просмотрите страницу GitHub, чтобы увидеть дополнительные имена, которые мне пришлось добавить, чтобы построение графика работало.

NetworkX

NetworkX — это достаточно сложная библиотека Python для построения, анализа и — в известной степени — экспорта структур данных графов. Он также очень прост в использовании.

Теперь, когда у нас есть данные, которые мы хотим хранить в нашем Country объектов, код для создания нашего ориентированного графа очень прост.

Мы также можем добавлять атрибуты к нашим узлам, например степень узла и имя (не код ISO). Когда у нас будет структура данных, мы можем экспортировать ее в формат JSON и загрузить в файл, готовый к использованию из D3.

Чем отличается D3?

С самого начала Майк Босток (основатель D3) хотел создать диаграмму многократного использования. В своем сообщении по этой теме он освещает ключевые цели и миссии проекта D3. Это может помочь нам понять синтаксическую структуру, которую он имеет.

Первый и самый важный, вывод состоит в том, что диаграммы должны быть реализованы «как замыкание с методами геттера». Если вы новичок в программировании, вы можете быть обеспокоены тем, что такое закрытие. Не волнуйся! Большое понятие, связанное с закрытиями, — это лексический обзор, звучащий гораздо страшнее, чем на самом деле. Основной идеей всего этого являются вложенные функции и то, как внутренняя функция имеет доступ к переменным внешней функции.

Посмотри на EXAMPLE 1 в коде ниже. Здесь мы просто возвращаем внутреннюю функцию, имеющую доступ к аргументам, переданным внешней функции. Переменная, которую мы объявляем, closureOne является функцией, и когда мы ее выполняем с помощью closureOne() мы console.log(config.name) .

в EXAMPLE 2мы объявляем переменные в пределах внешней функции, что позволяет внутреннюю my функция для доступа к ней. В fullName функция, связанная с my функция – метод – мы можем или установить или получить nameOfPerson в зависимости от этого передаются любые доводы. Обратите внимание, что разработчик не имеет доступа к переменной nameOfPerson . Разработчик вынужден использовать определенные методы для обновления и доступа к нему, обеспечивая уровень безопасности нашей функции.

Этим методом использования замыканий кодируется D3. Посмотрите на функцию линии, чтобы увидеть это в действии. Это видео также может пролить свет на эту тему.

Программирование в D3

К счастью, вы не нужно быть мастером замыканий и D3 для создания визуализации В самом деле, если вы можете копировать и вставлять, вы обычно можете запустить что-то в кратчайшие сроки благодаря Blocks Майка Бостока. На этом сайте есть много примеров с открытым исходным кодом создания визуализации данных в D3. Вы можете использовать код для создания собственного кода со своими данными.

Чтобы создать сеть для этого учебника, я использовал этот пример. Чтобы запустить его на экране, мне нужно было только изменить имя .csv.

Давайте рассмотрим некоторые из ключевые строки кода чтобы эта визуализация работала, а также части, которые я добавил, чтобы, надеюсь, улучшить ее дальше.

Незадолго до того, как мы погрузимся, Эндрю Данкман написал прекрасную статью, помогающую объяснить выбор D3, который я рекомендую прочитать.

Чтобы увидеть функции, которые мы вызываем dragstarted , scaledSize или mouseOut , обязательно посмотрите полный код здесь. В качестве примера давайте посмотрим, что происходит, когда мы нажимаем на узел.

Вывод

Код беспорядочен, визуализация не совершенна, и осталось многое обсуждать и изучать.

Но это не на самом деле. Надеюсь, что эта публикация позволила вам смочить ноги с помощью NetworkX и D3, не бросаясь на вас слишком много. Мы все должны с чего-то начать, и это может стать вашим началом для создания глубоких и мощных визуализации данных.

Если вы застряли в вопросе, что делать дальше, вот несколько советов:

Спасибо, что остались со мной до конца. Приятной визуализации!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *