The AI community building the future.
Sentence Embeddings and Dimension Reduction in the Browser
transformers = import("https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0")
extractor = await transformers.pipeline(
"feature-extraction",
"Xenova/all-MiniLM-L6-v2",
{ quantized: false }
)
data = await FileAttachment("data.json").json()
sample = {
const shuffled = d3.shuffle(data.slice());
return shuffled.slice(0, 200);
}
embeddings = await Promise.all(
sample.map((row) =>
extractor(row.Category + ": " + row.Prompt, {
pooling: "mean",
normalize: true
})
)
)
reducerResult = Generators.queue(
worker(
function dr({ method, data, parameters }) {
const D = new druid[method](data, parameters);
const next = D.generator().next();
if (next.done) {
return D.transform();
}
return D.generator();
},
{
method: druid_method,
data: embeddings.map((row) => row.data),
parameters: reducerParams
},
`
importScripts(${JSON.stringify(
await require.resolve("@saehrimnir/druidjs@0.6.3")
)});
`
)
)
Plot.plot({
marginTop: 10,
inset: 10,
color: {
scheme: "Paired",
legend: true,
columns: 3
},
legend: {
marginTop: 50
},
marks: [
Plot.dot(dataToPlot, {
x: "x",
y: "y",
fill: "Category",
r: 5,
opacity: 0.8
// strokeWidth: 4,
// stroke: "Category"
}),
Plot.tip(
dataToPlot,
Plot.pointer({
stroke: "Category",
channels: { Note: "Note", sport: "sport" },
x: "x",
y: "y",
title: (d) => [d.Category, d.Prompt].join("\n\n")
})
)
]
})
{
const plt = Plot.plot({
marginTop: 50,
marginBottom: 50,
inset: 50,
width: width,
height: width,
marks: [
Plot.image(dataToPlot, {
x: "x",
y: "y",
src: (x) => x.images.src,
width: 50,
title: "x"
}),
Plot.tip(
dataToPlot,
Plot.pointer({
stroke: "Category",
channels: { Note: "Note", sport: "sport" },
x: "x",
y: "y",
title: (d) => [d.Category, d.Prompt].join("\n\n")
})
)
]
});
const selection = d3.select(plt);
selection.on("mousemove", (evt) => {
const tipdata = plt.value;
if (tipdata) {
const image = selection.select(`image[href='${tipdata.images.src}']`);
image.raise();
}
});
return plt;
}
druid = "🤯" // placeholder for Observable to allow the *dr* function to exist; the worker uses importScripts
import { worker } from "@fil/worker"
import { form } from "@mbostock/form-input"
mutable status = ""
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.
