Что может быть хуже круговой диаграммы?Все мы уже не раз видели, что может пойти не так с визуализацией данных. Сегодня обсудим несколько важных принципов, лежащих в основе качественной графики, и что гораздо интересней, узнаем, что произойдет, если эти правила НЕ соблюдать.
Две круговые диаграммы! Эдвард Тафти
![](https://habrastorage.org/files/b8a/be0/53c/b8abe053c0754404924fbedfe2d7591a.png)
Структура статьи
- Восприятие измерений
- Соотношение чернила-данные
- Фактор обмана
- Парадокс Симпсона
- Джон Сноу всё-таки что-то знает — пример классики визуализации
- Что еще посмотреть-почитать
- Круговая диаграмма в реальной жизни
(*осторожно трафик*)
Восприятие измерений
Чаще всего нам необходимо изображать линейные величины на графике т.е. зависимость одной переменной Х, например время в часах, от второй Y, например пройденный путь в км. Пусть 1 см на графике равен 1 часу по Х и 5 км по Y. Вася едет на велосипеде 10 км в час и ехал в течение 4 часов. Значит, изменение по Х составит 4 см, а по Y 40/5=8 см.
Что в подобной ситуации может пойти не так?
Площадь и трехмерные эффекты
Вся хитрость в деталях: представим, что некоторой реальной измеряемой величине X1 соответствует точка Y1 на графике, а X2 точка Y2, а значит, что при изменении данных от X1 до X2 разница на графике составит Y2 — Y1. Но не тут-то было — на круговой диаграмме это будет соответствовать разнице площадей, а если добавить трехмерные эффекты, то и объемов.
Примеры в студию! Представим, что доля Андроида выросла на несколько процентов. Тогда на графике ниже доля вырастет пропорционально объему, а не линейной шкале. Чем это грозит? Прежде всего, это ведет к абсолютному непониманию читателем рассматриваемых величин и невозможности корректного сравнения величин. Кто сможет угадать какая доля у Blackberry на этом графике и насколько она меньше доли iPhone?
![](https://habrastorage.org/files/5b8/241/572/5b82415724cd4edcaf352105defb5114.png)
Восприятие объема
Спасут ли ситуацию явно прописанные на графике величины? На самом деле нет. Рассмотрим простой пример, где все величины явно прописаны. На графике ниже зеленая часть явно в два раза больше желтой, но на самом деле это не так.
![](https://habrastorage.org/files/c19/252/0e6/c192520e6f1f462e9565592a448617bc.png)
(кликабельно; взято отсюда)
Тортиковая вечеринка
Вот тут внимательный читатель может заявить, что мы рассматривали исключительно патологические примеры с трехмерными эффектами и если использовать стандартные круговые диаграммы, то всё пройдет как по маслу. Внимание вопрос, насколько точно можно сравнить данные между категориями по данному графику?
![](https://habrastorage.org/files/eda/4c9/723/eda4c972324245fb80c2aaa657f31966.png)
(кликабельно)
Соотношение чернила-данные
Теперь перейдем от вопроса восприятия данных на графике к информативности. Вопрос: какое количество информации передает этот график?
![](https://habrastorage.org/files/75f/b96/687/75fb96687ff5405b9909ed85aad358eb.png)
Ответ: 4(!) числа, причем коричневая часть зрительно выглядит заметно меньше зеленой из-за трехмерной перспективы.
Можем ли мы улучшить данную круговую диаграмму? Для этого зададим несколько важных вопросов:
- Действительно ли здесь нужен цвет? Если да, то какую функцию он выполняет?
- Какую функциональную роль играет здесь трехмерный эффект?
- Легко ли можно сравнивать числа между собой, стоит ли изменить тип графика?
- Облегчает ли фон чтение и восприятие графика?
- Не дублируют ли функциональные элементы друг друга, например текстовые метки и использование цвета?
Если мы ответим на эти вопросы, то можем получить что-то схожее с вот таким графиком:
![](https://habrastorage.org/files/8d3/e37/ad7/8d3e37ad7f174534b7db5c54fab2dd62.png)
Минималистичный пример, не отвлекающий читателя от главного.
На данную тему всячески рекомендую курс на Udacity: Data Visualization and D3.js
В частности по этому вопросу, у них есть отличное видео:
После просмотра видео сравните эту визуализацию
![](https://habrastorage.org/files/1fc/0f2/cb9/1fc0f2cb94cf4e59a2206301e0829a01.jpg)
и эту
![](https://habrastorage.org/files/2e2/954/cd9/2e2954cd9cda4b0fb4da00efd230c403.png)
(хотя некоторые с этим примером в качестве «неправильной визуализации» не согласны, и дебаты не скончаются по сей день).
Фактор обмана
Если графики с площадями и объемами не убедили, то настала пора написать убедительную формулу.
![](https://habrastorage.org/files/d22/452/6d8/d224526d82db476c9c7e6e0e2848b82d.jpg)
На графике выше количество миль на галлон топлива изменилось c 18 до 27.5, то есть на 53%, рост на графике составил 783%, теперь давайте рассчитаем фактор обмана.
![](https://habrastorage.org/files/5f8/8a0/2dc/5f88a02dc0584b2b8afb0133ce8adb34.png)
Подставив числа, получим 783/53 = 14.8, мы преувеличили рост с помощью графики практически в 15(!) раз.
Подробнее и примерами можно прочитать тут.
Упражнение со звёздочкой: посчитать фактор обмана с учетом того, график показывает объем вместо линейных размеров. Мне кажется или здесь действительно 11 невероятно больше 9, а 6 и 11 вообще не сравнимы?
![](https://habrastorage.org/files/aa6/833/d52/aa6833d52a2741a39cfee00a45ecd1ba.jpg)
(Взято отсюда)
Парадокс Симпсона
Подвох может находиться и там, где его меньше всего ждут. Визуализируя данные, мы часто разбиваем их на категории или группы и один из классических сюрпризов, который при этом может возникнуть и называется парадоксом Симпсона.
![](https://habrastorage.org/files/8f0/744/1c6/8f07441c6c864dc582b1bafc20de7531.jpg)
Рассмотрим в качестве примера Гомера, который решил поправить своё здоровье и начал бегать по стадиону и записывать результаты тренировки по месяцам. Первые четыре месяца он стабильно наращивал на нагрузку, но на пятый месяц нашел коробку с пончиками и прекратил тренировки. Через два месяца совесть и лишний вес снова подтолкнули его начать тренировки и вновь каждый месяц он наращивал нагрузку.
Получается, и в первый период, и во второй нагрузка росла, а в среднем нагрузка стабильно падала.
![](https://habrastorage.org/files/b84/33a/72a/b8433a72a0a84b2f8e4e9250f023971c.jpg)
Парадокс заключается в том, что разбив данные на группы, можно обратить негативный тренд в положительный и наоборот.
Графики и примеры вместе с детальным объяснением парадокса можно также найти здесь (рекомендую).
Джон Сноу всё-таки что-то знает — пример классики визуализации
Джон Сноу не только охранял Стену, но и спас жителей Лондона от холеры, используя визуализацию. Он нанес каждого погибшего на карту и заметил, что вокруг водяной колонки на Broad Stree кластер смертей. Тогда-то он и выдвинул гипотезу о том, что источник холеры в зараженной воде колонки. И оказался прав.
![](https://habrastorage.org/files/4e3/d5b/fb1/4e3d5bfb10c84ceead724174c4fb3e4b.jpg)
(кликабельно)
Одним из интересных выводов стало то, что пивоварня была самым безопасным местом (ноль смертей), использованная вода и сам процесс приготовления делали пиво гораздо более безопасным к употреблению, чем обычную воду из колонки (правда только в середине 19го века в Лондоне).
Подробная история с интерактивной картой здесь.
Что еще посмотреть-почитать
Видео о росте роли визуализации в политической жизни.
![](https://habrastorage.org/files/036/7ee/4e2/0367ee4e2e594864b961ed103337bf18.png)
(видео перекинет на другую страницу; можно также кликнуть сюда)
Полезные книги (must read, сейчас наслаждаюсь прочтением первой)
- The Visual Display of Quantitative Information by Edward Tufte
- Functional Art by Alberto Cairo
- The Grammar of Graphics by Leland Wilkinson
Real life pie chart
<юмор> Круговая диаграмма в реальной жизни </юмор>
![](https://habrastorage.org/files/0ca/9a3/403/0ca9a340322b40b7950c77126404f61b.jpeg)
С пятницей!