Информационная эстетика

120 000 лет генетической истории 193 жителей района Нью-Йорка Файл без сжатия в комментариях IBM и National Geographic в 2009 году провели совместный генетический проект. Собрали ДНК у 193 жителей района Квинс в Нью-Йорке и восстановили по мутациям пути их предков из Восточной Африки. Материал вышел под названием Genographic Project. Один и тот же путь Homo sapiens показан в двух формах: в виде таймлайна (сколько людей и когда) и в виде дуг на карте (куда и каким путём). Таймлайн миграций читается так: ● По горизонтали показано время. Слева 120 000 лет назад, справа — сегодня. Шкала логически разбита на интервалы по 10–20 тысяч лет. ● По вертикали распределены регионы мира. ● Цвет каждой полосы соответствует цвету региона на маленькой карте слева. ● Толщина потока означает количество добровольцев из Квинса, чьи предки прошли через этот регион. Все 193 линии стартуют из Восточной Африки (зелёная полоса слева). По мере движения вправо поток ветвится и в конце приведено числами итоговое распределение. Пунктирные линии показывают индивидуальные маршруты четырёх выделенных участников, чьи фотографии стоят справа. Второй разворот в виде карты с дугами-стрелками показывает обобщённый маршрут расселения с датами первого появления Homo sapiens в каждом регионе. Старт 70 тыс. лет назад в Западной Африке, конечная точка — Северная Америка 15 тыс. лет назад.

Визуальная метафора сквозь статью Статья журнала Harvard Business Review описывает структурный сдвиг в американской экономике за полвека. От экономики природных ресурсов и капитала к экономике, где главный актив это талант творцов: CEO, управленцев и специалистов с независимым суждением. В 1960 доля креативных позиций была 16% от всех рабочих мест, а в 2010 уже 33%. Из-за этого случился скачок и быстрый рост вознаграждений CEO компаний, в том числе за счёт акций. Привязка вознаграждения к акциям должна была согласовать интересы менеджеров и акционеров. Но на деле создала стимул управлять ожиданиями рынка, а не реальными показателями компании. Даётся вывод, что если «талант» сам не сбавит обороты, произойдёт ребалансировка не в его пользу через политическое регулирование. Всё это иллюстрирует метафора разрушения ионической колонны, синхронизированная с движением по статье. Я тоже люблю делать так на слайдах. Объект остаётся на одном месте, но вокруг него появляются новые смыслы и комментарии. Так читающие постепенно привыкают к нарастающей сложности и способны к концу удержать в уме 5-6 сущностей, которые сложно понять, если они появляются одновременно.

Карта внешнеторговых связей СССР Журнал «Наука и жизнь», ноябрь 1967 К пятидесятилетию Октябрьской революции редакция опубликовала разворот с картой торговых партнёров и эмблемами советских внешнеторговых объединений. Подпись сообщает: торговля с 98 странами с оборотом в 15,1 млрд рублей. Без доли в общем мировом экспорте непонятно много это или мало. В данном случае маловато — всего 4-5% по быстрой прикидке. Несколько наблюдений (много деталей, но постарался не душнить) 1. Карта построена в азимутальной проекции с центром в Москве. Расстояния от центра до любой точки сохраняются точно, остальные искажения растут к краям. Та же логика лежит в основе эмблемы ООН, только с центром в Северном полюсе. 2. ОАЭ на карте ещё нет, они будет созданы через 4 года. 3. Кипр ещё не разделён на Южный и Северный. Это случится через 7 лет. 4. Шри-Ланка ещё 5 лет будет Цейлоном. 5. Внутренние границы Центральной и Южной Африки не прорисованы. К 1967 году волна независимостей уже прошла, но впереди ещё Ангола и Мозамбик, Зимбабве, Намибия. 6. Буквально с выпуском этого ноябрьского номера от ещё длинного Омана отделится половина — Народная Демократическая Республика Йемен, которая потом соединится с Йеменской Арабской Республикой, которая пока подписана просто Йемен. Ещё интересно посмотреть на названия и эмблемы объединений: Скотоимпорт, Разноэкспорт, Союзпушнина, Совфрахт. Карта без сжатия в комментариях.

