{ "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\/data-visualization\/", "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fdata-visualization%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": "717", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/happiness-vs-important-tasks\/", "title": "Экспресс-разбор графиков о связи стратегических задач утром и уровня счастья", "content_html": "

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

Максим провёл эксперимент<\/a>:<\/p>\n

\n

Я являюсь адептом стратегии «начать утро с пусть небольшой, но стратегически значимой задачи». [...]<\/p>\n<\/blockquote>\n

\n

Буквально перед новым годом я запускаю очередной опрос, чтобы в частности проверить гипотезу: есть ли связь между уровнем счастья (измерялся по шкале из одного элемента: «В общем и целом на сколько вы счастливы?» [...]) и тем, как часто респонденты (по их словам) начинают день с чего-то важнго. Измерялось уровнем согласия с утверждением: «Я стараюсь начинать свой день пусть с небольших, но стратегически-важных задач» по шкале от 1 до 5 (в картинках для наглядности я свернул ее в шкалу из трех элементов: 1,2 — редко, 3 — иногда, 4,5 — часто). [...]<\/p>\n<\/blockquote>\n

\n

Уровень счастья я тоже свернул в два элемента: :-( — это меньше 6 из 10, а :-) — все остальное.<\/p>\n<\/blockquote>\n

Эксперимент выглядит сомнительно, потому что большинство прошедших его счастливы минимум на 6 из 10. В это сложно поверить. Предполагаю, что тут присутствует ошибка выжившего<\/a>. «Несчастные» просто не читают Максима :-)<\/p>\n

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

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

Женщины и мужчины отдельно:<\/p>\n

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

Я нашёл ещё несколько затупивших, чтобы убедиться, что дело не только в профдивормации, и пошёл перерисовывать. На моих графиках хорошо бросается в глаза разница в характере ступенек у мужчин и женщин. Чем «длиннее» ступеньки, тем сильнее зависимость уровня счастья от важности задачи, с которой начинается день. У женщин зависимость явная, и именно эта женщины выправляют общий график, хотя количественно их в опросе меньше. Количество опрошенных на моих графиках кодируется высотой столбиков.<\/p>\n

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

Спасибо Роме Бунину<\/a>, который помогает мне помнить хоть что-то о визуализации данных.<\/p>\n", "date_published": "2019-01-31T12:26:22+03:00", "date_modified": "2019-02-01T09:40:32+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/happiness-vs-important-tasks@2x.png", "_date_published_rfc2822": "Thu, 31 Jan 2019 12:26:22 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "717", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/happiness-vs-important-tasks@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/happiness-vs-important-tasks-gender@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/happiness-vs-important-tasks-redesign@2x.png" ] } }, { "id": "707", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/world-cup-final-2018-france-vs-croatia\/", "title": "Как Франция и Хорватия вышли в финал Чемпионата мира по футболу 2018", "content_html": "

Five Thirty Eight сделали визуализацию о пути финалистов<\/a>. Выпустили давно, 5 месяцев как, но для хорошего решения это неважно. Тут графики шансов на победу в течении матча классно завёрстаны внутрь турнирной таблицы (почему она «таблица», когда схема). А подписи и персонажи делают из всего этого плакат.<\/p>\n

