Спрашивает Алексей Червяков:

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

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

Транзакции сгруппированы по неделям, при наведении показан размер, категория и конкретный товар (если его удалось вспомнить). Расходы в иностранной валюте показаны флагами стран внизу графика. Траты фильтруются по категориям:

Какие знания можно извлечь из этой диаграммы? Да какие угодно. В 2013 году я тратила больше, чем в 2012, причём в основном снимала наличные. В марте 2013 карту скомпрометировали и до возвращения из Таиланда в Москву я ей не пользовалась. Основные статьи расходов — транспорт и еда (супермаркеты и рестораны). В 2012 году я покупала продукты в «Перекрёстке» и «Азбуке вкуса» и привозила из дьютифри дорогой алкоголь, в 2013 перешла на «Алые паруса» (переехала) и спорттовары (увлеклась бегом). В Таиланде, Хорватии и Черногории я почти не использовала карту, в Скандинавии, Штатах и ЮАР — наоборот. Неделя в Нью-йорке поставила абсолютный рекорд по развлекательным тратам. В Финляндии и Норвегии я покупала платья Marimekko и COS — это мои любимые скандинавские марки.

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

Живая расходограмма: https://budget.datalaboratory.ru/

Спасибо Диме Тихвинскому за помощь в работе над визуализацией.

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

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

Самое полезное открытие — набор палитр «Колорбрюер». Он поддерживается в D3.js и часто используется в визуализациях, созданных с помощью этой библиотеки. В набор входят приятные монохромные и разноцветные палитры для отображения качественных и количественных параметров. Для числовых массивов, расходящихся в обе стороны от нуля, подобраны градиенты с белым цветом посередине шкалы. Майк Босток собрал все палитры вместе:

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

Ещё один полезный инструмент — HCL-пипетка.

Дима рассказал о проблеме искуственных палитр, советовал почитать психологический трактат Макса Люшера «Сигналы личности» и «Искусство цвета» Иоханнеса Иттена о закономерностях цветовой гармонии и конструирования. И если психологические теории цвета лично у меня не вызывают доверия, то вторая книга точно достойна внимания.

Делитесь в комментариях своими «цветовыми» рецептами!

Спрашивает Люба Смирнова:

Инфографика и визуализация — горячие темы. На популярных сайтах Visually, Infogram, Daily Infographic ежедневно появляются сотни работ. К сожалению, не все они заслуживают внимания и научат вас полезным приёмам.

Чтобы заложить прочный надёжный фундамент, начните с книг Эдварда Тафти. В них сформулированы универсальные принципы информационного дизайна и приведены проверенные временем примеры. Эти книги — кладезь полезных знаний, и я не совру, если скажу, что знакомство с ними изменило мою жизнь.

Из современных авторов следите за Майком Бостоком — создателем библиотеки D3.js и художественным редактором The New York Times, Хуаном Веласко — арт-директором National Geographic и Бретом Виктором — мыслителем и изобретателем. Сильные работы каждый год попадают в шортлист конкурса «Малофей». Я ищу и собираю хорошие примеры на пинтересте.

Что касается технологий, я советую освоить D3.js и записаться на курсеровский курс «Data Science». На курсе знакомят с пайтоном, SQL и R в достаточной степени, чтобы потом вы самостоятельно выбирали и использовали подходящий инструмент. Если захотите с головой погрузиться в тему, приходите на наш практический двухдневный курс.

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

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

Желаю удачи!

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

Спрашивает Энжи Сказка:

Честно говоря, я не поняла, что показано на главной диаграмме. Какое измерение отложено по вертикали? Что означают пики и провалы? Почему высота диаграммы постоянна, тогда как сумма долей жанров всегда превышает 100% (у одного фильма несколько жанров) и меняется со временем?

Самая интересная особенность данных: один фильм ≠ один жанр, она ни в коем случае не должна потеряться.

Художественные и документальные фильмы — это разные категории, а не жанры. Их лучше показать на отдельных графиках. Предлагаю также выделить в качестве категорий короткометражки и анимационные фильмы. Для каждой категории составь список мета-жанров (жанров, объединённых одним фильмом): наряду с комедиями и драмами, туда попадут музыкальные вестерны, романтические драмы, военные боевики. Документальные фильмы разделятся на военные, исторические и спортивные. Мультфильмы — на семейные комедии и взрослые драмы. Отложим на таймлайне художественные фильмы, сгруппированные по мета-жанрам с учётом времени их появления, чтобы можно было отследить зарождение мистических триллеров или комедийных ужастиков. Получится что-то вроде музыкального генеалогического дерева:

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

По мелочам. Эффект «бумажной гармошки» создаёт впечатление трёхмерной картинки и визуально искажает график. Чёрная обводка лет на нижней шкале — лишняя . Резкое увеличение количества фильмов в 2000-х расшифрует только очень сообразительный читатель. Total number of movies per year → Movies per year.

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

P.S. Энжи делится статьями по визуализации информации:

1. Storytelling: The Next Step for Visualization, Robert Kosara, Jock Mackinlay from Tableau Software
2. Scientific Storytelling using Visualization, Kwan-Liu Ma, University of California, Davis, CA, USA
3. Narrative Visualization: Telling Stories with Data, Edward Segel and Jeffrey Heer

Спасибо!

Ответы на вопросы о визуализации данных, организации времени, рабочем процессе, спорте и путешествиях выходят по понедельникам. Пишите: mail@infotanka.ru.