Снижение размерности тензора данных для 2D карты на примере гибридных ВИЭ Часть 2: детали для энергетиков Если ставить ветряк и солнечную панель рядом и связывать их с аккумуляторной системой (BESS), получается более стабильный и относительно дешёвый источник электроэнергии за счёт того, что суточные и сезонные пики ветра и солнца часто не совпадают. Данные из открытых источников: Global Wind Atlas: скорость ветра на высоте 150 м Global Solar Atlas: среднегодовая инсоляция горизонтальной поверхности (только до 60° с. ш.) Что видно 🟩 Лучшая зона для гибридных ВИЭ — бирюзовая полоса по засушливым поясам обоих полушарий: Сахара, Аравия, Иранское нагорье, Патагония, юг Африки, северные штаты Мексики, северо-запад Китая. Там одновременно высокая инсоляция и устойчивые ветры. 🟨 Жёлтые зоны — потенциал солнца высокий, по ветру слабый: экваториальная Африка, бассейн Амазонки, индо-малайский архипелаг. 🟦 Синие зоны с лучшим ветром: морские побережья умеренных широт и северные равнины Евразии и Северной Америки. Просто потенциала недостаточно для решения о строительстве. Для экономической оценки нужно наложить на карту слои: близость сетевой инфраструктуры, уклон рельефа, землеотвод и прочее. Это ещё более многомерный тензор данных, но в итоге всё сведётся к двухмерной карте по параметру окупаемости проектов IRR или EIRR.

Снижение размерности тензора данных для 2D карты на примере гибридных ВИЭ Часть 1: только про визуализацию Я работаю с возобновляемыми источниками энергии — ветряными турбинами и солнечными панелями. Их потенциал оценивают по отдельности. Обычно это растровые 2D слои с параметрами скорости ветра или инсоляции поверхности. Эту стопку слоёв можно назвать тензором. Но я решил оценить потенциал гибридной генерации и вывести именно на одной карте. Для этого нужно совместить два растровых слоя в один. Похожий приём я раньше использовал при анализе киноафиш: там слой светлоты накладывался на слой насыщенности. Для визуализации выбрал бивариантную дискретную карту. Давно увидел и сохранил себе пример от климатологов, но решил уменьшить количество категорий (вторая картинка — температура и осадки в Южной Америке). Легенда-сетка 3×3 и методология Каждый пиксель попадает в одну из трёх категорий по ветру и в одну из трёх категорий по солнцу. Границы — квантили по 33%, в каждой группе примерно треть точек. Сетку 3×3 выбрал, а не 5×5: девять цветов человек ещё различает, двадцать пять уже сливаются. 🟨 жёлтый: сильное солнце, слабый ветер 🟦 синий: сильный ветер, слабое солнце 🟩 зелёный: и то, и другое высокие одновременно (целевая зона для гибридных ВИЭ) Пока не уверен, что разнесение по категориям оптимальное. Надо будет посмотреть пару конкретных точек вручную и откалибровать методологию. А пока приложил пару регионов крупным планом с наложенным рельефом.

