Иван Дианов

Перевёрстка данных о миграции

Росстат нарисовал такое:

Округи можно вывести списком, не обязательно привязывать к карте. Стрелки всё окончательно запутывают: почему они делятся на сегменты? Важен ли их цвет? Куда уехало больше всего жителей ЦФО? Какой процент людей уезжает?

Было бы круче показать таблицей. В строках — откуда, в столбцах — куда уезжают. В исходной визуализации такой инфы нет.

Нажожу исходные данные на сайте Росстата. Да они прекрасны, всё как я и хотел :—) Даже больше: тут инфа разбита на городские и сельские поселения. По каждому федеральному округу можно посмотреть, сколько человек переехало из сёл в города, а сколько из городов в сёла.

Попробую для начала визуализировать в Табло. Сейчас данные в виде разреженной таблицы, надо сделать её плотной. То есть такой, чтобы в каждой строке было указано: из какого ФО, из города или из села, сколько человек переехало, в какой ФО, в город или в село. Часть работы делаю вручную:

Выделенными данными надо заполнить столбцы to_district и amount. Тогда в каждой строке будет по одному числовому значению, как нам и надо. Вручную делать это долго, к счастью, Табло умеет так:

Ррраз — и данные в правильном формате:

Здорово. Попробуем визуализировать:

Теперь посмотрим миграцию между сёлами и городами:

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

Уберём переезды внутри своего ФО, чтобы внимательнее рассмотреть остальные:

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

В данных Росстата есть информация за несколько лет, почему бы не показать динамику изменения миграции? Перевожу остаток данных Росстата в нужный формат при помощи Vim и Табло, рисую гарфики:

Площадь графика показывает число переездов за все годы. Видим, что в 11 году все дружно начали переезжать
Если оставить только переезды в другие регионы, будет так

Между делом показываю результат Роме Бунину, он предлагает попробовать санки чарт. И показать всё-таки карту России. Пробую санки:

Справа порядок неправильный, не стал пока исправлять

Слева — сколько уехало из округа, справа — сколько приехало. Клёво, что все потоки видны и что они похожи именно на потоки. Если с таблицей надо разбираться, тут сразу видно, что что-то куда-то перетекает. А если не повторять каждый регион по два раза? Пробую вариант с chord diagram, которую собираю в онлайн-генераторе:

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

Тупик. Запоздало иду искать аналогичные визуализации.

Красиво, но если показать миграции между всеми штатами, будет каша

Плюс много санки и chord:

Делаю десяток набросков, в голову приходит странный вариант: а что, если сделать аналог плиточной карты для округов? Прототипирую в табло:

«Карта» состоит из восьми клеток-округов. Внутри каждого округа — такая же карта округов. Чтобы узнать, из какого округа чаще всего переезжают в ЦФО, надо выбрать в клетке ЦФО самый большой кружок. И посмотреть, какой округ он означает. Переезды внутри региона показываю серыми кружками.

Экспортирую из Табло ПДФ и допиливаю в Скетче:

Показываю Андрею Ересу. Оказывается, ничего не понятно, надо было раньше показать :—\

Решаю вернуться к старой версии с таблицей. Пробую импортнуть ПДФ из Табло в Скетч, но всё очень тормозит. Поэтому визуализирую на d3, дорабатываю в Скетче:

Доработать не успеваю, решаю на этом закончить. Клёво было бы ещё показать численность населения округов и её прирост.

Перевёрстка тарифов 246 маршрутки

Мы тут с Андреем Ересом пробуем вести канал в телеграме. Перевёрстываем разные штуки, постим результат и процесс.

На этой неделе улучшали красоту:

Никогда не понимал таких бумажек. Сколько, например, стоит проехать от ПМК до Новенького? В каком порядке идут остановки? Попробовал сменить формат. Процесс:

Результат:

Сразу видно, что от ПМК до Новенького цена не предусмотрена, надо торговаться с водителем. Но в любом случае, не дороже 33 ₽.

Опубликовал в телеграме а потом понял, что полосочки можно ещё плотнее утрясти:

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

Чтобы решить эту проблему, нарисовал вариант с дугами:

Пожалуй, так лучше. Глаз быстрее находит линию, соединяющую две нужные остановки.

Пробую вариант с треугольной таблицей. Где не хватает цен — додумываю.

Но это, конечно, жесть: надо инструкцию рядом вешать, как цену определять. Чтобы сделать формат понятнее, придётся дублировать информацию. Раз уж у нас в итоге получилась скучная таблица, добавим немного визуализации:

Знаете, как сделать лучше? Присылайте свой вариант мне в телеграм: @ivan_dianov. Опубликуем и прокомментируем его в канале «Перевёрстка».

2018   Makeover

Как я конспектирую оффлайн лекции

Алексей Белицкий спрашивает:

как ты делал заметки на курсе? я скачал симплнот, но не вижу как загружать туда фотографии. Когда поеду на профсоюкс тоже хочу все законспектировать. У тебя получились очень хорошие подробные заметки

Текст набираю в формате Markdown в редакторе Vim, но подойдёт любой другой с подсветкой синтаксиса. Можно сразу писать в Simplenote.

Фотографирую на телефон, в конспекте тут же отмечаю текущее время, вот так:

(15:52)

Эти отметки помогают потом найти нужную фотографию. Дату снимка не пишу, если она понятна из контекста. Вечером прохожусь по отметкам и заменяю их на фотографии.

Фотографии для этого загружаю на Amazon S3 или в комментарии в Github Issues. Гитхаб даёт маркдаун-код для вставки в конспект, удобно:

Думаю, есть способы и попроще. А как вы ведёте конспекты?

Идеальное согласования макета

Однажды я за четверть часа согласовал правки по макету сразу с восемью представителями заказчика — муниципальной организации.

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

Помог такой приём: я распечатал макет, порезал его ножницами, отдал толпе и отошёл в сторонку. Они бурно спорили между собой, перекладывали листики, а потом вдруг пришли к консенсусу. Я уточнил, все ли согласны, и торжественно сфотографировал бумажки. Сделал по этой фотографии макет и его сразу приняли.

До сих пор вспоминать приятно.

Скриншоты в текст

Когда нужно распознать текст скриншота, открываю сервис http://www.free-ocr.com/. От сотни подобных он отличается возможностью вставить картинку из буфера обмена.

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

Как запомнить нумерацию месяцев

Придумал себе запоминалку: номера первых месяцев сезона делятся на 3:

  • 3 — март,
  • 6 — июнь,
  • 9 — сентябрь,
  • 12 — декабрь.

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

Плиточная карта России

Коллега прислал ссылку на конкурс со странным названием. Нужно придумать, как разделить Россию на квадратики, чтобы делать клёвые плиточные визуализации. У Америки такая есть:

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

Для России такую карту сделать сложнее, потому что её субъекты сильно отличаются размерами:

Чтобы прочувствовать проблему, сравните Ингушетию с Сахой

Кажется, квадратами нарисовать Россию невозможно. Решаю «приблизиться к оленю» и пробую шестиугольную сетку. Рисую графики похоже настоящие. Придумываю, как сократить названия регионов. Выходит так:

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

Оу, теперь можно сдвинуть колонки на полвысоты и получить нормальную квадратную карту. Это круто: ячейки выстраиваются в горизонтальные линии и данные проще сравнивать.

Показываю Роме Бунину, ведущему курса о визуализации данных. Кстати, курс стартует 8 декабря в Москве, приходите. Можно удалённо.

Рома недоволен:

Чтобы сделать карту ближе к России, пробую равномерно надуть восток:

Чтобы хоть как-то уплотнить карту, убираю горизонтальные отступы:

