Public
Edited
Apr 1
// Range of years
xExtent = d3.extent(einbauData.map((d) => d.Jahr))
// add one time unit of padding to make sure bars don't overlap with y-axis
paddedExtent = [
d3.min(einbauData.map((d) => d3.timeYear.offset(d.Jahr, -1))),
d3.max(einbauData.map((d) => d3.timeYear.offset(d.Jahr, 0)))
]
yAxisBilanz = (svg) => {
function formatTick(d) {
const s = (d / 1e3).toLocaleString("de-CH");
return this.parentNode.nextSibling ? `\xa0${s}` : `\xa0${s}`; //`${s} Tsd. t`;
}
const dimensions = chartDimensions;
const numOfTicks = yBilanz.domain()[1];
const axisHeight = dimensions.boundedHeight;
const pixelsPerTick = 30;
const numberOfTicksTarget = Math.max(
1,
Math.floor(axisHeight / pixelsPerTick)
);
svg
.append("g")
// For tick values left of graph uncomment
.attr("transform", `translate(${dimensions.margin.left}, 0)`)
.call(
d3
.axisLeft(yBilanz)
.tickSize(
dimensions.margin.left - dimensions.width - dimensions.margin.right
)
.tickFormat(formatTick)
.ticks(numberOfTicksTarget)
)
.call((g) =>
g
.selectAll(".tick line")
.attr("stroke-dasharray", "2,2")
.attr("stroke", ZHColors.black["20"])
)
.call((g) =>
g
.selectAll(".tick text")
// .attr("x", 0)
// .attr("dy", 0)
.attr("fill", ZHColors.black["60"])
)
// .call((g) => {
// g.selectAll(".tick line").attr("stroke", ZHColors.black["20"]);
// })
.call((g) => {
g.selectAll(".domain").remove();
})
.call((g) =>
g
.append("text")
.attr("x", 0)
.attr("y", 10)
.attr("fill", ZHColors.black["60"])
.attr("text-anchor", "end")
.text("Tsd. t")
);
}
import {
tidy,
pivotWider,
pivotLonger,
mutate,
summarize
} from "@pbeshai/tidyjs"
import { createTooltip } with {
elIds as elIds,
width as width
} from "7ec9f277c82fd4b4"
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.
