Tags: Круговая диаграмма

Эталонный пирожок




По моему это выход на новую высоту говна для пирожков, как думаете? Я такие собираю, даже тег есть «Круговая диаграмма». Странно, что это сделал какой-то буржуй. У них что, Тафти читать перестали? 

Домашка. Религии в прошлом

Вам дана картинка.

156685-c730a-30060734


Ваша задача: улучшить дизайн, если это возможно.

Подробности смотрите в посте «Почему круговые диаграмы бесполезны».

Мое решение

К сожалению это оказалась весьма объёмная домашка, для решения которой, мне лично нужно гораздо больше времени.

Я планировал показать вам как можно разделять  сложную информацию используя параллелизм. Этот приём Тафти называет small multiplies.



Смысл этого приема в том, что информация разделяется на разные картинки, которые, затем, за счет параллелизма, совмещаются у читателя в голове.

Я думал у меня получится семь картинок (для каждой религии) подобного качества:



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

Однако я не смог нарисовать ничего подобного чисто технически.


Тогда я решил использовать тот же подход, но использовать числа. Около 10-ти часов я потратил на этот вариант:

На мелкой карте вверху показаны города, где живут евреи. Забавно, но они по чуть-чуть живут почти везде.


Но в этом варианте пропадала существенная часть информации (например, количество жителей в городах), поэтому остальную неделю я делал вариант с кружками и таблицей, но на него тоже совсем не хватило времени.




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

Я уверен, что для представления этой информации нужно двигаться именно в этом направлении. То есть, показывать данные на карте, так чтобы были видны причины распределения религий (основная причина, конечно — политическое устройство), и дополнять их точными числами для любопытных. Пирожки — не в коем случае не выход.

---

В этой работе я кучe времени потратил на пересчет процентов и пр. Полностью данные в Эксель я перенес только вчера, очевидно, что надо было сразу все перегнать в цифру, а потом с этим работать.

Для тех, кто решится редизайнить этот график — оставляют тут экселевскую таблицу с числами.


UPD

Евгений Казаков добавляет в письме.


religionmap

См. обсуждение в отдельном посте.



Комментарии скрываются до вечера воскресенья, когда я представлю своё решение и прокомментирую ваши ответы.

Читателям предлагается, помимо написания комментариев, выставлять оценки работам используя следующий формат: оценка за смысл/оценка за красоту. Итоги подводятся на следующей домашке.

Напоминаю, что домашки выходят по пятницам, присылайте свои задания на kolan@ksoftware.ru и, если задание окажется интересным, оно будет опубликовано в одну из пятниц.

Почему круговые диаграмы бесполезны

Тем временем в редакцию бложика поступают вопросы про круговые диаграммы, которые я ласково называю «пирожками» (см. тег «Круговая диаграмма»).

Раз.

Здравствуйте Николай Олегович
...
меня мучает вопрос про круговые диаграммы (pie chart), несколько раз встречал в разных источниках, что использовать их для передачи данных - не совсем корреткно, даже лучше избегать, так вот не могу понять что в них не так?


Отвечаем:

Если вкратце, то: бесполезность и дизайн, подталкивающий к манипуляциям.

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

Да и сам по себе дизайн не очень хорош. Сектора трудно сравнивать, а подписи (без которых не обойтись из-за невозможности сравнивать сектора) приходится читать по кругу.

Манипуляции
Из бесполезности вытекают манипуляции. Часто дизайнерам нужно вставить что-нибудь красивенькое, а данных мало. И тут как раз возникает круговая диаграмма. Для неё не нужны хорошие интересные данные (в основе любой инфографике хорошие и интересные данные, дизайн может их испортить в последствии, но если данные изначально были бестолковые, то дизайн им не поможет стать «белым лебедем»). Она занимает много места, если нужно. И её можно сделать красиво, так что заказчик примет дизайн без проблем.

