Свойства марок: общие и специфичные

Марка (mark) — базовый графический примитив визуализации. Любая диаграмма в Vega или Vega-Lite строится из марок: точек, линий, прямоугольников, текста, областей, дуг и других элементов.

В Vega-Lite марка задаётся через свойство mark:

{
  "mark": "bar"
}

В Vega используется более подробная структура:

{
  "marks": [
    {
      "type": "rect"
    }
  ]
}

Каждая марка поддерживает набор свойств:

  • общие свойства — доступны большинству типов марок;
  • специфичные свойства — относятся только к конкретному типу марки.

Общие свойства марок

Цвет заливки: fill

Свойство fill определяет внутренний цвет фигуры.

Vega-Lite

{
  "mark": {
    "type": "bar",
    "fill": "steelblue"
  }
}

Vega

{
  "type": "rect",
  "encode": {
    "update": {
      "fill": {
        "value": "steelblue"
      }
    }
  }
}

Поддерживаемые форматы

"fill": "red"
"fill": "#ff0000"
"fill": "rgb(255,0,0)"
"fill": "rgba(255,0,0,0.5)"

Особенности

  • применяется только к замкнутым фигурам;
  • линии и текст могут игнорировать fill;
  • при отсутствии свойства используется цвет по умолчанию.

Цвет границы: stroke

Определяет цвет контура.

{
  "mark": {
    "type": "bar",
    "stroke": "black"
  }
}

Пример сочетания fill и stroke

{
  "mark": {
    "type": "circle",
    "fill": "orange",
    "stroke": "black"
  }
}

Толщина границы: strokeWidth

Управляет толщиной контура.

{
  "mark": {
    "type": "point",
    "strokeWidth": 3
  }
}

Особенности

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

Прозрачность: opacity

Общая прозрачность элемента.

{
  "mark": {
    "type": "bar",
    "opacity": 0.5
  }
}

Диапазон значений

Значение Описание
0 полностью прозрачно
1 полностью непрозрачно

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

  • визуализация плотных данных;
  • устранение наложений;
  • создание эффектов глубины.

Отдельная прозрачность заливки и границы

fillOpacity

{
  "mark": {
    "type": "circle",
    "fillOpacity": 0.3
  }
}

strokeOpacity

{
  "mark": {
    "type": "circle",
    "strokeOpacity": 1
  }
}

Отличие от opacity

opacity влияет на весь объект целиком, а fillOpacity и strokeOpacity — только на конкретную часть.

Размер: size

Свойство size используется различными марками по-разному.

Для точек

{
  "mark": {
    "type": "point",
    "size": 200
  }
}

Для текста

Размер шрифта:

{
  "mark": {
    "type": "text",
    "size": 18
  }
}

Для линий

Толщина линии:

{
  "mark": {
    "type": "line",
    "size": 4
  }
}

Важная особенность

Семантика свойства зависит от типа марки.

Форма: shape

Используется преимущественно для точек.

{
  "mark": {
    "type": "point",
    "shape": "diamond"
  }
}

Поддерживаемые формы

  • circle
  • square
  • cross
  • diamond
  • triangle-up
  • triangle-down

Курсор: cursor

Позволяет изменять внешний вид курсора мыши.

{
  "mark": {
    "type": "point",
    "cursor": "pointer"
  }
}

Частые значения

Значение Назначение
pointer интерактивный элемент
crosshair точное позиционирование
move перетаскивание

Tooltip

В Vega-Lite:

{
  "encoding": {
    "tooltip": [
      {"field": "name"},
      {"field": "value"}
    ]
  }
}

В Vega:

{
  "encode": {
    "update": {
      "tooltip": {
        "signal": "datum.name"
      }
    }
  }
}

Особенности

  • поддерживает HTML;
  • может формироваться динамически;
  • часто используется в интерактивных дашбордах.

Положение: x, y

В Vega координаты задаются явно:

{
  "encode": {
    "update": {
      "x": {"value": 100},
      "y": {"value": 50}
    }
  }
}

