Published
Edited
May 18, 2022
7 stars
height = width
{
const features = ds.mnist.map((instance) => instance.features);
const { grids, imageHeight, imageWidth } = generateGrid({
width: width,
height: height,
rows: 20,
cols: 20
});
const tensorFeatures = tf.tensor(features);
let iteration = 0;
for await (const assignments of tsneGrid(tensorFeatures, grids)) {
const useableFormat = assignments.map((ass, i) => {
const instance = ds.mnist[ass];
return { id: instance.filename, grid: grids[i] };
});
svg
.selectAll("image")
.data(useableFormat)
.join("image")
.attr("x", (d) => d.grid[0])
.attr("y", (d) => d.grid[1])
.attr("width", imageWidth)
.attr("height", imageHeight)
.attr("href", (d) => `${settings.href}/${d.id}`);
progressSvg
.select("rect")
.attr("width", (iteration++ / settings.iterations.tsne) * width);
}
}
async function* tsneGrid(data, gridPoints) {
const tsne = tf.tsne.tsne(data);
await tsne.iterateKnn(settings.iterations.knn);
for (let i = 0; i < settings.iterations.tsne; i++) {
await tsne.iterate();
const featuresTensor = await tsne.coordinates();
const featuresFlattened = await featuresTensor.data();
await featuresTensor.dispose();
const features2D = reshape2D(featuresFlattened, [data.shape[0], 2]);
const transformFeatures2D = transformToGridSpace(features2D);
const assignments = linearOptimizer.assign({
points: transformFeatures2D,
assignTo: gridPoints
});
yield assignments;
}
}
d3 = require("d3@6")
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.
