Тримэп онлайн: древовидная карта долей

Когда использовать

• Распределение бюджета или облачных расходов по статьям
• Доли рынка по игрокам
• Из чего состоит размер фронтенд-бандла
• Выручка по регионам и продуктам одновременно в маримекко

Как с ней работать в Dele

• Вариант (variant): тримэп (treemap) — одно целое, разбитое на ячейки, или маримекко (marimekko) — ширина столбца задаёт долю категории, высота сегмента — долю ряда внутри неё.
• В тримэпе 4–8 ячеек с названием и значением, для маленькой ячейки — сокращение (abbr). Больше восьми — сведите хвост в явное «Прочее»; мелкие доли не выбрасываются.
• В маримекко 3–8 столбцов с сегментами и 2–5 рядов. Если ряда нет в столбце, сегмент опускается, а не ставится в ноль.
• Единица (unit) печатается после каждой величины, а в source укажите, что кодирует площадь, источник данных и дату.
• Один акцент (focal) — ячейка или сегмент, ради которого диаграмма, а не обязательно самый крупный.

Три способа собрать диаграмму

Словами. Откройте ИИ-ассистента в редакторе или подключите своего агента по MCP и опишите задачу, например:

«Сделай тримэп населения мира по континентам в миллиардах: Азия 4,78, Африка 1,48, Европа 0,75, Северная Америка 0,61, Южная Америка 0,43, Океания 0,046. Выдели Азию.»

В редакторе. Создайте диаграмму из шаблона «Тримэп / маримекко», меняйте элементы на холсте и в панели справа — раскладка пересчитывается сама.

Кодом. Диаграмма — это JSON-спецификация. Её можно править в панели «Спецификация», генерировать скриптом и хранить в git.

{
  "type": "treemap",
  "title": "Население мира по континентам",
  "description": "Тримэп населения мира по континентам на середину 2023 года: площадь ячейки — население; Азия — около 59% мира, Океания меньше процента и слишком мала для подписи.",
  "variant": "treemap",
  "unit": "млрд",
  "source": "Площадь = население · ООН WPP · 2023 · 8,1 млрд",
  "cells": [
    {
      "label": "Азия",
      "value": 4.78,
      "focal": true
    },
    {
      "label": "Африка",
      "value": 1.48
    },
    {
      "label": "Европа",
      "value": 0.75
    },
    {
      "label": "Северная Америка",
      "abbr": "САМ",
      "value": 0.61
    },
    {
      "label": "Южная Америка",
      "abbr": "ЮАМ",
      "value": 0.43
    },
    {
      "label": "Океания",
      "abbr": "ОКН",
      "value": 0.046
    }
  ]
}

Когда выбрать другой формат

• Ранжированный список с точными значениями → Столбчатая диаграмма
• Вложенность без количества → Вложенность
• Связи родитель — потомок → Дерево