<?xml version="1.0" encoding="utf-8"?> 
<rss version="2.0"
  xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
  xmlns:atom="http://www.w3.org/2005/Atom">

<channel>

<title>Кирилл Беляев: заметки с тегом регулярная карта</title>
<link>https://kirillbelyaev.com/ru/blog/?go=tags/squared-map/</link>
<description>о подаче информации, айдентике, интерфейсах и жизненной среде</description>
<author>Кирилл Беляев</author>
<language>ru</language>
<generator>E2 (v3572; Aegea)</generator>

<itunes:owner>
<itunes:name>Кирилл Беляев</itunes:name>
<itunes:email></itunes:email>
</itunes:owner>
<itunes:subtitle>о подаче информации, айдентике, интерфейсах и жизненной среде</itunes:subtitle>
<itunes:image href="" />
<itunes:explicit></itunes:explicit>

<item>
<title>Регулярные карты</title>
<guid isPermaLink="true">https://kirillbelyaev.com/ru/blog/?go=all/squared-maps/</guid>
<link>https://kirillbelyaev.com/ru/blog/?go=all/squared-maps/</link>
<pubDate>Tue, 07 Mar 2017 10:32:38 +0300</pubDate>
<author>Кирилл Беляев</author>
<comments>https://kirillbelyaev.com/ru/blog/?go=all/squared-maps/</comments>
<description>
&lt;p&gt;В разборе визуализации &lt;a href="http://kirillbelyaev.com/all/red-blue-usa/"&gt;о партиях, доминирующих в разных штатах,&lt;/a&gt; я рассказывал о «регулярных» картах. Вот ещё один пример из свежих &lt;a href="https://www.facebook.com/data.laboratory/photos/a.150861051771487.1073741828.135627396628186/571156109741977/?type=3&amp;theater"&gt;#Δλlikes&lt;/a&gt;. Тоже США, но сделаны иначе:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/nc-precincts-map@2x.png" width="1010" height="743" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Штат показывают откадрированной картой административного центра этого штата. Карту формируют границы водоёмов и паттерн голосов. Аляска и Гавайи тут не на своих местах.&lt;/p&gt;
&lt;p&gt;Чтобы два раза не писать. Популяризаторами приёма считаю студию «Афте зе флуд» (After the Flood). Они привели &lt;a href="http://aftertheflood.co/projects/london-squared-map"&gt;районы Лондона&lt;/a&gt; к квадратам:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="400" data-ratio="1.1461318051576"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/london-squared-bg@2x.png" width="400" height="349" alt="" /&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/london-squared-bars@2x.jpg" width="400" height="349" alt="" /&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/london-squared-dots@2x.jpg" width="400" height="349" alt="" /&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/london-squared-ts@2x.jpg" width="400" height="349" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</description>
</item>

