Создание интерактивной инфографики с использованием простого Javascript (Часть первая)

Вступление

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

Многие библиотеки с открытым исходным кодом отображают фантастическую инфографику. Наши фавориты - D3 и vis.js. Однако бывают случаи, когда нам нужны функции, недоступные в публичных библиотеках.

Задача

Давайте создадим интерактивную инфографику с использованием простого Javascript.

Пример использования

Облачная платформа Google (GCP) похожа на кондитерскую для веб-разработчика. Его товарных категорий больше, чем можно сосчитать, и каждая из них соединяется по-разному для решения сложных проблем.

Если мы воспользуемся мощью современного браузера, чтобы продемонстрировать преимущества продуктов GCP, как бы выглядел пользовательский интерфейс? Можно ли использовать базовые методы Javascript для получения выдающихся результатов?

Дизайнерский подход

Наш подход к дизайну основан на идее использования последовательного и постоянного пользовательского интерфейса (UI) для рассказа увлекательной истории. Давайте переосмыслим дизайн в двух областях:

  • Информационная архитектура. Можем ли мы относиться к информации как к непрерывному пути, а не к кусочкам головоломки, сшитой из повторяющихся загрузок страниц?
  • Пользовательский интерфейс (UI). Можем ли мы представить информацию через интерактивный и последовательный пользовательский интерфейс, который работает как зеркало?

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

Начало работы - основные строительные блоки

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

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

Узловые элементы. Мы можем использовать элемент HTML и уникальный идентификатор для описания узла. Например, node11 будет узлом №1 ветви №1. Точно так же node12 будет узлом №2 ветви №1. На приведенной выше диаграмме это будут кружки «1» и «2». Автобусный маршрут №1 (то есть ветка №1) соединит круги «1» и «2», а также другие круги (например, 2a, 3,3a, 3b).

Давайте воспользуемся атрибутом style, чтобы описать уникальное положение, форму и поведение каждого элемента. Вы можете использовать любой HTML, CSS, значки или изображения для представления узла или ссылки. Круглые узлы в наших видео - это просто теги div с CSS border-radius.

<div id=”node11" style=”…”>1–1 Occupation Name</div>
<div id=”node12" style=”…”>1–2 Occupation Name</div>

Элементы ссылки. Ссылки соединяют узлы. Например, link1112 соединяет node11 и node12.

<div style=”...” id=”link1112"></div>

Совет. Используйте наложение изображения, чтобы управлять позиционированием HTML-элементов в CSS.

Помимо концепции - как взаимодействие работает на веб-странице

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

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

document.addEventListener( "mouseover", myCustomFunction );
  • mouseover обнаруживает курсор мыши, наведенный на конкретный документ DOM, например кнопку.
  • При обнаружении он вызывает myCustomFunction, чтобы что-то сделать (например, создать последовательность анимации или получить информацию из базы данных).

Мы будем использовать этот Javascript API для обнаружения действий пользователя и запуска целого ряда функций для создания интерактивных веб-страниц.

Создание ярлыков рабочего процесса

Давайте свяжем узел и свяжем элементы с его event listeners в пределах loop в два этапа:

Шаг первый. Назначьте модель (данные).

Сохраните уникальные id значения вашего HTML-элемента в виде массива item[].

var item = [
 ‘11’,’12',’1112',
 ‘21’,’22',’2122',
 ...
 ];

Каждое значение в массиве item [] будет соответствовать уникальному значению идентификатора каждого узла или ссылки (например, 11 относится к node11; 1112 относится к link1112.). Вы можете рассматривать элемент [] как главный реестр.

Затем установите legend[] для удержания an array of objects. Каждый объект - это набор данных, который будет соответствовать определенному действию пользователя.

var legend = {
 'item11' : { "node" : ['11'], "links" : [] },
 'item12' : { "node" : ['11','12'], "links" : ['1112'], },
 ...
}
  • Когда курсор мыши находится над node11, объект item11 вызывает node11 для нацеливания CSS.
  • Точно так же, когда курсор наводится на node12, объект item12 вызывает node11, node12 и link1112 для таргетинга CSS.
  • item - это просто метка префикса. Используйте свое соглашение об именах.

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

Мы сократили тонны кода; ускорили рабочий процесс проектирования; и отделил представление от модели (данных). Перейдем к созданию движка просмотра.

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

Шаг второй. Прокрутите каждый элемент HTML, чтобы программно связать прослушиватели событий.