\n\"\"\n<\/div>\n", "date_published": "2018-12-13T08:32:02+03:00", "date_modified": "2018-12-14T12:04:26+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/world-cup-france-vs-croatia@2x.png", "_date_published_rfc2822": "Thu, 13 Dec 2018 08:32:02 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "707", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/world-cup-france-vs-croatia@2x.png" ] } }, { "id": "706", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/gender-color\/", "title": "Цвета для кодирования полов", "content_html": "

Всех с чего-то да подрывает. Меня расстраивает плохой дизайн. Иногда так свербит, что беру<\/a> и<\/a> переделываю<\/a>. Но в этот раз расстроил не дизайн, а призыв делать плохой дизайн.<\/p>\n

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

Прочитал статью Лизы Шарлотты Рост «Альтернатива розовому и синему: цвета для кодирования полов<\/u>»<\/a>. Статья не всеобъемлющая, но глубоко освещает тему. Тут приведено 33 цветовые пары из реальных статей — вполне наглядно.<\/p>\n

Что не так<\/h2>\n

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

\n

So what’s the problem with pink & blue? In our western culture, these colors come with the whole gender stereotype baggage. Pink means weak, shy girls who play with dolls and don’t deserve as much as boys. Blue stands for boys who need to be strong & rough. When we create a chart with pink & blue, we endorse gender stereotypes. Especially when we chart gender (pay) gaps, that’s often the opposite of what we want to achieve.<\/p>\n<\/blockquote>\n

Сами по себе стереотипы ускоряют распознование образов, а значит делают коммуникацию эффективней. К выделению опасности красном претензий не встречал.<\/p>\n

Допустим, неравенства полов нет. Будет ли тогда волновать, насколько стереотипы мужские и женские цвета? Мне тоже грустно, что половина мужской одежды синяя, а вторая чёрная. Но это не повод усложнять читателям жизнь:<\/p>\n

\n

It’s not even necessary to explain the colors first.<\/p>\n<\/blockquote>\n

Как можно такое писать в контексте визуализации данных?<\/p>\n

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

Отдельно не понимаю, почему сила обязательно холодная, а слабость — тёплая.<\/p>\n

Что так<\/h2>\n

1.<\/span> Лиза пишет, что вредно менять стереотипные цвета местами — красить розовым мужчин и синим женщин:<\/p>\n

\n

I’m afraid that this is dangerous. Charts that flip the stereotypical colors can be hard to read: If readers see pink & blue in a chart about sexes, they won’t be very likely to consult the legend.<\/p>\n<\/blockquote>\n

Не удивлюсь, если «Кварц» тестирует гипотезы. Тесты, конечно, не оправдываю дискомфорт читателей. <\/p>\n

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

2.<\/span> История выбора цветов в «Телеграфе» хороша тем, что показывает, как можно решать задачу. Кусочек:<\/p>\n

\n

The colors are inspired by the “Votes for Women” campaign in the UK as part of the initial suffrage movement in the early 20th century.<\/p>\n

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

“When deciding which gender aligned with which color, it was more a case of trying to prioritize women in the order of genders. Against white, purple registers with far greater contrast and so should attract more attention when putting alongside the green, not by much but just enough to tip the scales. In a lot of the visualisations men largely outnumber women, so it was a fairly simple method of bringing them back into focus.” —Fraser Lyness<\/p>\n

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

Что было бы полезно<\/h2>\n

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

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

2.<\/span> Не кодировал бы пол оттенками разной тональности одного цвета. Или цветами с заметным различием тона. Один цвет делает мужчин и женщин равными, но тон снова назначает главного. Тех, что темнее становиться визуально больше. Те, кто бледнее становятся дополнительными.<\/p>\n

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

3.<\/span> Не использовал бы для одного из полов чёрно-белые оттенки. Они тоже приводят к визуальному неравенству. В зависимости от фона могут приводить к ситуации из 2-го пункта. Чёрный с чёрным же текстом превратит пол в базовый, а второй цветной пол будет уже чем-то отличаться.<\/p>\n

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

Серый легко превращается в выключенный или в не наполненный данными на фоне цветного.<\/p>\n

Мелочи важные при визуализации данных<\/h2>\n

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

\n\"\"\n<\/div>\n", "date_published": "2018-12-11T09:28:47+03:00", "date_modified": "2018-12-30T13:42:43+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-web-page@2x.jpg", "_date_published_rfc2822": "Tue, 11 Dec 2018 09:28:47 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "706", "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-web-page@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-mix-up@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/votes-for-women@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/national-picture@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-spectrum@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-shades@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-black@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gender-color-compare@2x.png" ] } }, { "id": "699", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/coffee-taste-chart\/", "title": "График кофейного вкуса", "content_html": "

Вкус кофе описывают по-всякому. Даже так:<\/p>\n

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

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

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

В классификации оттенков вкуса я не разбираюсь, поэтому сужу только о видимой информации. Похоже, на графике перемудрили с цветами. Там две оси, которые хорошо бы показали два градиента. Горизонтальный — от зелёного (кислого) до оранжевого (землистого) и вертикальный — от светлого (слабая обжарка) к тёмному (сильная):<\/p>\n

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

P. S. Спасибо Лео за ссылку!<\/p>\n", "date_published": "2018-11-23T11:37:43+03:00", "date_modified": "2018-11-23T13:15:48+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/scaa-flavor-wheel@2x.jpg", "_date_published_rfc2822": "Fri, 23 Nov 2018 11:37:43 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "699", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/scaa-flavor-wheel@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gget-chart@2x.jpg", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/gget-chart-recolor@2x.jpg" ] } }, { "id": "698", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/street-orientations-interactive-map\/", "title": "Интерактивная карта с направлениями улиц", "content_html": "

Писал недавно о направлениях улиц<\/a>:<\/p>\n

\n

Джефф Боинг визуализировал направления улиц в 25 городах мира и в 25 городах США в виде круговых гистограмм.<\/p>\n

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

С такими графиками выбрать, куда поехать, гораздо проще. Чем больше заполнен круг, тем больше разных направлений улиц и тем интереснее прогулка по такому городу.<\/p>\n<\/blockquote>\n

Оказалось, Владимир Агафонкин из Мепбокса сделал интерактивную карту с гистограммой для видимого её участка<\/a>. И теперь перед путешествием легко оценить уютность города.<\/p>\n

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

\n\"\"\n<\/div>\n", "date_published": "2018-11-22T11:30:38+03:00", "date_modified": "2018-11-22T11:30:25+03:00", "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/manhattan-vs-boston@2x.png", "_date_published_rfc2822": "Thu, 22 Nov 2018 11:30:38 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "698", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/manhattan-vs-boston@2x.png", "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/road-orientation-map@2x.jpg" ] } }, { "id": "656", "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/early-spring-in-usa\/", "title": "Наступление весны в США в 2018 году", "content_html": "

Весна 2018-го была необычно тёплой в Европе и США. Вашингтон Пост<\/a> и Нью-Йорк Таймс<\/a> с разницей в день выпустили статьи с визуализациями о начале весны в штатах.<\/p>\n

Основной источник данных один — Национальная сеть фенологии США<\/a>. Тем интереснее сравнить результаты. Дополнительно ВП ссылается на Национальное управление океанических и атмосферных исследований<\/a>, например, в прогнозе. Но вместе графики не собираются в историю — просто отдельные картинки примерно об одном и том же.<\/p>\n

Заглавная визуализация ВП показывает отклонение весны 2018-го от среднего за 1951...1960 и 2006...2015, кодируя листьями разного цвета и размера. Началом весны считают появление первых листочков.<\/p>\n

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

НЙТ «классической» картой показывает отклонения от среднего за тридцатилетний период строго на 22 марта 2018-го и с отклонениями:<\/p>\n

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

Данные за 30 лет ВП показали через small multiples<\/a> (на русском до сих пор нет общепринятого термина). Как каждый год отклонялся от среднего за эти же 30 лет:<\/p>\n

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

А НЙТ усреднили данные и анимировали. Усреднение съело данные, но формат получился крайне понятным:
\n

Блумберг выпустил наглядную и интересную визуализацию об использовании земли<\/a>.<\/p>\n

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

Весь секрет в хорошей элементарной частице данных<\/a> — квадратик равен 250 тысячам акров. И из этих квадратиков собирается вся страна.<\/p>\n

Сохранил визуализацию в видеоформате:<\/p>\n

\n