The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Apr 18
getTipAsync = async (name) => {
return Promises.delay(250, `${name}^2 = ${name ** 2}`);
}
chart = Plot.plot({
marks: [
Plot.dot(penguins, {
x: "body_mass_g",
y: "species",
tip: {
channels: { name: (_, i) => `${i}^2 = ` },
render(index, scales, values, dimensions, context, next) {
const g = next(index, scales, values, dimensions, context); // placeholder
(async () => {
for (const i of index) {
values.channels.name.value[i] = await getTipAsync(i);
}
for (const tspan of g.querySelectorAll("text>tspan"))
tspan.remove();
for (const tspan of next(
index,
scales,
values,
dimensions,
context
).querySelectorAll("text>tspan")) {
g.querySelector("text").append(tspan);
}
})();
return g;
}
}
})
]
})
getTipSync = (name) => {
for (let i = 0; i < 2e8; ++i) Math.cos(i); // adjust to make this 150 ms or so… and feel the pain
return `${name}^2 = ${name ** 2}`;
}
Plot.plot({
marks: [
Plot.dot(penguins, {
x: "body_mass_g",
y: "species",
tip: {
channels: { name: (_, i) => `${i}^2 = ` },
render(index, scales, values, dimensions, context, next) {
for (const i of index) values.channels.name.value[i] = getTipSync(i);
return next(index, scales, values, dimensions, context);
}
}
})
]
})
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.
