Привет всем, этот блог является продолжением моего предыдущего блога о D3 в Jupyter Notebook, в этом блоге будут использоваться базовые концепции из предыдущего блога. Я собираюсь познакомить вас с сетями и сетевыми диаграммами, используя sigma js. Давай займемся этим!
НАУКА О СЕТИ:
Наука о сетях - это изучение сложных сетей, таких как телекоммуникационные сети, компьютерные сети, биологические сети и даже семантические / социальные сети. Обычно они состоят из отдельных элементов, которые представлены узлами, и связи между этими узлами осуществляются через связи, называемые ребрами.
На это поле повлияли различные теории, такие как:
- Теория графов - Математика
- статистическая механика - физика
- Интеллектуальный анализ данных и визуализация информации - информатика (это то, что мы расскажем)
- Логическое моделирование - Статистика
- Социальная структура - социология
Эти исследования сетевых представлений о различных явлениях - приводят к прогнозным моделям этих явлений.
Визуальное представление сети:
Это отличная статья, чтобы узнать больше о сетях и их различных типах. Я буду публиковать больше статей в этой области, поскольку я начал исследовать эту область и нашел ее очень интересной. Теперь перейдем к Sigma js, который поможет нам использовать эти концепции.
Sigma js:
Sigma - это библиотека JavaScript, предназначенная для рисования графиков. Он упрощает публикацию сетей на веб-страницах и позволяет разработчикам интегрировать исследование сети в многофункциональные веб-приложения. Он был разработан как механизм, который можно настраивать и использовать для разработки интерактивных веб-приложений, отображающих графические визуализации. Некоторые из функций:
- Пользовательский рендеринг: встроенные рендеры Canvas или WebGL, которые помогут вам рендерить интерактивную 2D- и 3D-графику в любом совместимом веб-браузере без использования плагинов. А встроенные средства визуализации также предоставляют множество способов настройки визуализации.
- Ориентация на интерактивность: вы можете поймать, когда пользователь щелкает или наводит указатель мыши на узел. Вы можете поймать, когда пользователь перетаскивает график или увеличивает масштаб, и всегда знать положение графика относительно экрана. И многое другое.
- Мощная графическая модель: Sigma - это просто механизм рендеринга, но вы можете захотеть сделать больше, например, запустить свои собственные алгоритмы графа. Для этого можно настроить графическую модель сигмы, и вы можете добавлять свои собственные индексы к данным.
- Расширяемость: легко разрабатывать плагины или простые сниппеты для расширения возможностей Sigma. Некоторые из них уже доступны в основном репозитории для чтения некоторых популярных форматов файлов графов или, например, для запуска сложных алгоритмов компоновки.
- Совместимость: Sigma работает во всех современных браузерах, поддерживающих Canvas, и работает быстрее в браузерах с поддержкой WebGL.
Среди особенностей, которые делают библиотеку Sigma.js интересной, можно выделить:
- Возможность связывать методы
- Управление событиями
- Возможность добавлять плагины, использовать файлы GEXF, алгоритмы ForceAtlas2,…
- Api простой и доступный
- Персонализированное обслуживание окрашенной графики
- Вставка с использованием фреймов
На веб-сайте sigma js есть краткое руководство (вы можете увидеть изображение ниже), но мы попробуем использовать простой пример из PyData New York Брайана Коффи, чтобы реализовать его в Jupyter Notebook. С подробностями выступления вы можете ознакомиться здесь.
Сверху мы знаем, что есть 3 части:
- Данные (необходимо представить в словаре)
- HTML-код (вы можете проверить мой предыдущий блог о D3 в jupyter Notebook, чтобы получить простое объяснение)
- Наконец, вывод.
Данные:
Мы уже обсуждали, что вам требуются узлы и края для создания сети. В блокноте Jupyter данные будут представлены в формате словаря. Изображение ниже даст вам представление.
СОЗДАНИЕ СЕТЕВОЙ ДИАГРАММЫ С ИСПОЛЬЗОВАНИЕМ SIGMA JS В НОУТБУКЕ JUPYTER:
Теперь давайте посмотрим, как они выглядят во фрейме данных, это случайно сгенерированные данные, и ссылка на них находится здесь (вот ссылка на GitHub для этого):
Узлы:
- У нас есть идентификатор, представляющий узел, и метка для него, здесь они такие же, но вы можете дать ему разные имена (например, имена персонажей игры трон - чтобы показать их отношения друг с другом)
- У вас есть размер узла (дающий вам величину узла)
- И соответствующие координаты X и Y в пространстве.
Края:
- У каждого ребра есть идентификатор, объясняющий отношение узлов.
- У источника есть идентификатор узла, на котором он начинается.
- У цели есть идентификатор узла, на котором она заканчивается.
Код сценария Java:
Скомпилируйте их и выполните:
Теперь давайте посмотрим на интерактивный визуальный результат (нажмите на гифку ниже).
Надеюсь, вам понравился блог. Моя следующая пара блогов будет посвящена сетевой науке (теории графов и другим связанным деталям), Java-скриптам и, возможно, представит dimple js.
Ссылка:
Http://barabasi.com/networksciencebook/chapter/1#vulnerability
