Обзор за 30 секунд: Эта страница — «живой пример» системы визуализации Taiwan.md — каждый из девятнадцати внутристатейных модулей визуализации отрендерен один раз, все на реальных данных Тайваня (соотношение цены жилья к доходу, государственное жильё, старение населения, референдумы, соотношение медсестёр к пациентам, мандаты в законодательном юане). Она является партнёром редакционного руководства graph.md: graph.md объясняет «когда какой использовать, как делать правильно, какой синтаксис писать», а эта страница показывает «как это выглядит» напрямую. Каждый модуль рендерится чистым HTML/SVG, поэтому люди, скринридеры, Google и ИИ-краулеры читают одни и те же данные — именно поэтому мы выбрали статическую визуализацию, а не интерактивные графики.
Пиша статью о цифрах, больше всего боишься превратить данные в стену нагромождённых чисел, где читатель к третьему проценту уже отключается. Работа визуализации — превратить «плотный простой текст из чисел» в «структуру, читаемую за один взгляд».
Но у визуализации Taiwan.md есть дисциплина, которой нет у других: мы делаем только ту визуализацию, которую понимает LLM. Интерактивный график на D3 или Canvas выглядит эффектно, но GPTBot, PerplexityBot, ClaudeBot и другие ИИ-краулеры не выполняют JavaScript — для них этот график — пустое место. А наши графики на semantic HTML и inline SVG содержат данные прямо в исходном коде, ИИ читает их на шести языках, цитирует тайваньские данные от первого лица. Визуализация, понятная LLM — это визуализация суверенитета.
Ниже девятнадцать модулей — от простейшего «одно большое число» до «кирпичной карты округов» и «дуги мандатов» — представлены по порядку. Полные версии синтаксиса и принципов дизайна — в graph.md, здесь только по фразе «что это и когда применять».
Крупное число tw-figure
Простейшее и одновременно наиболее мощное: один драматичный цифровой показатель развёрнут на весь экран, с контекстом до и после — рассказывает историю трансформации. Идеально для вводного «удара молотом» (sledgehammer stat).
Набор показателей tw-stat
Когда абзац набит тремя-четырьмя ключевыми цифрами в ряд, лучше не писать длинное предложение, а выстроить их в линию карточек — читатель пробегает взглядом за секунду.
Модули с данными (набор показателей, карточка сравнения, политическая временная ось) так же как модули графиков должны иметь строку Источник:. Аудит всего сайта за 2026-07 выявил: модули, за которыми следили автоматические шлюзы, имели 100 % простановку источников; три высокочастотных модуля, за которыми не следили — в 40 % примеров были без источников. Теперь они тоже прошли через шлюз viz-health.
Карточка сравнения tw-versus
Поточечное сопоставление двух систем, двух позиций или двух состояний — до и после. Слева — тёплые тона, справа — холодные, посередине «vs», разница читается строкой за строкой.
Полосы сравнения tw-bars
Сравнение или ранжирование небольшого числа категорий, длина горизонтальных полос автоматически масштабируется по значениям, максимум растягивается на всю ширину. В данных модуля последней строкой добавьте Источник: — автоматически станет подписью источника под графиком.
Решётчатая диаграмма tw-waffle
Состав части относительно целого, сотня клеток — сотня процентов, нагляднее круговой диаграммы — клетки можно досчитать. Подходит для данных «доля каждой категории», сумма которых ≈ 100.
Политическая временная ось tw-timeline
Хронология ключевых узлов режима или политики, связанная узлами временной оси. Важно: это «визуальная помощь», а не замена нормальным подзаголовкам — редакторская хроника («1975 год…» как заголовок) и визуальная временная ось — разные вещи.
Карточка цитаты tw-quote
Когда одна фраза концентрирует всё ядро напряжения статьи — разворачиваем её в карточку цитаты. Кавычки не ставим сами — модуль добавит. Цитата должна быть дословной, проверяемой.
Дом за 30 млн становится домом за 60–70 млн… грабят бедных, дают богатым — государство платит за перестройку дома богатых
Строка источника tw-source
Собирает источники аналитического фрагмента в один незаметный чип, ставится рядом с абзацем. Доверие — часть кураторства — тайваньские цифровые СМИ часто забывают ставить источники, вот где мы можем быть другими.
Платформа недвижимости МВД, Реестр реальных цен, Центр исследований недвижимости Чэньчжи, Вестник Законодательного юана, Комитет по жилью Гонконга
Поле пояснения tw-note
Половина доверия к дата-статье — в «как ты это считал». Журналисты в дата-журналистике используют блоки 【Пояснение】 для описания методики расчёта, а (прим.) для указания исправлений — мы оформили эту конвенцию в модуль. Первая строка — одно из: Пояснение/Метод/Прим./Исправление/Обновление, остальные строки — отдельные абзацы.
Линейный график tw-line
Четыре и более временных точки — тренд, рисуется inline SVG как ломаная, пределы оси Y подписаны, чтобы читатель видел диапазон. Главное — автоматически генерируется скрытая таблица данных, которую читают скринридеры и ИИ-краулеры. График — для людей, таблица — для машин, источник один.
| Год | Вся страна |
|---|---|
| 2014 | 841 |
| 2016 | 932 |
| 2018 | 857 |
| 2020 | 920 |
| 2022 | 961 |
| 2024 | 1076 |
| База: старт 2014 | 841 |
| Источник: Центр исследований недвижимости Чэньчжи, Платформа недвижимости МВД |
Линейный график также поддерживает базовую линию: добавьте строку База: метка | значение — рисуется пунктиром, без точек, только с одной меткой, визуально чётко отделена от измеренного ряда. Читатель не перепутает фиксированный порог с измеренными данными.
График наклонов tw-slope
Когда всего «две временные точки», линейный график тратит пустое пространство посередине. График наклонов соединяет два конца прямой — крутизна говорит сама за себя: кто вырос сильнее, кто обогнал кого — видно за один взгляд. Метка в начале строки с * подсвечивает конкретный ряд, остальные автоматически уходят в серый фон как контекст.
| 2014 | 2024 | |
|---|---|---|
| Вся страна | 8,41 | 10,76 |
| Тайбэй | 12,0 | 16,60 |
Тепловая карта tw-heatmap
Матрица сравнения «район × показатель» или «год × категория». Каждый столбец нормализован по своей шкале цвета, чем больше число — тем теплее. Это по сути HTML-таблица, поэтому изначально читаема ИИ — именно поэтому в нашей системе тепловая карта лучше «просто цветной картинки».
| Округ | Соотношение цены к доходу (крат) | Нагрузка ипотеки (%) |
|---|---|---|
| Тайбэй | 16,60 | 63,9 |
| Синбэй | 13,03 | 56,9 |
| Тайчжун | 11,11 | 48,0 |
| Таоюань | 9,0 | 40,0 |
| Источник: Платформа недвижимости МВД | – | – |
Точечный график tw-dot
Столбиковая диаграмма сравнивает «объём», точечный — показывает «распределение»: все точки на одной шкале, видно, кто сгустился, кто — выброс. Одно значение на строку — полоса точек (dot strip); два значения — отрезок «отсюда до туда»; три значения (точечная оценка | нижняя граница | верхняя граница) — полоса с доверительным интервалом как в социологических опросах. ±3 % выборочной погрешности не должны пропадать — это честность, которой чаще всего жертвуют в год выборов. * так же работает для акцента.
Накопленная полоса tw-stack
Решётчатая диаграмма подходит для «одного целого»; накопленная полоса — для сравнения состава сразу по нескольким рядам — каждый ряд автоматически нормализован к 100 %, при достаточной ширине значения пишутся прямо на цветных сегментах.
| Референдум | За | Против |
|---|---|---|
| 2018 «Ядерное вместо угольного» | 59 | 41 |
| 2021 «Перезапуск 4-го блока» | 47 | 53 |
| 2025 «Продление 3-го блока» | 74 | 26 |
| Источник: Официальные утверждённые результаты трёх референдумов ЦИК |
Пирамида tw-pyramid
Две столбиковые диаграммы спина к спине, слева — один лагерь, справа — другой, общие метки посередине — классика демографии. Здесь смотрим на «тяжелую голову, лёгкие ноги» шести округов: слева — дети, справа — пожилые, сравниваем — старение перестаёт быть абстрактным процентом.
Кирпичная карта tw-tiles
У хороплет-карт Тайваня две старые проблемы: Хуалянь и Тайдун по площади слишком велики и крадут визуальный вес, а ИИ-рисованные контуры Тайваня постоянно превращаются в «что-то между оливкой и картофлем». Кирпичная карта раскладывает 22 округа в равные кирпичи (раскладка зашита в систему по реальным относительным позициям), каждый кирпич одинакового веса, цифра написана на кирпиче. Форма всегда верна — потому что мы её вообще не рисуем.
Изометрическая диаграмма / диаграмма единиц tw-iso
«174 891 домохозяйств» — цифра, которую прочитал и забыл; девять точек, которые можно пересчитать пальцами — нет. Диаграмма единиц заменяет большую цифру на «один символ = столько-то» — счётные единицы. Это приём репортеров при материалах о дальневосточной рыбной ловле: безликую огромную цифру меняют на единицу, ощутимую для людей. Символы только целые (не режут пополам), точное значение пишется рядом.
● ≈ 1
Дуга мандатов tw-arc
У парламента своя специальная диаграмма состава: полукруг точечной сетки, один мандат — одна точка, партии в порядке перечисления выстраиваются в непрерывные сектора. Круговая диаграмма сравнивает углы (глаз у людей к этому плохо приспособлен), дуга мандатов позволяет досчитать точки, линия большинства нарисована именно там, где должна быть. Здесь результаты выборов в Законодательный юань 2024 года: 113 мандатов, три партии не имеют большинства, та пунктирная линия — отправная точка всей последующей битвы отзывов. Важно: это диаграмма парламента; выборы глав 22 округов типа «один округ — один победитель» — для них ниже кирпичная карта.
| Значение | |
|---|---|
| Коминьдан | 52 |
| Миньцзиндан | 51 |
| Тайваньская народная партия | 8 |
| Независимые | 2 |
Малая кратность / сетка малых кратных tw-multiples
Пять линий в одной картинке — спагетти; малые кратные раскладывают каждую линию в свою клетку, все клетки делят общую шкалу, только так формы можно сравнивать. Здесь три смены соотношения медсестёр к пациентам: тепловая карта (выше) даёт точную матрицу, малые кратные дают форму «каждый уровень ползёт к глубокой ночи, базовый ползёт круче». Те же данные, другой вопрос — другой график.
| Значение | ||
|---|---|---|
| Медицинский центр | Дневная | 6 |
| Медицинский центр | Малая ночь | 9 |
| Медицинский центр | Большая ночь | 11 |
| Районная больница | Дневная | 7 |
| Районная больница | Малая ночь | 11 |
| Районная больница | Большая ночь | 13 |
| Районная больница базового уровня | Дневная | 10 |
| Районная больница базового уровня | Малая ночь | 13 |
| Районная больница базового уровня | Большая ночь | 15 |
Как пользоваться этими модулями
Каждый модуль — это в Markdown статьи блок tw-*, колонки разделены |, при сборке автоматически превращается в то, что вы видите — автору не нужно писать ни HTML, ни JavaScript. Полный синтаксис, когда какой модуль применять, как делать цвет и оси так, чтобы не вводить в заблуждение, и чек-лист проверки визуализации перед публикацией — всё в graph.md.
Эта система вдохновлена редакционной философией визуальных нарративов The Pudding — вопрос раньше данных, вывод должен быть чётким, аннотация — главный герой — но выросла в органы, подходящие Taiwan.md: статичная, многоязычная, читаемая ИИ. Полная история дизайна — в Отчёте по проекту системы визуализации.
Хотите увидеть, как эти модули вплетаются в нарратив реальной глубокой статьи — читайте Госжильё и жилищная справедливость — большинство данных на этой странице взяты из исследования той статьи.
Эта система сама тоже эволюционирует
Страница, которую вы смотрите — результат трёх кругов эволюции. Раз это страница о временной оси, её историю расскажем через модуль политической временной оси:
Суть третьего круга — не в новых типах графиков, а в честном самообследовании. Полный аудит выявил: модули под автоматическими шлюзами — 100 % простановки источников; три высокочастотных модуля без шлюза — 40 % «голые». Правила в редакционном руководстве висели два месяца, поведение полностью следовало форме инструмента, а не правилам — поэтому на этот раз инструмент расширили до ширины правил. Тот же круг поймал, что системные строки на английских, японских, корейских страницах рендерились на китайском, вплоть до одного упрощённого иероглифа, спрятанного в тегах доступности — никто не заметил. Для системы, заявляющей «LLM на шести языках читает тайваньские данные», эти углы важнее новых функций.
Недавние исследования также подкрепили этот путь: точность восстановления значений графиков из изображений мультимодальными ИИ ненадёжна, текстовые узлы — то, что машины читают стабильно. Именно поэтому кирпичная карта пишет цифры на кирпичах, а у каждого графика есть скрытая таблица данных. Полный процесс исследования и проектные решения — в Глубоком отчёте по исследованию и реализации системы визуализации v3.0.
Дополнительное чтение:
- Госжильё и жилищная справедливость — Полная история за этими жилищными данными: как госжильё из дешёвого жилья превратилось в лифт для активов, источник большинства модулей этой страницы
- Смотрим на 22 округа Тайваня через данные — Данные точечного графика, пирамиды, кирпичной карты по старению полностью из полного анализа 22 округов этой статьи
- Тайвань и дискуссия о ядерной энергетике — Полная история трёх референдумов в накопленной полосе: выиграли дебаты, проиграли институты
- Медицинский закон — Полная история за цифрами трёх смен соотношения медсестёр к пациентам в малых кратных: закон может написать, за сколько койок отвечает медсестра, но не может написать, есть ли у неё эти руки
- Массовый отзыв — Продолжение за линией большинства в дуге мандатов: как трёхпартийный парламент без большинства пришёл к 31 делу об отзыве
- Кризис низкой рождаемости на Тайване — Нельзя купить дом и не рождаются дети — другая грань межпоколенческой справедливости
Ссылки на источники
Источники изображений
В статье используется 1 изображение по лицензии CC, кэшировано в public/article-images/society/:
- Небоскрёбы жилья Тайбэя (вид со Сяньшань) — Photo: Heeheemalu, 2026, CC BY-SA 4.0 (hero)
🧬 寫這篇文章時，Semiont 在想什麼