{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Кирилл Беляев: заметки с тегом рынок труда", "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/rynok-truda\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Frynok-truda%2Fjson%2F", "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101", "author": { "name": "Кирилл Беляев", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/", "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101" }, "items": [ { "id": "621", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/job-market-digitalisation\/", "title": "Разбор визуализации о рынке труда и оцифровке профессий", "content_html": "

Пока это самый большой мой разбор. Написать его получилось только по частям, публикуя в телеграм-канале<\/a>. Соавтор пересланного решения — Роман Бунин<\/a>, без которого я провозился бы раз в 5 дольше, и не факт, что нашёл бы все удачные ходы.<\/p>\n

Предмет разбора<\/h2>\n

Меня привлекла работа Стива Левина для Аксионс об оцифровке профессий, изменении зарплат и числа рабочих мест в США<\/a>:<\/p>\n

\n\"\"\n<\/div>\n

Привлекла внешней простотой, аккуратностью и тем, что в ней легко копаться. Закопавшись, понял, что она иллюстрирует только заголовок «People in highly digitized jobs earn more...» (Люди с высоко оцифрованный работой зарабатывают больше). Это видно из положения оранжевого и фиолетового облаков стрелок. Мне связь зарплаты с оцифровки очевидна, поэтому полез разбираться, что в визуализации ещё интересного.<\/p>\n

Визуализация построена на данных исследования Брукингского института. Вместе с отчётом институт опубликовал<\/a> визуализации. Можно посмотреть на те же данные под другим углом. Тут акцент на степень оцифровки, но совсем не показаны зарплаты:<\/p>\n

\n\"\"\n<\/div>\n

В формате разбора не успею закопаться в исследование и детали всех визуализаций. Ограничусь работой Стива, то есть срезами оцифровки, зарплат и числа рабочих мест за 2002 и 2016 года. А география, образование, цифровые навыки и прочее останется за скобками.<\/p>\n

Устройство и ошибки<\/h2>\n

Сразу понять, в чём проблема, было сложно, поэтому формально описал устройство визуализации и перечислил ошибки, которые могу легко объяснить и решить.<\/p>\n

Сначала — каркас<\/a>. Тут два измерения со степенными шкалами: икс — средняя годовая зарплата, и игрек — число рабочих мест. Каждая стрелка — профессия. Основание стрелки — зарплата и число мест в 2012-м, остриё — в 2016-м.<\/p>\n

Толщина штриха (и размер острия) кодирует число рабочих мест в 2016-м. Число рабочих мест закодировано дважды — положением по игреку и толщиной штриха. Двойное кодирование — рабочее решение, но тут оно выглядит случайностью. Возможно, если толщина штриха будет меняться вслед за изменением числа рабочих месть, падение и рост будут нагляднее.<\/p>\n

В таком каркасе может казаться, что видны изменения, а из-за стрелки — ещё и будущий вектор. Но на деле данные только за два года, что происходило между неизвестно, и тем более — что будет в будущем.<\/p>\n

Из-за того, что толщина стрелок показывает число рабочих мест, индустрии с больши́м числом рабочих привлекают больше внимания. Не проблема, что визуализация это показывает — это реальность, хирургов меньше, чем фасовщиков. Но в таком представлении искажается восприятие — маленькие стрелки не замечаются, даже при большой зарплате. Спорное решение.<\/p>\n

Цвет отвечает за оцифровку профессии на 2016-й, у него три дискретные шага: слабая оцифровка, средняя и сильная. Вижу две проблемы:<\/p>\n

    \n
  1. Цвета не ассоциативные и неравномерные по насыщенности — бежевый выглядит менее заметным на фоне ярко-оранжевого, кажется, что тут низшая степень оцифровки. В своей версии возьму оранжевый для высоких значений и голубой для низких. Теплота цвета будет отвечать за «температуру» оцифровки.<\/li>\n
  2. К дискретности тоже вопросы. Она бывает свойством данных из-за низкой точности оборудования, например. Но в отчёте<\/a>, на который ссылается визуализация, виден разброс:<\/li>\n<\/ol>\n
    \n
    \n\"\"\n<\/div>\n<\/blockquote>\n
    \n

    В таком случае лучше брать градиент с промежуточными значениями. А если красить вершины стрелки разными цветами, будет видно растёт оцифровка или падает.<\/p>\n<\/blockquote>\n

    Описывая недочёты, я думал, что их исправление улучшит визуализацию. Так сделаны некоторые прошлые разборы<\/a>. Умозрительно понимал, что исправления не изменит общую картину, поэтому переделал полностью.<\/p>\n

    Cвой подход<\/h2>\n

    Вспомнил работу Нью-Йорк Таймс о профессиях и соотношении полов на рынке труда среднего класса США в 1980 и 2012<\/a>. C визуализацией данных тоже помогает насмотрелось, мозг сам вспоминает похожие форматы и структуры данных.<\/p>\n

    \n\"\"\n<\/div>\n

    Иду за помощью к Роме, с которым работали в Лаборатории данных. Чтобы пробовать, нужны данные. Нашёл их на странице исследования<\/a> на сайте Брукингского института:<\/p>\n

    \n\"\"\n<\/div>\n

    Дальше устраиваем скайп-сессии и обсуждаем идеи вместе, примеряя в табло. Выделяем две основные гипотезы.<\/p>\n

    Гипотеза 1.0.<\/b> Показывать зарплаты графиком наклонов (slope chart)<\/a> — так называют графики из примера выше. Разбить профессии на группы по одной оси, чтобы упорядочить кашу.<\/p>\n

    \n\"\"\n<\/div>\n

    Гипотеза 2.0.<\/b> Смотрю, какие ещё классифицированные графики работают с похожими «вводными» (блок «Input» справа). Показывать зарплаты горизонтальными гантелями (dumbbell plot).<\/p>\n

    \n\"\"\n<\/div>\n

    Гантели не работают. По иксу — зарплата. Вершины гантели — зарплаты за 2002 и 2016 года. Но понять, где какой год не получится, потому что зарплата могла как расти, так падать:<\/p>\n

    \n\"\"\n<\/div>\n

    А графики наклонов выглядят перспективно. Тут 2002 всегда слева. Сразу видно, что реальное падение зарплат только у двух профессий — в колонках с номерами 29 и 27:<\/p>\n

    \n\"\"\n<\/div>\n

    Проработка<\/h2>\n

    Пробуем для оцифровки градиент насыщенности, но с ним ничего не видно. Поэтому вернёмся к комплементарным цветам.<\/p>\n

    \n\"\"\n<\/div>\n

    Оказалось, что в данных группы профессий заданы только цифрами (они и видны в колонках сверху). Нахожу соответствие на сайте Аксионс. Переворачиваем всё на 90°, чтобы нормально читать названия групп. Экспериментируем с цветом.<\/p>\n

    По иксу — зарплаты, шкала — равномерная. На такой шкале удобно смотреть, насколько быстрее растут ставки высокооплачиваемых специалистов.<\/p>\n

    \n\"\"\n<\/div>\n

    А чтобы сравнивать рост ставок удобнее смотреть с логарифмической шкалой. Она показывает процентные изменения:<\/p>\n

    \n\"\"\n<\/div>\n

    Логарифмическая шкала нагляднее показыват, что относительно самих себя зарплаты растут более-менее одинаково. Например, одним платят 1000 $, а другим — 5000 $. С инфляцией в США с 2002 по 2016 происходит вот что:<\/p>\n

    \n\"\"\n<\/div>\n

    Чтобы труд не дешевел и не дорожал из-за инфляции, зарплаты должны меняться вслед за инфляцией. В 2002-м зарплат в 1000 должна превратиться в 1023,8 (1000×(100+2,38)\/100), в 2003-м 1023,8 — в 1043. И так до 1366,4 $ в 2016-м. А зарплата в 5000 за это время превратится в 6832,1 $. В долях это одно и то же, а в долларах 366,4 $ против 1832,1 $.<\/p>\n

    С логшкалой видно, что зарплаты реагируют на изменения в экономике более-менее одинаково — углы наклонов полосок почти одинаковы. А те случаи, где они отличаются, справедливо привлекают внимание — это профессии, к которым «действительно» стали платить больше или меньше.<\/p>\n

    Ещё плюс логарифмической шкалы для этой визуализации — данные занимают меньше места по горизонтали.<\/p>\n

    Подробнее о шкалах<\/a> читайте у Ромы.<\/p>\n

    Гипотеза 1.1.0.<\/b> Агрегировать зарплаты по группам. Идея плохая — теряется куча данных и сглаживаются все аномалии:<\/p>\n

    \n\"\"\n<\/div>\n

    Гипотеза 1.2.0.<\/b> Показывать количество рабочих мест кругами на концах линий. Сначала смотрим на уровне групп. Картина непоказательная:<\/p>\n

    \n\"\"\n<\/div>\n

    Гипотеза 1.2.1.<\/b> Показывать только разницу и оставлять один кружок на том конце линии, который отвечает за год с больши́м числом рабочих мест. Опять не наглядно:<\/p>\n

    \n\"\"\n<\/div>\n

    Гипотеза 1.2.2.<\/b> Может, вместо кружков горизонтальные столбики?<\/p>\n

    \n\"\"\n<\/div>\n

    В Табло так не получится. Откладываем идею, но смотрим, что вообще выходит из столбиков. Направление кажется перспективным.<\/p>\n

    \n
    \n\"\"\n\"\"\n<\/div>\n<\/div>\n

    Совмещаем их с заголовками и пробуем красить в зависимости от степени оцифровки. Разноцветные столбики плохо группируются в пары:<\/p>\n

    \n\"\"\n<\/div>\n

    Убираем цвет. Сортируем по количеству рабочих мест:<\/p>\n

    \n
    \n\"\"\n\"\"\n<\/div>\n<\/div>\n

    Теперь столбики сливаются в одну массу. Придумываем красить их попарно цветом, который соответствует среднему между оцифровкой 2002-го и 2016-го. Это нечестные данные, потому что в промежуточные года данные были другими. Такие средние в целом не корректно считать, их нет в природе. Но тут оно помогает показать пары. К тому же у нас и так столбики — агрегация до групп, что тоже не очень корректно. В целом столбики показывают как дела на макроуровне, поэтому оставляем. Добавляем точные значения и подкручиваем цвета:<\/p>\n

    \n
    \n\"\"\n\"\"\n<\/div>\n<\/div>\n

    Чистовая вёрстка<\/h2>\n

    Объясняю как устроена строка на примере первой группы. Рисую переключатель сортировки и поиск, который на деле был бы выпадающим списком с фильтром по введённым буквам:<\/p>\n

    \n\"\"\n<\/div>\n

    Переворачиваю таблицу в подсказке, которую видно при наведении на линию. В оригинале значения для разных лет стоят в строке, а сравнивать цифры удобнее в столбиках:<\/p>\n

    \n\"\"\n<\/div>\n

    Гипотеза 1.2.1.1.<\/b> Возвращаемся к идее показывать на одном из концов линии кружок, который покажет разницу в числе рабочих мест и год, когда было больше. Добавляю кружки и легенду к ним. Кружки выглядят неубедительно, а легенду сложно читать.<\/p>\n

    \n\"\"\n<\/div>\n

    Снова разбираемся с данными. Оказалось, что неправильно посчитали разницу. А спустя 2-3 попытки понимаем, что показывать разницу в процентах — плохая идея. Проценты считаются от исходного значения. Было 1000 мест, стало — 1100, это +10%. Если было 1100, а стало — 1000, это −9,1%. Количество мест одинаковое, а процентное изменение разное. Сравнивать такое некорректно. Вместо процентов, берём разы. Исхожу из того, что интересуют профессии, в которых были значительные изменения, поэтому предлагаю показывать кружок, только если изменение больше, чем в 1,5 раза.<\/p>\n

    Финальный макет, к которому мы пришли через последовательные ответы на четыре основных вопроса и проверкой минимум по два варианта для каждого вопроса.<\/p>\n

    \n\"\"\n<\/div>\n

    Рома выложил прототип в Табло<\/a>. Помимо описанного, там есть разбивка по образованию:<\/p>\n

    \n\"\"\n<\/div>\n", "date_published": "2018-10-16T23:19:16+03:00", "date_modified": "2018-10-19T16:08:10+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/axios@2x.png", "_date_published_rfc2822": "Tue, 16 Oct 2018 23:19:16 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "621", "_e2_data": { "is_favourite": true, "links_required": [ "system\/library\/jquery\/jquery.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/axios@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/brooking@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/digital-score@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/middle-class-jobs@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/occs-json@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/same-input@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/dumbbell@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-10@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-10-blue@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-10-green-yellow-red@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-10-orange-blue@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/usa-inflation@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-110@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-120@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-121@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-left@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-cross-strip@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-wo-sort@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-sort@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-color@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-bars-data@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-122-layout@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/axios-hover-table@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/slope-chart-1221@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/job-market-digitalisation@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/job-market-digitalisation-edu@2x.jpg" ] } } ], "_e2_version": 3572, "_e2_ua_string": "E2 (v3572; Aegea)" }