Bloomberg Businessweek: The rules designers say they never break Правила, которые дизайнеры никогда не нарушают (по их словам) Я много раз упоминал про панк-дизайн Bloomberg Businessweek начала 2010-х. И вот нашёл свод их правил в очень оригинальной подаче с кучей метафор. Выглядит неряшливо, но за фразами оказались смыслы, которые я постоянно использую. Распечатал себе как постер. Правила полностью применимы к процессу анализа и подачи информации, несмотря на слово «дизайн». После меток «МБ» идут мои мысли о том, как я трактую эти правила. 1 Don’t start a design by talking Не начинай дизайн с разговоров МБ В начале моей карьеры в консалтинге мне сказали: «Если к презентации должен прилагаться консультант для комментариев, то это плохая презентация и плохой консультант». Надо подавать информацию так, чтобы она была понятна без слов. 2 Design for the long haul Проектируй на долгую дистанцию. МБ Хорошая подача информации не требует каждый раз заново объяснять, что имелось в виду. 3 Make stairs more interesting than elevators Сделай лестницы интереснее лифтов МБ Делай так, чтобы было интересно изучать информацию и выводы (идти по лестнице), а не пролистнуть (подняться на лифте). 4 Work to make big things smaller Делай большие вещи меньше МБ Упрости информацию настолько, чтобы было легко принять решение. Сколько раз я видел, как просто накидывают всю имеющуюся информацию в риторике «там сами разберутся, что нужно». А на самом деле это значит: «мне лень думать, думай сам». 5 Don’t use gradations when you can use a solid color Не используй градиенты там, где достаточно заливки МБ1 Ясность и простота вместо лишних эффектов, которые увеличивают когнитивную нагрузку. ИИ-форматирование очень грешит перегрузом ненужными деталями. МБ2 Наш мозг реагирует на изменение чего-либо. Никому не интересно смотреть на просто синее небо, поэтому нужны облака. Или слушать одну ноту: она должна хоть как-то меняться (жанр дроун). Изменение цвета (упоминаемая заливка) должно привлечь внимание, но дальше не мешать воспринимать информацию, в отличие от градиентной заливки. 6 Don’t fight gravity Не борись с гравитацией МБ Хорошая подача информации работает с естественными привычками восприятия, а не пытается идти против них. Лично мне нравятся диаграммы Маримекко и boxplots, но много людей не знают как их читать, поэтому я не делаю их часто. 7 Avoid «click to enter» or tiny gray text Избегай «нажми для просмотра» или мелкого серого текста МБ Фраза обыгрывает кликбейт (пользователя грубо заманивают внутрь) и дешёвые рекламные приёмы, когда важное сообщение прячут в почти нечитаемый текст. Надо доносить всю информацию в одном месте, а не разбрасывать в фин. модели по 5 листам. 8 Incorporate a cat into design once a month Раз в месяц вставляй в дизайн кота МБ1 Иногда в дизайн стоит добавлять живой, человечный элемент. Даже серьёзная аналитика не обязана быть стерильно рациональной. МБ2 Возможно, это отсылка к картинам прошлых веков, где в углу иногда вписывали котов или собак, и сразу менялся тон всего полотна. Проверьте сами, когда будете в галереях! 9 Never say never Никогда не говори никогда МБ Фраза набрана шрифтом Comic Sans, одним из главных табу профессионального дизайна. Сам выбор гарнитуры подтверждает тезис, что даже она однажды может оказаться уместной. 10 Design as a team Проектируй командой МБ Аналитика не дело одиночки, а создаётся вместе с другими ролями и для других людей. Много раз видел как сотрудники не хотели общаться с коллегами и думали, что если сделать идеальный, всеобъемлющий анализ, то все всё сами правильно поймут без объяснений. Это никогда не работало)

Swarm plot в The Economist В последнем номере The Economist от 11 апреля опубликовали сразу несколько диаграмм роя (swarm plot). Обычно даже одна не в каждом номере. Мне запомнилась самая сложная трёхпанельная визуализация ударов на Ближнем Востоке. 1. Карта с пропорциональными кругами Два цвета: красные удары по Ирану и серые — удары Ирана. 2. Точечная хронология ударов по Ирану На первый взгляд это диаграмма роя (swarm plot). Но обычно на ней точки распределены вдоль одной числовой оси с разбросом для избегания наложений. А в этом примере есть ось времени (горизонтальная). По вертикали разнесены категории целей: военные, гражданские, политические и т.д. Я предположил, что это изотип Отто Нейрата, растянутый во времени. 3. Самая маленькая панель, но самая сильная по приёму График с накоплением населения в радиусе 1 км от ударов. Чем больше доля страны, тем больше ударов по населению этой страны. Я проверил источник данных WorldPop и оказалось, что это открытые пространственные демографические данные, которые я так долго искал.

