HTML+CSS+JS версия древа

Всем привет.
Продолжаю делиться опытом из рубрики «Чем бы дитя ни тешилось...»

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

На этот раз взял за основу JS-библиотеку treeMaker (https://github.com/roumilb/treeMaker). Посмотрел ещё пример Organization Chart из библиотеки Google Charts (https://developers.google.com/chart/interactive/docs/gallery/orgchart), но первый вариант мне показался удобнее с точки зрения оформления.

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

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

Из плюсов:

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

Из минусов:

• Пришлось вносить изменения в CSS-стили, чтобы всё древо было доступно для просмотра с прокруткой (небольшое древо отображается без проблем).
• По умолчанию нет возможности добавлять фотографии — нужно покопаться в коде.
• Библиотека представляет собой папку с необходимыми файлами, а значит, чтобы поделиться древом, нужен хостинг для размещения кода или отправлять кому-то всю папку.
• Чтобы сделать возможным показывать отдельную подветку, так же придётся дополнять код новыми функциями.
  

Это пока только первое впечатление.
Буду пробовать дальше.

Получившийся вариант можно посмотреть на сайте (см. подпись) в пункте меню «Древо > Версия №1».