Winning with Open Data
Public
Edited
Jan 4, 2024
mapContainer = html`<div style="height:500px"></div>`
flatgeobufBuffer = fetch("https://raw.githubusercontent.com/flatgeobuf/flatgeobuf/master/test/data/UScounties.fgb").then((response) => response.arrayBuffer())
arrowTable = {
const wasmGeoTable = flatgeobufWasm.readFlatGeobuf(new Uint8Array(flatgeobufBuffer));
const wasmArrowTable = wasmGeoTable.intoTable();
const jsTable = apacheArrow.tableFromIPC(wasmArrowTable.intoIPCStream());
return jsTable;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
deckglLayer = {
const layer = new geoarrowDeckLayers.GeoArrowSolidPolygonLayer({
id: "counties",
data: arrowTable,
getFillColor: [0, 100, 60, 160],
// I have a bug here.. turns out I can't use table._offsets!
// pickable: true,
// autoHighlight: true,
})
deckglMap.setProps({ layers: [layer] });
return layer;
}
deck = require.alias({
h3: {}
})("deck.gl@8.9.27/dist.min.js")
deckglMap = {
// This is an Observable hack: clear previously generated content
mapContainer.innerHTML = "";
return new deck.DeckGL({
// The HTML container to render into
container: mapContainer,
map: mapboxgl,
mapStyle:
"https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
// Viewport settings
initialViewState: {
longitude: -111.91530172951025,
latitude: 40.63403641639511,
zoom: 4,
pitch: 0,
bearing: 0
},
controller: true
});
}
// Load the flatgeobuf-wasm library
flatgeobufWasm = {
const module = await import(
"https://unpkg.com/@geoarrow/flatgeobuf-wasm@0.2.0-beta.1/esm/index.js"
);
// Need to await the default export first to initialize the WebAssembly code
await module.default();
return module;
}
apacheArrow = require("apache-arrow@14")
mapboxgl = require("mapbox-gl@1.6.0/dist/mapbox-gl.js")
mathGlPolygon = import("https://cdn.jsdelivr.net/npm/@math.gl/polygon@3.6.2/+esm")
geoarrowDeckLayers = require.alias({
"@deck.gl/core/typed": deck,
"@deck.gl/layers/typed": deck,
"apache-arrow": apacheArrow,
"@math.gl/polygon": mathGlPolygon,
})("@geoarrow/deck.gl-layers@0.2.0")
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.
