Дерево комиксов на D3.js из API Marvel

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

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

Оригинал на Хабре.

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

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

И психанул.

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

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

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

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

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

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

Термины

  • Events - События.
  • Stories - Арки или Истории - это небольшая сюжетная линия, которая охватывает несколько глав (серий) комикса.
  • Series - Серия или Глава. Несколько комиксов,объединённых одним сюжетом, как правило с одним или группой персонажей.
  • Characters - Герои.
  • Comics - Комиксы.

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

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

<i>developer.marvel.com</i>
developer.marvel.com

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

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

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

<b>Пример поиска по полям</b>
Пример поиска по полям

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

Плюсы

  • Дерево готово и работает.
  • API работает динамически.
  • Создал функционал загрузки и скачивания схемы в формате JSON.
  • Сделал демо-схему, которая подтягивается автоматически если не введены ключи или поля для поиска.
  • Обложки элементов подтягиваются и отображаются, можно приблизить и рассмотреть. Есть полная ссылка до них, несколько размеров. Подтягиваются без ключей.

Минусы

  • Перетаскивание и увеличение дерева работает только в Chrome.
  • Кнопки пагинации и сортировки работают, но в них трудно попасть мышкой. Вылечу стилями.
  • В демке не работают новые связи, то есть она статична, пока не введутся ключи API.
  • Движок в некоторых местах пришлось обрамлять регулярками для более точной сборки конечных ссылок и подтягивания связей.
<b>Пример дерева</b>
Пример дерева

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

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

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

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

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

Итог

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

Респект!

Ссылки

Habr

bl.ocks.org

Observable

github

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

4747
24 комментария

Причина по которой я не читаю комиксы.

6
Ответить

А можно не ебать себе мозги и читать мангу...

5
Ответить

Фига заморочки. Я конечно в теме Марвел уже 20 лет и возможно мне просто кажется, что всё просто, но я новичкам обычно просто даю 2 совета:
1. Если уж так интересен определенный персонаж или команда, то просто читай тома по дате выхода.
2. Но вообще лучше читать определенных авторов, т.к. всё равно каждый прописывает персонажей по-своему и часто плюёт на то, что наворотил предыдущий сценарист. Точек входа очень много, буквально каждый новым том. Если не сразу, то позже по сюжету появляются флэшбеки и сноски поясняющие важные детали.

2
Ответить

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

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

2
Ответить

Комментарий недоступен

1
Ответить

"довольно хуёвых рисунков" - это кстати еще одна причина, почему я предпочитаю мангу комиксам! постоянная смена художников! в одном комиксе может быть ну просто охуенная рисовка! глазки смотрят не нарадуются, и тут же в следующем номере - рисовка такая как будто рисовали по пьяни или на йотьебись, а то и вовсе смена стилей, смена цветов, один художник нарисовал героя в одной одежде, тут же в следующей главе другой художник об этом забыл и нарисовал персонажа в другой одежде! спрашивается когда они успели, если между событиями глав прошло несколько минут/секунд?! короче эта смена картинки просто лютый трэш! и какой бы ни была топовой история и сюжет, постоянная смена художественного стиля, просто раздражает :/ манга же придерживается одного стиля все время! и даже если рисунок со временем меняется, все равно авторский стиль узнаваем и неизменен! в комиксах с этим просто беда :(

1
Ответить

Просто не ваше) а уж рисунок в комиксах - вообще вкусовщина. Там же столько разных авторов. Кто-то и от Умберто Рамоса течёт, а я его терпеть не могу. А вот Паоло Ривера - топ.
Вам в целом похоже важнее сюжет, а не визуальная составляющая

1
Ответить