Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
tf = {
const r = require.alias({
"@tensorflow/tfjs-core": "@tensorflow/tfjs-core@0.14.3",
"@tensorflow/tfjs-tsne": "@tensorflow/tfjs-tsne@0.2.0"
});
const [tf, tsne] = await Promise.all([
r("@tensorflow/tfjs-core"),
r("@tensorflow/tfjs-tsne")
]);
tf.tsne = tsne;
return tf;
}
sprites = new Promise((resolve, reject) => {
const image = new Image;
image.width = 33;
image.height = 33;
image.style.imageRendering = "pixelated";
image.crossOrigin = "anonymous";
image.src = "https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png";
image.onload = () => resolve(image);
image.onerror = reject;
})
function sprite(i) {
const context = DOM.context2d(SPRITE_SIZE, SPRITE_SIZE, 1);
for (let y = 0; y < SPRITE_SIZE; ++y) {
context.drawImage(sprites, y * SPRITE_SIZE, i, SPRITE_SIZE, 1, 0, y, SPRITE_SIZE, 1);
}
return context.canvas;
}
function inlineSprite(i) {
const canvas = sprite(i);
canvas.style.filter = "invert(1)";
canvas.style.width = "21px";
canvas.style.height = "21px";
return canvas;
}
datasetLabels = fetch("https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8")
.then(response => response.arrayBuffer())
.then(buffer => new Uint8Array(buffer, 0, NUM_CLASSES * NUM_POINTS))
label(0)
label = i => datasetLabels.subarray(i * NUM_CLASSES, (i + 1) * NUM_CLASSES)
classify = i => label(i).findIndex(value => value === 1)
classify(0)
labels = tidy(() => tf
.tensor2d(datasetLabels, [NUM_POINTS, NUM_CLASSES])
.argMax(1)
.dataSync())
tidy = f => Generators.disposable(tf.tidy(f), x => x && x.dispose && x.dispose())
datasetImages = {
const array = new Float32Array(NUM_POINTS * IMAGE_WIDTH);
const context = DOM.context2d(IMAGE_WIDTH, CHUNK_SIZE, 1);
for (let i = 0; i < NUM_POINTS; i += CHUNK_SIZE) {
context.drawImage(
sprites,
0, i, IMAGE_WIDTH, CHUNK_SIZE,
0, 0, IMAGE_WIDTH, CHUNK_SIZE
);
const {data} = context.getImageData(0, 0, IMAGE_WIDTH, CHUNK_SIZE);
const offset = i * IMAGE_WIDTH;
for (let j = 0; j < data.length; j += 4) {
array[offset + (j >> 2)] = data[j] / 255; // Grayscale, so just read the red channel.
}
}
return array;
}
data = tidy(() => tf
.tensor4d(datasetImages, [NUM_POINTS, SPRITE_SIZE, SPRITE_SIZE, 1])
.resizeBilinear([NEW_SIZE, NEW_SIZE])
.reshape([NUM_POINTS, NEW_SIZE * NEW_SIZE]))
async function* tsne(data) {
const tsne = tf.tsne.tsne(data);
await tsne.iterateKnn(NUM_KNN_ITERATIONS);
for (let i = 0; i < NUM_ITERATIONS; ++i) {
await tsne.iterate();
yield await tsne.coordinates().data();
}
}
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.
