Редактировать III: я нашел чрезвычайно великолепный пример многомерной визуализации количественных данных, и мне пришлось добавить его. Вы найдете его под заголовком «Править III (Нобелевские лауреаты)».
Редактировать II: было небольшое недоразумение, и я отредактировал, чтобы попытаться уточнить, как я интерпретирую предполагаемое использование данных. Я заменил два изображения и добавил раздел "Хотите ли вы картофель фри с этим?"
Графика показывает данные.
Эдвард Туфте:
Беспорядок и путаница - неудачи дизайна, а не атрибуты информации. Clutter требует дизайнерского решения, а не сокращения контента. Довольно часто, чем интенсивнее детали, тем больше ясности и понимания, потому что значение и аргументация неуклонно КОНТЕКСТНЫ. Меньше зануда.
Почему мы визуализируем данные?
- Инструменты для мышления
- Чтобы показать результат интенсивного видения
- Чтобы понять проблему, принять решение
- Показать сравнения, показать причинность
- Укажите причины, чтобы верить
Как?
- показать данные
- побудить зрителя задуматься о сути, а не о методологии, графическом дизайне, технологии графического производства или о чем-то еще
- не искажайте то, что говорят данные
- представить много чисел в небольшом пространстве
- сделать большие наборы данных связными
- побуждайте глаз сравнивать разные данные
- раскрыть данные на нескольких уровнях детализации, от широкого обзора до тонкой структуры.
- служить разумно ясной цели: описание, исследование, табулирование или оформление.
- быть тесно интегрированным со статистическими и устными описаниями набора данных.
Несколько определений:
Данные:
обычно считается "материалом, который сортируется в базах данных". Конечно, это могут быть цифры, изображения, звук, видео и т. Д. Данные - это то, что можно собирать, часто количественно. В его самой сырой форме это трудно переварить; просто стены цифр. Вы знаете; Матрица . Вообще говоря, у нас нет массивных баз данных, состоящих из нулей, для всего того, чего у нас нет , даже если иногда то, чего у нас нет, является наиболее информативным . Итак, чтобы увидеть, чего у нас нет, нам нужно визуализировать то, что у нас есть.
Информация:
это то, что вы можете извлечь из данных . Показывая данные каким-то образом, мы можем получить информацию . Один из примеров, которые я часто использую, состоит в том, что если я дам вам список стран мира и скажу, что два из них отсутствуют, то вряд ли вы найдете их на основе этого списка. Однако, если я отобразлю это, закрасив все страны, которые у меня есть на карте, вы сразу увидите, что я опустил Центральноафриканскую Республику и Новую Каледонию. Это «снижение шума» и рассказ истории наиболее эффективным способом.
Инфографика и визуализация данных:
Стесняюсь назвать ваш пример инфографикой. Я знаю, что это часто воспринимается как синонимы визуализации данных, информационного дизайна или информационной архитектуры, но я не согласен. Инфографика - для меня - это серия графиков, диаграмм и иллюстраций, которые могут содержать множество предвзятых утверждений о том, как читать данные. Это менее объективно, более склонно пропускать данные, которые не в «интересах» создателя: вы руководствуетесь выводом, который кто-то предопределил. Они имеют развлекательную ценность и часто используют иллюстрации, которые отвлекают внимание от данных. Это хорошо, но я думаю, что мы должны немного дифференцироваться.
Примеры
Большое количество данных:
Имейте в виду, что большие данные - это не то же самое, что сложные данные. Многие данные могут быть одинаковыми, например, карта LinkedIn: основные данные одинаковы, но есть фильтры (по тегам). Есть две переменные: география и некая метка, определяющая людей по профессиям / интересам / отношениям. Безумное количество данных; но только две переменные.

Multivariable:
Вот пример многомерной визуализации данных. Это диаграмма Чарльза Минарда 1869 года, показывающая количество людей в русской армии Наполеона 1812 года, их передвижение, а также температуру, с которой они столкнулись на обратном пути.
Большая версия здесь.

