Динамика дерева в действии
Динамика дерева в действии

Интерактивное дерево комиксов с связями и обложками, написанное на d3.js v6. Данные берутся динамически по API marvel.

Началось всё с первого фильма Стражи Галактики. После просмотра я купил планшет, накачал комиксов и стал читать.

Понял, что никого не знаю и начал искать истории по героям и хронологию комиксов.

И психанул.

Поиск каждой истории каждого из персонажей занимает время и теряется интерес к читаемому комиксу.

Я решил поискать сервисы или сайты, которые показывают весь список комиксов, героев, событий и т.д.

Я удивился, что практически никакой информации нет. Все и так знают порядок событий и это мир не для новичков.

Нашлось несколько удобных сервисов, ссылки на которые будут ниже.

Но я решил сделать свой сервис (с преферансом), который бы отображал все комиксы по герою, а также всех героев комикса.

Выбор пал на observablehq.com, который переехал с bl.ocks.org, пока я сочинял скрипт.

Термины

  • Events - События.

  • Stories - Арки или Истории - это небольшая сюжетная линия, которая охватывает несколько глав (серий) комикса.

  • Series - Серия или Глава. Несколько комиксов,объединённых одним сюжетом, как правило с одним или группой персонажей.

  • Characters - Герои.

  • Comics - Комиксы.

В рамках скрипта каждый тип я назвал элементом.

Начал изучать разные API сервисы комиксов, нашёл comicvine, но АПИшка оказалась слишком специфичной и с ограничениями, вплоть до работы через vpn. Отказался.

В процессе поисков нашёл у Marvel официальную API с двумя ключами доступов и ограничением в 3000 запросов в день.

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



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

Сайт самый информативный и самый точный.

Изучая готовые скрипты деревьев (есть хорошие примеры в ссылках), я понял, какая моя конечная цель - масштабируемое, кликабельное дерево элементов на SVG со связями, динамически подтягивающимися с API Marvel.

Поля для ввода - два ключа к API, выбор элемента (комикс, герой и т.д.) и параметры для актуализации запроса - поиск по началу названия комикса или имени героя.

Пример поиска по полям
Пример поиска по полям

Из-за ограничений запросов (не всё дерево связей сразу подтягивается) пришлось ввести бонусы - пагинация по страницам (offset) и сортировку по полю (orderBy).

Причём заметил странную, но полезную особенность - при переключении страниц подтягиваются все связи каждой строки на один уровень глубже. То есть не нужно протыкивать вручную каждую.

Плюсы

  1. Дерево готово и работает.

  2. API работает динамически.

  3. Создал функционал загрузки и скачивания схемы в формате JSON.

  4. Сделал демо-схему, которая подтягивается автоматически если не введены ключи или поля для поиска.

  5. Обложки элементов подтягиваются и отображаются, можно приблизить и рассмотреть. Есть полная ссылка до них, несколько размеров. Подтягиваются без ключей.

Минусы

  1. Перетаскивание и увеличение дерева работает только в Chrome.

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

  3. В демке не работают новые связи, то есть она статична, пока не введутся ключи API.

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

Пример дерева
Пример дерева

Весь скрипт с observablehq в общем доступе и его можно скачать себе для экспериментов. Скрипт скопирован на сайт мишген.рф и задублирован в github.

Observable поддерживает форки и комментарии для улучшений и советов.

Версия движка выбрана v6 (миграции), на данный момент последняя.

Описание функций в самом скрипте перед каждой функцией.

В ссылках привёл несколько примеров похожих деревьев на движке d3.js и не только.

Итог

Цель достигнута, сервисом вполне можно пользоваться. А если применить парсер в других местах, можно сделать и другие вкусняхи. Бота для телеги, автопоиск в самом комиксе на картинке и т.д. Благо схема у Marvel в открытом доступе.

Респект!

Ссылки

Habr

bl.ocks.org

Observable

github

Полезности и красивости

Комментарии (0)