Chart Wars: Диаграммы наносят ответный удар

    Что может быть хуже круговой диаграммы?
    Две круговые диаграммы! Эдвард Тафти
    Все мы уже не раз видели, что может пойти не так с визуализацией данных. Сегодня обсудим несколько важных принципов, лежащих в основе качественной графики, и что гораздо интересней, узнаем, что произойдет, если эти правила НЕ соблюдать.



    Структура статьи
    1. Восприятие измерений
    2. Соотношение чернила-данные
    3. Фактор обмана
    4. Парадокс Симпсона
    5. Джон Сноу всё-таки что-то знает — пример классики визуализации
    6. Что еще посмотреть-почитать
    7. Круговая диаграмма в реальной жизни

    (*осторожно трафик*)

    Восприятие измерений


    Чаще всего нам необходимо изображать линейные величины на графике т.е. зависимость одной переменной Х, например время в часах, от второй Y, например пройденный путь в км. Пусть 1 см на графике равен 1 часу по Х и 5 км по Y. Вася едет на велосипеде 10 км в час и ехал в течение 4 часов. Значит, изменение по Х составит 4 см, а по Y 40/5=8 см.

    Что в подобной ситуации может пойти не так?

    Площадь и трехмерные эффекты

    Вся хитрость в деталях: представим, что некоторой реальной измеряемой величине X1 соответствует точка Y1 на графике, а X2 точка Y2, а значит, что при изменении данных от X1 до X2 разница на графике составит Y2 — Y1. Но не тут-то было — на круговой диаграмме это будет соответствовать разнице площадей, а если добавить трехмерные эффекты, то и объемов.

    Примеры в студию! Представим, что доля Андроида выросла на несколько процентов. Тогда на графике ниже доля вырастет пропорционально объему, а не линейной шкале. Чем это грозит? Прежде всего, это ведет к абсолютному непониманию читателем рассматриваемых величин и невозможности корректного сравнения величин. Кто сможет угадать какая доля у Blackberry на этом графике и насколько она меньше доли iPhone?



    Восприятие объема

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


    (кликабельно; взято отсюда)

    Тортиковая вечеринка

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


    (кликабельно)

    Соотношение чернила-данные


    Теперь перейдем от вопроса восприятия данных на графике к информативности. Вопрос: какое количество информации передает этот график?


    Ответ: 4(!) числа, причем коричневая часть зрительно выглядит заметно меньше зеленой из-за трехмерной перспективы.

    Можем ли мы улучшить данную круговую диаграмму? Для этого зададим несколько важных вопросов:
    • Действительно ли здесь нужен цвет? Если да, то какую функцию он выполняет?
    • Какую функциональную роль играет здесь трехмерный эффект?
    • Легко ли можно сравнивать числа между собой, стоит ли изменить тип графика?
    • Облегчает ли фон чтение и восприятие графика?
    • Не дублируют ли функциональные элементы друг друга, например текстовые метки и использование цвета?

    Если мы ответим на эти вопросы, то можем получить что-то схожее с вот таким графиком:

    Минималистичный пример, не отвлекающий читателя от главного.

    На данную тему всячески рекомендую курс на Udacity: Data Visualization and D3.js

    В частности по этому вопросу, у них есть отличное видео:


    После просмотра видео сравните эту визуализацию


    и эту

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

    Фактор обмана


    Если графики с площадями и объемами не убедили, то настала пора написать убедительную формулу.


    На графике выше количество миль на галлон топлива изменилось c 18 до 27.5, то есть на 53%, рост на графике составил 783%, теперь давайте рассчитаем фактор обмана.



    Подставив числа, получим 783/53 = 14.8, мы преувеличили рост с помощью графики практически в 15(!) раз.

    Подробнее и примерами можно прочитать тут.

    Упражнение со звёздочкой: посчитать фактор обмана с учетом того, график показывает объем вместо линейных размеров. Мне кажется или здесь действительно 11 невероятно больше 9, а 6 и 11 вообще не сравнимы?


    (Взято отсюда)

    Парадокс Симпсона


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


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

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



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

    Джон Сноу всё-таки что-то знает — пример классики визуализации


    Джон Сноу не только охранял Стену, но и спас жителей Лондона от холеры, используя визуализацию. Он нанес каждого погибшего на карту и заметил, что вокруг водяной колонки на Broad Stree кластер смертей. Тогда-то он и выдвинул гипотезу о том, что источник холеры в зараженной воде колонки. И оказался прав.


    (кликабельно)

    Одним из интересных выводов стало то, что пивоварня была самым безопасным местом (ноль смертей), использованная вода и сам процесс приготовления делали пиво гораздо более безопасным к употреблению, чем обычную воду из колонки (правда только в середине 19го века в Лондоне).

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

    Что еще посмотреть-почитать


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


    (видео перекинет на другую страницу; можно также кликнуть сюда)

    Полезные книги (must read, сейчас наслаждаюсь прочтением первой)


    Real life pie chart


    <юмор> Круговая диаграмма в реальной жизни </юмор>



    С пятницей!
    Поделиться публикацией

    Комментарии 13

      +1
      Спасибо за хорошую статью!
        +2
        Присоединяюсь. Иногда по-настоящему хороший материал может быть подан не совсем правильно и из-за этого у читателя создается совершенно не то мнение, на которое рассчитывал автор. Ваши примеры надо принять во внимание всем, кто публикует данные, которые должны создать о компании/продукте определенное впечатление.
        0
        Почему Гомер начал бегать сразу с 6 кругов в первый раз, а во второй только с 1? Он никогда до этого не видел пончиков? Или это были специальные отравленные пончики? 0о
          0
          Кручу-верчу обмануть хочу.
          Как же я люблю статистику и аналитику.
            +1
            В разделе о Data Ink Ratio «улучшенный» вариант диаграммы не дотягивает до эталона (в соответствии с принципом minimal ink): нет рисок на самих столбиках и серый фон вполне можно убрать. Про фактор обмана, есть такая штука, закон Стивенса, он гораздо шире покрывает нюансы восприятия, чем приведённые примеры из Tufte, очень хорошо про это рассказывала Tamara Munzner в Keynote on Visualization Principles.

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

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

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

              Так же, как мне кажется, есть проблема «слишком много информации». В общем, буду рад любой помощи и критике.
                0
                Вопрос к знатокам? Если взять вот этот график

                Тортиковая вечеринка
                image

                Как все-таки лучше представить данные, чтобы можно было легче сравнивать?
                  0
                  Правильно ответить на этот вопрос можно только имея две вещи: сами данные и конечную цель, которую хочет достичь автор этой визуализацией.

                  Судя по данным, у нас есть категориальная переменная штат (набор штатов, не сравнимых между собой, i.e. непересекающиеся несравнимые группы), у нас есть ранговая переменная возрастная группа (то есть на ней есть порядок) и количественная переменная доля человеков выраженная в процентах.

                  1. Так как штаты несравнимы, то естественно попробовать что-то из раздела bar-chart
                  2. Заметим, что проценты складываются в 100%, значит это должно быть естественно отображено на графике, естественно попробовать доделать bar-chart до stacked-bar
                  3. В зависимости от цели необходимо либо выделить интересующий параметр, либо отсортировать данные, либо провести дополнительную группировку
                  4. Если наша задача показать на карте насколько старое молодое поколение живет в определенном штате, мы можем проанализировать штаты по отдельности и вывести для каждого числовое значение или определить его к некоторой группе: молодые, старички, смешанное население и т.д
                  5. Или мы можем совместить карту и bar-chart, чтобы при необходимости детализировать информацию по каждому штату

                  И всё это нужно пробовать и смотреть, что лучше подходит и легче воспринимается.
                    0
                    Я хочу представить бюджет страны по направлениям за текущий год (круговая диаграмма лучше всего показывает структуру какого-то параметра), и дать возможность пользователю сравнить с предыдущими годами.

                    Вот ребята из Украинской Правды пошли иначе: http://www.pravda.com.ua/cdn/cd1/budget/final/budget.html
                      +1
                      Визуализация по ссылке выглядит забавно, но слабо читаема, так как вообще нет меток и нужно наводить на каждый кружок. Сложно получить общую картину — придется держать все метки в голове.

                      Foreign Trade мне кажется надо дорабатывать по мелочам, например, метки слишком громоздкие (может всё выразить в миллиардах вместе миллионов и оставить один знак после запятой, укоротить текст?). Если export\import категории совпадают, то может быть stacked-bar попробовать и отсортировать по сумме?

                      Тут, думаю, стоит экспериментировать и смотреть, что лучше. Круговые диаграммы — это не всегда плохо, но они невероятно часто используются не к месту.
                        0
                        Спасибо за помощь. Обязательно попробую.

                        Вы имеет в виду такой stacked-bar? Как тогда оценить иморт/экспорт в целом?
                        Можно скомбинировать график, добавив небольшую круговую диагамму для полноты картины, как здесь (просто как пример комбинации)
                    0
                    Карта с медианным возрастом населения — классика отображения возрастной стуктуры.
                    А дальше, действительно, куча вариантов в зависимости от того, что мы хотим показать.
                    +4
                    Спасибо за просветляющую статью.
                    Udacity в видео использовал материалы, созданные darkhorseanalytics. У первых есть ещё один хороший курс по статистике, а у последних — другие визуализации. Мне, к примеру, нравится таблица:
                    Скрытый текст
                    image
                    Такое ощущение, что MS Office специально делает такие страшные таблицы по умолчанию. Выглядит приятненько, но информацию ни черта не разглядеть.

                    Есть и Pie Chart:
                    Скрытый текст
                    image

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое