Я вижу, что tilemapper'ом пользуются, но редко вижу результат. А для развития сервиса это важно. Поэтому у меня к вам большая просьба, если вы увидели где-то или сами пользуетесь, делиться ссылками или результатом здесь, в комментариях, или в личке. Спасибо! 🤓

Небольшое обновление Tilemapper'а

https://mizinov.pro/tilemapper

Самой частой причиной обращений за поддержкой было несоответствие данных CSV-формату. Excel и Google Sheets не всегда явно показывают, что при сохранении CSV вы на самом деле получаете DSV-файл. Решил эту проблему исправить:
1. Добавил поддержку DSV-формата для таблиц. Теперь в качестве разделителя в данных, помимо запятой, можно использовать также точку с запятой или символ табуляции.
2. Добавил поддержку российского формата для десятичных дробей. Теперь дробную часть числа можно отделять не только точкой, но и запятой.

#tilemapper

SND раздали очередные награды. Среди золотых призёров старички: NYT, Reuters, SCMP, NG, но есть и другие: Helsingin Sanomat, La Nacion, ESPN. Многие проекты, если не все, в формате мультимедийных лонгридов, которые многие вокруг меня постоянно пытаются похоронить. Но формат живёт! NYT как обычно экспериментирует, остальные тоже стараются не отставать от лидера. Фернандо Баптиста в очередной раз взял золото за портфолио, тут никаких сомнений, награждать Фернандо можно даже не глядя на работы, он лучший. 🧐

Учитесь у лучших, как говорится. Список призёров по ссылке.

https://airtable.com/appiN89fFgbchQOjp/shrYjApStRUnsHHNL/tblQwasMCdptn7RaK?viewControls=on

https://spacemen.tass.ru

Восемь лет назад мы запустили проект, в котором показываем всех космонавтов (астронавтов/тайконавтов) и их основные достижения. Мобилка там не очень, но десктоп хороший. С Днём космонавтики! 🚀

#тасс #спецпроект

В не очень далёкой перспективе МКС будут сводить с орбиты — в процессе утилизации. И оказывается я ещё не показывал здесь свой любимый проект про кладбище космических аппаратов. Немедленно исправляю эту досадную оплошность. 😅

Объяснить другим за что я обожаю работу над инфографикой бывает непросто. Но в этом проекте на этот вопрос отвечает буквально всё:
1. Интересная идея — показать место затопления космических аппаратов, и объяснить почему это место не случайное.
2. Сбор данных — найти непростой источник (энтузиаст, собирающий данные по собственной инициативе). Установить контакт и получить данные. Выяснить, что данные всё-таки неполные и с ошибками. Провести скрупулёзную работу по исправлению и дополнению данных. (@vahi_sa 🤝)
3. Карта — простроить картографический слой проекта (карты — это почти всегда красиво и интересно).
4. Дизайн — раскрыть тему минимальными визуальными и текстовыми средствами. Но всё-таки, помимо общей композиции, уделить внимание и мелочам. 🧐
5. Пасхалка — добавить небольшую деталь, которую может заметить только настоящий задрот, знающий всё о станции «Мир». 🤔

#тасс #статика

Вторая половина челленджа #DuBoisChallenge2025 позади. Время посмотреть вторую пачку анимированных постеров.

Та-да-а-ам! Финал! 🥳

Десятый лист — комплексная инфографика, в основе которой накопительный барчарт. Самый неприятный из-за массы совершенно ненужных мелочей. Очень много рамочек, стрелочек, скобочек... Ещё фотографии (!) и прочие рисунки. Но на финишной прямой, когда уже есть пачка наработанных решений, как будто легче все эти нюансы разгребать. В датасете была ошибка, исправил вручную по оригиналу.

Анализировать тут особо нечего, из странных решений Дюбуа только соединение линиями столбцов разных категорий. Но после всех его предыдущих листов, на это уже можно закрыть глаза. 😅

https://observablehq.com/@mizinov/dubois-challenge-2025-10

#DuBoisChallenge2025

Небольшое обновление Tilemapper'а

https://mizinov.pro/tilemapper

Заметил несколько кейсов, когда пользователи добавляют численные значения на плитки вручную. Я не планировал такой апдейт по двум причинам:
1. Числа довольно сложно регламентировать по длине.
2. В Tilemapper есть опция отображения микрографиков, которые занимают всё свободное место на плитке.

Проблему с длиной числа я попытался решить маской. К сожалению, SVG-маски до сих пор не понимает Adobe Illustrator, который часто используют в производственной цепочке. В результате адаптацию чисел под плитку оставляю на пользовательской стороне, просто не забывайте, что для больших чисел можно выносить млн/млрд/трлн в заголовок. А длинные дроби округлять до подходящего числа знаков после запятой. 🧐

Проблему спора за место между числами и микрографиками я решил исключающим образом — если вы включаете отображение чисел, микрографики выключаются и наоборот. 🤔

#tilemapper

Девятый лист — у такой визуализации нет общепринятого названия, поэтому пусть будет «составной пайчарт».

Неаккуратность расположения подписей на этом листе не лезет ни в какие ворота, так что я не стал даже пытаться повторить их.

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

https://observablehq.com/@mizinov/dubois-challenge-2025_9

#DuBoisChallenge2025

70 лет назад в 1955 году состоялась защита кандидатской диссертации советского историка, этнографа, лингвиста и переводчика — Юрия Кнорозова. Он сломал бытующее в мировой науке мнение о невозможности расшифровки письменности майя, доказав, что их письменность была не иероглифической, а словесно-слоговой. Результат его работы был настолько выдающимся, что на защите кандидатской провели голосование и за присуждение Кнорозову степени доктора наук. Очень редкий случай.

Немного «магии чисел»: родился в 1922, защитился в 1955 (ему было 33), умер в 1999 году.

#тасс #статика

Восьмой лист — барчарт с «выкрутасом». Излюбленный приём прошлого — загнуть бар, акцентируя тем самым его (вылезающую за пределы листа) величину. Ну и чтобы общий масштаб не «съел» малые величины. Сегодня такой приём считается на грани фола, а иногда и за гранью. 😅

Подписи опять ничего кроме раздражения у верстальщика не вызывают, поэтому воровнял как посчитал нужным. 🧐

Судя по данным, датасет повторяет лист Дюбуа, но загнутый бар по длине отличается. Либо построения Дюбуа ошибочны, либо... 🤷‍♂️

https://observablehq.com/@mizinov/dubois-challenge-2025_8

#DuBoisChallenge2025

https://leonov-v-kosmose.tass.ru

Уже 60 лет прошло (буквально вчера) с момента первого выхода человека в космос. По этому поводу вспомнил наш проект, к 55-летию. Где мы попробовали поместить читателя на место Алексея Леонова, чтобы хоть немного представить себе каково это было, так сказать, увидеть своими глазами. 🧐

#тасс #спецпроект

Седьмой лист — барчарт закрученный в спираль. Так, конечно, делать не надо — сравнивать длины спиралевидных линий нормальному человеку очень сложно. Но уж если по какой-то причине вы решились, то нужно простраивать именно длину линий-баров, а не угловое положение их концов, как поступают очень многие (это не полярные координаты 🧐). Признаться, я ждал тут ошибки со стороны Дюбуа, но он с хорошей точностью построил длины линий. 🤝

Вообще спираль довольно сложная для построения фигура (у меня даже есть для этого инструмент), но после изучения и обмеров оригинала стало ясно, что график Дюбуа построен на полуокружностях с дискретно меняющимся радиусом. Такой алгоритм написать намного проще. Пару «закулисных» скринов реконструкции спирали в Illustrator'е смотрите в комментах.

Осталось непонятно, почему Дюбуа максимальный бар довёл до какого-то рандомного положения? 🤔 Кроме как вручную эту точку никак не задать.

https://observablehq.com/@mizinov/dubois-challenge-2025_7

#DuBoisChallenge2025

https://docs.google.com/spreadsheets/d/1SVw2bBolttbAPxKlO8qlqudCYo_NjHw8iXAqLBqcN7Y/edit?usp=sharing

Собрал датасет проектов-участников международного конкурса инфографики Information Is Beautiful Awards. Есть на что посмотреть, есть что анализировать и сохранять в Избранное. 🤔

Ну и вспомнить наши былые достижения, конечно. 🧐

#iib #датасет

Шестой лист — группированный барчарт (даже два). Задача кажется элементарной, но если действительно реконструировать оригинал, то нужно повторить последовательность с которой группы баров перекрывают друг друга. Это усложняет алгоритм построения. 🤔 В датасете была ошибка, исправил вручную по оригиналу.

Дополнительную сложность создаёт обилие фигурных скобок, с точки зрения современной инфографики, абсолютно ненужных. На этом листе, с банальными барчартами Дюбуа также не справился с композицией, расположение элементов скорее мешает восприятию. Это хорошо видно по подписям — они опять разного кегля там, где должны и могли быть одного. 🧐

https://observablehq.com/@mizinov/dubois-challenge-2025_6

#DuBoisChallenge2025

https://observablehq.com/@mizinov/stacked-bar-css-colorizer
https://observablehq.com/@mizinov/piechart-css-colorizer

Иногда, в качестве индикатора, надо добавить на страничку какой-то совсем простой график, типа пайчарта или накопительной диаграммы. И подключать для этого библиотеку вроде d3 нет резона, да и писать генератор графика в svg тоже.

Такие индикаторные графики можно рисовать директивами создания градиентов в CSS. Для демонстрации принципа набросал два простейших инструмента для stacked bar и pie/donut chart.

P. S. И конечно же всё это можно анимировать средствами CSS. 🧐

#observable #код

Первая половина челленджа #DuBoisChallenge2025 позади.

Напоминаю, что челлендж посвящен американскому социологу и общественному деятелю Уильяму Эдуарду Бёркхардту Дюбуа. Задача челленджа — реконструировать современными средствами инфографические датавиз-постеры с его парижской выставки 1900 года. Челлендж проводится уже четвёртый год (с 2022). Организаторы выбирают 10 постеров и дают неделю на реконструкцию каждого из них.

В качестве итога первой половины, собрал несколько простых анимаций.

P.S. Скажу по секрету, готовы все десять, но об этом... 🤫

Пятый лист — площадной «бабл» график (на самом деле нет 😅). Думал реализовать с помощью окружностей и масок, но понял, что без эллиптических арок тут красиво не сделать — хотел не больше одного svg:path на фигуру.

В этом графике Дюбуа видно сразу несколько проблем.

Во-первых, он не площадной, хотя таким кажется. И дело даже не в том, что площади нарушаются треугольными вырезами (такой дизайн), здесь банальная ошибка (или попытка манипуляции 🤔) — за параметр выбран радиус окружности, а не её площадь. Для сравнения, положил корректную площадную версию в комменты (в коде сделал переключатель версий).

Во-вторых, при таком наложении окружностей считывается в большей мере цвет, а не размер. То есть может сложиться впечатление (а так и есть), что красного или бежевого меньше, чем черного или желтого. Но параметром тут должна быть площадь всей окружности, а не только её видимой части. Это частая проблема площадных графиков наложенных друг на друга.

В-третьих, в попытке сделать визуализацию выразительной, Дюбуа, на мой взгляд, не справился с подписями параметров и годов — читателя может запутать какая сумма к какой окружности имеет отношение. Плюс годы (впрочем, и суммы тоже) пришлось подписывать шрифтом разного кегля. 🧐

https://observablehq.com/@mizinov/dubois-challenge-2025-5

#DuBoisChallenge2025

Существуют разные формы синестезий (взаимосвязей сенсорных систем человека). Среди них есть и графемно-цветовая синестезия — когда буква ассоциируется с цветом.

В клипе тоже есть буквенно-цветовая ассоциация, хотя я не уверен, что это как-то связано с синестезией. Как бы то ни было, положим в копилку этот редкий пример датавиза в нашем культурном фоне. 😎

New Order - Blue Monday (Official Lyric Video, переиздание 2020)

