В Cambridge Intelligence мы недавно запустили программу раннего доступа (EAP) для ReGraph, нашего нового инструментария визуализации графических данных для разработчиков React. Ответ оценщиков был фантастическим, и теперь мы приглашаем больше организаций присоединиться к ReGraph EAP.

Чтобы помочь вам начать работу с ReGraph, это пошаговое руководство охватывает все, что вам нужно знать. Создав визуализацию в приложении React, мы загрузим пример сети подозреваемых террористов и покажем, насколько легко применить ключевые методы анализа, необходимые вашим пользователям для обнаружения угроз.

Перед началом урока давайте узнаем немного больше о ReGraph.

ReGraph: как это работает

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

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

ReGraph, основанный на WebGL, обеспечивает быструю и надежную работу даже при визуализации больших и сложных сетей. Как и React, он работает со всеми основными браузерами и устройствами.

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

Мы рассмотрим несколько из них более подробно, но сначала давайте заставим ReGraph работать в приложении.

Шаг 1. Добавьте ReGraph в свой проект React

Если у вас нет настроенного проекта React, вы можете загрузить его за секунды с помощью create-response-app:

npx create-react-app my-regraph-app

Затем загрузите ReGraph. Если вы еще этого не сделали, присоединяйтесь к EAP. Вы получите полный доступ к сайту ReGraph SDK, содержащему последний пакет ReGraph, подробные руководства для разработчиков, интерактивные демонстрации и полностью документированный API.

Добавьте ReGraph в свой проект, установив его с помощью диспетчера пакетов. Мы будем использовать npm:

npm install ../path/to/regraph-0.5.0.tgz

Шаг 2: Импортируйте ReGraph и создайте диаграмму

Чтобы получить доступ к ReGraph из вашего приложения, просто импортируйте его вместе с React:

import React from ‘react’;
import { Chart } from ‘regraph’;

Затем вы можете отобразить диаграмму в JSX. Чтобы создать диаграмму и загрузить фиктивный элемент, используйте:

<Chart items={{
   node1: {
      color: ‘#bbdefb’,
      label: { text: 'Welcome to ReGraph!' }
    }
}}/>

Вот и все: в вашем приложении запущен ReGraph!

Шаг 3. Загрузите данные

ReGraph работает с любым хранилищем данных - базами данных, веб-сервисами, файлами CSV и т. Д. Все, что вам нужно сделать, это преобразовать данные в простой формат JavaScript, которого ожидает ReGraph. Вот как выглядит наша преобразованная сеть предполагаемых террористов:

// A node with id N8
N8: {
  color: '#ff867c',
  label: {
    text: 'Mohammed Ibrahim Makkawi',
  },
  data: {
    country: 'Afghanistan',
  }
},
// A link between N8 and N99
'N8/p/N99': {
  id1: 'N8',
  id2: 'N99',
  width: 5,
  color: '#f3e5f5'
}

Вы найдете описания всех поддерживаемых опций, событий и стилей на сайте ReGraph SDK.

Затем мы передаем этот объект в свойство items нашей диаграммы, и ReGraph автоматически рисует его для нас. В приложении React мы обычно загружаем наши элементы из состояния приложения или свойств. В этом примере мы будем читать из состояния, что означает, что мы можем повторно отображать каждый раз, когда меняются элементы:

componentDidMount() {
  const data = await loadData();
  const items = convertData(data);
  this.setState({ items });
}
render() {
  const { items } = this.state;
  <Chart items={items} />
}

Опора предметов полностью реактивна. Когда вы передаете в него новый объект, ReGraph ищет изменения с момента последнего рендеринга и при необходимости обновляет диаграмму. Новые элементы появляются в поле зрения, удаленные элементы исчезают, а цвет и положение меняются с плавной анимацией.

Вот и все! Наша диаграмма работает, и наши данные загружены. Теперь давайте посмотрим, как мы можем разобраться в нашей диаграмме.

Разберитесь в визуализации вашего графика

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

Уменьшение беспорядка с помощью комбо

В очень загруженных диаграммах с множеством узлов и ссылок трудно различить, что важно, а что нет.

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

Обратите внимание, как ReGraph автоматически объединяет несколько ссылок между узлами в одну ссылку между комбинациями.

Создавать комбо в ReGraph действительно просто. Вы просто устанавливаете опору объединения, чтобы сообщить ReGraph, какие свойства данных использовать для группировки. Установка свойства уровня включает или отключает комбо:

<Chart
  items={items}
  combine={{properties: [‘country’], level: 1}}
/>

Мы все еще можем углубиться в детали, когда они нам понадобятся, «открывая» каждую комбинацию, чтобы показать, что внутри. Если есть конкретный узел, заслуживающий дальнейшего изучения, мы можем легко выделить узлы и комбинировать их, к которым они подключены.

Определение размеров узлов по центральности SNA

Теория графов предоставляет несколько способов оценки важности каждого узла, которые ReGraph предоставляет как ряд функций анализа социальных сетей (SNA).

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

Эффективный способ выделить узлы с высокой связью - сделать их больше. Здесь мы посчитали, сколько связей имеет каждый подозреваемый в терроризме, и рассчитали их соответственно:

ReGraph также поддерживает другие мощные меры централизации SNA, в том числе промежуточность для поиска «привратников» в сети и близость для определения того, насколько легко узел может достичь остальной части сети.

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

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

Вы готовы к ReGraph?

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

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