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

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

Визуализация миграции птиц

Великолепная статья Нэшнл Географик с картографической визуализацией миграции птиц в Северной и Южной Америках:

https://www.nationalgeographic.com/magazine/2018/03/bird-migration-interactive-maps/?beta=true

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

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

Вызывает вопросы верстка. Хочется поставить тексты и мини-выноски про птиц с фотками параллельно картам. Сейчас тексты и фотографии отдалены от карт по вертикали. Мешает заигрывание с визуальными эффектами при скроллинге: хочется сказать «да дайте уже, наконец, спокойно посмотреть».

Там же: сбивает с толку, что в листалке периодов первый период — вовсе не период, а анимация всех периодов. Для бета-версии норм, но вообще вот это надо сделать получше:

2018   National Geographic   верстка   визуализация   дизайн   карты

Как изучать трехмерные данные МРТ-сканирования

Планшет с определением положения в пространстве (по описанию я не уверен, что они используют акселерометр) помогает изучать трехмерные данные МРТ-сканирования:

Хорошо, что экранов два:
на одном — текущее сечение,
на другом — общий вид с отображением плоскости сечения.

2018   визуализация   дизайн   МРТ

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

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

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

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

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

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

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

Симуляция и визуализация человеческого тела

Суперкомпьютерный центр в Барселоне выпустил короткий фильм о программной симуляции и визуализации человеческого тела:
http://www.bsc.es/viz/virtualhumans/

Видео:

О фильме:
https://www.bsc.es/news/bsc-news/release-virtual-humans-film

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

Фантастика и рядом не стояла.

2018   визуализация   дизайн   симуляция   фантастика   фильм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В Лаборатории интерактивных данных (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

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

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

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

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

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

Источник:
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.

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

2018   визуализация   дизайн   цель

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

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

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

2018   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

2018   3d   баскетбол   виар   визуализация   дизайн
2018   Observable   анимация   визуализация   дизайн   обзёрвэбл
2018   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.

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

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

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