Геопространственная визуализация в Vega-Lite строится вокруг композиции географических преобразований, слоёв и визуальных маркеров, где базовая карта (геошейп) выступает контекстом, а точечные данные — семантическими акцентами. В связке с Vega эта модель позволяет формировать декларативные сцены, в которых геометрия и данные объединяются через единый JSON-спецификатор.
Геошейп (geoshape) в Vega-Lite представляет собой визуализацию полигональных данных, чаще всего полученных из TopoJSON или GeoJSON. Он используется для отображения границ стран, регионов, административных единиц или любых областных структур.
Ключевая особенность geoshape заключается в том, что он не требует явного кодирования координат в каждом визуальном элементе — вместо этого используется географическая проекция.
Типичная структура данных для геошейпа включает:
featureequalEarth,
mercator, naturalEarth1)Пример базового слоя:
{
"data": {
"url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
"mark": {
"type": "geoshape",
"fill": "#e5e5e5",
"stroke": "#999"
},
"projection": {
"type": "naturalEarth1"
}
}Геошейп в этом случае формирует «подложку», на которую затем накладываются другие визуальные слои.
Mark point используется для отображения дискретных объектов: городов, событий, координат наблюдений, точек продаж, климатических станций. В контексте картографической визуализации он почти всегда применяется поверх geoshape в составе многослойной композиции.
Каждая точка задаётся через координаты:
В Vega-Lite они кодируются через longitude и
latitude каналы.
Основной механизм наложения реализуется через layer.
Геошейп создаёт фон, точечный слой добавляет семантические объекты.
{
"projection": {
"type": "naturalEarth1"
},
"layer": [
{
"data": {
"url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
"mark": {
"type": "geoshape",
"fill": "#f2f2f2",
"stroke": "#bdbdbd"
}
},
{
"data": {
"values": [
{ "city": "London", "lon": -0.1276, "lat": 51.5072 },
{ "city": "Tokyo", "lon": 139.6917, "lat": 35.6895 },
{ "city": "Almaty", "lon": 76.8865, "lat": 43.2383 }
]
},
"mark": {
"type": "circle",
"size": 80,
"color": "red"
},
"encoding": {
"longitude": { "field": "lon", "type": "quantitative" },
"latitude": { "field": "lat", "type": "quantitative" },
"tooltip": [
{ "field": "city", "type": "nominal" }
]
}
}
]
}Здесь важен порядок слоёв: geoshape всегда размещается ниже, а point — выше, иначе геометрия перекрывает точки.
Projection определяет, как сферические координаты преобразуются в 2D-плоскость. Без него наложение geoshape и point невозможно.
Наиболее используемые типы:
mercator — классическая веб-картаnaturalEarth1 — визуально сбалансированная мировая
проекцияequalEarth — сохраняет относительные площадиalbersUsa — специализированная проекция СШАПроекция задаётся на уровне всей визуализации:
"projection": {
"type": "mercator"
}Все слои внутри автоматически используют одну систему координат.
Geoshape и point выполняют принципиально разные функции:
geoshape
point
Визуальная модель строится как «фон + данные», где фон не несёт аналитической нагрузки, а точки являются носителями информации.
Point-слой часто расширяется через encoding:
Пример:
"encoding": {
"size": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "category",
"type": "nominal"
}
}Это позволяет превращать карту из простого набора координат в аналитическую поверхность.
В Vega-Lite интерактивность добавляется декларативно.
Tooltip:
"tooltip": [
{ "field": "city", "type": "nominal" },
{ "field": "value", "type": "quantitative" }
]Для более сложного поведения используются selections:
Point-слой на карте часто становится основным интерактивным элементом, тогда как geoshape остаётся статичным.
Часто geoshape строится из внешних источников:
Ключевой этап — преобразование TopoJSON:
"format": {
"type": "topojson",
"feature": "countries"
}После этого Vega-Lite автоматически разворачивает полигоны в геометрические контуры.
Часто точечные данные не содержат геометрии напрямую и требуют join-операций.
Пример использования lookup:
{
"transform": [
{
"lookup": "country",
"from": {
"data": {
"url": "countries_centroids.json"
},
"key": "name",
"fields": ["lon", "lat"]
}
}
]
}Это позволяет связывать агрегированные данные с координатами центроидов стран.
При наложении point поверх geoshape возникает проблема плотности:
Решения:
Mark point может быть представлен не только кругами:
"mark": {
"type": "point",
"shape": "triangle"
}Symbol особенно полезен при многоклассовой визуализации поверх географической карты.
Сложные сцены строятся из нескольких слоёв:
В Vega-Lite порядок слоёв определяет визуальную иерархию, а не координатное размещение.
Vega предоставляет более низкоуровневый контроль:
Vega-Lite, напротив:
В географических визуализациях это означает:
Типовая структура аналитической карты с точками:
Эта структура стала стандартом для визуализации:
Несмотря на универсальность, существуют ограничения:
Для высоконагруженных сценариев часто используется предварительная агрегация или перенос части логики в Vega.
Важным аспектом является не только геометрия, но и визуальная читаемость:
Комбинация этих факторов формирует читаемую карту, где точечный слой воспринимается как основной носитель информации, а геошейп — как пространственный контекст.