while (item[i]) {
   itemElement[i] = "node".concat(item[i]);
   itemElementName[i] = document.getElementById( itemElement[i] );
   itemElementName[i].addEventListener( "mouseover", mouseOver );
   itemElementName[i].addEventListener( "mouseout", mouseOut );
   ...
   i++;
}
  1. while выполняет итерацию по значениям идентификаторов каждого элемента DOM, зарегистрированного в item[].
  2. “item”.concat(item[i]) повторно присоединяет любые пользовательские префиксы, которые у вас могут быть (например, «узел»), чтобы они соответствовали фактическим значениям идентификаторов.
  3. itemElementName[i] = document.getElementById( item[i] ) создает массив ссылок на DOM.
  4. «mouseover» и «mouseout» связывают каждый элемент DOM с действием пользователя.

Совет №1. Мобильные и сенсорные устройства имеют собственный набор прослушивателей событий, например touchstart и touchmove. Используйте их для создания адаптивного дизайна.

Совет №2. Используйте параметр «пассивный» в прослушивателях событий касания или колесика, чтобы повысить производительность браузера, например:

document.addEventListener('touchstart', onTouchStart, {passive: true});

Настройка интерактивного поведения с помощью CSS

Мы можем создавать собственные функции mouseOver и mouseOut для применения эффектов CSS:

function mouseOver(event) {
   for (var i in legend[this.id]["node"]) {
      var currKey = "node".concat(legend[this.id]["node"][i]);
      document.getElementById(currKey).style.background = "grey";
      ...
   }
   for (var i in legend[this.id]["link"]) {
      var currKey = "link".concat(legend[this.id]["link"][i]);
      document.getElementById(currKey).style.border = "1px solid 
      #000";
      ...
   }
}
  • Используйте прослушиватель событий mouseover, чтобы привязать элемент DOM к вашей пользовательской функции mouseOver. Эта функция принимает параметр event (предоставленный браузером) для получения активного значения this.id.
  • legend[this.id][“node”] определяет набор данных для применения таргетинга CSS.
  • for просматривает коллекцию legend[].

В нашем примере функция mouseOver меняет цвет фона целевого узла (ов) на серый.

Используйте ту же идею для link элементов. В нашем примере мы изменили цвет links1112 с серого на сплошной черный при наведении указателя мыши на node12 (node11 и node12 также становятся серыми).

Затем «сбросьте» поведение CSS, как только курсор покинет текущий элемент DOM (см. Полужирный шрифт).

function mouseOut() {
   for (var i in legend[this.id]["node"]) {
      var currKey = "node".concat(legend[this.id]["node"][i]);
      document.getElementById(currKey).style.background = "unset";
      ...
   }
   for (var i in legend[this.id]["link"]) {
      ...
   }
}

Неограниченное масштабирование с SVG

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

Чтобы преобразовать HTML / CSS circle 1 или node11 в шестиугольную форму SVG, просто оберните содержимое SVG в контейнер HTML (выделите жирным шрифтом).

<div id=”node11" style=”display:flex; align-items:center;">
    <svg>
        <path d="...some paths"/>
    </svg>
    <div style="align-items:center; width:100%;">
        My Text Label
    </div>
</div>
  • id=”node11" ссылается на тот же узел. Вместо рендеринга формы круга HTML теперь он содержит данные SVG.
  • display:flex и align-items:center используют Flexbox, который теперь поддерживается всеми основными браузерами, для автоматического выравнивания нашего SVG и текстового содержимого.
  • <svg>...</svg> содержит данные SVG, описывающие наш масштабируемый значок. Посетите официальную библиотеку значков GCP, чтобы загрузить полный набор значков.

Заполнение контента

Мы добавили в модель SVG. Давайте посмотрим, как выглядит образец макета с содержанием GCP.

  • Используйте эффект scale3d для создания впечатляющих эффектов выделения.
  • Используйте dashed, чтобы проиллюстрировать различные отношения.

Следующие шаги

Мы разработали схему и механизм просмотра в качестве основы для нашего рабочего процесса проектирования.

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

Дополнительное примечание

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

Все видео-иллюстрации сняты с экрана браузера Chrome. Хотя демонстрация основана на GCP, вы можете найти приложения в организационных диаграммах, экосистемах, картах метро, ​​блок-схемах, деревьях развития, топологиях сети и любых диаграммах графиков.

Большое спасибо Чаку Эриксону и команде Google за замечательный набор значков и диаграмм решений GCP.

Ссылки на другие части

Часть первая → Вы здесь.

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

Часть третья добавляет динамическую мини-карту для улучшения навигации.

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

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

Если вам понравилась эта история, вы можете найти больше на Pageii Studio.