Как создать ужасающие графики

1656637581 kak sozdat uzhasayushhie grafiki

Мишель Джонс

Предупреждение: содержит графическое насилие

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

Человек, наиболее и дольше работавший в области графического дизайна Эдвард Тафт. Я включил ссылку на его веб-сайт в разделе «Ресурсы».

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

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

Секторные диаграммы

5S8tNA6GCGEl-ANW7fu20o63I35bZ46Trsdy
Это очень информативная круговая диаграмма.

Простые круговые диаграммы

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

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

WzugVHg6rAPsT9IMCqcG6M5OzZNkjDFTq26b
Часть авторов, рецензируемых в этой газете, 2013 г.

Но для чего использовать круговую диаграмму для бинарной классификации? Повторяем, что категории взаимоисключающие. Мы можем просто сказать, что 49% рассматриваемых книг были авторами-женщинами. Легко предположить и подсчитать, что 51% были авторами-мужчинами.

Смысл сайта состоит в том, чтобы подчеркнуть отсутствие рецензий на книги с авторами. Если вы перейдете по ссылке, вы увидите серию из 14 круговых диаграмм по одной для каждой газеты, оцененной Stella Count, за 2013 год. Даже на большом экране вы прокрутите, чтобы увидеть их все. А на секторной диаграмме для The Monthly цвета категорий перевернуты – трудно отследить последовательное форматирование такого количества диаграмм!

Я думаю, что информацию было бы лучше представить в виде столбчатой ​​диаграммы. Я использовал для этого R. Упаковки, которые я вызвал, есть ggplot2 и ggridges. ggridges использовался для циклического переключения двух цветов между полосами. Я считаю, что изменение цветов улучшает читабельность графика по сравнению с использованием одного цвета для каждого столбика. Возникла ошибка, которую я не могу исправить, когда цвет изменялся вниз, поэтому я принудительно изменил порядок для двух полосок с помощью FillValues.

FemaleAuthors <- data.frame(Publication=c("The Advertiser", "The Age", "Australian Book Review",                                                 "The Australian Financial Review", "Books+Publishing",                                                 "The Courier-Mail","The Daily Telegraph", "Good Reading",                                                 "The Monthly","Sunday Age","Sunday Tasmanian",                                                 "The Sydney Morning Herald","The Weekend Australian",                                                "The West Australian"),                            PropOfFemales=c(49,42,47,15,61,41,46,49,41,49,49,43,35,58))FemaleAuthors <- FemaleAuthors[order(-FemaleAuthors$PropOfFemales, -FemaleAuthors$Publication),]FemaleAuthors$FillValues <- c(rep(c("A","B"),5),"B","A","A","B")
library("ggplot2")library("ggridges")ggplot(data=FemaleAuthors,aes(x=reorder(Publication, PropOfFemales), y=PropOfFemales, fill=FillValues)) +  geom_bar(stat="identity",            colour="black", width=1) +  scale_y_continuous(breaks=seq(0, 70, by=5),                     limits=c(0,70),                     expand=c(0,0)) +  scale_fill_cyclical(values=c("plum3","orchid2"))+  labs(x="Publication", y="Proportion of books reviewed \nwith female authors")+  coord_flip() +    theme(panel.grid.minor.y=element_blank(),         panel.grid.major.x=element_line(color="gray"),        panel.background=element_blank(),         axis.line = element_line(color="gray", size = 1),        axis.text=element_text(size=10),        axis.title=element_text(size=15),        plot.margin=margin(5,5,5,5),        legend.position = "none")
9AO3F-hvxtVG5cKVbwv8LpHiGrI12aj9QaBB
Моя лучшая презентация для таких данных.

Важная информация из этих 14 круговых диаграмм – репрезентация женщин-авторов в обзорах газетных книг – теперь очевидна с первого взгляда.

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

Хотя точные пропорции невозможно прочитать по графику, линия сетки на каждые 5% дает ощущение числа. В тексте можно упомянуть важные цифры.

Более сложные круговые диаграммы

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

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

Qx1L7CUR-sGhhHWQ6Edabw3VusTbppb79rBF
Круговые диаграммы также встречаются в научных работах.

