point

Точечная визуализация является одним из базовых типов представления данных в экосистеме Vega-Lite и низкоуровневой библиотеки Vega. Маркер point используется для отображения отдельных наблюдений в виде геометрических примитивов — точек, кругов, символов — в декартовой системе координат. Несмотря на кажущуюся простоту, именно point лежит в основе большинства аналитических диаграмм: scatter plot, bubble chart, jitter plot, density-like визуализации и интерактивные выборки.

В Vega-Lite point представляет отдельный элемент данных, отображаемый как независимая точка на графике. В базовой форме каждая точка соответствует одной записи (row) в наборе данных.

Ключевые свойства:

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

Point часто выступает как «атомарный визуальный блок» аналитической графики.

Базовая структура спецификации

Минимальная спецификация point-визуализации в Vega-Lite:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "data.csv" },
  "mark": "point",
  "encoding": {
    "x": { "field": "a", "type": "quantitative" },
    "y": { "field": "b", "type": "quantitative" }
  }
}

Здесь каждая запись отображается как точка в координатах (a, b).

Оси координат и encoding channels

X и Y как основа позиционирования

Point-маркер всегда опирается на позиционные каналы:

  • x — горизонтальная координата
  • y — вертикальная координата

Типы данных:

  • quantitative — числовые координаты
  • temporal — временные ряды
  • ordinal — упорядоченные категории

Пример временной диаграммы:

{
  "mark": "point",
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Визуальные каналы: размер, цвет, форма

Point в Vega-Lite поддерживает расширенное визуальное кодирование многомерных данных.

Цвет (color)

Используется для группировки и категориального разделения:

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

Цвет превращает scatter plot в многосерийную диаграмму.

Размер (size)

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

"size": { "field": "weight", "type": "quantitative" }

Результат — bubble chart, где площадь точки отражает величину показателя.

Форма (shape)

Используется для категориальной дифференциации:

"shape": { "field": "group", "type": "nominal" }

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

Прозрачность (opacity)

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

"opacity": { "value": 0.6 }

или через поле данных:

"opacity": { "field": "density", "type": "quantitative" }

Tooltip и семантическое обогащение

Tooltip связывает визуальный элемент с исходными данными:

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

Каждая точка становится интерактивным информационным узлом.

Агрегация и распределение точек

Хотя point чаще используется для сырых данных, он также применяется после агрегации:

"aggregate": "mean"

Пример:

{
  "mark": "point",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "aggregate": "mean", "field": "value" }
  }
}

Это превращает точки в статистические центры распределений.

Интерактивность и selection

Point является ключевым элементом интерактивной аналитики.

Single selection

"selection": {
  "pick": {
    "type": "single",
    "on": "click"
  }
}

Interval selection (brush)

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

Используется для выделения диапазонов на scatter plot.

Логика наложения слоёв (layering)

Point часто комбинируется с другими mark:

  • line + point (временные ряды)
  • area + point (контрольные узлы)
  • rule + point (аннотации)

Пример:

{
  "layer": [
    {
      "mark": "line"
    },
    {
      "mark": "point"
    }
  ]
}

Такая комбинация подчёркивает дискретные наблюдения на фоне тренда.

Vega: низкоуровневая реализация point

В Vega точечный маркер представлен как symbol mark:

{
  "type": "symbol",
  "encode": {
    "enter": {
      "x": { "field": "x" },
      "y": { "field": "y" },
      "size": { "value": 100 },
      "fill": { "value": "steelblue" }
    }
  }
}

Vega предоставляет полный контроль над геометрией и отрисовкой, включая физические пиксельные размеры и ручное управление encode-процессом.

Плотные облака точек и производительность

При работе с тысячами и миллионами точек возникают особенности:

  • использование агрегированных представлений
  • включение sampling
  • упрощение визуальных каналов
  • переход к raster-based визуализации при необходимости

Vega-Lite автоматически применяет оптимизации при компиляции в Vega.

Jittering и борьба с наложением точек

При категориальных осях точки часто перекрываются. Решение — jitter:

{
  "mark": "point",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" },
    "xOffset": { "value": 2 }
  }
}

Также применяется случайное смещение через трансформации:

"transform": [
  { "calculate": "random()", "as": "jitter" }
]

Faceting и распределение точек по подграфикам

Facet позволяет разбивать точечные диаграммы:

{
  "facet": {
    "field": "region",
    "type": "nominal"
  },
  "spec": {
    "mark": "point",
    "encoding": {
      "x": { "field": "a", "type": "quantitative" },
      "y": { "field": "b", "type": "quantitative" }
    }
  }
}

Каждый подграфик становится независимым scatter plot.

Многомерная интерпретация point

Point поддерживает отображение до 5–6 измерений одновременно:

  • x → позиция
  • y → позиция
  • color → категория
  • size → величина
  • shape → тип
  • tooltip → дополнительная информация

Такая структура превращает двумерную плоскость в многомерное аналитическое пространство.

Конфигурационные настройки mark

Глобальные параметры:

"config": {
  "point": {
    "filled": true,
    "size": 60,
    "opacity": 0.8
  }
}

Позволяет унифицировать стиль всех point-маркеров в спецификации.

Расширенные сценарии использования

Point применяется в следующих аналитических паттернах:

  • корреляционный анализ (scatter plot)
  • кластеризация (цветовые группы)
  • аномалия detection (выбросы)
  • временные события (event plotting)
  • географические координаты (map overlays)

Поведение при масштабировании

При увеличении плотности данных point может:

  • визуально сливаться в области высокой концентрации
  • требовать прозрачности
  • использовать aggregation bins
  • заменяться на heatmap-подобные представления

Vega-Lite предоставляет декларативные механизмы для адаптации отображения без изменения исходных данных.

Закодированная семантика точек

Point-маркеры формируют визуальный язык:

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

Эти принципы делают point фундаментом визуальной аналитики в декларативных системах построения графиков.

Оглавление