parquetBuffer = fetch(buildingsUrl).then((response) => response.arrayBuffer())
arrowTable = {
const parquetBytes = new Uint8Array(parquetBuffer);
const decodedArrowBytes = parquet.readParquet(parquetBytes);
const arrowTable = arrow.tableFromIPC(decodedArrowBytes);
return arrowTable;
}
arrowTable.schema.fields[0]
geometryColumn = arrowTable.getChildAt(0)
{
const firstGeometry = geometryColumn.get(0);
const firstRing = firstGeometry.get(0);
const firstCoord = firstRing.get(0);
return firstCoord.toArray();
}
// Pretty print the first geometry
// One ring with five coordinates
{
const firstGeom = geometryColumn.get(0);
const printedGeom = [];
for (const ring of firstGeom) {
const printedRing = [];
for (const coord of ring) {
const printedCoord = [coord.get(0), coord.get(1)];
printedRing.push(printedCoord);
}
printedGeom.push(printedRing);
}
return printedGeom;
}
// Note that `data` here is an array with only one element because this Parquet file only had one row group
// Otherwise we'd need to do this process for each batch of columnar data
polygonIndices = geometryColumn.data[0].valueOffsets
ringIndices = geometryColumn.getChildAt(0).data[0].valueOffsets
resolvedPolygonIndices = {
const resolvedIndices = new Int32Array(polygonIndices.length);
for (let i = 0; i < resolvedIndices.length; ++i) {
// Perform the lookup into the ringIndices array using the polygonIndices array
resolvedIndices[i] = ringIndices[polygonIndices[i]]
}
return resolvedIndices;
}
coordinateVector = geometryColumn.getChildAt(0).getChildAt(0)
flatCoordinateVector = geometryColumn.getChildAt(0).getChildAt(0).getChildAt(0)
flatCoordinateArray = flatCoordinateVector.data[0].values
deckglLayer = {
// Refer to https://deck.gl/docs/api-reference/layers/solid-polygon-layer#use-binary-attributes
const data = {
// Number of geometries
length: arrowTable.numRows,
// Indices into coordinateArray where each polygon starts
startIndices: resolvedPolygonIndices,
// Flat coordinates array
attributes: {
getPolygon: { value: flatCoordinateArray, size: 2 }
}
};
const layer = new deck.SolidPolygonLayer({
// This is an Observable hack - changing the id will force the layer to refresh when the cell reevaluates
id: `layer-${Date.now()}`,
data,
// Skip normalization for binary data
_normalize: false,
// Counter-clockwise winding order
_windingOrder: "CCW",
getFillColor: [0, 100, 60, 160],
});
deckglMap.setProps({ layers: [layer] });
return layer;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
