The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Dec 23
21 stars
Plot.plot({
width,
height: 520,
marginLeft: 80,
x: { axis: "top" },
y: { axis: null, domain: d3.sort(data, order).map((d) => d.name) },
marks: [
() => htl.svg`<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="black"></stop>
<stop offset="1" stop-color="#ccc"></stop>
</linearGradient>
</defs>`,
Plot.rect(data, {
x1: "start",
x2: (d) => d.end ?? max,
y: "name",
fill: (d) => (d.end ? `url(#gradient)` : "black"),
insetTop: 6,
insetBottom: 6
}),
Plot.gridX({
ticks: "3 months",
stroke: "white",
strokeOpacity: 1,
strokeWidth: 3
}),
Plot.dot(data, {
x: "end",
y: "name",
r: 2.5,
fill: "currentColor"
}),
Plot.text(data, {
x: "start",
y: "name",
dx: -4,
text: "name",
textAnchor: "end",
fillOpacity: (d) => (d.end ? 0.6 : 1)
})
]
})
data = FileAttachment("candidates.csv").csv({typed: true})
max = d3.utcDay.offset(d3.max(data, (d) => d.end), 3)
orders = ({
Start: (a, b) => d3.ascending(a.start, b.start),
End: (a, b) => d3.descending(a.end || max, b.end || max) || d3.descending(a.start, b.start),
Duration: (a, b) => d3.descending((a.end || max) - a.start, (b.end || max) - b.start)
})
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.
