Cytoscape.js — это мощная библиотека JavaScript с открытым исходным кодом для создания и отображения графических данных в виде интерактивной веб-визуализации. Он позволяет разработчикам создавать визуализации данных и управлять ими, включая узлы (представляющие объекты) и ребра (представляющие отношения между объектами), а также применять различные параметры компоновки, стиля и взаимодействия.

Но зачем нам платформа визуализации данных?

По мнению технического жюри, ежедневно мы генерируем 1,145 трлн МБ данных, и их сложность тоже возрастает!

Один из способов упростить данные — визуализировать их после группировки по правильным категориям, и именно тогда на сцену выходят инструменты визуализации данных.

Итак, если вы хотите оживить свои данные, Cytoscape.js — идеальный вариант. Но не верьте нам на слово; обратите внимание на универсальность платформы при визуализации данных.

Что такое Cytoscape.js?

Cytoscape.js — это библиотека JavaScript с открытым исходным кодом для построения интерактивных визуализаций теории графов (сетей) в веб-браузере.

Он позволяет разработчикам создавать сложные, настраиваемые и гибкие визуальные представления графических данных и может быть интегрирован в веб-приложения для исследования, анализа и визуализации данных.

Он использует веб-стандарты, такие как HTML, CSS и JavaScript, и может использовать различные языки программирования и платформы.

Такие компании, как Amazon, Fujitsu, Google, HP Enterprise и IBM, используют Cytoscape.js для визуализации данных.

Забавный факт: Cytoscape изначально был разработан для биологических исследований. Теперь это общая платформа для комплексного сетевого анализа и визуализации.

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

Эта библиотека JavaScript предоставляет надежный API, который позволяет разработчикам создавать, изменять и взаимодействовать с графиком несколькими способами.

Например, вы можете создать график, указав узлы и ребра, применить различные алгоритмы компоновки для размещения узлов и оформить график с помощью стилей, подобных CSS. Разработчики также могут создавать собственные взаимодействия, привязывая обработчики событий к элементам графа.

Вот как выглядит экран вывода для данных, которые мы загружаем в Cytoscape.js:

Архитектура Cytoscape.js

Cytoscape.js — это клиентская библиотека JavaScript, то есть она работает в веб-браузере пользователя, а не на сервере.

Архитектура состоит из трех основных компонентов:

1. Ядро Cytoscape.js

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

Ядро реализовано на чистом JavaScript и не имеет зависимостей от внешних библиотек.

2. Рендерер

Он отвечает за отображение элементов визуализации на экране. Cytoscape.js использует веб-технологии, такие как HTML, CSS и SVG, для визуализации визуализации, что обеспечивает высокую степень гибкости и настройки.

3. Механизм компоновки

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

Функции Cytoscape.js построены на основе основных компонентов.

Вот список нескольких, но важных функций, основанных на трех основных компонентах платформы:

1. Взаимодействие

Cytoscape.js предоставляет различные варианты взаимодействия, такие как панорамирование, масштабирование и выбор элементов. Кроме того, разработчики могут настраивать взаимодействие узлов и создавать собственные результаты.

2. Стиль

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

3. Загрузка данных

Cytoscape.js поддерживает загрузку данных из различных источников, таких как JSON, CSV и GraphML. Кроме того, разработчики могут создавать собственные методы загрузки данных для поддержки других форматов.

4. Плагины

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

5. Визуализации

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

Визуализации реализованы с использованием стандартного веб-элемента Canvas и могут быть настроены с использованием HTML, CSS и JavaScript.

Кроме того, Cytoscape.js можно интегрировать с другими библиотеками и платформами, такими как D3.js, для предоставления дополнительных возможностей визуализации, таких как привязка данных и анимация перехода.

Как визуализировать данные с помощью Cytoscape.js?

Чтобы визуализировать данные с помощью Cytoscape.js, вам необходимо подготовить данные в правильном формате, а затем использовать библиотеку Cytoscape.js для визуализации данных.

