Загрузка данных по URL

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

В Vega и Vega-Lite данные могут поступать из нескольких источников, но наиболее распространённый сценарий — указание внешнего ресурса через URL. В этом случае движок выполняет HTTP(S)-запрос, загружает файл, интерпретирует его в соответствии с указанным форматом и передаёт в конвейер обработки данных.

Ключевое поле:

data: {
  url: "https://example.com/data.csv"
}

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

Указание формата данных

Поддерживаются основные табличные и структурированные форматы: JSON, CSV, TSV.

JSON

data: {
  url: "https://example.com/data.json",
  format: {
    type: "json"
  }
}

JSON-формат используется по умолчанию для иерархических данных. Vega ожидает массив объектов или структурированное дерево, в зависимости от задачи визуализации.

CSV

data: {
  url: "https://example.com/data.csv",
  format: {
    type: "csv"
  }
}

CSV обрабатывается как табличный набор данных, где каждая строка преобразуется в объект, а заголовки первой строки становятся именами полей.

TSV

data: {
  url: "https://example.com/data.tsv",
  format: {
    type: "tsv"
  }
}

TSV используется реже, но обеспечивает более стабильную обработку текстовых данных, содержащих запятые.

Управление структурой данных при загрузке

Загрузка данных через URL почти всегда сопровождается преобразованием структуры до этапа визуализации. Vega предоставляет встроенные трансформации, которые применяются сразу после загрузки.

data: {
  url: "https://example.com/data.csv",
  format: { type: "csv" },
  transform: [
    {
      type: "filter",
      expr: "datum.value > 10"
    }
  ]
}

Трансформации выполняются в строгом порядке, формируя цепочку обработки: загрузка → парсинг → преобразование → визуализация.

Различие между Vega и Vega-Lite при загрузке данных

Vega

Vega использует явную декларацию источников данных, где URL является частью низкоуровневого описания графика. Каждое преобразование и этап обработки задаётся вручную.

{
  "data": [
    {
      "name": "table",
      "url": "https://example.com/data.json",
      "format": { "type": "json" }
    }
  ]
}

Данные именуются и могут использоваться в нескольких слоях визуализации.

Vega-Lite

Vega-Lite упрощает модель, автоматически создавая внутренние структуры Vega. Загрузка данных осуществляется через поле data.url, при этом система сама управляет именованием и потоками данных.

{
  "data": {
    "url": "https://example.com/data.csv"
  },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Кросс-доменные запросы (CORS)

При загрузке данных по URL Vega выполняет стандартный HTTP-запрос через браузерный механизм fetch/XHR. Это означает, что применяются ограничения CORS.

Если сервер не возвращает заголовки:

Access-Control-Allow-Origin

загрузка будет заблокирована на уровне браузера.

В контексте Vega это проявляется как отсутствие данных без явной ошибки в спецификации. Поэтому источники данных должны быть либо:

размещены на том же домене
либо настроены с корректными CORS-заголовками
либо проксированы через сервер приложения

Кэширование и повторное использование данных

Vega использует внутренний кэш загрузчика данных. Повторные обращения к одному и тому же URL могут не приводить к повторному сетевому запросу, если данные уже были загружены в рамках текущего сеанса визуализации.

Это особенно важно при работе с:

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

Параметры запроса и динамические URL

URL может формироваться динамически на основе сигналов (signals) в Vega:

data: {
  url: {
    signal: "'https://example.com/data?year=' + year"
  }
}

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

Типичные сценарии:

фильтрация по периоду
переключение источника данных
подгрузка сегментов больших датасетов

Обработка ошибок загрузки

При невозможности загрузки ресурса Vega фиксирует ошибку на этапе data loading. Причины могут включать:

недоступность URL
сетевые ошибки
некорректный формат ответа
нарушение CORS

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

Предобработка данных на уровне формата

Некоторые форматы поддерживают дополнительные опции парсинга.

CSV с кастомными разделителями

data: {
  url: "https://example.com/data.csv",
  format: {
    type: "csv",
    delimiter: ";"
  }
}

JSON с указанием корневого поля

data: {
  url: "https://example.com/data.json",
  format: {
    type: "json",
    property: "items"
  }
}

Это позволяет извлекать данные из вложенных структур без предварительной обработки на сервере.

Стриминговая загрузка и обновление данных

Vega поддерживает обновление данных по URL через повторную загрузку или внешние сигналы. Хотя базовая спецификация не предусматривает WebSocket как источник напрямую, возможно периодическое обновление через внешние механизмы интеграции.

Пример концептуального обновления:

view.runAsync()
  .then(v => v.data("table").url("https://example.com/new-data.csv"))
  .then(v => v.run());

Безопасность и ограничения выполнения

Загрузка данных по URL подчиняется ограничениям среды выполнения:

браузерные политики безопасности
sandbox-ограничения Vega View
запрет локального доступа file:// в большинстве окружений
ограничение редиректов в некоторых конфигурациях

Это делает поведение загрузки предсказуемым, но требует явной настройки инфраструктуры.

Производительность загрузки больших данных

При работе с крупными наборами данных важны следующие факторы:

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

Типичная оптимизация заключается в сокращении объёма данных до минимально необходимого перед передачей в Vega.

Использование нескольких источников данных

Одна спецификация может содержать несколько URL-источников:

data: [
  {
    name: "sales",
    url: "https://example.com/sales.csv",
    format: { type: "csv" }
  },
  {
    name: "regions",
    url: "https://example.com/regions.json",
    format: { type: "json" }
  }
]

Такая модель позволяет выполнять join-операции и сложные визуальные корреляции между наборами данных.

Связывание данных с визуальными слоями

После загрузки данные становятся доступными через имя источника и могут использоваться в различных mark-слоях.

{
  "data": {
    "url": "https://example.com/data.csv"
  },
  "mark": "line",
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Поля автоматически приводятся к внутренним типам Vega-Lite, если это возможно, иначе остаются строковыми.

Особенности интерпретации типов после загрузки

После загрузки данных Vega выполняет автоматическую типизацию:

числовые строки преобразуются в quantitative
ISO-даты интерпретируются как temporal
остальные значения остаются nominal

Однако при некорректных данных автоматическое определение может привести к ошибкам визуализации, поэтому часто используется явное указание типа поля в encoding.

Итоговая модель потока данных

Процесс загрузки по URL в Vega можно рассматривать как последовательность этапов:

Формирование запроса
HTTP-загрузка ресурса
Парсинг по формату
Преобразование через transform
Типизация данных
Передача в визуальные encodings
Рендеринг графического представления