В Vega-Lite обычно используются каналы кодирования:

{
  "encoding": {
    "x": {"field": "category"},
    "y": {"field": "value"}
  }
}

Специфичные свойства марок

Свойства марки bar

cornerRadius

Скругление углов столбца.

{
  "mark": {
    "type": "bar",
    "cornerRadius": 6
  }
}

Отдельные углы

  • cornerRadiusTopLeft
  • cornerRadiusTopRight
  • cornerRadiusBottomLeft
  • cornerRadiusBottomRight

Пример:

{
  "mark": {
    "type": "bar",
    "cornerRadiusTopLeft": 10,
    "cornerRadiusTopRight": 10
  }
}

binSpacing

Расстояние между столбцами.

{
  "mark": {
    "type": "bar",
    "binSpacing": 2
  }
}

Свойства марки line

interpolate

Определяет способ соединения точек.

{
  "mark": {
    "type": "line",
    "interpolate": "monotone"
  }
}

Варианты интерполяции

Значение Описание
linear прямые сегменты
step ступенчатая линия
basis сглаживание
cardinal плавная кривая
monotone монотонная интерполяция

tension

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

{
  "mark": {
    "type": "line",
    "interpolate": "cardinal",
    "tension": 0.8
  }
}

point

Отображение точек поверх линии.

{
  "mark": {
    "type": "line",
    "point": true
  }
}

Кастомизация

{
  "mark": {
    "type": "line",
    "point": {
      "filled": true,
      "size": 100
    }
  }
}

Свойства марки area

line

Добавляет контур линии.

{
  "mark": {
    "type": "area",
    "line": true
  }
}

orient

Ориентация области.

{
  "mark": {
    "type": "area",
    "orient": "vertical"
  }
}

Значения

  • vertical
  • horizontal

Свойства марки point

filled

Определяет, должна ли точка быть закрашенной.

{
  "mark": {
    "type": "point",
    "filled": true
  }
}

Разница

Значение Результат
true заполненная фигура
false только контур

Свойства марки text

text

Текстовое содержимое.

{
  "mark": "text",
  "encoding": {
    "text": {
      "field": "label"
    }
  }
}

font

Шрифт текста.

{
  "mark": {
    "type": "text",
    "font": "Arial"
  }
}

fontSize

Размер текста.

{
  "mark": {
    "type": "text",
    "fontSize": 20
  }
}

fontWeight

Толщина шрифта.

{
  "mark": {
    "type": "text",
    "fontWeight": "bold"
  }
}

fontStyle

Стиль текста.

{
  "mark": {
    "type": "text",
    "fontStyle": "italic"
  }
}

align

Горизонтальное выравнивание.

{
  "mark": {
    "type": "text",
    "align": "center"
  }
}

Значения

  • left
  • center
  • right

baseline

Вертикальное выравнивание.

{
  "mark": {
    "type": "text",
    "baseline": "middle"
  }
}

Возможные значения

  • top
  • middle
  • bottom

dx и dy

Смещение текста.

{
  "mark": {
    "type": "text",
    "dx": 10,
    "dy": -5
  }
}

angle

Поворот текста.

{
  "mark": {
    "type": "text",
    "angle": 45
  }
}

Свойства марки arc

Используется для круговых диаграмм.

innerRadius

Создание кольцевой диаграммы.

{
  "mark": {
    "type": "arc",
    "innerRadius": 50
  }
}

outerRadius

Внешний радиус.

{
  "mark": {
    "type": "arc",
    "outerRadius": 120
  }
}

padAngle

Расстояние между секторами.

{
  "mark": {
    "type": "arc",
    "padAngle": 0.02
  }
}

cornerRadius

Скругление сегментов.

{
  "mark": {
    "type": "arc",
    "cornerRadius": 5
  }
}

Свойства марки rect

cornerRadius

Скругление прямоугольника.

{
  "mark": {
    "type": "rect",
    "cornerRadius": 4
  }
}

Свойства марки rule

Марка rule используется для отображения линий-ориентиров.

strokeDash

Пунктирная линия.

{
  "mark": {
    "type": "rule",
    "strokeDash": [6, 4]
  }
}

strokeCap

Форма окончания линии.

{
  "mark": {
    "type": "rule",
    "strokeCap": "round"
  }
}

Значения

  • butt
  • round
  • square

Специфичные свойства Vega

В Vega свойства обычно находятся внутри секции encode.

Структура encode

{
  "marks": [
    {
      "type": "symbol",
      "encode": {
        "enter": {},
        "update": {},
        "hover": {}
      }
    }
  ]
}

Состояния

Секция Назначение
enter начальное состояние
update обычное состояние
hover наведение
exit удаление

Динамические значения через signal

{
  "fill": {
    "signal": "datum.value > 100 ? 'red' : 'green'"
  }
}

Возможности

  • условное форматирование;
  • реакция на взаимодействие;
  • анимация;
  • адаптивная визуализация.

Наследование свойств

В Vega-Lite свойства могут задаваться:

  • глобально;
  • для конкретной марки;
  • через кодирование.

Пример

{
  "config": {
    "bar": {
      "fill": "steelblue"
    }
  }
}

Локальное свойство имеет приоритет:

{
  "mark": {
    "type": "bar",
    "fill": "red"
  }
}

Условные свойства

Условный цвет

{
  "encoding": {
    "color": {
      "condition": {
        "test": "datum.value > 100",
        "value": "red"
      },
      "value": "green"
    }
  }
}

Условный размер

{
  "encoding": {
    "size": {
      "condition": {
        "test": "datum.selected",
        "value": 300
      },
      "value": 100
    }
  }
}

Интерактивные свойства

Реакция на наведение

{
  "selection": {
    "hover": {
      "type": "single",
      "on": "mouseover"
    }
  },
  "encoding": {
    "opacity": {
      "condition": {
        "selection": "hover",
        "value": 1
      },
      "value": 0.3
    }
  }
}

Комбинирование свойств

Комплексный пример

{
  "mark": {
    "type": "point",
    "filled": true,
    "size": 200,
    "fill": "orange",
    "stroke": "black",
    "strokeWidth": 2,
    "opacity": 0.8,
    "shape": "diamond"
  }
}

Производительность и свойства марок

Некоторые свойства существенно влияют на производительность.

Наиболее затратные

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

Практические рекомендации

Для больших наборов данных

Предпочтительно:

{
  "mark": {
    "type": "point",
    "opacity": 0.3
  }
}

Нежелательно:

{
  "mark": {
    "type": "point",
    "strokeWidth": 5,
    "shadowBlur": 20
  }
}

Для интерактивных графиков

Наиболее полезны:

  • tooltip
  • cursor
  • opacity
  • strokeWidth
  • condition
  • signal

Для публикационных диаграмм

Особенно важны:

  • font
  • fontSize
  • align
  • baseline
  • cornerRadius
  • interpolate

Различия Vega и Vega-Lite в настройке марок

Возможность Vega-Lite Vega
Простота высокая средняя
Контроль ограниченный полный
Signals частично полностью
Состояния hover ограниченно полностью
Анимация базовая расширенная
Низкоуровневый рендеринг нет да

Частые ошибки

Неправильное использование size

{
  "mark": {
    "type": "bar",
    "size": 100
  }
}

Для bar свойство работает иначе, чем для point.

Конфликт opacity и fillOpacity

{
  "mark": {
    "opacity": 0.2,
    "fillOpacity": 1
  }
}

Итоговая прозрачность всё равно будет уменьшена.

Использование stroke без strokeWidth

Контур может оказаться практически незаметным.

{
  "stroke": "black"
}

Лучше:

{
  "stroke": "black",
  "strokeWidth": 2
}

Архитектурная роль свойств марок

Свойства марок в Vega и Vega-Lite формируют три ключевых уровня визуализации:

  1. Геометрию объекта.
  2. Визуальный стиль.
  3. Интерактивное поведение.

Комбинация общих и специфичных свойств позволяет:

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