Пузырьковые карты

Пузырьковые карты представляют собой способ визуализации многомерных данных, где каждая точка на координатной плоскости отображается в виде окружности, а её дополнительные характеристики кодируются через размер, цвет, прозрачность и иногда форму. В контексте декларативной визуализации в Vega-Lite такие графики формируются через компактные спецификации, которые затем компилируются в низкоуровневую грамматику Vega.

Базовая концепция пузырьковой визуализации

Пузырьковая карта расширяет классическую точечную диаграмму. Если scatter plot отображает две переменные (X и Y), то пузырьковая добавляет как минимум третью:

  • X-ось — числовая или категориальная переменная

  • Y-ось — числовая переменная

  • Размер пузырька — количественный показатель (weight, volume, population)

  • Дополнительно:

    • Цвет — категория или непрерывное значение
    • Прозрачность — плотность или уверенность
    • Tooltip — дополнительные измерения

В Vega-Lite пузырьковая логика строится через канал size, который масштабируется автоматически через шкалы (scales).

Базовая спецификация пузырьковой диаграммы

Минимальная конфигурация в Vega-Lite:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 3, "value": 10},
      {"x": 2, "y": 5, "value": 30},
      {"x": 3, "y": 2, "value": 20}
    ]
  },
  "mark": "circle",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "size": {"field": "value", "type": "quantitative"}
  }
}

Ключевой момент заключается в том, что mark: "circle" задаёт примитив визуализации, а size управляет радиусом через встроенную шкалу площади.

Масштабирование размеров пузырьков

Размер пузырьков в Vega-Lite не является прямым радиусом. Используется площадь круга, что важно для корректного восприятия:

  • визуальное восприятие линейно связано с площадью
  • площадь масштабируется через шкалу size

Пример явной настройки диапазона:

"size": {
  "field": "value",
  "type": "quantitative",
  "scale": {
    "range": [50, 2000]
  }
}

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

Добавление категорий через цвет

Часто пузырьковые диаграммы используются для анализа групп:

"color": {
  "field": "category",
  "type": "nominal"
}

Комбинация size + color создаёт многомерную карту, где:

  • размер отражает количественный показатель
  • цвет отражает принадлежность к группе

При использовании непрерывных шкал цвет может кодировать интенсивность, например:

"color": {
  "field": "profit",
  "type": "quantitative",
  "scale": {"scheme": "blues"}
}

Tooltip как средство раскрытия данных

Пузырьковые диаграммы неизбежно скрывают детализацию в визуальном слое. Tooltip компенсирует это:

"tooltip": [
  {"field": "name", "type": "nominal"},
  {"field": "value", "type": "quantitative"},
  {"field": "category", "type": "nominal"}
]

Tooltip в Vega-Lite не требует дополнительной логики: движок автоматически связывает события наведения с данными.

Географические пузырьковые карты

Один из наиболее распространённых вариантов — географическая визуализация, где пузырьки накладываются на карту.

В Vega это реализуется через проекцию:

{
  "data": {
    "url": "data/world-110m.json",
    "format": {"type": "topojson", "feature": "countries"}
  },
  "projection": {
    "type": "naturalEarth1"
  },
  "mark": "geoshape"
}

Далее добавляется слой с пузырьками:

{
  "mark": "circle",
  "encoding": {
    "longitude": {"field": "lon", "type": "quantitative"},
    "latitude": {"field": "lat", "type": "quantitative"},
    "size": {"field": "population"},
    "color": {"field": "region"}
  }
}

В Vega-Lite слои объединяются через layer.

Многослойная структура пузырьковой карты

Слои позволяют комбинировать:

  • базовую карту
  • пузырьковые маркеры
  • подписи
  • выделение регионов

Пример:

{
  "layer": [
    {
      "data": {"url": "world.json", "format": {"type": "topojson"}},
      "mark": "geoshape"
    },
    {
      "mark": "circle",
      "encoding": {
        "longitude": {"field": "lon"},
        "latitude": {"field": "lat"},
        "size": {"field": "metric"},
        "color": {"field": "type"}
      }
    }
  ]
}

Агрегация данных для пузырьков

Пузырьковые карты часто строятся на агрегированных данных.

В Vega-Lite можно использовать встроенные трансформации:

"transform": [
  {
    "aggregate": [
      {"op": "sum", "field": "sales", "as": "total_sales"}
    ],
    "groupby": ["region"]
  }
]

После агрегации пузырьки отображают суммарные значения по регионам.

Фильтрация и интерактивность

Vega-Lite поддерживает интерактивные селекторы:

"selection": {
  "brush": {
    "type": "interval"
  }
}

И применение фильтра:

"transform": [
  {"filter": {"selection": "brush"}}
]

Это позволяет выделять области пузырьковой карты и анализировать подмножества данных.

Логарифмическое масштабирование

При сильной диспропорции значений линейная шкала становится неэффективной.

"size": {
  "field": "value",
  "type": "quantitative",
  "scale": {
    "type": "log"
  }
}

Логарифмическое преобразование снижает влияние выбросов и делает структуру данных более читаемой.

Работа с плотными наборами данных

Проблема пузырьковых диаграмм — перекрытие элементов.

Решения:

  • уменьшение диапазона size
  • прозрачность (opacity)
  • jitter через трансформации
  • агрегация

Пример прозрачности:

"opacity": {"value": 0.6}

Комбинация с временными рядами

Пузырьковые диаграммы часто используются как временные срезы:

"encoding": {
  "x": {"field": "date", "type": "temporal"},
  "y": {"field": "value"},
  "size": {"field": "volume"}
}

Это превращает график в динамическую систему наблюдения за изменениями объёмов.

Использование вычисляемых полей

Vega-Lite позволяет создавать новые признаки прямо в спецификации:

"transform": [
  {
    "calculate": "datum.revenue - datum.cost",
    "as": "profit"
  }
]

Далее этот показатель может управлять размером пузыря:

"size": {"field": "profit"}

Управление визуальной иерархией

При работе с пузырьками критически важен порядок отрисовки:

  • большие элементы могут перекрывать малые
  • используется сортировка:
"transform": [
  {"calculate": "datum.value", "as": "v"},
  {"window": [{"op": "rank", "as": "rank"}]}
]

И последующая визуальная приоритизация через order.

Производительность в больших наборах данных

При тысячах точек пузырьковые диаграммы требуют оптимизации:

  • агрегация до рендера
  • уменьшение разрешения проекций
  • отключение лишних интерактивных каналов
  • использование упрощённых mark-типов

Vega использует компиляцию в более низкоуровневую систему рендеринга, что позволяет эффективно обрабатывать сложные сцены с большим количеством объектов.

Типичные ошибки при построении пузырьковых карт

  • использование радиуса вместо площади (искажение восприятия)
  • отсутствие нормализации данных
  • чрезмерный разброс значений без лог-шкалы
  • перегрузка цветовых каналов
  • отсутствие легенды при множестве категорий

Композиция сложных пузырьковых систем

Пузырьковые карты часто становятся частью более сложных визуальных панелей:

  • фильтрующие панели
  • связка с таблицами
  • синхронизация с временными графиками
  • drill-down через selection

Такие композиции реализуются через реактивные зависимости между сигналами и данными в Vega или через declarative bindings в Vega-Lite.

Оглавление