Взлом кода занимает немного времени, но когда вы это делаете, это великолепно. Перечисленные переменные:
- размер армии (количество живых / мертвых)
- географическое положение
- направление (восток - запад)
- температура
- время (даты)
- причинно-следственная связь (умер в боях и от холода)
Это невероятное количество информации на простой двухцветной карте. Географическая часть стилизована, чтобы дать место другим переменным, но у нас нет проблем с ее получением.
Вот более хитрый. Это будет намного легче читать, если вы знакомы с основными эволюционными визуализациями, кладограммами, филогеникой и принципами биогеографии. Имейте в виду, что это сделано для людей, знакомых с этим, так что это специалист, научная карта. Вот что он показывает: Филогеографическое изображение ядовитых линий лягушек из Южной Америки. Карты слева показывают основные биогеографические районы по мере их изменения во времени, а изображение справа показывает родословные лягушек в контексте их биогеографического происхождения. (Авторы Сантос, Колома Л.А., Саммерс К., Колдуэлл Дж.П., Ри Р. и др. [CC-BY-SA-2.5 (www.creativecommons.org/licenses/by-sa/2.5)], через Wikimedia Commons). Когда вы «взламываете код», это невероятно информативно.

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

Еще один:

И тот, который использует другую, но повторяющуюся графику:

Sparklines - это термин, придуманный Эдвардом Туфте, который также превратился в
полнофункциональную, полностью настраиваемую библиотеку javascript. Это в основном крошечные диаграммы, которые могут быть вставлены в текст, как часть текста, а не как «внешний» объект. Вот как выглядит по умолчанию:

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


Ваши данные
Все вопросы, которые ставит @Javi, чрезвычайно важны.
То, что вы пытаетесь сделать, это создать визуальный инструмент для мышления. Для этого вы должны извлечь лучшее качество отношения сигнал / шум. То, с чем вы боретесь, это как соотнести данные с разными переменными в информацию . Вот вопрос: что должно быть приблизительно правильно, а что должно быть точно правильно? Какова цель?
Я собираюсь предположить, что вы хотите отображать данные без особой предвзятости: вы хотите, чтобы читатель сам нашел корреляции, если есть какая-либо корреляция, которая будет иметь место. Ваша цель не в том, чтобы сказать людям, что гамбургеры вредны для них или что женщины едят меньше гамбургеров, чем мужчины, а дать им «увидеть» это, если это то, что содержится в данных (представьте, если бы эти три человека были семьей. качаем наш взгляд на весь гамбургер-чуть-чуть).
Ваш набор данных настолько мал, что вы можете просто положить все это в таблицу, и все будет в порядке. Но, конечно, это общая идея:
Небольшая деталь: время (возраст) - это то, что мы видим как горизонтальное слева направо (временные шкалы). Весите что-то, что вверх-вниз, поэтому переключение вашей x-y было бы хорошей идеей.
1. Какие уникальные фиксированные объекты?
2. что такое (эх ..) переменные переменные?
- Вес (кг)
- Возраст (годы)
- Количество гамбургеров (целое число)
- Тип гамбургеров (целое число)
Примечание: ваши данные целиком состоят из единиц. Счетные, поддающиеся количественной оценке каждый в отдельном умственном масштабе. Кило, возраст, вес и количество. И в базе данных говорят, что их имена являются ключами. Когда вы начинаете делать пространственно-временные визуализации, это становится настоящей головной болью. Представьте, что вы должны добавить место рождения, текущий дом и т. Д.
Только два здесь, которые имеют корреляцию, - это количество гамбургеров и влажность или нет, это комбо. Все остальные переменные являются независимыми, и только одна является фиксированной (имя). В какой-то момент, с большими наборами данных, даже имена становятся неинтересными и заменяются демографическими данными, возрастом, полом и т.п.
С этим крошечным набором данных вы можете получить все это на одном графике, например, так:

Или вы можете включить изменить ось и имя пузырька содержимого:
Личное примечание: я думаю, что это лучшее из двух, потому что x и y содержат «физические» свойства человека. Переменная в пузырьках - это количество бургеров.

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

