Public
Edited
Feb 28, 2024
mapContainer = html`<div style="height:500px"></div>`
point_radius = 20
// Observable cell to decode the base64 string to binary
arrowTable = {
const binaryString = atob(parquetBase64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
const decodedArrowBytes = readParquet(bytes);
const arrowTable = arrow.tableFromIPC(decodedArrowBytes);
return arrowTable;
return bytes;
}
arrowTable.schema.fields
names_array = arrowTable.getChild("name").toArray();
geometryColumn = arrowTable.getChild("geometry")
flatCoordinateArray = geometryColumn.getChildAt(0).data[0].values
make_tooltip = (info) => {
// Check if there's a valid index
if (info.index === -1 || !info.layer) return null;
// console.log('on point')
// Assuming `myData` is your original dataset accessible in this scope
const dataIndex = info.index; // Index of the hovered item
const inst_name = names_array[info.index]
// const dataItem = myData[dataIndex]; // Fetch the data item using the index
// Construct the tooltip content
// Make sure to check that `dataItem` and the property you want to display exist
// if (dataItem && dataItem.message) {
return {
html: `<div>${dataIndex}</div><div>${inst_name}</div?`, // Customize as needed
// You can also set style properties for the tooltip here
};
// }
return null; // Return null if there's no data to display
}
deckgl = {
// This is an Observable hack: clear previously generated content
mapContainer.innerHTML = "";
return new deck.DeckGL({
// The HTML container to render into
container: mapContainer,
controller: {doubleClickZoom: false},
// Viewport settings
initialViewState: {target: [500, 500, 0], zoom: -1},
views: [new deck.OrthographicView({id: 'ortho'})],
getTooltip: make_tooltip,
});
}
layer = {
const data = {
length: arrowTable.numRows,
// Pregenerated attributes
attributes: {
// Flat coordinates array; this is a view onto the Arrow Table's memory and can be copied directly to the GPU
// Refer to https://deck.gl/docs/developer-guide/performance#supply-binary-blobs-to-the-data-prop
getPosition: { value: flatCoordinateArray, size: 2 },
// // Flat attributes array
// // Refer to https://deck.gl/docs/developer-guide/performance#supply-attributes-directly
// getFillColor: { value: colorAttribute, size: 3 }
}
};
const layer = new deck.ScatterplotLayer({
// This is an Observable hack - changing the id will force the layer to refresh when the cell reevaluates
id: 'scatter-layer',
data,
// getPointRadius: point_radius,
getRadius: point_radius,
// pointRadiusMinPixels: 0.8
pickable: true,
onClick: info => {
console.log('click!!')
console.log(info.index)
console.log(names_array[info.index])
},
});
deckgl.setProps({ layers: [layer] });
return layer;
}
arrow = require("apache-arrow")
// Load the parquet-wasm library
readParquet = {
const parquetModule = await import(
"https://unpkg.com/parquet-wasm@0.4.0-beta.5/esm/arrow2.js"
);
// Need to await the default export first to initialize the WebAssembly code
await parquetModule.default();
return parquetModule.readParquet;
}
deck = require.alias({
h3: {}
})("deck.gl@8.9/dist.min.js")
two_tables = arrowTable.concat(arrowTable)
two_tables
two_tables.getChild("name").toArray();
geometryColumn_two_tables = two_tables.getChild("geometry")
geometryColumn_check = arrowTable.getChild("geometry")
geometryColumn.getChildAt(0).data[0].values
geometry_data_array = geometryColumn_two_tables.getChildAt(0).data
geometry_data_array
geometry_data_array.map(x => x.values)
geometryColumn_two_tables.getChildAt(0).data[0].values
geometryColumn_two_tables.getChildAt(0).data[1].values
combinedValues = geometryColumn_two_tables.getChildAt(0).data
.map(dataElement => dataElement.values)
.flat(); // Flatten the array of arrays into a single array
// Map to extract values arrays and reduce to concatenate into a single Float64Array
combinedValues_reduce = geometry_data_array
.map(x => x.values)
.reduce((acc, val) => {
const combined = new Float64Array(acc.length + val.length);
combined.set(acc);
combined.set(val, acc.length);
return combined;
}, new Float64Array(0));
// Map to extract values arrays and reduce to concatenate into a single Float64Array
geometry_data_array
.map(x => x.values)
.reduce((acc, val) => {
const combined = new Float64Array(acc.length + val.length);
combined.set(acc);
combined.set(val, acc.length);
return combined;
}, new Float64Array(0));
arrowTable.getChild("geometry").getChildAt(0).data
.map(x => x.values)
.reduce((acc, val) => {
const combined = new Float64Array(acc.length + val.length);
combined.set(acc);
combined.set(val, acc.length);
return combined;
}, new Float64Array(0));
two_tables.getChild("geometry").getChildAt(0).data
.map(x => x.values)
.reduce((acc, val) => {
const combined = new Float64Array(acc.length + val.length);
combined.set(acc);
combined.set(val, acc.length);
return combined;
}, new Float64Array(0));
arrowTable.numRows
two_tables.numRows
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.
