Unlisted
Edited
Dec 2, 2022
4 stars
data = d3.json(`https://storage.googleapis.com/fun-data/quickdraw/grids/pig_8.48_-26_1.25.json`)
// add tippy to the chart's dots
hover(d3.select(chart).selectAll("circle"), invalidation)
function tipcontent(i) {
const d = data[i];
// extract drawing coordinates as flat arrays, makes it easier to draw them with Plot
const x = d.drawing.flatMap(([X]) => X);
const y = d.drawing.flatMap(([, Y]) => Y);
const z = d.drawing.flatMap(([X], i) => X.map((d) => i));
return md`<div style="max-height: 14em; overflow: auto; width: 340px;">
<strong>${d.key_id}</strong>
<div>${Plot.line(z, { x, y, z, stroke: "#666", curve: "natural" }).plot({
width: 140,
height: 140,
x: { axis: null, domain: [0, 260] },
y: { axis: null, domain: [0, 260], reverse: true }
})}</div>
${Object.entries(d)
.filter(([key, value]) => value && !["name"].includes(key))
.map(
([key, value]) =>
`**${key}:** ${
value instanceof Date ? value.toISOString().slice(0, 10) : value
}`
)
.join("<br>")}
`;
}
html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/${tippytheme}.css`
)}">`
html`<style>
.highlight { stroke: #444; stroke-width: 2px }
`
import { viewof tippytheme, hover } with { tipcontent } from "@fil/hello-tippy"
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.
