Карты в Datawrapper

Разберемся, как сделать интерактивные географическую и плиточную карты без программирования, но с помощью сервиса Datawrapper. Смотрите видео или читайте текстовую инструкцию.

Для начала нужно зарегистрироваться. После того, как вы создадите аккаунт, тут же появится возможность работать над визуализациями. Начнем с географической карты. Кликаем на «New map» и на «Choropleth map».

Выбираем «Russia » Regions (with Crimea)». Дальше нужно загрузить данные. 

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

После того, как данные загружены и распознаны, переходим к настройкам внешнего вида карты. Сперва изменим цвет. Лучше использовать цвета вашего издания или организации, чтобы ваши графики были узнаваемы. Кликаем на «Colors», а затем на «Import». Я загружу нужные мне цвета, которые указаны в виде кода через запятую: '#fd9e8d’, '#ed7f70', '#d16759', '#b65044', '#9b382f', '#80201c'. 

Добавлю возможность зумить карту: поставим галочку у «Make map zoomable». 

Так как никаких значений на самой карте не отображается, нам нужно, чтобы они появлялись при наведении. Поэтому идем в настройку tooltips. Кликаем на «Customize tooltips. В меню справа синим выделены названия колонок со значениями, которые можно использовать для tooltips. Выбираем колонку, где лежат названия регионов, кликнув на синюю кнопку с ее названием. Ставим двоеточие, и кликаем на синюю кнопку с названием колонки, где у нас лежат значения, то есть стоимость вывоза ТКО в столицах регионов в рублях. Чтобы было понятно, что речь идет именно о рублях, добавляем в конце «руб.».

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

Далее добавляем заголовок, подзаголовок, источник данных и указываем авторство. Все это важно делать для того, чтобы даже вырванный из текста график мог говорить сам за себя и не нуждался в дополнительных пояснениях. Дальше вы можете немного поиграть с контрастностью и фоном во вкладке «Design, c с помощью «Select layout». И настроить, чтобы все служебные подписи отображались на русском языке: в «Output locale» нужно выбрать «русский (ru-RU)»

По аналогии с географической строится и плиточная карта. Только здесь нам понадобится больше колонок. При выборе шаблона карты кликаем на «Russia » Regions (squares)».

Загружаем данные в «Looking for the other data table?» . Первая колонка в наших данных это сокращенные названия регионов в том виде, как их распознает Datawrapper. Но в них есть ошибки. Например мягкий знак вместо буквы «Б», или Алтай и Алтайский край названы одинаково. Поэтому мы сделали еще одну колонку с правильными сокращениями. Третья колонка с полными названиями пригодится нам, когда мы будем настраивать tooltips, чтобы при наведении на регион появлялось его полное название и тариф. 

Точно так же настраиваем цвета, добавляем zoom и tooltips. Теперь нам нужно, чтобы на каждой плитке было название. Поэтому в «Map label» выбираем колонку с исправленными названиями регионов. 

Обязательно проверьте, как выглядит ваша визуализация на разных платформах. Например, если выбрать мобильный телефон, то вы увидите, что все названия регионов «слиплись», их невозможно разобрать. Поэтому поставьте галочку у «Prevent label overlapping», тогда подписи будут отображаться не у всех регионов. Но при наведении будет видно, что это за регион. 

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

Карта готова. Осталось экспортировать визуализацию. В разделе «Publish & Embed» опубликуйте вашу карту. И можете выбирать, какой вариант экспорта подходит вам: ссылка на визуализацию, embed code или png. 

Кстати, у «Мастерской» появился свой Telegram-канал. Подписывайтесь, чтобы не пропускать новые выпуски.