Визуализация

Дизайнеры Клеменс Вайсхар и Рид Крам по заказу «Ауди» разработали стул R18 Ultra из композитных материалов. Окончательное тестирование проходило публично в Милане с 17 по 22 апреля 2012 года.

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

Визуализация того, как же люди сидят на стуле, выложены на сайте проекта — http://r18ultrachair.com/…_videos/2012-04-17

http://www.creativereview.co.uk/…-audiences-though-its-music

Симфонический оркестр Торонто с помощью диаграмм рассказывает, как слушать музыку.

Первые две страницы руководства по Симфонии №41 Моцарта

Оно же в жизни:

Кусочек крупнее:

http://playground.tensorflow.org/

Даниель Смилков и Шон Картер создали интерактивную процесса обучения нейросети. Решаются задачи классификации на разных массивах данных.

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

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

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

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

Два энтузиаста, Вайли Оверстрит и Алекс Горош из Сан-Франциско, поехали в пустыню Блэк-Рок и построили модель Солнечной системы в точном масштабе, диаметр которой примерно равен 11 километрам. Земля при этом оказалась шариком, диаметром в полтора сантиметра.

http://www.r2d3.us/…-to-machine-learning-part-1

Stephanie Yee и Tony Chu сделали интерактивный рассказ о машинном обучении. В качестве примера они рассматривают задачу классификации: по параметрам дома догадаться расположен он в Нью-Йорке или в Сан-Франциско.

Они рассказывают как подготовить данные, что значит «обучить машину», как глубина дерева принятия решений повлияет на точность, как обученная машина будет работать на тестовой выборке и реальных данных.

Все снабжено интерактивной визуализацией.

Есть перевод на русский: http://www.r2d3.us/…ое-Введение-в-Теорию-Машинного-Обучения/

«Уолл-стрит Джорнал» проанализировал цвета на обложках комикса и сделал интерактивную визуализацию. Палитра упрощена до 64 цветов, площадь сектора показывает количество цвета на обложке.

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

Визуализация:
http://graphics.wsj.com/avengers/

Статья об изменении цветов на обложках «Мстителей»: http://blogs.wsj.com/…-of-earths-mightiest-heroes

Textures.js — библиотека патернов на яваскрипте для карт, графиков, визуализации данных.

http://riccardoscalco.github.io/…textures/

Дункан Грэхем, дизайнер в Мэпбоксе, сделал карту в стиле Супер Марио и рассказал об этом в блоге:
https://www.mapbox.com/…/super-mario-with-studio

Карта: https://api.tiles.mapbox.com/…_s64VQ#5/35.675/-92.681

Исходный код https://github.com/…/super-mario-world.tm2

http://peterbeshai.com/buckets/app/

Статистика по игроку:

Сравнение игроков между собой:

По лиге целиком:

Разработчик фитнес-приложения «Страва» визуализировал данные о велосипедных поездках и пробежках на карте мира:

What's this: This dataset includes 77,688,848 rides and 19,660,163 runs representing about 220 billion total data points.

Как бегает Европа: http://labs.strava.com/…/#4/9.42390/48.42072/gray/run

На велосипеде больше всего ездят в Британии и Голландии: http://labs.strava.com/…/#4/9.42390/48.42072/gray/bike

В Екатеринбурге бегают вокруг воды (озеро Шарташ, на карте справа, вдоль пруда — в центре, и в парке Маяковского): http://labs.strava.com/…/60.62088/56.82198/gray/run

В Москве бегают по набережным и в любом, даже самом маленьком парке: http://labs.strava.com/…/37.55173/55.75210/gray/run (видны Парк Горького + Воробьевы, Сокольники, Серебряный Бор, Измайлово и Кузьминки)

http://sorting.at/
Отличная визуализация многочисленных алгоритмов сортировки. Можно добавить несколько разных алгоритмов, и сравнивать в реальном времени их эффективность для разных массивов исходных данных: случайных, изначально упорядоченных, перевёрнутых. Жалко, что в школе нам не так их показывали, и я не мог понять, зачем нужно что-то кроме тупого и понятного «пузырька».

Когда в Вилларибо всё давно готово, в Виллабаджо всё ещё сортируют:

«Автодеск ресёрч» визуализировали изменения в структуре компании с мая 2007-го по июнь 2011-го года.

В 2009 году ребята из Лайв Лабс (канувшего в лету отделения Микрософта) разработали Пивот — экспериментальный инструмент для просмотра больших массивов данных.

В Пивоте принцип навигации основан на идее о масштабируемом интерфейсе Джефа Раскина.

В 2010 году Гари Флейк показал Пивот на ТЕДе:

Пивот был разработан на Сильверлайте + ИЕ. Его до сих пор можно скачать http://research.microsoft.com/…-92d6-496f-867d-666c87fbaada на сайте Микрософта и даже сохранилась какая-то документация http://www.microsoft.com/…/pivotviewer Но примеры, показанные в презентации, уже недоступны, так как исчезли вместе с закрытием Лайв Лабс в 2010.

Камерон Беккарио (@cambecc) визуализировал ветры планеты: http://earth.nullschool.net/

Вдохновлением послужила «Визуализация ветров» Северной Америки: http://design.artgorbunov.ru/…-vetrov

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

О проекте: http://earth.nullschool.net/about.html
Исходники на гитхабе: https://github.com/cambecc/earth. Работает на node.js, D3, backbone и when.js

Визуализация ветров:
http://hint.fm/wind/

На сайте — с анимацией и зумом.

Сервис, позволяющий изобразить разметку веб-страницы в виде графа:
http://www.aharef.info/static/htmlgraph/

Положительный отзыв от Тафти и обсуждение на его форуме:
http://www.edwardtufte.com/…-and-a-fetch-msg?msg_id=0002HW

Примеры:

apple.com

табличный yahoo.com

google.com

Легенда:
cиний — a
красный — table, tr и td
зеленый — div
фиолетовый — img
желтый — формы и их содержание
оранжевый — br, p, blockquote
черный — корневой html
серый — остальные теги

www.qwiki.com — сервис для быстрого въезжания в тему. типа википедии, но в картинках и с голосом. интересно

Невероятной красоты трёхмерные модели внутриклеточных процессов создаёт гарвардская научная команда «Био-вижнс»: http://multimedia.mcb.harvard.edu/ Чтобы посмотреть другие фрагменты нажмите «Click to close». Навигация на сайте, надо признать, не самая очевидная :-)

Подсмотрено в блоге «Imaginary Foundation»: http://blog.imaginaryfoundation.com/

На одной картинке показано оба состояния дивана.

http://ads-plus.org/#design_Design

Можно достаточно быстро протестировать свои идеи в применении. Сделано с применением HTML5-фишек.