The avatar for @ballingt
Thomas Ballinger
Published
Advent of WASM
Edited
Dec 22, 2021
4 stars
Advent of WASM
Advent of WASM Day 1Advent of WASM Day 2Advent of WASM Day 3Advent of WASM Day 4
Web Assembly Memory Visualizer
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
memory = {
instance.exports.setInt(12, 10);
instance.exports.setInt(16, 20);
instance.exports.setInt(20, 30);
instance.exports.setInt(24, 50);
instance.exports.setInt(
28,
10 + 20 * 256 + 30 * 256 * 256 + 40 * 256 * 256 * 256
);
instance.exports.setInt(
30,
1 + 3 * 256 + 5 * 256 * 256 + 7 * 256 * 256 * 256
);

return new Uint8Array(instance.exports.memory.buffer, 0, 256);
}
Insert cell
module.emitText()
Insert cell
instance.exports
Insert cell
instance.exports.helloWorld(10)
Insert cell
Insert cell
buffer = module.emitBinary()
Insert cell
instance = (await WebAssembly.instantiate(buffer)).instance
Insert cell
data = {
const data = Array.from(memory).map((x, i) => ({
value: x,
offset: i,
x: i % 16,
y: Math.floor(i / 16) * 16
}));
return data;
}
Insert cell
w = 30
Insert cell
color = v => `rgb(${255 - v},${255 - v},${255 - v})`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { vl } from '@vega/vega-lite-api'
Insert cell
vegaEmbed = require('vega-embed')
Insert cell

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.
Learn more