Некоторые варианты дизайна круговых диаграмм вообще нагло «врут» (см. мою лекцию http://www.ksoftware.ru/wiki/graphical_practice).



Два.

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

156685-c730a-30060734

...


PS: исключительно из спортивного интереса вопрос - можно ли быстро подобрать способ изобразить те же данные, так же нагляно и быстро считываемые, но не пирогами?

 
Отвечаем:

Кончено, дореформенная типографика завораживает. Да и подобные, сделанные вручную схемы, обладают каким-то особым шармом (см. работы Вильяма Плейфейра (перевод имени не точный) вики, гугль).

Однако, пирожок был пирожком и в 19 веке. В данном случае кроме локальных проблем описанных выше, пирожок сделал кое-что посерьезнее. Он испортил интересные многомерные данные, их стало не видно.

Отыскание зависимостей, корреляций, интересных совпадений стало почти невозможным занятием.

Попробуйте ответить на вопросы используя эту работу
  * Какая религия преобладает?
  * С чем связано преобладание той или иной религии?
  * Сторонников какой веры больше всего?
  * Какие есть зависимости в распределении религий?
  * Какая вера преобладает у немцев?
  * В каких городах есть последователи армянской церкви?
 
Ответы на эти вопросы можно получить из графика, но сделать это сложно. Хорошая инфографика, тем и отличается от плохой, что узнать что-то интересное из неё просто.

К тому же не до конца понятно, как показано количество жителей. Площадью? Радиусом? (Площадью в данном случае).


Напоследок цитата из Эдварда:
Tables are preferable to graphics for many small data sets. A table is nearly always better than a dumb pie chart; the only worse design than a pie chart is several of them, for then the viewer is asked to compare quantities located in spatial disarray both within and between pies.
...
Given their low data-density and failure to order numbers along a visual dimension, pie charts should never be used.

The Visual Display of Quantitative Information, стр. 178.

 
---

Раз есть проблемы, значит, конечно, можно сделать лучше. Предлагаю читателям подумать над графиком до пятницы (пока просто подумать), а в пятницу это будет домашкой.

Худшая информационная графика в мире

Известно, что Эдвард Тафти допускает вероятность того, что график Джозефа Миньярда про поход Наполеона в Россиию является самой лучшей инфографической работой в мире.





Сегодня 28 февраля 2010 года в 16:32 по московскому времени я, по всей видимости, нашел худшую инфографическую работу из существующих в природе. Работа найдена в русском издании книги Якоба Нильсена и Хоа Лоранжера «Web-дизайн: удобство использования Web-сайтов».




Вот она:



Представленные на странице график отображает распределение количества кликов на разных частях веб-страниц (или мне стоило написать Web-страниц? :). Он является типичной круговой диаграммой о недостатках которой уже было сказано не раз (см. тег «Круговая диаграмма»). График показывает всего пять значений, причем никаких подписей, и следовательно хоть сколько нибудь точных цифр нет. Как и любая круговая диаграмма такого рода этот график отображает то, что можно выразить простым предложением — явное свидетельство его бесполезности.

Тут, также, присутствует другой типичный недостаток круговых диаграмм — легенда (о недостатках легенд смотрите мою заметку «Легенды»). Удивительно, но в данном примере легенда работает невероятно плохо. Если черный белый и светло-серый цвета различаются, то отличить один темно-серый от другого невозможно. Только одинаковая последовательность секторов и цветов позволяет догадаться, то верхний темно-серый — это «Нижняя часть страницы» (примеры ошибок кодирования цветом смотрите также в Ководстве «Кодирование часть вторая»).

Описанные проблемы делают график ужасным, но все же этого не достаточно для звания худшего графика в мире. Таковым его делает информация, находящаяся рядом.

Внизу графика сообщается, что он отображает усредненные данные по результатам 4719 щелчков. Четыре тысячи семь сот девятнадцать щелчков превратились в всего пять цифр, которые в итоге даже небыли отображены на графике! 9438 (каждая точка клика имеет две координаты) значений было просто выброшено и заменено на нелепую блямбу. Зная это информационная плотность в 0,17 точек на квадратный сантиметр (радиус круга диаграммы — 3 см, площадь — 28,3 см², информационная плотность = 5/28,3 = 0,17) кажется преступлением.

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

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

У любого человека возникнет масса вопросов к этому предложению:
Когда проводилось исследование?
О каком сайте идет речь? И сколько вообще было сайтов?
Как фиксировалось внимание пользователей?
Что хотели пользователи от сайта во время исследования?
Список можно продолжить.
 
Не говоря уже о том, что сам факт удивления авторов тем, что пользователи больше обращают внимание на полезные данные, чем на навигацию, странен. Неужели они думали, что люди ходят на сайты для того, чтобы разобраться в меню?

Что делать с результатами исследования также не понятно. Как, скажем, применить его к сайту у которого нет «нижней части» и «левого столбца» (чтобы это не значило)?

В итоге мы имеем неизвестное исследование, цель которого была в проверке того, что люди обращают внимание на то, что им нужно, и не обращают внимание на то, что им не нужно. Исследование было проведено на неизвестном сайте (или сайтах, это тоже не ясно), выбранном по непонятным критериям. Полученные в результате очевидно бесполезного исследования данные о 4719-и кликах, затем, были усреднены. Усредненные результаты в виде пяти чисел были, после этого, отображены на круговой диаграмме размером 28,3 см². Далее, диаграмма, итоговая информационная плотность которой получилась равной 0,17 точек на см², была лишена каких-либо подписей и снабжена трудночитаемой легендой.

Я думаю, что это самая плохая инфографическая работа в мире, потому, что я не знаю как её можно ухудшить.



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

Домашка. Ау

Я вот сильно интересуюсь, вы что думали, раз выходные можно халявить? Хуй там. Домашнюю работу никто не отменял.

Сегодня домзадание вам (и еще 6 миллиардам человек) загадывает, внимание, Людвиг Быстроновский. Охуеть!

Людвиг пишет: Разберитесь с графиком с сайта Ау92.



UPD
Перед тем как приступать можно ознакомится с тегом «».


Мое решение
Людвиг, конечно, и не думал вам напоминать, что перед тем как что-то делать нужно вникнуть в тему и понять проблемы. А вы забыли, это печально.

Итак, сабжевая статья знакомит нас с ситуацией на топливном рынке Питера на июнь 2006-го и сообщает о планах игроков рынка на конец года.  Цель статьи — показать кто вообще есть на рынке, показать доли участников и дать возможность сравнить их.

В приведенном графике есть недостаток: он — круговая диаграмма. Отсюда вытекает несколько проблем. Во-первых, АЗС собраны в доли, не удивительно, ведь показать на круговой диаграмме 1 338 значений сложновато. По этой же причине на графиках показаны только 11 крупных игроков, а остальные 41 спрятаны в категорию «Прочее». Во-вторых, сравнивать доли сложно, потому что они размазаны по кругу. О нормальном сравнении текущего состояния с планами вообще речи не идет.

В результате борьбы с описанными недостатками у меня получилось следующее:



Замечу, что участников рынка я расположил в алфавитном порядке, а не по значимости, как в исходной таблице, не случайно. Я сделал так, чтобы таблицу было интересно изучать.

Мои соображения схожи с мыслями Майи Лин, создательницы Мемориала ветеранов Вьетнама. Имен на мемориале тоже располагаются не в алфавитном порядке, а по времени смерти. Майя сделала так, чтобы, цитирую Яна Скругса и Джоэла Свердло: «...Alphabetical listing would make the Memorial look like telephone book engraved in granite, destroying the sense of unique loss each name carried...»


UPD
Забыл сказать: Благодарю всех участников за участие!

Комментарии скрываются до вечера воскресенья, когда я представлю своё решение и прокомментирую ваши ответы.

Напоминаю, что домашки выходят по пятницам, присылайте свои задания на kolan@ksoftware.ru и, если задание окажется интересным, оно будет опубликовано в одну из пятниц.

Нормальный пирожок




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

Места конечно съедает немерено, но для пышь-пышь пойдет.



http://habrahabr.ru/blogs/lj/78942/

Еще про пирожки

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

Рассмотрим еще один показательный пример.

Сегодня я зашел в свою Метрику (систему статистики посещений Яндекса) и увидел:



«Что это за три больших сектора?», — спросил себя я и стал читать подписи. Ага, в основном народ идет с сайтов artgorbunov.ru, ksoftware.livejournal.com и yaroslavpat.livejournam.com. «И сколько там процентов?», — стал рассматривать я подписи в скобках.


Какой можно сделать вывод, проанализировав ход моих мыслей?

Вывод прост: Единственное на что оказалась способна круговая диаграмма — показать что есть три сайта, с которых приходят больше всего. Не слишком ли жирно использовать график для отображения одного значения (больше/меньше)?

Совершенная бесполезность диаграммы становится понятна, если убрать подписи.



Вся полезная информация находится в подписях.




Но для того чтобы прочесть полезные подписи нужно покрутить глазами.



— Занафига это надо?
— Нужно было чем-то заполнить пустое место.

— Как нужно было сделать?
— Нужно было сделать таблицу и не мучить мои уставшие глаза.






А для выделения «крупных» сайтов достаточно использовать цвет.



Три способа отображения информации. Пирожки

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

Существуют три основных способа отображения информации:

1. Предложение
Предложение отлично подходит для отображения небольшого количества данных. Если нужно рассказать о том, что у вас есть десять рублей, то лучше предложения ничего нет: «У меня есть 10 рублей.»

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

3. График
Графический способ отображения самый ёмкий. Этот способ отображения стоит применять, когда данных столько, что другие уже не работают. Говорят, что хороший график стоит тысячи слов. Если это не так, вполне вероятно, что график использован не уместно.

Пирожки
Есть множество готовых дизайнов для отображения информации в графическом виде. Среди прочих можно выделить круговую диаграмму, пирожковый график, как говорят буржуи (у них там протвени [блин, как это пишется правильно] все круглые).

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

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

Однако круговая диаграмма распространена очень широко. Напрашивается вопрос: почему, если она такая херовая? — А по тому-то и распространена, что херовая.

Многие дизайнеры думают, что если не влепить какую-нибудь «красивую» хрень — их дизайн станет дешевым. А иногда сами заказчики надавливают. А что делать если чисел всего два или три? — Правильно, влепить пирожок. Он и место занимает и «инфографика» вроде как. Все довольны... Кроме потребителя.


Рассмотрим пример.

В блоге Евгения Арутюнова найден типичный пример неверного использования графического способа отображения:



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

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

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





Как объяснить заказчику что так лучше? — Читайте выше :)  Освободившиеся после удаления блямбы место можно заполнить чем-то полезным, тогда и объяснять ничего не нужно будет.