Public
Edited
Apr 17, 2023
data = [
[
"Washington",
"Projekt Washington",
"George",
new Date(1789, 3, 29),
new Date(1797, 2, 3)
],
[
"Washington",
"Milestone A",
null,
new Date(1791, 3, 29),
new Date(1791, 3, 29)
],
["Washington", "Phase X", null, new Date(1790, 3, 29), new Date(1792, 2, 3)],
["Washington", "Phase Y", null, new Date(1791, 4, 29), new Date(1793, 2, 3)],
["Adams", null, "John", new Date(1797, 2, 3), new Date(1801, 2, 3)],
["Jefferson", null, "Thomas", new Date(1801, 2, 3), new Date(1809, 2, 3)]
]
phases = [
["Washington", "Phase X", null, new Date(1790, 3, 29), new Date(1792, 2, 3)],
["Washington", "Phase Y", null, new Date(1791, 4, 29), new Date(1793, 2, 3)]
]
milestones = [
[
"Washington",
"Milestone A",
null,
new Date(1791, 3, 29),
new Date(1791, 3, 29)
]
]
projects = [
[
"Washington",
"Projekt Washington",
"George",
new Date(1789, 3, 29),
new Date(1797, 2, 3)
],
["Adams", null, "John", new Date(1797, 2, 3), new Date(1801, 2, 3)],
["Jefferson", null, "Thomas", new Date(1801, 2, 3), new Date(1809, 2, 3)]
].map((d) => ({
projectName: d[0],
name: d[1],
tooltipContent: d[2],
start: d[3],
end: d[4]
}))
Plot.plot({
height: 300,
round: true,
color: {
scheme: "bupu",
type: "symlog"
},
marks: [
Plot.barX(projects, {
x: "start",
x2: "end",
y: "projectName"
// fill: "projectName"
}),
Plot.text(projects, {
x: "start",
y: "projectName",
text: "projectName",
textAnchor: "start",
dx: 6,
font
})
]
})
yScale = d3
.scaleBand()
.range([chartBox.y, chartBox.y + chartBox.height])
.domain(data.map((d) => d[0]))
xScale = d3
.scaleUtc()
.range([chartBox.x, chartBox.x + chartBox.width])
.domain([d3.min(data, (d) => d[3]), d3.max(data, (d) => d[4])])
chart = {
const svg = d3.create("svg").attr("width", width).attr("height", outerHeight);
const canvas = svg.append("g").classed("canvas", true);
}
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.
