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

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

Выбор школы в Чикаго

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

https://gabriellelamarrlemee.github.io/thesis-simulation/

Если ребенок «белый», то у него могут быть сложности со сверстниками в школе: только 17 % детей в Чикаго — белые, 35 % темнокожие, и 43 % — латиноамериканцы.

Час назад   визуализация   дизайн   интерфейс   Чикаго

Визуализация головного мозга для исследований

Инструмент для визуализации головного мозга для исследований:
http://andrewgelman.com/2018/05/18/awesome-data-visualization-tool-brain-research/

Обалденно. Трехмерная схема нервных волокон с подсветкой групп и настройкой прозрачности, и еще куча крутых штук:
https://yeatmanlab.github.io/AFQBrowser-demo/

Час назад   визуализация   дизайн   мозг   нейроны

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

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

Страница:
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

15 мая   визуализация   график   дизайн   интерфейс   тач
15 мая   визуализация   дизайн   Лондон   мониторинг

Графический интерфейс для задач марсохода

В Лаборатории интерактивных данных (Interactive Data Lab) рассказали, как делали графический интерфейс для марсохода для определения оптимальных условий передачи данных по радиосвязи. Заказчик — Лаборатория реактивного движения НАСА (NASA Jet Propulsion Laboratory).

https://idl.cs.washington.edu/papers/meridian/

ПДФ публикации:
https://idl.cs.washington.edu/files/2018-Meridian-CHI.pdf

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

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

Было бы интересно посмотреть кликабельный прототип, но опубликовали только пару скриншотов.

Редкий случай, когда оправдано применение круговой диаграммы, полярных координат:

Из телеграм-канала https://t.me/sergeykashin
19 апреля 2018

22 апреля   визуализация   дизайн   круговая диаграмма   марсоход   НАСА
22 апреля   визуализация   дизайн   иллюстратор данных

Повернули систему координат

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

Но плоскость показана под углом, и автор обращает внимание на еще одно значимое направление: снизу вверх на повернутой плоскости.

В таком ракурсе наверху оказываются «бедные, но счастливые»:

Источник:
http://www.visualcapitalist.com/relationship-money-happiness/#comment-3830619155

В конце страницы смешной комментарий:

ag303 • 12 hours ago
I find the angled presentation of this graphic confusing. It implies that the variables represented on the x and y axes are not the usual vertical and horizontal, but in fact they are, right? X is wealth and Y is happiness? Seems to me the More satisfied arrow should really point up, and the Richer arrow should point to the right.

Люди думают, что нужно показывать данные так как они думают, а не как-то иначе. На самом деле данные можно показывать как угодно. Вообще всё можно показывать как угодно. Исходя из цели и кучи разных причин. Автор исходит из того, какая у него цель. Это может быть просто желание.

22 апреля   визуализация   дизайн   цель

Параллельное отображение относительно одной даты

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

Перейдите по ссылке и подвигайте мышью над графиком:
https://beta.observablehq.com/@mbostock/d3-index-chart

22 апреля   D3   Observable   визуализация   дизайн

Визуализация бросков в баскетболе

Веб-виар (Web VR):
https://bball.surge.sh/golden-state-warriors/anderson-varejao

С технической точки зрения круто. А с точки зрения представления данных — добавить бы даты и время. Мячи летят, но непонятно, как это распределено во времени.

Сходу непонятно значение цвета. Красные — мимо, синие — попали, но в начале сбивает с толку плавное повышение яркости от белого.

На полу поверх (или вместо) деревяшек можно разместить в виде текстуры точки, откуда бросали мяч.

Ну, так себе.

Двухмерное отображение мест бросков, количества попыток и успешности давно хорошо сделали в Нью-Йорк Таймс:
http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

Но на этой прекрасной графике не отражалось время броска.
Забивали равномерно?
Отжигали в конце игры?

Анимация в веб-виаре могла как раз показывать в такой истории время бросков. Но в 3д это выглядело бы, наверное, странно. Мяч ведь один. Не очень понятно, что в данном случае дает трехмерность.

Из телеграм-канала https://t.me/sergeykashin
17 марта 2018

22 апреля   3d   баскетбол   виар   визуализация   дизайн
22 апреля   Observable   анимация   визуализация   дизайн   обзёрвэбл
22 апреля   D3   Observable   визуализация   обзёрвэбл

Блокноты Обзёрвэбл

Тестирую новый инструмент Блокноты Обзёрвэбл (Observable) Майка Бостока. Интересная штука.

Посмотреть в Блокнотах:
https://beta.observablehq.com/@realsergeykashin/temperature-and-humidity-in-moscow-summer-2017

Пояснения Бостока, что это такое:
https://beta.observablehq.com/@mbostock/five-minute-introduction

Делал визуализацию температуры для исследования в Сбере. Решил параллельно попробовать запилить что-то похожее в Блокноте на открытых данных, чтобы сравнить с обычной связкой JS + D3 + HTML.

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

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

22 апреля   Bostock   D3   Observable   визуализация   обзёрвэбл
22 апреля   Бюро Горбунова   визуализация   график   дизайн   финансы

О влиянии начальных условий

Наглядно о влиянии начальных условий. 40 двухчастных маятников одинаково начинают движение и выглядят как один маятник. Но из-за крошечного расхождения начальных условий траектории расходятся, и…

https://bl.ocks.org/travisdoesmath/c0d08396a0bf8d5de8519ded00bb7866

Там по ссылке еще крутая демка с тройным маятником:

https://www.reddit.com/r/mathpics/comments/4nd5h1/41_triple_pendulums_with_very_slightly_different/

https://i.imgur.com/r6FZfxr.mp4

Из телеграм-канала https://t.me/sergeykashin
14 февраля 2018

22 апреля   визуализация   маятник   эффект бабочки

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

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

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

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

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

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

Как дороги захватывают город

Наглядно о том, как дороги захватывают территорию города. На примере участка карты Детройта.
https://twitter.com/arkadiygershman/status/945265035496083456

https://en.wikipedia.org/wiki/Michigan_Building

https://yandex.ru/images/search?text=парковка%20в%20театре%20детройт&lr=213

В 1976 году прекратил свою деятельность Мичиганский театр. Владельцы сделали из здания театра в центре Детройта автомобильную парковку.

Театр на той же схеме города:

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

20 апреля   визуализация   город   Детроит   схема   театр
20 апреля   бег   визуализация   карта   Страва   трек

Реальные данные — неидеальные

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

Компания Блумлайф (Bloomlife) делает портативные датчики схваток для беременных. Опубликовали статью о том, как важно понимать качество данных. Данные от неидеальных источников. Заслуживает внимания:

Real Life is Messy. We Should Design For It.
On sensor data and the need for more transparency on signal quality.
https://medium.com/40-weeks/real-life-is-messy-we-should-design-for-it-d1d5f14270d3

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

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

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

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

20 апреля   визуализация   дизайн   качество данных

О визуализации забега

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

Красивая, любопытная, но не очень понятная, на мой взгляд, визуализация: https://smallmultiples.com.au/articles/visualising-sydneys-city2surf-2017/

Heartbreak Hill — буквально, холм. Но на диаграмме при взгляде на слово Hill легко перепутать по вертикали количество бегунов и высоту над уровнем моря.

Показали отдельный разрез с высотами, но без динамической визуализации бегунов:

20 апреля   визуализация   дизайн
Ctrl + ↓ Ранее