Опять же я могу построить столбчатую диаграмму, потому что все данные включены в оригинальную графику. Использование R и RColorBrewer пакет, чтобы получить больше цветов, чем содержится в Set3:

GeneExpressionProfile <- data.frame(AlteredGenes=factor(c("Apotosis-associated","Cellular Maintenance & Signalling",                                                          "Chitin Binding","Detoxification","Insect Digestion-related",                                                          "Insect Growth","Insect Immunity", "Insect Metabolism",                                                          "Miscellaneous Function","Nucleic Acid Regulation",                                                          "Stress Response","Virus Replication / Altered Host Physiology",                                                          "Unknown")),                                    PercentAltered=c(1,10,2,4,25,2,4,10,0,5,1,2,34))GeneExpressionProfile <- GeneExpressionProfile[order(-GeneExpressionProfile$PercentAltered),]library("ggplot2")library("ggridges")library("RColorBrewer")ggplot(data=GeneExpressionProfile,aes(x=reorder(AlteredGenes, PercentAltered), y=PercentAltered, fill=AlteredGenes)) +  geom_bar(stat="identity",            colour="black", width=1) +  scale_y_continuous(breaks=seq(0, 50, by=5),                     limits=c(0,50),                     expand=c(0,0)) +  scale_fill_manual(values=colorRampPalette(brewer.pal(12,"Set3"))(13)) +  labs(x="Gene Group", y="Proportion of altered genes \nacross the genes studied")+  coord_flip() +  theme(panel.grid.minor.y=element_blank(),         panel.grid.major.x=element_line(color="gray"),        panel.background=element_blank(),         axis.line = element_line(color="gray", size = 1),        axis.text=element_text(size=10),        axis.title=element_text(size=15),        plot.margin=margin(5,5,5,5),        legend.position = "none")

Создает следующую гистограмму

BvcxImQgIwEJNpIOzRDu4IS0DP-picc9cypI
Я думаю, что это легче интерпретировать.

Столбчатые диаграммы

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

Гистограммы с накоплением

В одном типе столбчатой ​​диаграммы с накоплением используются пропорции, поэтому сумма компонентов в каждой столбчатой ​​диаграмме составляет 100%. Они могут быть зрительно сложными, и сообщения из диаграммы не всегда понятны читателю.

KEzW1mFBja36wyDHJM8iZHzSyLYsPBCJhVgn
Это очень сложная столбчатая диаграмма с накоплением.

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

Коэффициент, составляющий 30% полосы, может быть неинтересным, если результат касается трех из десяти человек. Наше толкование важности изменилось бы, если бы тот же процент базировался на 200 человек.

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

Почему это плохо? Вся информация в диаграмме дублируется в тексте. Зачем включать гистограмму?

79xlhFqZRSJQUOVnVOzhicxK7cYkW7WFwaVC
Канада, буквально.

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

cfLt3LQ56d3JgyywmbmoDc7G2NTWw8nEsmKO
Пример из Австралии.

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

uUxEDjwgJcznGLe71xSB2DLjgLj1tJNDpqZV
Столбчатая диаграмма с накоплением, пропорции которой не изменены.

Особое упоминание: трехмерные графики

Я поместил их в отдельный раздел, чтобы показать, что 3D не является хорошим решением для диаграмм.

3-D круговые диаграммы

Единственное, что хуже двумерной круговой диаграммы — это трехмерная круговая диаграмма.

uQkbeH-5ZdknFknyKOq7JMlonsKlrNcBrwuK
Два из них вместе не вдвое более информативны.

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

Сравните «Социальное обеспечение и благосостояние» (122 миллиона долларов) с «Здравоохранением» (60 миллионов). Выглядит ли раздел «Здравоохранение» примерно вдвое меньше размера сегмента «Социальное обеспечение и благосостояние»?

Сравните «Общие государственные услуги» (97 миллионов долларов США) с разделом социального обеспечения и благосостояния. Общие государственные услуги составляют примерно 4/5 расходов социального и социального обеспечения, но на круговой диаграмме они выглядят примерно так же.

Порядок категорий также не ясен. Они не в порядке размера. Они не в алфавитном порядке.

Какое решение? Снова так же, как и для 2-D круговых диаграмм. Если категории немного, лучше представить данные с помощью гистограммы.

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

Мне нравится цветопередача и сочетание Set3 в палитре ColorBrewer. Я устранил беспорядок из диаграммы, удалив фоновый цвет и посторонние линии сетки. Я упорядочил категории расходов по убыванию суммы. Я повернул текст по оси Y, чтобы обеспечить лучшее соотношение ширины оси Y к внутренней ширине графика. Легенда была скрыта. Я расширил правое наружное поле графика, чтобы конечное значение оси X не было отсечением.

TaxExpenditure <- data.frame(Expenditure.Type=c(factor("Industry & workforce", "Defence", "Social security & welfare",                                                "Community services & culture", "Health", "Infrastructure, transport & energy",                                                "Education", "General government services")),                             Expenditure.Amount=c(14.843, 21.277, 121.907, 8.044, 59.858, 13.221, 29.870, 96.797))
library("ggplot2")library("stringr")ggplot(data=TaxExpenditure,aes(x=reorder(Expenditure.Type, Expenditure.Amount), y=Expenditure.Amount,                                fill=Expenditure.Type)) +  geom_bar(stat="identity") +  scale_y_continuous(breaks=seq(0, 125, by=25),                     limits=c(0,125),                     expand=c(0,0)) +  scale_x_discrete(labels=function(x) str_wrap(x, width=20))+  labs(x="Expenditure type", y="Expenditure ($millions)")+  scale_fill_brewer(palette="Set3") +  coord_flip() +  theme(panel.grid.minor.y=element_blank(),         panel.grid.major.x=element_line(color="gray"),        panel.background=element_blank(),         axis.line = element_line(color="gray", size = 1),        axis.text=element_text(size=10),        axis.title=element_text(size=15),        plot.margin=margin(5,15,5,5),        legend.position = "none")

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

tOB5Prt1fnHPdsOfobfljyKTQ-6VXV4ROGp1

Трехмерные разобранные круговые диаграммы

Друзья не разрешают друзьям создавать трехмерные секторные диаграммы.

sKOQUXHhAZh8nVNYNrynG5980Hxp3jrRrFN8
У этого есть легенда, хотя кусочки маркированы.

Трехмерные столбчатые диаграммы

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

IZhNSzihGlKHoNfzz39e6QErL9RRgZ99rqrS
Источник.

Больше предложений по лучшим графикам

Не используйте шаблоны

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

Пример 1:

WDjLtJU1omeJlIZTA4nH9x8oITDJX6zCcAov
Многие полосы, линии, текстовые поля и диагональные полосы.

Пример 2:

5e9N7zU9vIys16OzFwBTgoJZTCoALC141Coo
Это диаграмма, использующая имитационные данные, но суть понятная.

Используйте соответствующую цветовую схему

Для графиков доступны разные цветовые схемы. Не все они хорошие.

0d9oe5I0vFQHJ7kBhkle5xxDhLWJcxzCblVq
Я не знаю почему SAS включил эту возможность.

Используйте соответствующие шкалы осей

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

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

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

Вы хотели осветить влияние определенного фактора во времени? Один из вариантов – построить этот фактор на графике и ничего больше.

Составление категорий важно

Ни одно правило не подходит всем для определения порядка категорий. Один из вариантов, который я использовал в моих примерах, это по высоте. Как вы решаете свой заказ:

  • от самого высокого до самого низкого?
  • по алфавиту по категориям?
  • какой-нибудь другой порядок?

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

Еще раз проверьте точность вашей графики

5FF2iyjP8TAckxGDsGFaCltYzAKObFZKdqsN
Это скорее 55/45, но я не знаю, как цветные области могут быть неправильными.
TkFFFryYZeqbZiK9KTD7kASTDiuOpIe3AhaS
Я никогда раньше не видел многослойную круговую диаграмму.

Рассмотрите возможность использования полос ошибок

Нижеприведенный график получен из исследования, которое изучало влияние ТГК на время реакции субъекта и точность ответа с помощью компьютеризированного стимула.

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

gkk5NVU0iLC9-H17YdJ3zwoQtgnOHYMiHL1G
Простая гистограмма, передающая много информации.

Ресурсы для создания лучших графиков

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

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

Отказ от ответственности: при создании этой статьи фактические графики не пострадали.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *