Символьные карты в Vega-Lite строятся на основе географических точек, где каждая сущность отображается маркером (symbol), а дополнительные визуальные ориентиры формируются с помощью примитивов типа rule. Такой подход позволяет комбинировать пространственные данные с аналитическими линиями: порогами, средними значениями, осями отсчёта и интерактивными курсорами.
Символьная карта в Vega-Lite опирается на гео-проекцию и маркер
circle или point, который визуализирует
отдельные наблюдения по координатам долготы и широты.
Ключевая структура включает:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{ "city": "Almaty", "lon": 76.8897, "lat": 43.2389 },
{ "city": "Astana", "lon": 71.4304, "lat": 51.1282 }
]
},
"mark": "circle",
"encoding": {
"longitude": { "field": "lon", "type": "quantitative" },
"latitude": { "field": "lat", "type": "quantitative" },
"size": { "value": 80 },
"color": { "value": "steelblue" }
},
"projection": {
"type": "mercator"
}
}В этом случае каждый объект данных становится символом на карте, а географическая проекция отвечает за корректное преобразование координат.
При работе с реальными картами обычно используется слой
географических границ (geoshape), поверх которого
накладываются символы.
{
"data": {
"url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/world-110m.json",
"format": { "type": "topojson", "feature": "countries" }
},
"mark": "geoshape",
"projection": {
"type": "mercator"
},
"encoding": {
"color": { "value": "#e5e5e5" },
"stroke": { "value": "white" }
}
}Такой слой задаёт фон карты, на который затем добавляются символы.
Ключевая сила Vega-Lite проявляется в композиции слоёв
(layer). Символьная карта почти всегда становится
многослойной конструкцией:
Пример комбинированной структуры:
{
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/vega/vega-datasets/master/data/world-110m.json",
"format": { "type": "topojson", "feature": "countries" }
},
"mark": { "type": "geoshape", "fill": "#f3f3f3", "stroke": "#bbb" },
"projection": { "type": "mercator" }
},
{
"data": {
"values": [
{ "city": "Almaty", "lon": 76.8897, "lat": 43.2389, "value": 120 },
{ "city": "Astana", "lon": 71.4304, "lat": 51.1282, "value": 80 }
]
},
"mark": "circle",
"encoding": {
"longitude": { "field": "lon" },
"latitude": { "field": "lat" },
"size": { "field": "value", "type": "quantitative" },
"color": { "field": "value", "type": "quantitative" }
}
}
],
"projection": { "type": "mercator" }
}mark: "rule" в Vega-Lite представляет линию, которая
задаётся либо по фиксированной координате, либо через агрегированные
значения. Это один из наиболее недооценённых инструментов построения
аналитических карт и диаграмм.
Rule используется для:
Для обычной декартовой системы координат rule задаётся через фиксированные значения.
{
"data": {
"values": [
{ "x": 1, "y": 10 },
{ "x": 2, "y": 15 },
{ "x": 3, "y": 13 }
]
},
"layer": [
{
"mark": "point",
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" }
}
},
{
"mark": "rule",
"encoding": {
"y": { "value": 12 },
"color": { "value": "red" }
}
}
]
}Здесь rule фиксирует пороговое значение y = 12,
визуально разделяя область значений.
Vega-Lite позволяет вычислять агрегаты прямо в encoding.
{
"layer": [
{
"data": {
"values": [
{ "category": "A", "value": 10 },
{ "category": "A", "value": 20 },
{ "category": "A", "value": 30 }
]
},
"mark": "circle",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" }
}
},
{
"mark": "rule",
"encoding": {
"y": {
"aggregate": "mean",
"field": "value"
},
"color": { "value": "black" },
"size": { "value": 2 }
}
}
]
}Rule автоматически вычисляет среднее значение по данным и проводит горизонтальную линию.
В географическом контексте rule часто используется как визуальная сетка или контрольная линия.
Например, можно провести широтную линию:
{
"layer": [
{
"data": {
"values": [
{ "city": "Almaty", "lon": 76.8897, "lat": 43.2389 },
{ "city": "Astana", "lon": 71.4304, "lat": 51.1282 }
]
},
"mark": "circle",
"encoding": {
"longitude": { "field": "lon" },
"latitude": { "field": "lat" },
"color": { "value": "blue" }
}
},
{
"mark": "rule",
"encoding": {
"latitude": { "value": 45 },
"color": { "value": "red" },
"strokeDash": { "value": [4, 2] }
}
}
],
"projection": { "type": "mercator" }
}Здесь горизонтальная географическая линия фиксируется на широте 45°, создавая визуальный географический ориентир.
В интерактивных визуализациях rule часто связывается с selection.
Типичный сценарий — отображение курсора или выделенной области.
{
"params": [
{
"name": "hover",
"select": { "type": "point", "on": "mouseover" }
}
],
"layer": [
{
"mark": "circle",
"encoding": {
"x": { "field": "x" },
"y": { "field": "y" },
"color": {
"condition": { "param": "hover", "value": "orange" },
"value": "steelblue"
}
}
},
{
"mark": "rule",
"encoding": {
"x": { "field": "x" }
},
"transform": [
{ "filter": { "param": "hover" } }
]
}
]
}Rule здесь выполняет роль динамического вертикального индикатора.
В сложных географических визуализациях символы часто кодируют количественные характеристики:
Rule добавляет аналитическую структуру поверх этой информации, позволяя:
В Vega-Lite rule является декларативным примитивом. В Vega (низкоуровневой спецификации) rule формируется через marks с явными координатами и сигналами.
Пример Vega-логики:
{
"marks": [
{
"type": "rule",
"encode": {
"enter": {
"x": { "value": 0 },
"x2": { "value": 200 },
"y": { "value": 100 },
"stroke": { "value": "red" }
}
}
}
]
}В отличие от Vega-Lite, здесь требуется явное управление координатами, что делает rule более гибким, но менее компактным.
Символьная карта с rule становится полноценной аналитической системой, где:
Такая композиция позволяет строить карты, в которых визуальные элементы несут одновременно географическую и аналитическую нагрузку, а rule становится механизмом выражения ограничений и сравнений без введения дополнительных графических шкал или легенд.