Вы хотите картофель фри с этим?
Мое предположение состояло в том, что мы также хотели знать отношение гамбургера к еде. Каждое блюдо содержит гамбургер. Не все блюда являются комбинированными.
- мы только хотим знать, ест ли человек иногда combomeals?
- или мы хотим знать, сколько блюд из гамбургеров также являются комбомолями?
Если 1., логическое значение применяется к имени / ключу / идентификатору.
Джейн иногда ест гребешки? Правда / ложь.
Если 2., мы можем применить логическое значение для каждого приема пищи:
1 чизбургер, combomeal = правда
1 чизбургер, combomeal = правда
1 чизбургер, комбомал = ложь
1 чизбургер, комбомал = ложь
1 чизбургер, комбомал = ложь
1 чизбургер, комбомал = ложь
1 чизбургер, комбомал = ложь
1 гамбургер, комбомал = верно
1 гамбургер, комбомал = верно
1 гамбургер, комбомал = ложь
Это очень утомительно, поэтому мы можем разбить его на:
Джейн ест 10 гамбургеров. Из них три являются комбо («хотите картошку с этим?»).
Одним из combomeals является меню гамбургера.
Два из combomeals - меню чизбургера.
Остальные - одиночные гамбургеры. 5 сыров, две говядины.
Эта круговая диаграмма была попыткой визуализировать это. Я в этой версии сохранил кусочки пирога, чтобы было понятнее. Дело в том, что было бы непросто начать применять большие наборы данных и%:

Но я думаю, что лучший способ это переосмыслить.
Другой способ взглянуть на это - сделать это действительно очень просто. Здесь легче увидеть, какие возрастные группы, какие весовые группы и все данные, которых у вас нет, могут нам рассказать. Данные, которые у вас есть, не связаны с пробелами, это только единицы измерения (кг, годы, цифры + ключ / идентификатор / имя):
(Изменить: яйцо на моем лице: я заменил эти изображения на более правильные, так как "все блюда - гамбургеры, а не все блюда - комбинированные")
Это было бы довольно легко расширить с большим количеством людей:
Или, что еще лучше, если вы сравните возрастные группы 10, 20 и 30 лет, вы можете сделать довольно простую для чтения статистическую визуализацию:

..И просто быть максимально понятным; Вот пример такого мышления. Эта диаграмма показывает выживших Титаника, соотношение экипажа, класса, мужчин, женщин.

Там будет множество других решений, это всего лишь несколько мыслей.
Я мог продолжать и продолжать, но теперь я исчерпал себя и, вероятно, всех остальных.
Инструменты для игры:
gephi
Gapminder Посмотрите эту
феноменальную презентацию TED Ханса Рослинга - любите этого парня
Google диаграммы
somvis
Рафаель
MIT Exhibit (ранее назывался Similie)
d3
Highcharts
Дальнейшее чтение:
Пи Джей Онори; В защиту тяжело
Эдвард Туфте: прекрасное доказательство
Эдвард Туфте: Предвидение информации
Эдвард Туфте: визуальное отображение количественной информации
Визуальные объяснения: изображения и количество, доказательства и повествование
Male, Alan., 2007 Иллюстрация теоретическая и контекстная перспектива Лозанна, Швейцария; Нью-Йорк, Нью-Йорк: AVA Academia
Isles, C. & Roberts, R., 1997. В видимом свете, фотография и классификация в искусстве, науке и повседневной жизни, Музей современного искусства Оксфорд.
Card, SK, Mackinlay, J. & Shneiderman, B. eds., 1999. Чтения в Информационной Визуализации: Используя Видение, чтобы Думать 1-ое издание., Морган Кауфманн.
Графтон, А. & Розенберг, Д., 2010. Картографии времени: история времени, Принстонская архитектурная пресса.
Лима, М., 2011. Визуальная сложность: картирование информационных шаблонов, Princeton Architectural Press.
Баунфорд, т., 2000. Цифровые диаграммы: как эффективно разрабатывать и представлять статистическую информацию 0 изд., Уотсон-Гуптилл.
Стил, Дж. & Ильинский, Н. ред., 2010. Прекрасная визуализация: взгляд на данные глазами экспертов 1-е изд., O'Reilly Media.
Gleick, J., 2011. Информация: история, теория, потоп, Пантеон