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

график

Интересная визуализация футбольных голов на чемпионатах в «Экономисте»

https://www.economist.com/graphic-detail/2018/06/18/every-world-cup-goal-ever-scored

Опубликована в рубрике Daily Chart. Хорошо сделано для повседневной графики. Но если закрыть глаза на оперативность подготовки, можно немного покритиковать интерфейс.

При наведении курсора подсказка всплывает не у кружочка гола, а где-то непонятно в стороне:

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

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

25 июня   визуализация   график   дизайн   футбол

Тач-интерфейс и временные ряды

Несколько подходов для организации пользовательского взаимодействия с графиками на тач-интерфейсе опубликовали на сайте Университета Баухауза в Веймаре.

Страница:
https://www.uni-weimar.de/de/medien/professuren/medieninformatik/vr/research/infovis/touch-the-time/

Видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Подходы не новые, но хуже они от этого не становятся.

Синхронизация разных панелей. при уточнении времени на одной из панелей выбранное время подсвечивается и на остальных:

Скоординированный выбор временного диапазона. Выбираем диапазон на одной панели, отображается на всех:

А вот кое-что поинтереснее.
Выделение диапазона для просмотра на отдельной панели:

В видеоролике перетаскивают кусок графика с одной панели на другую, круто:

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

Еще несколько технически интересных штук, но сомнительных с точки зрения визуализации.

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

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

Не очень универсальная штука, есть же нормальный зум. Но выглядит интересно.
Гляньте там видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Как менялась продолжительность жизни

Запись из телеграм-канала.
28 ноября 2017, https://t.me/sergeykashin

В «Гардиане» (The Guardian) изучили и показали, как менялась продолжительность жизни в Великобритании в течение 100 лет.

https://www.theguardian.com/lifeandstyle/ng-interactive/2017/sep/18/how-death-has-changed-over-100-years-in-britain

На графике: желтый — 1915 год, синий — 2015. Обратите внимание на большой график: изменение во времени показано на одном графике с помощью изменения цвета. Видно, как график продолжительности жизни переползает слева направо — люди стали жить дольше.

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

Очень интересно изучить распределение по возрастам и по причинам смерти:

В 1915 большинство детских смертей — от кори. Почти все взрослые возрасты равномерно покосило туберкулезом. Пожилые — от бронхита. И дальше интересные данные по 2015.

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

Неочевидная подсказка в клеточной графике ниже: одна клетка — 5 лет.

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

С 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

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

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