1. Подготовьте данные

Cytoscape.js ожидает, что данные будут представлять собой график с узлами и ребрами, представляющими точки данных и отношения между ними. Данные могут быть в файле JSON или CSV или передаваться непосредственно в Cytoscape.js в виде объекта JavaScript.

2. Включите библиотеку Cytoscape.js в свой HTML-файл.

Чтобы использовать Cytoscape.js, вы должны включить библиотеку в свой HTML-файл, добавив тег скрипта в заголовок документа, который ссылается на файл библиотеки Cytoscape.js.

3. Создайте контейнер для визуализации

Создайте элемент-контейнер (например, div) в файле HTML для хранения визуализации.

4. Инициализируйте Cytoscape.js и загрузите данные

В коде JavaScript инициализируйте Cytoscape.js, создав новый объект Cytoscape и передав ему элемент контейнера и данные. На этом шаге вы также можете указать параметры макета и стиля для визуализации.

5. Рендеринг визуализации

Вызовите метод .render() объекта Cytoscape, чтобы визуализировать визуализацию.

Взаимодействие с визуализацией (необязательно)

Cytoscape.js предоставляет множество методов и событий, позволяющих взаимодействовать с визуализацией, таких как панорамирование, масштабирование и выбор узлов и ребер.

Вот пример простой визуализации графика с помощью Cytoscape.js:

Код, изображенный на изображении выше, представляет собой сценарий JavaScript, который создает простой граф Cytoscape с двумя узлами, «a» и «b», и одним соединяющим их ребром. График создается путем вызова функцииcytoscape() и передачи объекта параметров. Объект параметров содержит различные свойства, определяющие свойства графика.

Свойство «контейнер» используется для указания элемента ‹div›, который будет служить контейнером для графика. В данном случае он определяет элемент ‹div› с идентификатором «cy».

Свойство elements определяет узлы и ребра графа. Здесь он определяет два узла, «a» и «b», и одно ребро, соединяющее их.

Свойство стиля используется для определения визуального стиля графика. Этот код устанавливает цвет фона узлов на «#666» и отображает идентификатор узла в виде метки.

Он также устанавливает ширину краев на 3, цвет линии и цвет целевой стрелки на «#ccc», а форму целевой стрелки на треугольник.

Свойство layout используется для определения макета графика. Здесь он указывает макет «сетка» с одной строкой.

После создания графика он отображается внутри указанного элемента ‹div› и оформляется в соответствии с предоставленными стилями.

Примечание. Чтобы этот сценарий работал правильно, он должен быть включен в файл HTML с необходимыми зависимостями. Одной из таких зависимостей является элемент ‹div› с идентификатором «cy». Этот элемент ‹div› служит контейнером для графика Cytoscape, и скрипт использует метод document.getElementById(‘cy’) для доступа к нему.

Кроме того, важно проверить, совместима ли версияcytoscape.js, включенная в код, с Cytoscape.js, который вы используете в своем проекте.

Закрытие линий

Благодаря своей независимости от предметной области Cytoscape.js зарекомендовал себя как ценный инструмент для создания интерактивных визуализаций теории графов.

Кроме того, его природа с открытым исходным кодом, архитектура на стороне клиента и широкие возможности настройки делают его ценным инструментом для исследования и анализа данных в любой области.

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

В этой статье мы рассмотрели основные узлы Cytoscape.js, которые могут заинтересовать кодировщиков, программистов, исследователей и читателей, чтобы определить полезность платформы, которая может помочь им при работе с таким большим количеством данных.

Хотя список приложений, утилит и функций кажется бесконечным, мы надеемся, что удовлетворили ваши основные запросы по поводу этой платформы визуализации данных, которая недооценена, но широко используется, но о которой мало говорят!

Эта статья изначально была опубликована на https://bit.ly/3m06um0.