Форматы входных данных

Общая модель данных

Deck.gl строится вокруг концепции слоёв (layers), каждый из которых принимает на вход набор данных и преобразует их в визуальные примитивы. Центральное понятие — data, которое задаёт источник и структуру информации для рендеринга.

Практически все слои Deck.gl работают с параметром:

  • data: массив объектов, URL к данным или функция доступа к данным

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

Массив объектов (Array of Objects)

Наиболее распространённый формат — стандартный JavaScript-массив:

const data = [
  { position: [37.78, -122.41], value: 10 },
  { position: [37.79, -122.42], value: 20 }
];

Каждый объект описывает одну сущность (точку, линию, полигон и т.д.).

Особенности

  • Гибкая структура без схемы
  • Подходит для большинства визуализаций
  • Позволяет хранить любые дополнительные поля
  • Используется по умолчанию во многих примерах Deck.gl

Пример использования в слое

new deck.ScatterplotLayer({
  id: 'scatter',
  data,
  getPosition: d => d.position,
  getRadius: d => d.value
});

Typed Arrays (типизированные массивы)

Для больших объёмов данных используется формат TypedArray, обеспечивающий максимальную производительность.

Поддерживаются:

  • Float32Array
  • Float64Array
  • Uint8Array
  • и другие типизированные массивы JavaScript

Пример структуры

const data = new Float32Array([
  37.78, -122.41, 10,
  37.79, -122.42, 20
]);

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

Особенности

  • Высокая производительность при рендеринге миллионов объектов
  • Минимальные накладные расходы памяти
  • Требуется явное описание структуры через accessor-функции

Пример слоя

new deck.ScatterplotLayer({
  data,
  getPosition: (d, {index}) => [
    data[index * 3],
    data[index * 3 + 1]
  ],
  getRadius: (d, {index}) => data[index * 3 + 2]
});

JSON и GeoJSON

Deck.gl активно работает с геопространственными данными, поэтому поддерживается формат GeoJSON, являющийся стандартом для географических объектов.

Пример GeoJSON

const data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [-122.41, 37.78]
      },
      properties: {
        value: 10
      }
    }
  ]
};

Особенности

  • Поддержка всех стандартных типов геометрий:

    • Point
    • LineString
    • Polygon
    • MultiPolygon

  • Совместимость с GIS-системами

  • Используется в слоях:

    • GeoJsonLayer
    • PathLayer
    • PolygonLayer

Доступ к данным

new deck.GeoJsonLayer({
  id: 'geojson',
  data,
  getFillColor: f => [255, 0, 0],
  getLineWidth: 2
});

CSV и табличные данные

Deck.gl не ограничивается JSON-структурами и может работать с табличными данными, например CSV.

Пример CSV-строки

latitude,longitude,value
37.78,-122.41,10
37.79,-122.42,20

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

const data = parsedCSV.map(d => ({
  position: [+d.latitude, +d.longitude],
  value: +d.value
}));

Особенности

  • Удобно для интеграции с аналитическими системами
  • Требует предварительного парсинга
  • Часто используется в Data Engineering пайплайнах

Потоковые данные (Streaming Data)

Deck.gl поддерживает динамическое обновление данных без полной перерисовки слоя.

Форматы обновления

  • добавление новых объектов
  • частичное обновление массива
  • замена TypedArray
  • инкрементальная загрузка

Пример обновления

layer.setProps({
  data: [...oldData, newPoint]
});

Особенности

  • Используется в real-time визуализациях

  • Подходит для:

    • трекинга транспорта
    • финансовых потоков
    • IoT-сенсоров

Data-driven функции доступа (Accessors)

Deck.gl не требует строгой структуры данных благодаря системе accessor-функций.

Принцип работы

Каждое визуальное свойство определяется функцией:

getPosition: d => d.position
getColor: d => d.color
getRadius: d => d.size

Варианты входных данных

Один и тот же слой может работать с разными форматами:

Объекты

{ x: 1, y: 2 }

Массивы

[1, 2]

Плоские буферы

Float32Array

Особенность архитектуры

Deck.gl не навязывает схему данных, а делегирует интерпретацию слою через accessors.

Формат через URL-источники

Deck.gl может загружать данные напрямую из внешних источников.

Примеры форматов:

  • .json
  • .geojson
  • .csv
  • бинарные форматы (ArrayBuffer)
  • сжатые потоки (draco, pbf)
new deck.GeoJsonLayer({
  data: 'https://example.com/data.geojson'
});

Особенности

  • Асинхронная загрузка
  • Поддержка кеширования
  • Возможность стриминга

Бинарные форматы и оптимизация памяти

Для высоконагруженных сцен используются бинарные структуры:

Подходы

  • interleaved buffers (чередование атрибутов)
  • separate attribute buffers
  • GPU-ready структуры

Пример interleaved buffer

// [x, y, value, x, y, value, ...]
const buffer = new Float32Array([...]);

Преимущества

  • минимизация CPU-GPU трансфера
  • снижение нагрузки на garbage collector
  • масштабирование до миллионов объектов

Форматирование через DataTransform

Некоторые слои используют промежуточную трансформацию данных:

Пример

new deck.ScreenGridLayer({
  data,
  getPosition: d => d.position,
  getWeight: d => d.value
});

Здесь входные данные могут быть преобразованы в:

  • сетку (grid)
  • агрегации
  • кластеры

Кастомные форматы данных

Deck.gl допускает полностью пользовательские структуры, при условии реализации accessors.

Пример

const data = {
  nodes: [...],
  edges: [...]
};

Использование:

getSourcePosition: d => d.nodes[d.source],
getTargetPosition: d => d.nodes[d.target]

Особенности

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

Смешанные форматы

В реальных приложениях часто комбинируются разные типы данных:

  • GeoJSON для геометрии
  • дополнительные массивы для метаданных
  • TypedArray для координат
  • внешние API для обновления

Пример гибридной структуры

const data = {
  geo: geojson,
  metrics: new Float32Array([...]),
  labels: ['A', 'B', 'C']
};

Схемы интерпретации данных слоями

Разные слои интерпретируют входные данные по-разному:

  • ScatterplotLayer — точки и координаты
  • PathLayer — массивы линий
  • PolygonLayer — вложенные массивы координат
  • HexagonLayer — агрегируемые точки
  • GridLayer — регулярная сетка

Пример различий

// PathLayer
data: [
  [[lng, lat], [lng, lat]]
]

// PolygonLayer
data: [
  [[lng, lat], [lng, lat], [lng, lat]]
]

Нормализация данных перед рендерингом

Перед передачей в слой данные часто проходят этап нормализации:

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

Пример нормализации

const normalized = raw.map(d => ({
  position: [d.lon, d.lat],
  value: Math.max(0, d.value)
}));

Производственные ограничения форматов

При работе с Deck.gl критичны ограничения:

  • размер JSON влияет на время парсинга
  • TypedArray требует строгой структуры
  • GeoJSON может быть избыточным для миллионов объектов
  • CSV требует преобразования

Оптимизация формата данных напрямую влияет на:

  • FPS рендеринга
  • время загрузки
  • потребление памяти
  • latency обновлений
Оглавление