Нестандартаная вёрстка (2/2): несёт смысл Плотная или разреженная вёрстка может не только украшать страницу. Расположение текста иногда само становится высказыванием. When the Earth Cracks Open Эссе о землетрясении в Сан-Франциско. И буквица первой строки расколота, и между колонками явно угадывается разлом. Wondering About Social Distancing? Социальная дистанция эпохи Ковида. Фигуры людей расставлены по странице с нарочитыми интервалами. Ein Schlag auf die Birne Запрет ламп накаливания в ЕС. Гигантская лампочка разрывает колонки сверху вниз. What Is A Catholic Family? Католические семьи с традиционными ценностями. Перст проливает свет на семью.

Нестандартная вёрстка (1/2): просто красиво На канале Как это сверстано выложили небольшую подборку примеров с отрицательным трекингом (буквы ближе друг к другу, но не уже) и интерлиньяжем (высота между строками меньше). До 1960-х набор был металлическим: каждая букву делали из отдельного свинцового брусочка. Расстояние между символами определялось физическим размером литеры. Сдвинуть буквы ближе означало стачивать металл вручную. Позже фотонабор заменил металлические литеры. Буквы хранились на негативной плёнке или диске. Свет проецировал символ на фотобумагу, и оператор сдвигал каретку на нужное расстояние перед экспонированием следующей буквы. После фотобумага с заголовком проявлялась, нарезалась и наклеивалась на макет. Ручное позиционирование каждого символа на фотонаборном аппарате сделало возможным максимально сближать и накладывать буквы друг на друга (реклама Barron’s), поворачивать буквы (плакат с цитатой Генри Форда с красной буквой O) и накладывать буквы на фотографию (реклама кофе General Foods). Сейчас и в Ворде, и в Фотошопе это делается в два ползунка (последнее изображение).

The height of social values Что общество ставит выше всего Самые высокие здания на протяжении всей истории символизировали принципы общества. Соборы в средневековых городах, правительственные здания в городах XVIII века и офисные здания в современных городах. Инфографика из газеты SCMP выстраивает 102 высочайших сооружения в истории. Цветом обозначен тип: храм, дворец, офис, жильё. Здания не отсортированы по годам строительства, но можно предположить, что чем выше и технологичнее здание, тем позже оно строилось. Из-за множества деталей (вся инфографика отрисована вручную) сначала сложно увидеть слоистость эпох. Но нужно отойти подальше или искусственно размыть детали. И тогда лучше видны эпохи, выделенные разными оттенками. Нашёл небоскрёб Меркурий, в котором я работал в крутой команде Норникеля по палладию. Изображение в большом разрешении в комментариях.

Проекция Армадилло (глобус на торе) В 1943 году венгерско-американский картограф Эрвин Райс представил серию проекций глобуса на различные поверхности. Одну из них, на внешнюю половину полутора, он выделил отдельно и назвал Армадилло. Проекция довольно ограничена в применении. Для навигации, измерения площадей или углов она бесполезна. Она не сохраняет ни форму материков, ни площади. Южный полюс и Антарктида не отображаются вовсе. Но проекция Армадилло хорошо работает как визуальный стоп-сигнал. Она выглядит как развёртка глобуса, где все континенты видны сразу, а не только перед глобусом. И сразу выделяется от того, что мы видим каждый день в Google или Яндекс Картах (проекция Меркатора, которой почти 500 лет). Сделать такую карту несложно. Легче всего скопировать мой проект на дата-виз платформе Observable, там буквально 4 строчки кода observablehq.com/@baranov/armadillo Или собрать локальный HTML на базе библиотеки D3 для JavaScript и обогатить его своими данными (мой пример с текстурой Natural Earth 2). Напишите, если кому-то нужен такой html как на картинке.