The end-to-end solution for building and hosting better data apps, dashboards, and reports.
tasks = [
{
task: "Develop survey",
group: "Data team",
startDate: "2023-04-01",
endDate: "2023-07-01",
description:
"Team will work with HR to develop a user survey about product usage and perception."
},
{
task: "Distributing surveys",
group: "Marketing",
startDate: "2023-07-03",
endDate: "2023-07-10",
description:
"Mail, email, and post surveys on socials."
},
{
task: "Collect responses",
group: "Data team",
startDate: "2023-10-01",
endDate: "2024-04-31",
description: "Collect survey responses and send reminders."
},
{
task: "Content creation",
group: "Marketing",
startDate: "2024-01-01",
endDate: "2024-08-10",
description: "Create brochures, ads and web assets to share with users."
},
{
task: "Feedback and interviews",
group: "Customer success",
startDate: "2024-04-18",
endDate: "2024-09-11",
description: "Analyze data and share with board."
}
]
myColors = [{group: "Marketing", color: "gold"},
{group: "Data team", color: "#56B4e9"},
{group: "Customer success", color: "tomato"}]
Plot.plot({
marks: [
Plot.frame({ stroke: settings.panelBorder == "show" ? "#ccc" : null }),
Plot.barX(tasks, {
y: "task",
x1: (d) => parser(d.startDate),
x2: (d) => parser(d.endDate),
fill: "group",
rx: settings.barRoundness,
insetTop: settings.barHeight,
insetBottom: settings.barHeight
}),
Plot.text(tasks, {
y: "task",
x: (d) => parser(d.startDate),
text: (d) => d.task,
textAnchor: "start",
dy: settings.textPosition,
fontSize: settings.fontSize,
stroke: "white",
fill: "dimgray",
fontWeight: 500
}),
Plot.tip(tasks, Plot.pointerY({
y: "task",
x1: (d) => parser(d.startDate),
x2: (d) => parser(d.endDate),
title: (d) =>
`Team: ${d.group}\nTask: ${d.task}\nDescription: ${d.description}\nStart: ${d.startDate}\nEnd: ${d.endDate}`
}))
],
height: settings.plotHeight,
width: settings.plotWidth,
x: { grid: (settings.gridlines == "x") | (settings.gridlines == "both") ? true : null },
y: {
domain: domainByDate,
label: null,
tickFormat: null,
tickSize: null,
grid: (settings.gridlines == "y") | (settings.gridlines == "both") ? true : null
},
color: { domain: domainByGroup, range: colors, legend: true }
})
domainByDate = tasks.sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d.task)
domainByGroup = d3.groups(tasks, d => d.group).sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d[0])
parser = d3.utcParse("%Y-%m-%d")
colorMap = new Map(myColors.map((obj) => [obj.group, obj.color]))
colors = domainByGroup.map(d => colorMap.get(d))
import {getIcon} from '@observablehq/product-education-icon-helpers'
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.
