Winning with Open Data
Public
Edited
Jan 29, 2024
mapContainer = html`<div style="height:500px"></div>`
// parquetUrl = 'http://127.0.0.1:8080/internet-speeds.parquet'
parquetUrl = 'https://data.source.coop/vida/google-microsoft-open-buildings/geoparquet/by_country/country_iso=MCO/MCO.parquet'
parquetBuffer = fetch(parquetUrl).then((response) => response.arrayBuffer())
arrowTable = {
const wasmGeoTable = geoparquetWasm.readGeoParquet(new Uint8Array(parquetBuffer));
const wasmArrowTable = wasmGeoTable.intoTable();
const jsTable = apacheArrow.tableFromIPC(wasmArrowTable.intoIPCStream());
return jsTable;
}
originalGeometryColumn = arrowTable.getChild("geometry")
projUrl = "https://epsg.io/5070.proj4"
sourceProjString = fetch(projUrl).then((response) => response.text())
geoarrowJs.algorithm.reproject(originalGeometryColumn.data[0], "EPSG:4326", "EPSG:4326")
deckglLayer = {
const layer = new geoarrowDeckLayers.GeoArrowSolidPolygonLayer({
id: "wetlands",
data: arrowTable,
getFillColor: [200, 0, 0],
radius_min_pixels: 1,
earcutWorkerUrl: null,
getPolygon: arrowTable.get("geometry"),
// I have a bug here.. turns out I can't use table._offsets!
// pickable: true,
// autoHighlight: true,
})
deckglMap.setProps({ layers: [layer] });
return layer;
}
// Load the geoparquet-wasm library
geoparquetWasm = {
const module = await import(
"https://unpkg.com/@geoarrow/geoparquet-wasm@0.2.0-beta.2/esm/index.js"
);
// Need to await the default export first to initialize the WebAssembly code
await module.default();
return module;
}
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: -77.04025810400094,
latitude: 38.89281620799104,
zoom: 11,
pitch: 0,
bearing: 0
},
controller: true
});
}
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")
geoarrowJs = import("https://cdn.jsdelivr.net/npm/@geoarrow/geoarrow-js@0.3.0/+esm")
geoarrowDeckLayers = require.alias({
"@deck.gl/aggregation-layers/typed": deck,
"@deck.gl/core/typed": deck,
"@deck.gl/geo-layers/typed": deck,
"@deck.gl/layers/typed": deck,
"apache-arrow": apacheArrow,
"@math.gl/polygon": mathGlPolygon
})("@geoarrow/deck.gl-layers@0.3.0-beta.11")
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.
