ИТ в Беларуси-2016. Анализ и визуализация данных для серии публикаций

Визуализация данных и инфографика про ИТ-индустрию в Беларуси в 2016 году для портала dev.by

Начиная с 2009 года, dev.by — беларуский сайт об ин­фор­ма­ци­он­ных технологиях — ежегодно проводит опрос среди пред­ста­ви­те­лей отрасли, чтобы получше разобраться и выяснить, кто работает в Беларуси в сфере ИТ и чем они там занимаются. Анкета включает около 40 во­про­сов, которые уточняют социально-демографические характеристики, про­фес­си­ональ­ные привычки и от­но­ше­ние респондентов к своей работе. С результатами портал знакомит читателей в большом обзорном материале.

Задача

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

Погружение в тему, подготовка и анализ данных

В отличие от привычного формата работы, когда вместе с брифом получаю отчёт от аналитика и подготовленный датасет, в этот раз мне при­шлось с данными работать самостоятельно. А поскольку про саму айти-индустрию (про ИТ вообще и в Бе­ла­ру­си, в частности) я мало что знаю, первым делом взялся за из­уче­ние контекста, чтобы понимать, что искать в данных, как ин­тер­пре­ти­ро­вать свои находки и о чём рассказать при помощи визуализаций. Ладно, не буду сильно сгущать краски, всё обошлось знакомством с ана­ло­гичны­ми публикациями за прош­лые годы. Ну, может, ещё пары-тройки материалов с того же dev.by

Страницы с публикациями прошлых лет
Публикации на dev.by с результатами опросов прошлых лет

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

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

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

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

Работа над визуализацией

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

Гистограмма с распределением возраста ИТ-специалистов в Беларуси в 2016 году

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

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

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

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

  • основной — почти джинсовый синий,
  • дополнительный — тёмно-серый,
  • для акцентов — сигнальный оранжевый.
Пример размещения тримапа на странице dev.by в браузере
Пример размещения диаграммы на странице портала dev.by
Всё красиво: цвета, размер — глаз радуется.
Пример размещения тримапа на странице другого ресурса в браузере
Размещение того же тримапа на странице другого ресурса.
Пример реальный, перепост висит по адресу https://alterweb.by/news/info.php?id=96

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

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

Пример диаграммы со шкалой Ликерта
Пример гистограммы, в которой есть разбика по уровням специалистов
Диаграмма с областями нормированная с накоплением, показывающая длительность работы специалистов в ИТ-отрасли

Были и исключения: оказалось, для цветового кодирования от­ве­тов по шкале Ликерта и уров­ня специалистов на dev.by есть своя традиция — привычный светофор — которую было важ­но сохранить. В остальных же случаях придерживался брен­до­вой палитры.

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

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

Тримап (диаграмма плоское дерево) с распределением специалистов по учебным заведениям
Потоковая диаграмма (санки), показывающая распределение специалистов по платформам и основным технологиям в Беларуси в 2016 году

Отдельно, обсуждая формат подачи, порекомендовал отойти от порочной практики строить визуализации в Tableau (такой подход использовался в ма­те­риа­лах по 2014 и 2015 го­дам) и вообще уйти от ин­те­рак­ти­ва. Табло, конечно, ин­стру­мент хо­ро­ший, однако уместен больше для аналитики, но не для ви­зуаль­но­го сторителлинга. А с рас­ска­зом истории успешно справятся и статичные диаграммы.

Анимированная иллюстрация взаимодействия (интерактива) с диаграммой ящик с усами (бокс-плот), показывающей распределение уровня заработной платы ИТ-специалистов по позициям в Беларуси в 2016 году

В любом случае, номер не про­шёл и убедить клиента пол­но­стью избавиться от интерактива не удалось. Ребята из dev.by разъяснили, что важно со­хра­нить для читателя возможность уточнить данные, если у него возникнет такое желание. Для этого в ряде случаев добавил простенькое взаимодействие, запрятав показатели в тултипы. Это позволило сохранить чистоту в диаграммах, избавив от необходимости подписывать подряд все значения, и оставило возможность управлять фокусом внимания читателя.

Точечные диаграммы с долей девушек и средним возрастом по позициям в ИТ-индустрии в Беларуси в 2016 году

Технически решение построено вокруг SVG, к которому после прикрутил необходимое вза­имо­дей­ствие при помощи css-эффектов и javascript. В боль­шинст­ве случаев всё жёстко прикручено болтами, но не­ко­то­рые визуализации генерируются в браузере библиотекой d3.js

Для удобства журналистов dev.by для каждого блока с ди­аг­рам­ма­ми подготовил embed-код для вставки на страницу публикации.

Косяки и недоразумения

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

Были вопросы с кросс-брау­зер­нос­тью. Например, в Фаерфоксе не отрисовалась сначала часть диаграмм из-за особенностей рендера СВГ. Это мы, конечно, победили.

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

Проблема с отображением диаграмм на мобильных устройствах → нормальное отображение
Поросёнок Петр делает то, что должен

Некоторые читатели сообщали о подозрительной активности поросёнка Петра. Да-да, в блоке про отношение респондентов к работе за границей.

В целом же получилось хорошо, отзывы были преимущественно положительные.

Отзывы о работе

  • Ігар Яноўскі — чалавек, які ўмее рабіць прыгожую інфаграфіку.
    Кастусь Лашкевич, главный редактор dev.by

    Кастусь Лашкевич, главный редактор dev.by

    Публикация в фейсбуке
  • Посмотрите, как хорошо мы ви­зу­али­зи­ро­ва­ли наш опрос!
    Артём Концевой, основатель dev.by

    Артём Концевой, основатель dev.by

    Публикация в фейсбуке
  • Наконец-то клёво подаёте информацию! Молодцы.
    Михаил Дубаков, основатель Targetprocess

    Михаил Дубаков, основатель Targetprocess

    Комментарий на dev.by
Серия (раскадровка или small multiples) диаграмм с областями, показывающих динамику по основным позициям в ИТ-индустрии Беларуси в 2009–2016 годах

Над проектом работали

Кастусь Лашкевич (главный редактор портала dev.by) — подготовка материалов и консультация по проекту;
Игорь Яновский — обработка, анализ и визуализация данных, гра­фи­ческий дизайн, вёрстка и написание скриптов для интерактивных диаграмм, подготовка визуализаций к публикации и сопровождение.

В рамках проекта для 4 пуб­ли­ка­ций подготовил 35 ин­фор­ма­ци­он­ных блоков, которые содержат более 100 ди­аг­рамм и групп ви­зу­али­за­ций, две трети из них интерактивные.

Среди прочих инструментов и технологий использовал R (для подготовки и анализа данных, прототипирования визуализации данных), Иллюстратор (для кас­то­ми­за­ции и вёрстки ин­фор­ма­ци­он­ных блоков), HTML, CSS и SVG (для рендера ин­фо­гра­фи­ки прямо в браузере), javascript и библиотеку d3.js (для обеспечения вза­имо­дей­ствия с диаграммами и ди­на­ми­чес­ко­го построения графиков на странице).