Инфографика: Полсотни лучших сервисов для построения красивых зрительных образов

Office blogs (Перевод с англ. — Инфографер)

Ну и парочка красот в конце поста.

Последний пример — совершенно чумовая визуализация (кто делал — не знаю) статистики продаж некоего дизайнера Madame Ulani на сайте для дизайнеров-рукоделов etsy.com . У даннной карты — две оси XY, обе расположены в разныз плоскостях, и сливаются вместе в единый список товаров, с отображением мест их доставки. Длина каждого столбца — время, которое потребовалось на то, чтобы сделать украшение, и как долго оно ждало своего покупателя после выставления нового лота на сайт.

Вчера побывала в Питере, на лекции «Инфографика: закон и порядок», вчерашнюю сессию вела Ольга Привалова.

Я еще напишу пост о самом мероприятии и нескольких хороших идеях студии Паровоз. Но по горячим следам я хочу процитировать Федора Шумилова.

Во время разговора о разных типах графиков, он привел интересную аналогию Bubble Chart (пузырьковой диаграммы). Самый простой и физически реальный аналог пузырькового графика — наши советские монеты.

В зависимости от номинала, четко отличался размер и вес монетки. Копейка — 1 гр и дальше по увеличению. Благодаря этому их легко отличать и нащупывать в кармане нужную.

Чем больше денежка — тем больше ее диаметр.

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

Простейшая:

Гениально — подробный и детальный постер

И из старенького (но в тему)

Marimekko chart

Это график с двумя осями с единственным отличием от стандартного Bar Chart — основания столбиков могут быть разными по размеру.

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

Пример на графике: по горизонтали — виден размер брендов Nike, Reebok, Adidas, и т.д.

В это же время, по вертикали можно еще и продемонстрировать долю продаж компании на разных рынках (в США и за пределами).

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

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

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

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

Эти страшилки 🙂 можно купить за 499$ для индивидуального пользования. Честного говоря, необоснованно дорого, но надеюсь, что они окупают себя техподдержкой.

Для развлечения — инфографика на тему «Когда и с кем брать банк» по статистике FBI. Полный размер при клике на картинку.

Директор по визуальным концепциям компании McKinsey Джин Желязны знает о своей работе все. Это неудивительно: за 55 лет жизни, которые он посвятил изучению диаграмм и других способов визуализации, он накопил достаточный опыт, которым поделился в книге «Говори на языке диаграмм».

Нашим читателям - месяц на Bookmate бесплатно: введите промокод RUSBASE по ссылке http://bookmate.com/code .

Шаг 3. От сравнения к диаграмме – выберете тип диаграммы

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

Формулируем идею

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

Самый простой способ сформулировать главную мысль - вынести ее в заголовок диаграммы.

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

Примеры конкретных и общих заголовков

Не забывайте главное правило: одна диаграмма - одна идея. Не старайтесь на одном графике показать все найденные вами связи и мысли. Такие диаграммы будут перегруженными и сложными для восприятия.

Определяем тип сравнения

Любую мысль и идею можно выразить при помощи одного из пяти типов сравнения. Ваша задача - правильно выбрать тип сравнения и подобрать к нему соответствующую диаграмму.

Небольшая подсказка:

Покомпонентное сравнение – ваши данные показывают определенную долю по отношению к целому.

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

Временное сравнение – вы показываете, как данные изменяются во времени.

Частотное сравнение – вы хотите показать, какое количество объектов попадает в определенные диапазон.

Корреляционное сравнение – вы показываете, как данные зависят друг от друга.

Выбираем идеальную диаграмму

Каждому из типов сравнения соответствует свой вид диаграмм. Именно от его правильного выбора зависит понятность восприятия визуализированных данных.

Всего существует пять типов диаграмм и некоторые их вариации и комбинации:

1. Круговая диаграмма

Знакомый всем «пирог» – самый используемый тип диаграмм. По мнению Джина, это неоправданно, поскольку этот тип наименее практичен и должен составлять немногим более 5% всех диаграмм в презентациях.

2. Линейчатая диаграмма

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

3. Гистограмма

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

4. График

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

5. Точечная диаграмма

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

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

Двойное сравнение

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

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

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

Шкалы, легенды и другие надписи

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

Главные правила при добавлении дополнительной информации:

Они не перегружают диаграмму.

Они не отвлекают от основной картинки.

Они дополняют диаграмму.

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

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

СРЕДСТВА ВИЗУАЛИЗАЦИИ ДАННЫХ И ПРИЛОЖЕНИЯ ДЛЯ РЕШЕНИЯ ЭТОЙ ЗАДАЧИ

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

Бесплатный онлайн-сервис для лёгкого построения наглядных диаграмм связей и их последующей печати или рассылки остальным участникам "мозгового штурма". Оживляйте экранными снимками ваших схем инфографику, презентации и прочий контент!

Удобный для пользователя инструмент построения онлайн-графики, такой как карты сайтов, каркасные модели, UML- и сетевые графики. Cacoo можно пользоваться бесплатно.

Простой браузерный сервис для лёгкого построения изящных схем и графиков с использованием встроенных шаблонов, например, карты США, диаграмм Венна и т. п.

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

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

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

Javascript-библиотека для обработки документов, содержащих массивы данных. D3 помогает вам "оживлять" эти данные средствами HTML, SVG и CSS. Упор на соблюдение веб-стандартов, сделанный разработчиками D3, позволяет вам в полной мере использовать возможности современных браузеров без привязки к каркасам, защищённым правами собственности, сочетать функциональность элементов визуализации с принципом первичности данных при манипуляции объектами в рамках DOM-стандарта.

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

Dundas предоставляет вам широкий спектр средств визуализации данных в рамках технологии Microsoft. Вам предлагается целый ряд инструментов визуализации данных, в том числе, Chart (схема), Gauge (шкала), Map (карта) и Calendar (календарь) для платформы.net, а также Dashboards (инструментальные панели) для Silverlight.

ActionScript-библиотека для построения зрительных образов, запускаемая через Adobe Flash Player. От простейших схем и диаграмм до сложной интерактивной графики - сервис располагает инструментами поддержки управления данными, преобразования визуальной информации, анимации и интерактивного взаимодействия. Более того, у Flare модульная структура, что позволяет разработчикам придумывать собственные приёмы визуализации, не прибегая к изобретению заново колеса.

Огромный "набор-конструктор" векторных рисунков и инфографики. Пакет содержит более 50 компонентов - от графиков и схем до карт и значков.

Вам предлагаются более 90 вариаций схем, а также 550 карт в форматах javascript (HTML5) и Flash.

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

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

Инструменты Google Chart действенны, просты в использовании и бесплатны. Выбирайте из множества схем подходящую. От несложных диаграмм разброса до многоуровневых последовательных построений с ответвлениями - смотрите и находите наиболее пригодные для отображения ваших данных решения.

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

С помощью онлайн-сервиса построения схем Hohli Online Charts Builder можно генерировать диаграммы Венна, рассеяния, а также столбчатые, радиальные и круговые, линейные графики. Приступая к построению вашей схемы, сначала выберите её желаемые конфигурацию и масштаб. Затем внесите данные, которые вы хотите отобразить, в соответствующее поле. По мере ввода информации будет генерироваться ваша схема, и вы сможете наблюдать, как она меняется в процессе построения.

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

Использование Infogr.am подобно работе с Adobe Illustrator в режиме онлайн, и с его помощью также можно создавать красивую инфографику. Просто выбирайте подходящий образец, вводите ваши данные, а затем пересылайте или включайте в структуру готового эскиза ваш фрагмент инфографики.

Набор инструментов для построения интерактивных веб-образцов визуализации данных средствами javascript. Снабжён новейшими опциями визуализации массивов информации, например, TreeMaps, средством представления структур логических последовательностей/зависимостей в виде стилизованных схем на основе SpaceTree, гиперболические "ветвистые" кривые (Hyperbolic Trees) можно выстраивать методом "вычленения сути контекста" (focus+context), а для радиальных "ветвистых" анимированных схем есть заготовки лучевых осей (RGraph), плюс ещё масса опций воплощения визуализации.

Javascript-генератор схем, почти или вовсе не требующий дополнительной кодировки. Вычерчивать схемы с помощью JS Charts легко и просто, поскольку вам нужно задействовать для этого только клиентскую (то есть, выполняемую браузером) часть программы. Можно обходиться без дополнительных надстроек и серверных модулей. Достаточно внедрить наши скрипты, заготовив данные для построения вашей схемы в форматах XML, JSON или через javascript Array, - и можно получать её "прямо в руки".

Набор javascript-инструментов визуализации параметров сетевой деятельности. Совместим со всеми основными браузерами и со всеми платформами, в том числе, iPad. Работает на основе HTML5, но в ранних версиях Internet Explorer также чувствует себя хорошо.

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

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

Средство браузерного базирования для коллективного построения диаграмм связей. Оно помогает вам упорядочить мысли, представить в графическом виде плоды вашего "мозгового штурма" и получить экранные снимки результатов, выгодно дополнив вашу инфографику строгим, без излишеств, текстом.

Онлайн-сервис построения диаграмм связей для красивого наглядного воплощения ваших находок и озарений в процессе совместного "мозгового штурма".

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

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

Набор программных средств для представления визуальных данных в виде роскошных интерактивных фрагментов. Стандартный инструментальный набор Original Prefuse включает каркас визуализации для языка программирования Java. Расширенный набор Prefuse Flare располагает инструментами визуализации и анимации для ActionScript и Adobe Flash Player.

Подумываете о составлении резюме средствами инфографики? Опробуйте на практике Re.vu - приложение генерации наглядных резюме.

Широкий спектр программных средств, базирующихся в сети и на рабочем столе, для решения различных задач по визуализации данных. "Орденоносный" пакет сервисов, среди которых StatPlanet, StatTrends & StatWorld.

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

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

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

Набор мощных Drupal-модулей визуализации. VIDI предоставляет в ваше распоряжение простые в использовании инструменты для построения и внедрения в структуру ваших презентаций или блогов ярких "живых" карт. Есть там и функциональные, наглядные средства выражения, позволяющие картам "поведать" о многом.

Если вы ищете средство просмотра и визуализации данных, которые "не по зубам" оффис-ПО с типовым набором функций построения графиков, то Visualize Free - решение как раз для вас. Бесплатный сервис зрительного анализа информации, превосходно справляющийся с задачей сортировки многомерных данных для отслеживания тенденций и отклонений от заданного курса, а также для операций с данными простым способом указания-нажатия.

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

Приложение генерации "текстовых облаков" из предоставляемых вами к обработке записей. Более заметны в этих облаках слова, встречающиеся чаще в исходных текстах. "Облака" можно варьировать, настраивая шрифты, конфигурацию и цветовые схемы. Изображения, выстроенные вами в Wordle - целиком и полностью ваши, можете делать с ними что угодно. Их можно распечатать или сохранить в галерею Wordle вашим друзьям на обозрение.
Огромный выбор средств компиляции векторной инфографики. Пакет содержит свыше 50 элементов - от графиков и схем до карт и значков.

ИСТОЧНИКИ ДАННЫХ ДЛЯ ИНФОГРАФИЧЕСКИХ ПОСТРОЕНИЙ

Кладезь полезной, новейшей информации для построения вашей инфографики. Широкий тематический охват - экономика, социология, энергетика, экология и статистические сводки по странам. За данными и статистикой обращайтесь прежде всего сюда!

Изучайте массивы данных, предоставленные ведущими ресурсами их хранения, загружайте ваши собственные сведения, составляйте отчёты и красивые образцы визуализации за считанные секунды.
45. Gapminder

Ещё один отличный источник сведений для построения инфографики. "Склад фактических данных" для формирования мировоззрения, основанного на точных знаниях, хранящий свежие статистические выкладки, видео, Flash-презентации и диаграммы основных тенденций мирового развития, анимацию и красочную графику.

Вопросы и ответы по поводу доступа к различным данным.

Если вы ищете некую весьма специфическую информацию для построения инфографики, то Google Public Data Explorer может прийтись вам очень кстати. Это средство поиска от Google предоставляет вам интерактивные графические сводки открытых для публики сведений, которые можно изучать, обрабатывать и сохранять в виде экранных снимков для дальнейшего использования при построении роскошных и содержательных образцов инфографики. Узкоспециальные сведения можно находить через встроенный поисковый механизм.

Объёмная подборка комплектов ценных данных и красочной инфографики со всей сети, аккуратно "разложенной по полочкам". Этот сайт хорош и для поиска вдохновляющих на творчество примеров - красивых образцов инфографики здесь очень много.

ПО с открытым исходным кодом для создания картографами собственных порталов, доступных для обзора всему свету или лишь ограниченному кругу лиц.
Вам предлагаются более 90 конфигураций схем, а также 550 карт в форматах javascript (HTML5) и Flash.

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

Рассмотрим основные из них.

Гистограмма

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

Точечная диаграмма

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

Линейчатая диаграмма и график

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

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

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

Диаграммы с областями

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

Кольцевая и круговая диаграммы

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

Пузырьковая

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

Биржевая диаграмма

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

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

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

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

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

Замечание: Я использую Excel для Mac 2011. В других версиях Excel или в других операционных системах техника выполнения показанных приёмов может отличаться.

Хитрости и приемы оформления диаграмм в Microsoft Excel

1. Выбирайте подходящий тип диаграммы

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

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

Хотите увидеть разницу? Вот пример одинаковых наборов данных, показанных в виде круговой диаграммы и в виде гистограммы:

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

Чтобы превратить имеющийся набор данных в одну из таких диаграмм в Excel, выделите нужные данные, затем в меню откройте раздел Диаграммы (Charts). В Windows: Вставка (Insert) > Диаграммы (Charts). Далее выберите тип диаграммы, наилучшим образом подходящий для имеющегося набора данных

2. Сортируйте данные для гистограммы, чтобы сделать их понятнее

Если для визуализации данных выбрана гистограмма, то этот приём может существенно повлиять на результат. Чаще всего мы встречаем вот такие гистограммы:

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

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

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

3. Сокращайте подписи оси Y

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

Чтобы сделать их компактнее, кликните правой кнопкой по одной из подписей на оси Y и в появившемся меню выберите Формат оси (Format Axis). В открывшемся меню перейдите в раздел Число (Number) и в списке Категория (Category) выберите Дополнительный (Custom). Уберите галочку Связь с источником (Linked to Source), если она есть, иначе вариант Дополнительный (Custom) будет недоступен.

Введите код формата \$0, \m (как показано на рисунке ниже) и нажмите ОК .

В результате диаграмма станет выглядеть значительно аккуратнее:

4. Удаляйте фоновые линии

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

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

Чтобы удалить фоновые линии, нажмите Макет диаграммы (Chart Layout) > Линии сетки (Gridlines) и выберите Нет линий сетки (No Gridlines) для вертикальных и горизонтальных линий.

5. Удаляйте стандартные отступы перед графиком

Если не удалить их вручную, Excel автоматически добавит отступы перед первой точкой данных и после последней точки, как это видно на рисунке внизу слева. На рисунке справа график выглядит гораздо лучше без этих отступов:

