11 заметок с тегом

визуализация

Новые карты Страва (Strava)

Сервис для тренировок «Страва» (Strava) выкатили новую карту треков спортивных занятий. Люди занимаются спортом, устройства отправляют координаты на сервер Стравы, Страва рисует карту.

https://medium.com/strava-engineering/the-global-heatmap-now-6x-hotter-23fc01d301de?_branch_match_id=451858002544826932

Рассказали о том, какие данные используются для построения карты. На чем построен код. Как формируется изображение карты.

Интересная деталь: они фильтруют координатные данные с учетом погрешности спутниковых сигналов.

И еще описаны куча приемов, фишек и секретов.

Карту интересно смотреть и в больших, и в малых масштабах.

Вот кусок России:
https://labs.strava.com/heatmap/#4.40/54.69098/61.21642/hot/all

А вот бегают и катаются на велике даже в Хатанге!
https://labs.strava.com/heatmap/#8.41/102.67839/71.98594/hot/all

Две Кореи:

13 ноября   визуализация   дизайн   карты   Страва

Поздравляю девочек с 8 марта!

Я не знаю, как так получилось, но вот так совпало. Читал Александра Маркова об эволюции человека. Из главы о «митохондриальных Евах»:

У всех ныне живущих существ женского пола в прошлом была одна общая праматерь.

Мне захотелось наглядно проиллюстрировать этот феномен, и я сделал очередной симулятор с визуализацией. Закончил как раз сегодня утром. И понял, что... женские особи... Ева... проматерь... митохондрии... да это же 8 марта!

Так что получилась своеобразная 8-мартовская открытка.
Запускайте:


Девочки, с 8 марта!

;-)

Как показывать результаты голосования

Скриншот из фейсбука Артемия Лебедева

«Дождь» удивил низким качеством организации дебатов Навального и Лебедева. Например, в голосованиях хороший тон — показывать абсолютные значения, а не только проценты. Неизвестно, там три инвалида или три тысячи в этих процентах. Надо показывать, сколько людей, раз уж голосуют.

К примеру, в 2013 мы с Сашей Мядзелем в Телетайпе сделали диаграммы результатов голосования по схемам московского метро: http://www.teletype.ru/metro/. Мы указывали абсолютное число голосующих рядом с процентами.


Диаграммы вызывали доверие и ими пользовались:
http://varlamov.ru/708693.html,
https://habrahabr.ru/post/167859/,
http://www.sostav.ru/news/2013/02/01/metro_shema_lebedev/,
http://www.yar.kp.ru/daily/26024/2944350/,
http://tema.livejournal.com/1328924.html

Когда появился открытый источник, нам захотелось сделать честный график голосования. Для этого нужно показать, какие данные поступают из открытого источника.

Как это показать? Просто показать исходные данные. Голосовали не проценты, а люди. В первую очередь — количество людей. В какой момент эти люди проголосовали — диаграмма по времени, а не только текущие значения. В какой момент появились голоса. Если бы кто-то вбрасывал голоса в пользу одного из кандидатов — на графике были бы подозрительные ступеньки.

Обратим внимание, как «Дождь» показал голосовалку:

  1. Нет асболютных значений — нет доверия к источнику. А не случайных ли чисел генератор нам показывают?
  2. Не показано распределение по времени — а не было ли вбросов?

Приколам вроде 119 %, как на скриншоте, наверняка можно было найти объяснение: может быть, поставили случайно сравнение голосов телеграмма и одноклассников, а потом исправили? Теперь уже не узнаем. Даже если дальнейшее отображение голосов было правильным — доверие зрителя подорвано. Чтобы вернуть доверие, нужно признать ошибку, пояснить причину ошибки, и выложить исходные данные.

Как показать честные данные и сохранить доверие:

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

+ гляньте пост Максима Каца: http://maxkatz.livejournal.com/603628.html

2017   визуализация   голосование   дизайн   Дождь   Лебедев   Навальный

Микро- и макроуровень на примере симулятора лифтов

Симулятор лифтов показывает детали и общий вид.
Общий вид: графики собирают и показывают данные за весь период симуляции.
Детали: здание, этажи, люди, лифты — показывают происходящее в данный момент.
http://cashin.ru/vis/lift/

Детали — микроуровень. Детали удобно наблюдать на низкой скорости. Поставьте в симуляторе скорость хода времени на единицу:

На микроуровне видно, как люди движутся по этажам, как открываются двери лифтов, как входят и выходят.

В чем польза отображения микроуровня при визуализации данных?

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

Вот группа человечков направилась к лифтам. Вот они ждут в холле, счетчик показывает количество. Вот подъехал лифт, двери открылись, люди вошли в лифт. Видно, что они вошли не толпой, а по очереди, один за другим. Сначала открываются двери, а потом заходят пассажиры. Перед началом движения лифта сначала закрываются двери — это учитывается при расчетах времени для графиков.

Допустим, без отображения человечков и лифтов симулятор рисовал бы только графики. Это вызывало бы меньше доверия у зрителя: как построены эти графики? На основе чего? Откуда взялись числа?

Микроуровень повышает доверие, потому что наглядно показывает, насколько корректно строится макроуровень.

Если микроуровень понятен, он становится не нужен — зритель ускоряет ход времени,

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

Другой пример

Смотрите, как анимация показывает смысл формул условной вероятности:
http://setosa.io/ev/conditional-probability/
Автор — Виктор Пауэл (Victor Powell)

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

