Визуализация дерева приматов

Станислав Дробышевский в начале года опубликовал подробное дерево происхождения приматов. Версия в ПДФ

Комментаторы во «Вконтакте» просили интерактивную версию (1, 2, 3, 4), потому что её удобнее изучать и проще обновлять при появлении новых данных.

Мы с Олей Моховой решили помочь палеоприматологии и сделали прототип на d3js.

Слева — исходная схема, справа — наша версия:

Сайт проекта

Расскажу, как шла работа, и какие приёмы нам помогли.

Цель

Сперва хотим сделать научно-популярную схему, более продвинутую версию известной картинки:

Но про это уже есть отличный проект Глеба Крауклиша.

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

Дизайн

На исходной схеме цвет почти не используется. Можно цветом показать, например, на каком континенте нашли зверя.

Ещё хочется нагляднее показать иерархию таксонов (групп организмов).

Делаю первый эскиз:

Сразу же появляются вопросы. Например: «А не должны ли родственные связи как-то зависеть от вложенности таксонов?» Приходится закопаться в Википедию, узнать, про кладистику и монофилию. У Станислава узнаю, что никакой кладистики на схеме нет, а значит дерево родственных связей не обязано совпадать со вложенностью таксонов.

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

База данных

Проект хостится на Github pages. Изначально мы хотели готовить данные в гуглотаблице, потом конвертировать их в csv и коммитить его на гитхаб. В итоге решили грузить данные напрямую из гуглотаблицы.

Плюсы такого решения:

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

Минусы:

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

Копирование данных

Главная сложность — глубокая вложенность таксонов. Вот список всех рангов:

1. Миротряд
2. Отряд
3. Подотряд
4. Инфраотряд
5. Парвотряд
6. Суперсемейство
7. Семейство
8. Подсемейство
9. Род

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

Полная версия

На помощь пришла Лёля Колесникова. Она копирует данные из ПДФ в таблицу на 300 строк. Конечно, хочется автоматизировать процесс, но это затруднительно: некоторые нюансы неочевидны даже при ручном переносе.

Иллюстрации

Картинки помогают разнообразить однообразное полотно и помогут примерно представить, на что похожи представители таксонов. Зовём в проект иллюстратора. Татьяна Сергеевна берётся за дело.

Обсуждаем референсы:

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

Проверка данных

При переносе из ПДФ в данные закрались ошибки. Поэтому, прежде чем показывать схему Станиславу, проверяем сами.

1. Каждая страна должна относиться только к одному из материков. Проверяю это соответствие сводной табличкой:

.

1. Чтобы проще было проверять периоды, пишу мини-скрипт на d3, который подписывает начало и конец периодов прямо на графике. Надо было с самого начала так сделать.

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

Картинки грузятся с http://avatars.adorable.io/

Сложности

По ходу работы всплывают интересные проблемы, обсуждаем их со Станиславом.

Например, некоторые таксоны происходят от более поздних. Например, Amphipithecidae → Oligopithecinae → Perupithecus ucayaliensis. Разумеется, это невозможно, просто более ранние представители Amphipithecidae и Oligopithecinae пока не найдены. Решаем искусственно наращивать родительский таксон в прошлое:

Поначалу мы думали, что связи возможны только между «кирпичиками», но потом оказалось, что нужна возможность соединеня любых таксонов: и «кирпичей» и «рамочек». Приходится пока что убрать проблемные связи (от инфраотряда EOSIMIIFORMES)

Иногда всплывают интересности:

На будущее

• Задача максимум — сделать базу археологических находок и показать их на этой схеме. Сейчас непонятно, откуда взялись все эти полосочи, какие археологические находки за ними стоят.
• Добавить возможность связи между таксонами любого ранга. Сейчас только кирпичи между собой можно соединять. Поэтому мы не можем показать связь с исходной схемы EOSIMIIFORMES → Amphipithecidae
• Показывать места археологических находок прямо на карте.
• Земля за 65 миллионов лет сильно поменялась. Было бы классно при перемещении курсора по временной шкале менять форму цветной карты внизу.
• Можно названия таксонов аккуратно собрать в левой части, как на таблице у Тафти.
• При клике на таксоне показывать подробную информацию о нём.
• У антропологов нет единого взгляда на эволюцию. Хочется в будущем визуализировать эту неопределённость и увидеть, с чем все согласны, а в чём мнения расходятся.

→ Сайт проекта

Как считаете, что получилось хорошо, а что плохо? Как бы вы улучшили проект?

Если у вас есть интересные данные, которые надо обработать, визуализировать и показать людям — пишите, будем рады сотрудничеству: ivan@dianov.org, телеграм: @ivan_dianov