Published
Edited
Jul 16, 2021
2 forks
7 stars
Gantt chart with Plot
tasks = FileAttachment("gantt-project.csv").csv({typed: true})
dependencies = FileAttachment("gantt-project-dependencies.csv").csv({typed: true})
taskByID = d3.index(tasks, d => d.task_id);
depData = dependencies.map( d => {
d.head = taskByID.get(d.task_id).start;
d.tail = taskByID.get(d.dependency).start;
return d;
});
Plot.plot({
marginLeft: 100,
x: {
grid: true
,tickFormat: d3.timeFormat("%m-%y")
},
y: {
grid: true,
tickFormat: t => taskByID.get(t).name,
axis: "left",
label: null
},
marks: [
Plot.barX(tasks, {
stroke: "#1a73e8",
fill: "#1a73e8",
fillOpacity: 0.7,
strokeOpacity: 0.7,
x1: "start",
x2: "end",
y: "task_id",
title: "name"
}
),
Plot.link(depData, {
curve: "step-before",
stroke: "#bab0ab",
strokeWidth: 4,
strokeLinecap: "round",
x1: "head",
y1: "task_id",
x2: "tail",
y2: "dependency"
})
]
});
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.