#датавизвокруг

Четвёртый лист — линейный график. Сама кривая немного отличается, потому что построена по датасету, а не обведена с оригинала. 🧐

Небольшое отступление: я преследую цель достаточно точно повторять листы Дюбуа, но... в содержательном смысле, а не буквально. То есть такие детали как фактура и искажения бумаги, «неровности» шрифтов и т. п. в расчёт не беру. Периодически делаю по-своему, но зачастую иду на повторение деталей оригинала, даже когда они являются ошибками самого Дюбуа (про что буду объяснять подробней).

Изучая оригинал отметил, что положения надписей на сетке графика не случайны, а соответствуют либо точечным событиям (тогда они стоят на таймлайне вертикально), либо продолжительным (тогда они вписаны по ширине в соответствующий период). Этот принцип вынудил Дюбуа сжать подпись последнего периода, и мне тоже пришлось так сделать, что конечно же в наши дни считается довольно грубой дизайнерской ошибкой. 🤔

https://observablehq.com/@mizinov/dubois-challenge-2025-4

#DuBoisChallenge2025

Небольшое обновление Tilemapper'а

https://mizinov.pro/tilemapper

1. Добавил «хвост» в легенде для дискретной цветовой шкалы. Это избавляет от необходимости вручную править максимальное значение, чтобы соответствующий цвет оставался на карте. Избитая проблема связанная с тем, что для дискретных цветов рассматриваются не точки, а диапазоны, которых очевидно на единицу меньше, чем отметок на шкале. Раньше приходилось править числовые значения отметок, чтобы сохранить вариативность цветов на карте в соответствии с легендой. Теперь этого делать не нужно. 🤓

2. Вторым примером «по-умолчанию» в поле ввода адреса google-таблицы сделал датасет, содержащий данные для микрографиков. На всякий случай, прилагаю ссылку на соответствующую табличку. 🤔

https://docs.google.com/spreadsheets/d/1YQ0ahil4X6Rhpc1skwDHHL3V3nG4hfZJ1_xaC-RqaJ0

#tilemapper

Сэмюэль Тимбо (Samuel Timbó) с 2021 года трудится над своим open source детищем Unit — системой интерактивного визуального программирования. Тема не новая, в прошлом мне доводилось поработать в подобных средах: vvvv (на винде) и Quartz Composer (на маке). Но тут меня привлекла эстетика и организация интерфейса, и глубина абстракций на которую среда позволяет погрузиться, вплоть до директив языка программирования. 😳 В отличие от того, с чем я знаком, кроме визуализации схемы алгоритма, Unit визуализирует и процесс его работы. Выглядит отлично, сразу захотелось попробовать. 👌

#интересно #схемы

Третий лист — хороплет (на самом деле нет 😅). Для удобства работы в Observable, пришлось поменять проекцию на WGS84 с помощью QGIS. Потом через Mapshaper поменял формат на topojson, чтобы ужать объём файла. Данные размещал по центроидам районов. Внутренние границы немного отличаются от оригинала, видимо не учли исторические изменения. Для подписей подобрал на Google Fonts более-менее похожий «рукописный» шрифт.

Выяснилось, что цвета на карте не привязываются к данным, то есть с одной стороны карту называют хороплетом, что подразумевает параметрическую окраску. Но, в отличие от других листов Дюбуа с хороплетами, на этом нет легенды и никакие данные не дают такое распределение цветов (в комментах примеры с подходящими по числу категорий данными, можете убедиться сами). Составил табличку соответствия цветов вручную и подвязал к проекту. 🤔

Изучая оригинал, обнаружил ещё пять точек — крупных городов. Их тоже пришлось геокодить дополнительно, в материалах к челленджу этих данных нет. 🤨

https://observablehq.com/@mizinov/dubois-challenge-2025-3

#DuBoisChallenge2025

Дата-арт про мои идеальные дни🇯🇵

В сентябре 2024 года съездили с Антоном на девять дней в Токио. Конечно же, мне было мало 1000+ кадров на телефоне и фотоаппарате, и я решила сохранить воспоминания еще и в формате данных😵‍💫

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

