Public
Edited
Oct 20, 2024
parser = d3.utcParse("%Y-%m-%d")
import {addTooltips} from "@mkfreeman/plot-tooltip"
viewof plot = addTooltips(
Plot.plot({
height: 200,
width: 1000,
y: {
label: null
},
color: { range: ["#6699CC", "#B3CCE6"], domain: ["studies", "work"], type: "categorical"},
marks: [
Plot.barX(tasks, {
x1: (d) => parser(d.startDate),
x2: (d) => parser(d.endDate),
y: "type",
fill: "type",
stroke: "black",
strokeDasharray: 1,
strokeOpacity: 0.5,
title: (d) =>
`${d.name}\n${d.what}\nStart: ${d.startDate}\nEnd: ${d.endDate}`
}),
// Plot.text(tasks, {
// y: "type",
// x: (d) => new Date((parser(d.endDate).getTime() + parser(d.startDate).getTime()) / 2),
// text: (d) => `${d.name}\n${d.what}`,
// textAnchor: "middle",
// rotate: -10
// }),
Plot.image(tasks, {
x: (d) => new Date((parser(d.endDate).getTime() + parser(d.startDate).getTime()) / 2),
y: (d) => d.type,
width: d => d.logoWidth || 60,
src: "logoUrl",
title: (d) =>
`${d.name}\n${d.what}\nStart: ${d.startDate}\nEnd: ${d.endDate}`
})
]
})
)
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.
