metricMapping = {
return {
"Download speed (kbps)": "avg_d_kbps",
"Upload speed (kbps)": "avg_u_kbps",
"Latency (ms)": "avg_lat_ms"
};
}
// Load the parquet-wasm library
readParquet = {
const parquetModule = await import(
"https://unpkg.com/parquet-wasm@0.6.0/esm/parquet_wasm.js"
);
// Need to await the default export first to initialize the WebAssembly code
await parquetModule.default();
return parquetModule.readParquet;
}
arrowTable = {
const parquetBytes = new Uint8Array(await parquetFile.arrayBuffer());
// Set large batchSize to ensure input data stays as a single Arrow RecordBatch
const wasmTable = readParquet(parquetBytes, {
batchSize: Math.pow(2, 31)
});
const arrowTable = arrow.tableFromIPC(wasmTable.intoIPCStream());
return arrowTable;
}
geometryColumn = arrowTable.getChild("geometry")
flatCoordinateArray = geometryColumn.getChildAt(0).data[0].values
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 }
}
})
layer = {
const layer = new deck.ScatterplotLayer({
data,
getRadius: 100,
radiusMinPixels: 0.4
});
return layer;
}
deckgl.setProps({ layers: [layer] });
colorAttribute = {
const colName = metricMapping[form.metric];
const column = arrowTable.getChild(colName);
return colorScale(column.data[0].values);
}
colorScale = {
// Convert from value to RGB values
const linearScale = d3
.scaleLinear()
.domain([parseFloat(form.lowerBound), parseFloat(form.upperBound)])
.range([0, 1]);
// This is a fast vectorized approach: we store all colors in a single Float32Array instead of many small JS buffers
return (values) => {
const outputArray = new Float32Array(values.length * 3);
for (let i = 0; i < values.length; ++i) {
const value = values[i];
const color = d3.color(d3.interpolateViridis(linearScale(value)));
outputArray[i * 3] = color.r / 255;
outputArray[i * 3 + 1] = color.g / 255;
outputArray[i * 3 + 2] = color.b / 255;
}
return outputArray;
};
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.