В визуализациях типа treemap пространство прямоугольника рекурсивно делится на вложенные области, соответствующие иерархическим данным. Ключевая задача тайлинга — преобразование числовых весов узлов дерева в геометрические прямоугольники с сохранением читаемости и стабильности восприятия.
В библиотеке Nivo используются несколько алгоритмов укладки: slice, dice, binary, squarify. Каждый из них определяет стратегию разбиения области и напрямую влияет на форму элементов, их пропорции и визуальную плотность.
Алгоритм slice реализует простую стратегию: пространство делится на горизонтальные полосы, где каждый следующий элемент располагается под предыдущим.
Основная идея заключается в фиксированной ориентации разбиения:
Пусть задана область шириной ( W ) и высотой ( H ), а также набор значений ( v_i ). Тогда высота каждого прямоугольника вычисляется как:
[ h_i = H ]
Ширина остаётся фиксированной:
[ w_i = W]
В конфигурации treemap:
<ResponsiveTreeMap
data={data}
identity="name"
value="value"
tile="slice"
/>Алгоритм dice является зеркальным вариантом slice. Деление выполняется вертикальными колонками.
[ w_i = W ]
[ h_i = H]
<ResponsiveTreeMap
data={data}
identity="name"
value="value"
tile="dice"
/>Алгоритм binary относится к классу пространственного бинарного деления. Вместо последовательного размещения применяется рекурсивное разбиение области на две части, пропорциональные суммам значений поддеревьев.
На каждом шаге:
Разбиение выбирается так, чтобы минимизировать дисбаланс между суммарными значениями групп:
[ | A - B | ]
<ResponsiveTreeMap
data={data}
identity="name"
value="value"
tile="binary"
/>Алгоритм squarify считается наиболее визуально сбалансированным методом тайлинга. Его цель — минимизация отклонения прямоугольников от формы квадрата.
Каждый прямоугольник стремится иметь аспектное отношение, максимально близкое к 1:
[ AR = ]
Алгоритм последовательно добавляет элементы в текущий ряд и проверяет ухудшение метрики аспекта. Если добавление ухудшает баланс, ряд фиксируется, и начинается новый.
<ResponsiveTreeMap
data={data}
identity="name"
value="value"
tile="squarify"
/>Обе стратегии относятся к линейным алгоритмам:
Общие свойства:
Различие заключается исключительно в ориентации оси разбиения.
Binary-алгоритм вводит иерархическое деление пространства:
В отличие от slice/dice, не формирует линейных рядов, а строит дерево пространственных разделений.
Squarify ориентирован на визуальное качество:
При работе с неравномерными данными обеспечивает более стабильную геометрию, чем альтернативные алгоритмы.
При динамическом обновлении значений структура тайлинга может изменяться по-разному:
Особенно чувствителен squarify, так как он пересчитывает группы для оптимизации формы, а не сохраняет фиксированную структуру.
Во всех алгоритмах, кроме строгих линейных моделей, сортировка играет ключевую роль:
При изменении порядка входных данных:
В Nivo выбор алгоритма осуществляется через параметр
tile. Он определяет стратегию разбиения в компоненте
treemap:
const MyTreeMap = ({ data }) => (
<ResponsiveTreeMap
data={data}
identity="id"
value="value"
tile="squarify"
enableLabel={true}
/>
)Поддерживаемые стратегии позволяют адаптировать визуализацию под тип данных:
В терминах заполнения пространства алгоритмы можно оценивать через плотность упаковки:
Плотность визуального восприятия определяется не только использованием площади, но и формой каждого элемента, влияющей на читаемость подписей и сравнение величин.
Каждый алгоритм задаёт собственную модель трансформации иерархии в плоское пространство, определяя характер визуального анализа данных в treemap-компонентах Nivo.