<item>
<title>Разбор визуализации о партиях, доминирующих в разных штатах</title>
<guid isPermaLink="true">https://kirillbelyaev.com/ru/blog/?go=all/red-blue-usa/</guid>
<link>https://kirillbelyaev.com/ru/blog/?go=all/red-blue-usa/</link>
<pubDate>Tue, 07 Feb 2017 14:05:33 +0300</pubDate>
<author>Кирилл Беляев</author>
<comments>https://kirillbelyaev.com/ru/blog/?go=all/red-blue-usa/</comments>
<description>
&lt;p&gt;Сегодня разберу работу Ренди Йеипа, Стюарта Томпсона и Вилла Уэлша из Уолл Стрит Джорнал. Посмотрим, &lt;a href="http://graphics.wsj.com/elections/2016/field-guide-red-blue-america/"&gt;как менялось отношение жителей США к партиям с 1980 по 2012&lt;/a&gt;:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/red-blue-usa@2x.png" width="1112" height="890" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Визуализация состоит из 51 мини-графика, расположенные на регулярной сетке. Каждый график отражает ситуацию в одном штате. Вместе они образуют «регулярную» карту США. Авторы используют особенность данных — равномерную нарезку штатов. Из России или Европы такую карту сделать гораздо сложнее. Этот приём Дональд Норман назвал естественным соответствием. Он ускоряет поиск. Сначала считывается общая форма карты страны. А где какие штаты читатели Уолл Стрит Джорнала более-менее знают. Когда понятно, что перед глазами карта, интересующий штат легко найти в предсказуемом месте.&lt;/p&gt;
&lt;p&gt;Реальная карта для сравнения. Смотрите, как «регулярная» карта помогает сохранить компактность, оставив Аляску и Гавайи на местах:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/usa-map@2x.png" width="1370" height="888" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Посмотрим на сами графики. У них — одинаковые оси с одинаковыми шагами, что позволяет сравнивать штаты:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;по иксу отложено время: один столбик — один год (всего — 9 лет),&lt;/li&gt;
&lt;li&gt;по игреку — &lt;a href="https://en.wikipedia.org/wiki/Cook_Partisan_Voting_Index"&gt;Индекс предпочтений избирателей&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Индекс считают немного замысловато. Берут данные последней пары президентских выборов. И сравнивают среднюю долю голосов за кандидата от той партии, которая набрала больше голосов в штате, и долю голосов той же партии для всей страны. Получаются значения от 0 до 20-30 с буквой &lt;span style="color: #0485A8"&gt;D&lt;/span&gt; или &lt;span style="color: #C81305"&gt;R&lt;/span&gt;. Ноль говорит, что штат голосует, как страна в целом. А &lt;span style="color: #0485A8"&gt;D+15&lt;/span&gt;, что доля голосов за Демократов на 15% больше, чем в среднем по стране.&lt;/p&gt;
&lt;p&gt;У оси игрек нет шкалы, что затрудняет точное сравнение. Это приемлемо, когда задача — сравнить общие векторы. Положительные значения игрека (выше ноля) показывают доминирование Республиканцев, отрицательные — Демократов. Об этом говорят цвета традиционные для партий. Ниже в статье есть легенда, но интересующимся политикой цвета понятны и без неё:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/red-blue-usa-legend@2x.png" width="270" height="144" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Ещё заметил, что авторы используют не привычные мне сокращения названий штатов. Гугл и другие пишут &lt;a href="https://en.wikipedia.org/wiki/List_of_U.S._state_abbreviations"&gt;аббревиатуры штатов&lt;/a&gt; по стандарту ИСО. Здесь же — &lt;a href="https://en.wikipedia.org/wiki/AP_Stylebook"&gt;Стайлбук Ассошиейтед Пресс&lt;/a&gt;. По-моему, такой формат понятнее 2-буквенного ИСО.&lt;/p&gt;
&lt;p&gt;Теперь о визуальной части. Крупный заголовок и карта вместе выглядят эффектно — 1-е впечатление от статьи приятное:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/red-blue-usa-title@2x.png" width="348" height="400" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Но можно лучше. Главная проблема — размытые границы. Не понял, почему авторы позиционируют графики не кратно пикселям. Но понял, что показывают высоту столбиков с точностью до 15 знаков после запятой. Высокая точность — обычно плюс, но тут она добавляет шума. К тому же, видя разницу в пол пикселя в высоте столбика, зритель не может узнать точные значения. Ещё мешает жирная линейка оси икс, которая закрывает низкие столбики и полностью скрывает нулевые значения. Если убрать линейку совсем, визуализация ничего не потеряет — ось сформируют основания столбиков.&lt;/p&gt;
&lt;p&gt;Переделываю, округляя столбики до пикселей и уменьшая площадь белого. Умещаю почти полные названия. Легенду селю в Мэне. Добавляю максимальные значения игрека и точные значения при наведении на столбик:&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://kirillbelyaev.com/ru/blog/pictures/red-blue-usa-redesign@2x.png" width="1012" height="670" alt="" /&gt;
&lt;div class="e2-text-caption"&gt;&lt;a href="http://kirillbelyaev.com/pictures/red-blue-usa-compare.png" target="_blank"&gt; Оригинал и моя версия одной картинкой в новом окне&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Следующий разбор — в марте.&lt;/p&gt;
</description>
</item>


</channel>
</rss>