data= FileAttachment("1_Anzahl_Seiten_beschrieben_unbeschrieben_mit_Standorten@2.csv").csv({typed: true})
series = d3.stack()
.keys(colors.keys())
.value((group, key) => group.get(key).value)
.order(d3.stackOrderNone)
(d3.rollup(data, ([d]) => d, d => d.vol, d => d.name).values())
.map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))
x = d3.scaleBand()
.domain(data.map(d => d.vol))
.rangeRound([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickValues(d3.ticks(...d3.extent(x.domain()), width / 60))
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y)
.tickFormat(x => (x)))
.call(g => g.select(".domain").remove())
/* .call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", "20px")
//.text("Titel")*/
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - margin.left - margin.right)
.attr("stroke-opacity", 0.8)
.attr("stroke-dasharray", "2,4")
/*.call(g => g.selectAll("line")
//.attr("stroke-opacity", 0.9)
.attr("stroke-dasharray", "2,2") */
)
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.
