//legend = swatches({color, columns: "240px", marginLeft: 7})
data = FileAttachment("1_Anzahl_Seiten_beschrieben_unbeschrieben@1.csv").csv({typed: true})
colors = new Map([
["Beschriebene Seiten", "#1f4e5f"],
["Unbeschriebene Seiten", "#aacfd0"]
])
legend = g => {
const swatchSize = 16;
const spacing = 180;
const legendWidth = (swatchSize + spacing) * color.domain().length // Breite der Legende (Swatchgröße + Abstand zum Text)
const legendHeight = swatchSize; // Gesamthöhe der Legende
// Berechne die Position in der Mitte unten
const xPosition = (width - legendWidth) / 2;
const yPosition = height - legendHeight -14;
const swatch = g
.attr("transform", `translate(${xPosition},${yPosition})`)
.attr("text-anchor", "start") // Anker auf "start" setzen, damit Text linksbündig ist
.selectAll("g")
.data(color.domain().slice())
.join("g")
.attr("transform", (d, i) => `translate(${i * (swatchSize + spacing)}, 0)`);
swatch.append("rect")
.attr("width", swatchSize)
.attr("height", swatchSize)
.attr("fill", color);
swatch.append("text")
.attr("x", swatchSize + 6) // Text rechts neben den Rechtecken
.attr("dy", "0.8em")
.text(d => d);
}
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))
.selectAll(".tick line, text")
.attr("transform", "translate(-6,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") */
)
width = 800
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.
