Хабрахабр

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

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

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

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

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

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

Сайт проекта

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

Цель

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

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

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

Дизайн

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

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

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

Первый эскиз

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

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

Макет

База данных

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

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

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

Минусы:

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

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

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

  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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть