Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Студия современного дизайна и web-инжиниринга
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

10 вариантов визуализации данных с примерами

6 249 12 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Небольшой гайд по визуализации данных, которым делятся англоязычные коллеги по цеху, из команды sisense. Вольная выжимка из книги “как правильно визуализировать данные”.

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

Итак, приступим.

1. Indicator

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

68ix8F0rY8OQ4ZIszm6GXq1DdibHdzxfdAKNqkgC

2. Line Chart

Линейный график очень популярный, и хорошо подходит во многих случаях, в том числе:

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

zrBkP2hgP651fLgF6N8H7wjUl2GjrFvawRPJabMw

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

eMvuX0TAyxc0BgRacSJIW0oQ-SASQuwO1lGHbrpO

3. Column Chart

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

kPZZvsTIoP0yNfrWqdc25jy5pC_QEql9UrIYmkIl

Для того, чтобы выделить пики и тенденции, можно “скрестить” колонки с линейной диаграммой:Dvg6fudUMgmDl2e6G9SKI-DGR8DCZXOV19SowpBn

4. Bar Chart

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

5. Pie Chart

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

6. Area Chart

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

7. Pivot Table

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

.E5SAJ9lL96Na0hSwT7aN7u0L5nA_BifQBNCWwpoS

8. Scatter Chart

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

9. Scatter Map / Area Map

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

10. Treemap

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

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

Всем добра и удачных стартов.

Перевел и адаптировал: ivan.sologub

+7
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Эльмар Абдурайимов
Плюсую. Гайд понравился
Ответить
ЭлитЭлектро
Интернет-проект по продаже осветительных приборов
Валерий Михайлович
какой сервис использовался в этой статье, для построения графиков? Работал когда-то с этим https://infogr.am/ - там все (или почти все) из приведенных видов диаграмм есть
Ответить
theSlice.pizza
Пицца - это лайфстайл продукт.
Иван Сологуб
Валерий, выдержка взята отсюда: http://goo.gl/I6wgHr
Это инструмент визуализации данных, как я понимаю. Могу отписать контакты ребят из проекта)
Ответить
Yaroslava
Спасибо за статью! Очень полезно!
Ответить
Николай Заплавский
спасибо за статью!
Ответить
Andrey Tokarev
Ну, не знаю, в 2016 году использовать такие убогие графики - преступление.
Я просто оставлю это здесь, как пример действительно красивых визуализаций:
https://github.com/mbostock/d3/wiki/Gallery
https://vida.io/explore
http://visjs.org/index.html
http://selection.datavisualization.ch/
http://videohive.net/item/kinetic-typography-engine/6990446?WT.ac=category_thumb&;WT.seg_1=category_thumb&WT.z_author=Hikari-Pictures
http://shiny.rstudio.com/gallery/
http://xkcd.com/657/large/
http://bokeh.pydata.org/en/latest/docs/gallery.html
Ответить
theSlice.pizza
Пицца - это лайфстайл продукт.
Иван Сологуб
Полностью согласен с вами, Андрей.
Убожество. Мы обязательно накажем криворукого му..ка, который это нарисовал. Мы его запрем в подвале и будем показывать рекомендованные вами примеры.
Надеюсь, что до этого [человека] дойдет как нужно графики делать.
Ответить
Открытый инжиниринг
Помощь технологическим стартапам
Антон Барабанов
Кратко и по делу. Хорошее, доступное изложение материала. А я вот подобные вещи кореле делаю.
Ответить
Roman.ua
Мы помогаем делать интернет-маркетинг эффективнее.
Алена Крамарчук
Читала исследования, в которых определили, что Pie Chart — не самый лучший способ демонстрировать данные. Очень сложно на глаз определить размер сегмента. Вместо круговой диаграммы лучше использовать столбики. На них очевиднее, какой показатель меньше, в какой больше.
Ответить
theSlice.pizza
Пицца - это лайфстайл продукт.
Иван Сологуб
Алена, цитирую: "Круговая диаграмма лучше всего подходит в тех случаях, когда необходимо отобразить данные в пропорциях и/или процентных соотношениях. Так как круговая диаграмма представляет соотношение размеров между частями и всей сущностью, части необходимо свести к осмысленному целому. Круговые диаграммы могут отображать не более шести категорий."
Ответить
Roman.ua
Мы помогаем делать интернет-маркетинг эффективнее.
Алена Крамарчук
Иван, спасибо. Я прочитала этот отрывок в статье.
Я к тому, что если у нас есть распределение 21%, 23%, 27% и 29%, то на круговой диаграмме сегменты будут выглядеть практически одинаковыми. А главная задача визуализации данных — сделать их простыми для восприятия. Поэтому круговая диаграмма — не самый удачный способ достичь такой цели.
Ответить
Егор Андреев
для тех, кто хочет получить больше из стандартного Excel, подписывайтесь: http://vk.com/xls_infographics
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать