I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
viewof details = Inputs.table(selectedScatterplot)
dataAsMatrix = {
return filteredData.map(d => selectedColumns.map(c => d[c]))
}
numericColumns = columns.filter(c => typeof(data[0][c]) === "number")
columns = data.length > 0 ? Object.keys(data[0]) : []
filteredDataWithCoords = {
const embedding = umapStatus.embedding;
return filteredData.map((d, i) => ({
...d,
x: embedding[i][0],
y: embedding[i][1]
}));
}
// The data selected by the scatterplot
selectedScatterplot = filteredDataWithCoords.filter(
(d) =>
!scatterplot.brush ||
(d.x >= scatterplot.brush.x[0] && d.x <= scatterplot.brush.x[1]) &&
(d.y >= scatterplot.brush.y[0] && d.y <= scatterplot.brush.y[1])
)
// Code from https://observablehq.com/@fil/umap-js-worker
umapStatus = Generators.observe(
worker(
fit,
{
dataAsMatrix,
show_dynamic,
options: {
nComponents,
minDist,
nNeighbors,
spread
}
},
`
const window = {};
importScripts("https://unpkg.com/umap-js@1.3.2/lib/umap-js.js");
importScripts("https://unpkg.com/d3-random@2");
const UMAP = window.UMAP;
Math.random = d3.randomLcg(${seed});
`
)
)
// Code from https://observablehq.com/@fil/umap-js-worker
fit = function* fit({ dataAsMatrix, show_dynamic, options }) {
//Yield something before reinitializing
yield {
status: "Initializing",
currentEpoch: 0,
targetEpoch: 0,
embedding: dataAsMatrix.map(_ => [Math.random(), Math.random()])
};
const umap = new UMAP(options),
nEpochs = umap.initializeFit(dataAsMatrix);
yield {
status: "Starting",
currentEpoch: 0,
targetEpoch: nEpochs,
embedding: umap.getEmbedding()
};
for (let i = 0; i < nEpochs; i++) {
umap.step();
if (show_dynamic && i%5 ===0) {
yield {
status: "Running",
currentEpoch: i,
targetEpoch: nEpochs,
embedding: umap.getEmbedding()
};
}
}
yield {
status: "Finished",
currentEpoch: nEpochs,
targetEpoch: nEpochs,
embedding: umap.getEmbedding()
};
}
d3 = require("d3-dsv")
import {vl} from "@vega/vega-lite-api"
import {checkbox, number, slider, select} from "@jashkenas/inputs"
// UMAP = (await require("umap-js")).UMAP
// https://observablehq.com/@fil/umap-js-worker
UMAP = "🌶" // fake symbol to make Observable happy (the real UMAP is loaded inside the worker)
import { dataInput } from "@john-guerra/data-input"
import { worker } from "@fil/worker"
import {navio} from "@john-guerra/navio"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import { vegaSelected } from "@john-guerra/vega-selected"
import {conditionalShow} from "@john-guerra/conditional-show"
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.
