Точечная диаграмма онлайн

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

• Частота деплоев и время поставки по командам
• Стоимость и выручка клиентов, где размер пузырька — число пользователей
• Распределение времени ответа сотен запросов в одном ряду
• Поиск выбросов среди сервисов по двум метрикам

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

• Три варианта (variant): рассеяние (scatter) — 5–30 точек по осям X и Y; пузырьки (bubble) — 5–15 элементов, где площадь пропорциональна размеру (size); рой (beeswarm) — 20–300 точек на одной оси значений.
• У точки есть x, y и название (label), но печатается оно только у акцентной точки и 2–3 выбросов с showLabel — никогда у всех.
• В рое безымянная масса задаётся списком чисел (values), а в points остаются только акцентная точка и до пяти подписанных выбросов.
• Оси (xAxis, yAxis) — подпись с единицей, min и max по желанию; шкала только линейная и начинается с нуля, если иное не сказано в сноске.
• Ровно одна акцентная точка (focal) — та, о которой заголовок. Линия тренда (trend) нужна, только когда тренд очевиден; quadrants делит поле по медианам, corners подписывает углы.
• В сноске (footnote) укажите границы осей, масштаб площади и исключённые элементы.

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

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

«Сделай точечную диаграмму для 12 команд: по X — деплоев в неделю, по Y — время поставки в днях. Выдели команду «Биллинг», добавь линию тренда.»

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

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

{
  "type": "scatter",
  "title": "Частота деплоев и время поставки · 12 команд",
  "description": "Двенадцать команд по частоте деплоев в неделю и времени поставки в днях: чем чаще деплой, тем короче поставка; лучшая — платформенная команда.",
  "variant": "scatter",
  "xAxis": {
    "label": "Деплоев в неделю",
    "min": 0,
    "max": 20
  },
  "yAxis": {
    "label": "Время поставки, дни",
    "min": 0,
    "max": 24
  },
  "points": [
    {
      "label": "Биллинг",
      "x": 2,
      "y": 20
    },
    {
      "label": "Поиск",
      "x": 4,
      "y": 18
    },
    {
      "label": "Отчёты",
      "x": 4,
      "y": 16
    },
    {
      "label": "Каталог",
      "x": 6,
      "y": 14
    },
    {
      "label": "Медиа",
      "x": 8,
      "y": 12
    },
    {
      "label": "Профиль",
      "x": 8,
      "y": 10
    },
    {
      "label": "Корзина",
      "x": 10,
      "y": 8
    },
    {
      "label": "Уведомления",
      "x": 12,
      "y": 6
    },
    {
      "label": "Аналитика",
      "x": 12,
      "y": 10
    },
    {
      "label": "Авторизация",
      "x": 16,
      "y": 4
    },
    {
      "label": "Шлюз",
      "x": 20,
      "y": 2
    },
    {
      "label": "Платформа",
      "x": 18,
      "y": 3,
      "focal": true
    }
  ],
  "trend": true,
  "corners": {
    "topLeft": "Долгая поставка",
    "bottomLeft": "Быстрая поставка"
  },
  "legendNote": "Цвет — только у лучшей команды."
}

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

• Изменение величины во времени → Линейный график
• Сравнение нескольких точных значений по категориям → Столбчатая диаграмма
• Пересечение строки и столбца, где выделяется одна ячейка → Тепловая карта