Кирилл Беляев: заметки с тегом Лаборатория данных

Видео выходного дня: полигон для визуализации финансовых данных

Кирилл Беляев — Sun, 04 Jun 2017 22:42:12 +0300

Рома Бунин рассказал на Кодфесте о самом важном проекте Лаборатории данных:

Главное различие визуализации данных и инфографики

Кирилл Беляев — Thu, 15 Oct 2015 22:55:08 +0300

Пять месяцев работаю в Лаборатории данных, и только вчера понял главное отличие визуализации от инфографики.

Визуализация данных — инструмент анализа. Она помогает делать выводы. (Поэтому так важно снабжать её органами управления, превращать в интерфейс.)

А инфографика — готовые выводы. Оформленные и структурированные показатели и закономерности.

Из этого следует, что визуализация подходит «анализирующей» аудитории, а инфографика — любой (охват второй шире).

Метафора для закрепления: визуализация — топор, инфографика — дрова.

Обновление графика финишей

Кирилл Беляев — Fri, 03 Jul 2015 12:55:13 +0300

Организаторы Московского марафона опубликовали визуализацию результатов Московского полумарафона 2015 года, над которой я работал в лаборатории.

Особенно интересно было пересобрать финиши. Было:

Первая проблема прошлой версии —две временные шкалы. Один ползунок и две шкалы сбивают с толку. Шкалы равнозначные, поэтому догадаться, что верхняя — относительна ко времени суток, а нижняя — абсолютная, сложно. Усугубляет порядок: сверху стоит второстепенная информация, а снизу — главная. Отсчёт от старта важнее, отсчёта от девяти утра. Плюс шкалы стоят далеко друг от друга и взгляд перепрыгивает с верхних индикаторов времени на нижние и обратно. (см. о локусе у Расскина.)

Склеиваю шкалы в одну и выделяю главное:

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

Чтобы исправить проблему поставлю время над ручкой ползунка:

Лучше, но теперь цифры над ручкой пересекаются с цифрами на шкале. Увеличиваю ручку и ставлю текущее время на неё. Дополнительный плюс — большую ручку удобнее хватать (см. закон Фитса у Раскина):

Конструкцию починил. Теперь детали. Пройденный путь слабо контрастирует с линейкой шкалы. Убираю линейку и делаю рисочки заметнее — теперь они «держат» шкалу. Путь выравниваю по высоте с рисочками.

От ползунка идёт линейка. Внутри ручки она розовая, а снаружи — чёрная, неконтрастная к графику. Два цвета для одного элемента — перебор. Объединил в один и покрасил в него же время на ползунке (см. естественное соответствие в книге Нормана):

Нижняя линейка с рисочками теперь не нужна. Убираю:

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

Визуализирую данные

Кирилл Беляев — Tue, 19 May 2015 20:47:26 +0300

Всё, стажировка закончилась, рассказываю.

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

С моим участием уже вышла пара вопрос-ответов: Инстатрек и качество работы маршруток.

Обращаться за визуализациями в Кипо или ко мне лично смысла нет — визуализаций мы не делаем. Наши коньки: логотипы, оформление и вёрстка.