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.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;
}
arrowTable = {
const parquetBytes = new Uint8Array(await parquetFile.arrayBuffer());
const decodedArrowBytes = readParquet(parquetBytes);
const arrowTable = arrow.tableFromIPC(decodedArrowBytes);
return arrowTable;
}
geometryColumn = arrowTable.getChild("geometry")
flatCoordinateArray = geometryColumn.getChildAt(0).data[0].values
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: `geojson-${Date.now()}`,
data,
getPointRadius: 10,
pointRadiusMinPixels: 0.8
});
deckgl.setProps({ layers: [layer] });
return 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;
};
}
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.
