Тип shape

Семантика shape как визуального канала

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

В экосистеме Vega и Vega-Lite shape реализуется по-разному:

  • в Vega-Lite shape задаётся через mark point и канал shape
  • в Vega используется mark symbol с полем shape

Ключевая идея заключается в том, что shape не является числовым измерением и не предполагает упорядоченности.

Базовая структура shape в Vega-Lite

В Vega-Lite shape применяется только к точечным маркерам:

{
  "data": { "url": "data.csv" },
  "mark": "point",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" },
    "shape": { "field": "category", "type": "nominal" }
  }
}

Здесь:

  • x, y задают положение
  • category определяет форму точки

Каждому уникальному значению категории автоматически сопоставляется форма из набора символов.

Набор стандартных shape-значений

Vega/Vega-Lite поддерживают фиксированный набор символов:

  • circle
  • square
  • cross
  • diamond
  • triangle-up
  • triangle-down
  • triangle-right
  • triangle-left
  • stroke

Каждый символ соответствует заранее определённой геометрии, реализованной через SVG path.

Пример явного задания shape:

{
  "mark": "point",
  "encoding": {
    "shape": {
      "field": "group",
      "type": "nominal",
      "scale": {
        "domain": ["A", "B", "C"],
        "range": ["circle", "square", "triangle-up"]
      }
    }
  }
}

Управление масштабом shape (scale)

Scale для shape играет ключевую роль в управлении визуальной дифференциацией категорий.

"shape": {
  "field": "type",
  "type": "nominal",
  "scale": {
    "range": [
      "circle",
      "square",
      "diamond",
      "triangle-up",
      "cross"
    ]
  }
}

Особенности:

  • если категорий больше, чем элементов range, происходит циклическое повторение
  • явное задание domain обеспечивает стабильное соответствие категорий и форм
  • порядок domain влияет на читаемость легенды

Shape и легенда

Legend автоматически отражает соответствие:

  • категория → форма
  • форма → визуальный символ

Пример настройки легенды:

"shape": {
  "field": "series",
  "type": "nominal",
  "legend": {
    "title": "Серии данных",
    "symbolLimit": 8
  }
}

Параметр symbolLimit ограничивает количество отображаемых элементов легенды, что важно при большом числе категорий.

Настройка внешнего вида shape

Shape-символы можно дополнительно стилизовать через свойства mark:

{
  "mark": {
    "type": "point",
    "filled": true,
    "size": 120,
    "stroke": "#333",
    "strokeWidth": 1
  }
}

Ключевые параметры:

  • size — площадь символа
  • filled — заливка формы
  • stroke — цвет обводки
  • strokeWidth — толщина линии

Важно учитывать, что shape влияет только на форму, но не заменяет контроль размера и цвета.

Shape в многослойных графиках (layering)

Shape особенно полезен в layered-графиках:

{
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y", "type": "quantitative" }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": { "field": "x" },
        "y": { "field": "y" },
        "shape": { "field": "group", "type": "nominal" },
        "color": { "field": "group", "type": "nominal" }
      }
    }
  ]
}

В этом случае:

  • линия показывает тренд
  • shape кодирует категории в точках

Shape в Vega (низкоуровневый API)

В Vega shape задаётся через mark symbol:

{
  "type": "symbol",
  "from": { "data": "table" },
  "encode": {
    "enter": {
      "x": { "field": "x" },
      "y": { "field": "y" },
      "shape": { "value": "diamond" },
      "size": { "value": 100 }
    }
  }
}

Дополнительно shape может быть вычисляемым:

"shape": { "field": "category" }

И применяться через scale:

"scales": [
  {
    "name": "shapeScale",
    "type": "ordinal",
    "domain": { "data": "table", "field": "category" },
    "range": ["circle", "square", "triangle-up"]
  }
]

Привязка shape к правилам восприятия

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

  • различимость ограничена примерно 6–8 символами без ошибок
  • сложные формы хуже распознаются при малом размере
  • сочетание shape + color повышает точность классификации
  • shape плохо подходит для количественных шкал

Shape и перекрытие данных

В scatter plot shape часто используется для борьбы с визуальным слиянием точек:

  • различие по форме снижает когнитивную нагрузку
  • комбинирование с прозрачностью улучшает читаемость
"mark": {
  "type": "point",
  "opacity": 0.7,
  "filled": true
}

Кастомные SVG-shape (расширенный Vega)

Vega поддерживает расширение через пользовательские символы:

{
  "shape": "M0,-1L1,1L-1,1Z"
}

Это SVG path, позволяющий:

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

Shape и производительность

При большом количестве точек:

  • shape почти не влияет на производительность по сравнению с color
  • узким местом становится рендеринг SVG/Canvas
  • оптимизация достигается через упрощение набора символов

Типичные ошибки при использовании shape

  • попытка кодировать числовую шкалу через shape
  • использование более 10 категорий без группировки
  • отсутствие легенды при множественных shape
  • дублирование информации: shape + color + label для одной переменной без необходимости

Комбинации encoding с shape

Наиболее устойчивые комбинации:

  • shape + color (категориальные данные)
  • shape + size (дополнительное различие групп)
  • shape + opacity (уровень значимости или фильтрация)

Менее удачные:

  • shape + quantitative color gradient
  • shape как единственный канал при высокой плотности данных
Оглавление