Вышла расчёска :—( Никто не догадается, почему одни регионы рядом а другие далеко. Может разрешить карте быть дырявой? Нет, станет ещё непонятнее.

Пробую гигантские субъекты нарисовать гигантскими:

Мало надул, не похоже на Россию. Дуем дальше:

Форма похожая, но теперь понятно: нельзя к каким-то двум регионам привлекать столько внимания. Поэтому распиливаю страну по Уралу и показываю европейскую часть крупно. Так в некоторых проектах делает Лаборатория Данных:

Получается так:

С Сибирью беда. Ямало-Ненецкий и Ханты-Мансийский округа отвалились от Ненецкого. Свердловская область почему-то на севере. Надо ближе половинки сдвинуть, а то непонятно, что это одна страна.

Нравится, что строки востока и запада не совпадают, это усиливает ощущение разреза. Показываю Роме, он одобряет:

На радостях рисую римейк карты с флагами.

У Сахалина флаг крутой

В её форме не угадывается Россия, однако, рассматривать интересно. С названиями было бы круче, но уже лень.

Чтобы оценить, точность плиточной карты, раскрашиваю её колонки в разные цвета, так же крашу исходную карту:

Жесть. На Кавказе всё перемешалось: Кабардино-Балкария прилипла к Краснодару, хотя надо было прилипить Карачаево-Черкесию. Ингушетия граничит с Астраханью и Дагестаном, а с Чечнёй — нет. На северо-западе тоже плохо. Надо всё выравнивать заново.

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







А-а-а-а-а-а! Россия кривая!
(╯°□°)╯︵ ┻━┻





Запоздало придумываю принципы:

  • Приграничные субъекты лучше рисовать по краям, остальные — в серединке.
  • Чем больше сохранится правильных границ между регионами, тем лучше.
  • Особенно важна аккуратность в Центральном федеральном округе.
  • Федеральные округа не должны рассыпаться.
  • Форма карты должна хотя бы отдалённо напоминать Россию.

Ещё надо по-другому сократить названия субъектов. Никто не догадается, что «Мрл» — республика Марий Эл. Назваю регионы их первыми буквами, короткие названия пишу полностью. Тут тоже не без сюрпризов. Как сократить Краснодар и Красноярск? «Крас» и «Крас»? Решаю иногда делать исключения.

В английской верии с сокращениями регионов будет дико проще, есть официальные.

Снова всё двигаю. Выходит лучше:

Рисую горизонтальные полоски:

Стало чуть менее криво. Проверяю, не развалились ли округа:

Северо-Западный федеральный округ порвался, ну и пускай.

Придумал более наглядный способ оценки качества карты. У каждого квадратика от 0 до 4 соседей. Обозначу эти соседские отношения линиями на исходной карте и получу сетку четырёхугольников. Чем ровнее сетка, тем лучше карта.

Сразу видно, что западный Урал задрался наверх.

Другая проблема: восточная часть по форме не похожа на Россию. Исправляю:

Запад стал лучше. Квадратик Оренбурга ушёл вниз, Ненецкий округ — наверх, проверочная сетка выровнялась.

На востоке сетка ухудшилась. Алтай и Алтайский край уехали от Кемерово, а Бурятия присоседилась к Еврейскому АО. Но я на это согласен, потому что форма страны стала узнаваемой. Алтай вывалился вниз, как на настоящей карте, и стал дополнительным ориентиром.

Хуже всего то, что Омск между Свердловской областью, Тюменью и Курганом. Хотя на самом деле он восточнее этой тройки. Пробую поменять его местами с Курганом.

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

Если квадратики карты на визуализации залиты полностью, можно сдвинуть половинки карты поближе:

Если нет заливки, то лучше оставить линию на месте Урала:

Готово :—)

Следующий этап — что-нибудь визуализировать. Например, число аварий на дорогах.

Список списков ресурсов для айтишников

Я недавно писал про пользу изучения списков.

На Гитхабе лежит очень крутой список списков. В основном всё про разработку и айти. Мне понравились такие:

100 клеток за день

Меня зацепила статья 100 Blocks a Day. Главная идея — человек бодрствует ≈1000 минут в день. Если каждые 10 минут обозначить клеточкой, весь день можно нарисовать так:

Прожил 10 минут — закрасил клеточку. Вечером ни одной клетки не остаётся, пора спать. Мне так понравилась идея, что я распечатал стопку клетчатых листиков и стал их красить цветными карандашами:

  • Фиолетовым — планирование или наведение порядка.
  • Синим — чтение.
  • Зелёным — физическую активность или что-то полезное.
  • Жёлтым — отдых или еду.
  • Красным — работу.
  • Чёрным — сон.
  • Серыми каракулями — всякую ерунду.

Через месяц я завершил эксперимент, но только сейчас дошли руки отфоткать бумажки и слепить их в одну картинку:

Там, где вечером много зелёных клеточек, я гулял с Дата сториз в наушниках.

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

Слева мой режим до Нового года, справа — после

Видно, что после Нового года режим стал более чётким: в первой половине дня работа, потом отдых, перед сном — чтение.

Дочка тоже попробовала себя в таймтрекинге. У неё все дни получаются примерно такие:

Когда вечером держишь в руке лист со схемой прожитого дня, понимаешь, что 10 минут — это много, их жалко потратить на ерунду.

Список списков ресурсов о визуализации данных

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

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

Остальные:

Ранее Ctrl + ↓