Этот дата-арт я сделала на курсе прекрасной Federica Fragapane, посвященном визуализации данных и информационному дизайну.
Пожалуй, это самый мой крупный дата-арт на сегодняшний момент.
Самый трудоемкий - точно.

Я вела небольшой скетч-конспект всего процесса создания этого проекта в своем канале в телеграме: Дата-комиксы и в твиттере @eolay13, так как работать с проектом мне удавалось урывками и по чуть-чуть. Рисование в свободное время помогало помнить о проекте и цели.

Первым этапом был этап сбора данных по интересующей меня теме. Я давно хотела сделать проект на тему ДТП. Мне кажется, этой теме в нашей стране уделяется не так много внимания, как нужно.

Vision Zero — международная программа по повышению безопасности дорожного движения и снижению смертности в дорожно-транспортных происшествиях. Она успешно внедрена и работает в ряде стран Европы.

Надеюсь, программу Vision Zero удастся внедрить и в России. О российских инициативах на эту тему можно почитать по ссылкам ниже. Также можно помочь проектам делом, репостом, донатом:

Сайт Городские проекты. Про Vizion zero
Сайт Городские проекты - за комфортные города
Проект Карта ДТП
Проект Ноль смертей

Итак, данные
Данные собирать и обрабатывать оказалось сложнее, чем я думала. Т.к. во многих источниках они разобщены, в текстовом формате, с мусором и т.п.

Все пакеты, в которых я надеялась быстро обработать данные, выдавали море ошибок и даже иногда обнуляли мои труды...
Excel, PowerBI, Google Sheets... И путь ручной обработки, рекомендованный в курсе, оказался самым успешным. Увы.

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

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

Как представить данные? Круги, цветочки, лепестки, завитушки? Геометрические фигуры?..

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

Пока тут нет конкретных решений, но уже список основных переменных определён.

Один набор данных - основной. Данные о смертности в ДТП по странам - в динамике по годам. И ещё несколько дополнительных наборов данных уже без динамики.

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

Что-то будет осями координат, что-то станет кругом или прямоугольником, дающим фон данным. Основной концепт на этом этапе ещё не определён.

Поиск вдохновения
Третий этап был несложным и в то же время требовал принять уже решение о визуальной части проекта.

Из всех сайтов "с красотой" популярнее, наверное, pinterest, там и искала примеры и элементы для будущей работы.

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

Опять же, мне трудно подбирать сочетания цветов самостоятельно. А имеющийся пример применения цветов - сильно облегчает работу.

(не буду скрывать, что в основном мои палитры - это пятьдесят оттенков синего :'D)

Собственно, вот часть моей подборки для этого проекта, все в кадр не поместилось, в какой-то момент алгоритмы pinterest просто подкидывали мне все больше и больше красоты под мой вкус.

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

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

Костяк визуализации
Следующий этап - проработка костяка визуализации, то есть, собственно, перевод данных в объекты. Круги и линии.

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

Что могло пойти не так? :'D

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

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

И только к концу этой довольно трудоёмкой работы я поняла, что эти фрагменты не синхронизированы друг с другом. RawGraphs - что логично - подгонял оси под размер данных... То есть 6 для одной страны могло быть равно 10 для другой страны.

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

Вот как выглядела вся импортированная графика по смертям - осталось только разобрать ее по стебелькам!

Проработка в векторном редакторе.

Довольно рутинная и трудоёмкая история.

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

Бонусы - у него есть виджет для датавиза, которым автор курса щедро делится с учениками.
Минусы - так как я поменяла идею на переправе, мне этот виджет не пригодился.
Плюсы - ничто не привязывало меня к Illustrator, и я перенесла проект в figma. Нежно её люблю за простоту и удобство. И бесплатность, конечно. И у меня есть навык её использования, что намного удобнее, чем в незнакомом пакете сидеть.

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

Легенда и аннотации

Это прям важная часть проекта (учитывая, что я перепиливала их несколько недель...)

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

Хотя иногда, конечно, это затрудняет чтение и понимание текста. Особенно на русском, где текстовые конструкции напитываются канцеляризмом и становятся непролазными, громоздкими...

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

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

Тестирование и обратная связь.

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

Получив обратную связь, я нашла одну крупную проблему в чтении проекта, которую сама не заметила.

Вообще, положительная обратная связь очень приятна, она мотивирует продолжать трудиться. Но если учишься - то важен именно негативный фидбек, он поможет выловить и устранить проблемы пока ещё можно!
Что просто критически важно.

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

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

Проблема окончательно не ушла, но теперь не так сильно бросается в глаза, я надеюсь.

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

Что еще мне кажется, можно было улучшить:

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

Было трудно прорабатывать разные версии проекта, их скопилось довольно много. Но в итоге, я довольна работой.
Спасибо тем, кто терпеливо давал обратную связь на все мои попытки. Особенно, спасибо моей маме.

Проверка
Не выделила проверку в отдельный скетч-этап, за что и поплатилась. На этапе работы с данными числа по части стран съехали, и точечные проверки это не выявили.

Автор курса рекомендует вести все этапы преобразования данных на разных листах. В конце сверить финальный проект с первичным источником.

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

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

Не экономьте на тестировании, лучше перепроверить!
Сверила и поправила проект, чтобы выложить очередную, но уже более тщательно проверенную версию.

И вот, оно готово!

Всем спасибо за внимание!
Надеюсь, вам понравилась эта работа.

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

Упоминания

- Этот проект попал в longlist международной премии по визуализации данных - Information is Beautiful в 2022 году.