Data sources and binary attributes

• Describe binary data as {length, attributes} with typed arrays and the correct size per attribute.
• Parse CSV with loaders.gl and convert fields with Number() before using getPosition.
• Use DataFilterExtension with getFilterValue and filterRange to filter on the GPU.

var N = stations.length;
var positions = new Float32Array(N * 2);
var radii = new Float32Array(N);
var colors = new Uint8Array(N * 4);

for (var i = 0; i < N; i++) {
  positions[i * 2] = stations[i].lng;
  positions[i * 2 + 1] = stations[i].lat;
  radii[i] = stations[i].flow > 800 ? 9 : 5;
  colors[i * 4] = 40;
  colors[i * 4 + 1] = 140;
  colors[i * 4 + 2] = 255;
  colors[i * 4 + 3] = 200;
}

var binaryData = {
  length: N,
  attributes: {
    getPosition: { value: positions, size: 2 },
    getRadius: { value: radii, size: 1 },
    getFillColor: { value: colors, size: 4 }
  }
};

new deck.ScatterplotLayer({
  id: 'stations-binary',
  data: binaryData,
  radiusUnits: 'pixels',
  pickable: true
});

import { load } from '@loaders.gl/core';
import { CSVLoader } from '@loaders.gl/csv';

const rows = await load('/data/stations.csv', CSVLoader);

new deck.ScatterplotLayer({
  id: 'stations-csv',
  data: rows,
  getPosition: function (d) {
    return [Number(d.lng), Number(d.lat)];
  },
  getRadius: 6,
  radiusUnits: 'pixels'
});
new deck.GeoJsonLayer({
  id: 'districts',
  data: '/data/districts.geojson',
  filled: true,
  getFillColor: [31, 95, 208, 60],
  getLineColor: [31, 95, 208, 220]
});

• A typed array shorter than length times size yields undefined coordinates for the last rows.
• Mutating a typed array in place does not trigger an update; replace the data reference.