Оформление же общего плаката долго откладывала — впервые возникла необходимость в иллюстративном фоне, видимо, нужно было набраться сил. И вот вдохновение застало на этой неделе😁

Под дизайнерским приглядом Антона получилась первая графичная версия плаката с узнаваемой горой Фудзи. Потом осмелилась на второй вариант — более мягкий и с отсылкой на Токио. Выбрать один не смогла🙃

Подробнее про процесс позже, а сейчас можете изучить плакаты и легенду. По ссылкам оставила хайрезы: плакат_1, плакат_2, легенда.

P.S. Название проекта — отсылка на одноименный фильм 2023 года. Смотрела его перед поездкой и еще не раз пересмотрю💔

#датаарт #личное

В холле компании Github висит экран с таким дашбордом. Тут в реальном времени (если правда) показываются все push/pull реквесты и прочая активность пользователей на сервисе.

#интересно #карты

Второй лист — барчарт обыкновенный. Всё ещё просто, но следующая задача будет посложнее... 😅

https://observablehq.com/@mizinov/dubois-challenge-2025-2

#DuBoisChallenge2025

Решил зачем-то вкатиться в DuBois Challenge 2025, с другой стороны, на кону журнал Nightingale и что-то там ещё — вдруг повезёт. 😅

Правила простые: 10 недель, раз в неделю организаторы выкладывают один из листов с парижской выставки Дюбуа (темнокожего американского социолога и борца за гражданские права) 1900 года. Задача: воссоздать лист современными инструментами. Визуализации несложные, много времени занять не должны... Буду делать в основном в Observable.

Первый лист — сравнение площадей фигур. В оригинале мешки нарисованы вручную, и их площадь не очень точно отражает показатели. Я всё-таки решил площадь считать, чтобы всё было точно — выбрал плюс-минус похожую геометрическую фигуру — овал (ширина два диаметра, высота один диаметр). У такой фигуры площадь зависит только от радиуса, достаточно делать scale на частность величин.

Нашёл более-менее похожий шрифт и подтянул с Google Fonts.

https://observablehq.com/@mizinov/dubois-challenge-2025-1

#DuBoisChallenge2025

https://spec.tass.ru/doroga/

27 января была годовщина прорыва блокады Ленинграда. По этому поводу хотел вспомнить наш проект Дорога жизни. Он затрагивает интересную тему — техническая и логистическая сложность обеспечения и существования ледовой трассы.

Самым поразительным в процессе работы было то, насколько сложно раздобыть информацию по теме. Особенно это касалось карт и каких-либо технических деталей обеспечения трассы. Куча фотографий, которые мы не можем использовать. Карты, нарисованные от руки и не совпадающие с географией. Изобретения, от которых остались лишь обрывки чьих-то воспоминаний. Даже некоторые музейные работники рассказывают какие-то байки, а не действительно интересную и важную информацию. 😵‍💫

Но мы были настолько въедливыми и дотошными, что нарыли практически всё, что было нужно. Коллегам ТАСС Инфографики 🫶

#тасс #спецпроект

В ролике Howtown рассказывается о городе, который большую часть года находится в тени гор. Этот факт использовал художник для своей инсталляции — он с помощью больших зеркал, расположенных на склоне горы, освещает небольшую область в центре города. 😳

Упомянутый инструмент меня заинтересовал. Пока искал, выяснил, что есть целый ряд сервисов, показывающих покрытие тенью от рельефа (и зданий) поверхности Земли в заданный момент времени. В самом ролике — бесплатный Shademap: https://shademap.app 😍

#интересно #карты

Интересный артефакт — рельефная модель горы с NFC-меткой, по которой открываются Google-карты и позиционируются на соответствующие координаты. Неоднократно отмечал, что крутые вещи рождаются на стыке технологий. 🧐

Единственное, на мой взгляд, странное решение — делать содержательной дно модели, а не один из боковых фасадов. Так и метка со смартфоном работала бы и саму модель горы было бы видно. 🤔

#интересно #карты