Переделываем график про конкуренцию на рынке IT!

Алексей Смагин (@BlackPineapple) — о том, как делать ваши графики понятными и красивыми. А в деталях учу этому искусству на курсе «Эстетика в графиках»

графиквизуализацияhh-индекс

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

Давайте сначала о том, что тут хорошо:

  1. «Говорящий» заголовок! Это очень важная деталь — мы читаем первое предложение и сразу понимаем, чего ждать от визуализации
  2. Есть ориентиры для значений. Без меток непонятно, что такое hh-индекс. 11,3 — это плохо или нет?

Теперь о плохом:

  1. Очень много шума. Косые даты, хаотичные подписи, много чисел. Такая детализация не нужна, но без неё гораздо легче воспринимать идею
  2. Странная легенда. И hh-индекс хорошо бы расшифровать. Интернет подсказал, что это всего лишь отношение активных резюме к количеству вакансий
  3. Не очень логичная раскраска. Для меня может быть два понятных варианта — либо расходящаяся палитра с перекосом цвета либо в вакансии, либо в соискателей (как у меня); либо симметричная: в центре всё хорошо, а по бокам — плохо. Но на исходном графике и симметрии нет, и раскраски по доминированию — тоже.

Как это сделано?

  • 🔴Основу быстро делаем в любом сервисе для визуализации. Я использовал Flourish.
  • 🔴Выгружаем вектор и доделываем красоту в любом графическом редакторе. Я использую Figma.

#разбор

Исходный график конкуренции на рынке IT с цветными зонами, плотными метками на оси времени и нечёткой легендой, показывающий hh-индекс по месяцам
Исходный вариант графика с избыточными подписями и неочевидной раскраской.
Переделанный график конкуренции на рынке IT с более чистой шкалой, читаемым заголовком и упрощённой легендой, подчёркивающий изменение hh-индекса
Редизайн: упрощённые подписи, ясная легенда и сбалансированная палитра.