2017   визуализация   лифты   проект

Как симулятор лифтов рисует графики

Продолжение.
Начало тут: http://www.cashin.ru/blog/all/lift-upd1/

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


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


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

Визуализация сделана с помощью библиотеки d3js,
https://d3js.org

Прожарить парочку лифтов:
http://www.cashin.ru/vis/lift/

В следующем посте — про микро- и макроуровень.

2017   canvas   svg   визуализация   лифты   проект   симулятор

Обновился симулятор лифтов

Что за симулятор?

Это программа, которая показывает, как люди ездят на лифтах. Сколько времени посетители ждут лифта в холле. Сколько лифтов требуется, чтобы перевезти людей без задержек.
http://cashin.ru/vis/lift

Зачем?

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

Сначала я планировал обойтись без пользовательского интерфейса. Казалось, настроек в виде кода будет достаточно. Но без интерфейса управлять симулятором оказалось тяжело. Пришлось сделать и интерфейс.

Что в этом интересного?

Интересно наблюдать, как при разных настройках работают лифты и перемещаются люди.

При каких условиях лифты ездят почти пустые,

а при каких собирается толпа в лифтовых холлах:


Ржачно смотреть, как два очень быстрых и вместительных лифта не справляются с 50-этажным зданием и графики выходят из берегов:


А что будет, если лифты медленные, но вместительные? Попробуйте.
Получился и генератор для работы, и прикольная штука:
http://cashin.ru/vis/lift


Как пользоваться?

Симулятор запускается сразу как только вы зашли на страницу. Работает по заданным настройкам. Нажмите паузу — появятся настройки. Меняйте количество этажей, лифтов и другие параметры. Запускайте и смотрите, как изменится загрузка лифтов.


Смотрите, почему у лифтов возникают очереди. Настраивайте скорость симуляции: ход времени можно увеличить до 50-кратного.

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


Почему люди едут именно на эти этажи?

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


Каждая точка показывает перемещение одного человека на определенный этаж в определенный момент. По горизонтали — временная ось, по вертикали — номер этажа. Нижние этажи показаны синим, верхние — красным. Чем выше, тем краснее.


Сколько данных показывает симулятор?

При настройках 500 человек симулятор каждые 20 миллисекунд генерирует 50 × 500 = 25 000 записей в секунду. Каждая запись содержит координаты, номер этажа, номер лифта, время ожидания и перемещения.

Симулятор собирает и показывает записи о перемещении людей за 11 часов, с 9 до 20. Это 39 600 секунд. Получается 39 600 × 25 000 = 990 000 000 записей за один день работы лифтов.

Насколько реалистично программа показывает работу лифтов?

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

Симулятор помогает грубо прикинуть эффективность лифтов, но не подходит для точного расчета. Для этого не хватает дополнительных деталей, которых я пока не запрограммировал. Лифты движутся без учета разгона и торможения. Нет группового управления лифтами: если человек вызвал лифт, и два лифта свободны, то оба приедут по вызову. Нет отдельных настроек для каждого лифта. Нельзя указать разные рабочие этажи для разных лифтов. Я упростил управление лифтами, чтобы не превращать в долгострой.

Играйте:
http://cashin.ru/vis/lift

Как симулятор рисует графики — в следующих постах.

2017   визуализация   лифты   проект   симулятор

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

Яндекс опубликовал данные о количестве людей на остановках:
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/. Мы с коллегами поделимся опытом: Даниил Захаров, Алина Ермакова, Михаил Николаев, Павел Лаптев, Даниил Мелких, Андрей Тиханов, Илья Михайлов, Антон Алексеев, Алексей Павлов и другие. Я буду рассказывать в этот раз не о визуализации. В частности, буду говорить о том, как разобраться в целях большого проекта, как их хорошо сформулировать и понятно оформить цели для себя и других участников. Подавайте заявки.

Симулятор лифтов

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

http://cashin.ru/vis/lift/

2017   визуализация   лифты   проект   симулятор

Графики голосования за схемы Московского метро

С 22 по 31 января 2013 года на сайте департамента транспорта Москвы проходило голосование в конкурсе на схемы московского метро. В голосовании участвовали схемы, которые представили Студия Артемия Лебедева, Илья Бирман, и дизайн-центр РИА Новости. Впервые создание схемы доверили профессиональным дизайнерам. Это важное событие в российском дизайне.

Я и мой коллега Александр Мядзель придумали и сделали графики оперативного отображения хода голосования.

http://www.teletype.ru/metro/

Диаграммы опубликовали:
http://varlamov.ru/708693.html,
https://habrahabr.ru/post/167859/,
http://www.sostav.ru/news/2013/02/01/metro_shema_lebedev/,
http://www.yar.kp.ru/daily/26024/2944350/,
http://tema.livejournal.com/1328924.html

Когда появился открытый источник, нам захотелось сделать честный график голосования. Для этого нужно показать, какие данные поступают из открытого источника.

Как это показать? Просто показать исходные данные. Голосовали не проценты, а люди. В первую очередь — количество людей. В какой момент эти люди проголосовали — диаграмма по времени, а не только текущие значения. В какой момент появились голоса. Если бы кто-то вбрасывал голоса в пользу одного из кандидатов — на графике были бы подозрительные ступеньки.

2013   визуализация   график   метро   Телетайп
Ctrl + ↓ Ранее