Как приёмы дата-сторителлинга улучшают график

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

дата-сторителлингграфикиDatawrapper

Славная рубрика с переделками от инструмента Datawrapper!

Что было до:

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

Что стало после:

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

Слайд с четырьмя мини-графиками слева и правой панелью Datawrapper «Let's fix this chart!», показывающий исходную версию визуализации и рекомендации по правке.
Исходный вариант графика и список рекомендаций справа.
Слайд демонстрирует ту же страницу с другими акцентами: заголовок, четыре мини-графика и правый столбец с пунктами улучшений от Datawrapper.
Вариант с выделением заголовка и структуры графиков.
Слайд с тремя мини-графиками и правой панелью, где перечислены приемы: narrative subtitle, linear layout и emphasise range для улучшения восприятия.
Пример разбиения графиков и поясняющих меток.
Слайд показывает то же содержимое с диагональными заливками на мини-графиках и акцентом на нарративную последовательность панелей.
Использование заливки и визуальной последовательности.
Слайд разделяет область графиков на четыре пронумерованные панели, подчёркивая шаги в интерпретации данных и связь с заголовком.
Нумерация панелей для улучшения читабельности.
Слайд с изменённой графической заливкой и цветовой дифференциацией для каждого мини-графика, что повышает различимость трендов.
Цветовое разделение трендов в мини-графиках.
Слайд с улучшенной аннотацией и метками на мини-графиках; панель справа всё ещё содержит чек-лист приёмов для хорошей визуализации.
Аннотации и метки для ключевых точек данных.
Слайд показывает компактные графики с подчёркнутыми метками осей и списком рекомендаций справа: minimise grid, label lines и другие приёмы.
Подчёркнутые оси и список приёмов по правому краю.
Финальный слайд с исправленным расположением мини-графиков и подчёркнутой последовательностью чтения, демонстрирующий итоговый вид визуализации.
Итоговый вариант с улучшенной компоновкой и последовательностью чтения.