Чтобы удалить отступы, выделите горизонтальную ось, откройте меню Формат оси (Format Axis), в разделе Параметры оси (Axis Options) измените параметр Положение оси (Position Axis) на Совпадает с делениями (On Tick Marks).

6. Удаляйте лишнее форматирование

Стандартные диаграммы Excel как правило идут с настроенными стилями – но эти стили часто мешают воспринимать информацию. Тени? Контуры? Повороты? Избавьтесь от всего этого! Они не добавляют диаграмме информативности.

Чтобы исправить настройки оформления в Excel кликните правой кнопкой мыши по графику и выберите Формат области построения (Format Chart Area). Удалите все лишние эффекты.

7. Избегайте 3-D эффектов

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

Стараясь сделать так, чтобы данные выглядели очень круто, люди часто выбирают гистограммы, линейчатые и круговые диаграммы с 3-D эффектами. В результате воспринимать такую информацию становится тяжелее. Наклон графика даёт читателю искажённое представление о данных. Так как основная цель диаграмм – рассказать читателю подробную историю, то не хотелось бы ослаблять аргументы плохим дизайнерским решением. Посмотрите, как по-разному выглядит одна и та же круговая диаграмма в 2-D и в 3-D:

Если оценить площадь, которую фактически занимает каждая секция на экране, то становится понятно, почему так легко неправильно понять 3-D диаграмму:

Чтобы удалить 3-D эффекты с элемента графика, выделите этот элемент, затем в разделе Формат объёмной фигуры (3D Format) установите для параметров Рельеф сверху (Top) и Рельеф снизу (Bottom) значение Без рельефа (None).

8. Удаляйте легенду, если в ней нет необходимости

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

Чтобы удалить легенду в Excel, нужно выделить её и нажать Delete на клавиатуре.

9. Используйте персональные цвета

Цвета, предлагаемые в Excel, довольно блеклые. Простейший способ исправить это – использовать свои фирменные цвета. Благодаря этому, диаграмма станет выглядеть гораздо приятнее и аккуратнее.

Чтобы использовать правильные цвета, нужно воспользоваться HEX-кодами этих цветов. При помощи конвертера переведите цвет из кодировки HEX в RGB. В Excel дважды кликните по элементу графика, цвет которого нужно изменить. В меню Формат ряда данных (Format data series) в разделе Заливка (Fill) выберите Сплошная заливка (Color) > Другие цвета (More Colors).

В появившемся окне нажмите вторую слева иконку со слайдерами. Видите выпадающий список? Выберите в нём RGB и впишите полученные недавно цифровые коды. Вуаля! Отличные фирменные цвета и шикарный график!

10. Добавляйте область затенения к линейной диаграмме

Видели когда-нибудь линейную диаграмму с областью затенения под линией графика? Этот прием сделает Вашу линейную диаграмму заметнее среди остальных.

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

Поверх первоначальной линии на графике появится линия другого цвета (в нашем случае – красного). Выделите эту линию щелчком мыши, затем кликните по ней правой кнопкой мыши и в контекстном меню выберите Изменить тип диаграммы для ряда (Change Series Chart Type).

В открывшемся меню выберите первый вариант графика из типа С областями (Area).

Новый график будет выглядеть приблизительно вот так:

Дважды кликните по затенённой области графика (в нашем случае по красной области), появится меню Формат ряда данных (Format Data Series). В разделе Заливка (Fill) выберите Сплошная заливка (Solid fill). В меню Цвет заливки (Fill color) выберите тот же цвет, что установлен для линии графика. Прозрачность можно установить по своему вкусу – заливка, прозрачная на 66% выглядит вполне хорошо.

Затем в разделе Граница (Border color) выберите Сплошная линия (Solid fill). В меню Цвет контура (Fill color) выберите тот же цвет, который установлен для линии графика. Уровень прозрачности границы установите такой же, как и для заливки. Вуаля, смотрим результат!

На этом все. Спасибо за внимание!