3 заметки с тегом

карта

Карта голосов на выборах

Поправил отображение данных о выборах 2016 года на карте США.

Исходная карта выглядит так:
https://xkcd.com/1939/
https://t.co/ahI3BCJvjn

Человечки были забавные, но так тяжело что-то разобрать по цветам. Приглушить границы на карте, добавить вариацию формы точек, сравнить три распределения. Зеленые «другие» теперь видны получше. Распределение синих и красных выглядит понятнее.

Типографика прежняя. Поменял только карту.

22 апреля   визуализация   дизайн   карта
20 апреля   бег   визуализация   карта   Страва   трек

Визуализация данных на Яндекс-карте

Яндекс опубликовал данные о количестве людей на остановках:
https://yandex.ru/company/researches/2017/public_transport_stops

Пользователи фейсбука покритиковали:
https://www.facebook.com/groups/geoviz/permalink/1242448052516342/

Да, чего-то не хватает. Но здорово, что такие данные начинают публиковать, и неплохо публиковать. Яндекс — молодцы.

Пара слов о визуализации на примере этой карты.

Сплошной цвет и прозрачность.

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

Этого можно избежать, если показывать круги не сплошным цветом, а полупрозрачным. Сравните, как работает закраска 100 % и 50 %. Появляются данные, которые были не видны:

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

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

Отображение распределения во времени

Наилучший вариант, когда распределенные во времени данные видны одновременно. Но на большой карте с большим количеством кругов это было бы тяжело. Поэтому отображаются наблюдения на определенный час, а между часами нужно переключаться.

Для переключения между часами авторы сделали переключатель:

Данных много. Отображается всегда 1 часовой диапазон из 24. Более 95 % данных скрыты. Поэтому способ перехода между данными должен быть легким и быстрым.

У переключателя есть несколько проблем:

Главная функция — показать общее распределение в течение суток и удобно переключаться между часами. Авторы опубликовали данные, чтобы зрители их увидели. Для того, чтобы увидеть 95 % данных, приходится переключаться.

Что можно сделать ценой относительно малых затрат, если не говорить что «тут всё надо переделать»:

Увеличить максимально активную область временного промежутка, независимо от высоты отдельных столбцов:

Сделать выбор диапазона без кликов. Например, при движении мыши над диаграммой. Чистое проявление закона Фиттса: при выборе отдельных кругов точное позиционирование курсора — это нормально, но выбор диапазона — это смена большого количества данных на экране, тут нельзя полагаться на высокую точность. Подвигайте мышью над временными диапазонами, чтобы увидеть принцип:
Небольшое отступление

Пользуясь случаем, напомню, что Сбертех приглашает начинающих дизайнеров в свою «Дизайн-кухню»: https://special.habrahabr.ru/sbertech/dk/. Мы с коллегами поделимся опытом: Даниил Захаров, Алина Ермакова, Михаил Николаев, Павел Лаптев, Даниил Мелких, Андрей Тиханов, Илья Михайлов, Антон Алексеев, Алексей Павлов и другие. Я буду рассказывать в этот раз не о визуализации. В частности, буду говорить о том, как разобраться в целях большого проекта, как их хорошо сформулировать и понятно оформить цели для себя и других участников. Подавайте заявки.