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

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


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


    Комментаторы во «Вконтакте» просили интерактивную версию (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

    Поделиться публикацией

    Комментарии 18

      +2
      круто!
      А еще круто — прием с хешкартинкой в гуглотаблицах! (утянул себе в копилку приемов)
        +2
        Оч круто!
          +2
          Очень круто — ещё и потому, что, даже если это очень просто, в среде биологов (каких я знаю) такие инструменты почти революционный эффект могут произвести. Это явно нужная вещь, очень ценно.
            +2
            Я не нашёл ни в pdf, ни в интерактивной версии Homo sapiens. Человека нет в этой схеме?
              +2
              Человек на самой нижней строчке: «подсем. Homininae». Homo sapiens — это вид, у нас детализация максимум до родов.
                +2
                Это странный зверь.
                  0
                  Ни одно другое животное само себя не классифицирует.
                +3

                На схеме в Firefox картинок не видно.

                  +2
                  Спасибо, пофиксили
                  +1
                  очень давно не хватет подобных штук!
                  особенно если бы все биологическое дерево можно было сложить в программу наподобии как здесь
                  naked-science.ru/article/nakedscience/05-07-2013-170
                  (Шкала масштабов Вселенной)

                  я думаю правосланых на голову которые задвигают «ну не существует ни одной переходной формы жизни»
                  стало бы поменьше
                    0
                    Очень круто! Не могу понять, почему на Хабре хорошие статьи по визуализации данных так мало плюсуют?

                    По моему опыту, визуализации такого уровня требуют настолько кастомизированных алгоритмов, что в итоге d3 используется лишь как API для сериализации SVG (плюс несколько удобных функций типа импорта csv)
                      0

                      На мобильном safari в ios страница крашится.

                        0
                        Попробовал в сафари на айпаде, работает. А можешь скриншот прислать?
                          0
                            0
                            Большое спасибо! В следующей итерации попробуем оптимизировать, чтобы не тормозила и не вылетала.
                        0
                        ОТРЯД INCERTAE SEDIS


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

                        (для тех, кто не в теме: INCERTAE SEDIS — «неопределённого положения», это вроде как NullPointer
                        Чисто с точки зрения построения фразы логичнее выглядит «сем. Purgatoriidae (США) insertae cedis в классе mammalia», но, повторюсь, я не биолог, могу ошибаться)
                          0
                          Спасибо! Я, к сожалению, не биолог. Поэтому переадресовал вопрос Станиславу Дробышевскому. Он ответил, что INCERTAE SEDIS переводится как «непонятно кто в пределах данной группы». И что у на схеме всё правильно :–)
                            0
                            Тогда замечательно.
                            Просто первый раз вижу INCERTAE SEDIS с рангом, с непривычки — резануло.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое