Computer Graphics & Visualization @ufrj.br
//
// Computes data structures for mapping category names to integer numbers
// and vice-versa
//
function categoryMaps(categorical) {
let indexToCat = {};
let catToIndex = {};
let dimensions = getDimensions(categorical);
for (let dim of dimensions) {
indexToCat[dim] = [];
catToIndex[dim] = new Map();
}
for (let row of categorical) {
for (let dim of dimensions) {
if (!catToIndex[dim].has(row[dim])) {
catToIndex[dim].set(row[dim], indexToCat[dim].length);
indexToCat[dim].push(row[dim]);
}
}
}
return { indexToCat, catToIndex };
}
data = titanic
//
// Transforms data to a tensor adding two additional dimensions which are random samples of a unit disk
//
tensor = {
return tf.tensor(
data.map(row => {
const a = Math.random() * 2 * Math.PI;
const r = Math.sqrt(Math.random());
return dimensions
.map(d => catToIndex[d].get(row[d]))
.concat([r * Math.cos(a), r * Math.sin(a)]);
})
);
}
catMaps = categoryMaps(data)
indexToCat = catMaps.indexToCat
catToIndex = catMaps.catToIndex
getDimensions = categorical => Object.keys(categorical[0])
dimensions = getDimensions(data)
colorDimensionIndex = dimensions.lastIndexOf(colorDimension)
textureDimensionIndex = dimensions.lastIndexOf(textureDimension)
function makePalette(scale, ncolors) {
let palette = [];
for (let i = 0; i < ncolors; i++) {
palette.push(scale((1 + i) / (ncolors + 1)));
}
return palette;
}
dimPalette = makePalette(
dimensionScales[colorDimensionIndex],
indexToCat[colorDimension].length
)
texturePalette = makePalette(
dimensionScales[textureDimensionIndex],
indexToCat[textureDimension].length
)
coords = {
const ts = await tf.tsne(tensor);
await ts.iterateKnn(ts.knnIterations());
const tsneIterations = 333;
for (let i = 0; i < tsneIterations; ++i) {
await ts.iterate(3);
yield ts.coordsArray();
}
}
import { data as titanic } from "@john-guerra/parallel-sets"
d3 = require("d3@6")
import { Radio } from "@observablehq/inputs"
import { swatches } from "@d3/color-legend"
import { ramp, scales, displayPalettes } from "@makio135/give-me-colors"
//
// Require "black magic" to import tensor flow core and the tsne tf module
// (Thanks @Fil)
//
tf = {
replay;
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.tsne;
return tf;
}
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.
