Public
Edited
May 30, 2023
svg`<svg width=${width} height="${height}" id="canvas"> </svg>`
{
let currMonth = 0;
d3.selectAll("rect").remove();
d3.selectAll("text").remove();
d3.select("#canvas")
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("y", (d) => yScale(d.week_start))
.attr("x", (d) => width / 2 - xScale(d.strength_before) / 2)
.attr("width", (d) => xScale(d.strength_before))
.attr("height", (d) => xScale(d.strength_before) / 1.8)
.attr("fill", "#A4B3A1")
.attr("fill-opacity", 0.8)
.attr("stroke", "#fff");
d3.select("#canvas")
.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("y", (d) => yScale(d.week_start) + 15)
.attr("x", (d) => width / 2 - xScale(d.strength_before) / 2 + 5)
.attr("fill", (d) => {
if (currMonth != d.week_start.getMonth()) {
currMonth = d.week_start.getMonth();
return "#fff";
} else {
return "rgba(0, 0, 0, 0)";
currMonth = d.week_start.getMonth();
}
})
.attr("font-family", "GT America")
.attr("font-size", 14)
.text(
(d) =>
monthNames[d.week_start.getMonth()] +
" " +
(d.week_start.getYear() - 100)
);
}
data = (await FileAttachment("units-per-week.csv").csv({ typed: true })).filter(
(d) => d.unit == "4GTD"
)
yScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.week_start))
.range([0, height])
xScale = d3
.scaleSqrt()
.domain([0, d3.max(data, (d) => d.strength_before)])
.range([0, width])
width = 320
height = 1000
monthNames = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
]
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.
