Public
Edited
Apr 23, 2023
//legend = swatches({color, columns: "130px 2", marginLeft: margin.left})
data = {
const rollup = d3.rollup(
dataRaw,
v => d3.sum(v, d => 1),
d => +d["Artikel-Jahr"],
d => d["Kategorie"]
)
let arr = []
for (const [key, value] of rollup.entries()) {
for (const [key2, value2] of value.entries()) {
arr.push({ name: key2, year: key, value: value.get(key2)})
}
}
return arr
}
dataRaw = (await FileAttachment("gga-nachrichten.tsv").tsv())
.filter(d => reviewsOnly ? d["Artikel-Typ"] === "Rezension" : true)
.filter(d => hallerOnly ? d["Artikel-Rezensent_ID"] === "person_01200" : true)
.map(d => { let category;
if (d["Artikel-Rezensent_ID"] === "person_01200" && d["Artikel-Rezensent_Identifikation"] !== "unsicher") category = "Haller"
else if (d["Artikel-Rezensent_ID"] === "person_01200" && d["Artikel-Rezensent_Identifikation"] === "unsicher") category = "Haller (wahrscheinlich)"
else if (d["Artikel-Rezensent_ID"] !== "unbekannt" && d["Artikel-Rezensent_Identifikation"] !== "unsicher") category = "Nicht Haller"
else if (d["Artikel-Rezensent_ID"] !== "unbekannt" && d["Artikel-Rezensent_Identifikation"] === "unsicher") category = "Nicht Haller (wahrscheinlich)"
else category = "Unbekannt"
return ({ ...d, Kategorie: category })})
colors = new Map([
["Haller", "#9B6A97"],
["Haller (wahrscheinlich)", "#BE89AC"],
["Unbekannt", "#BBB1AC"],
["Nicht Haller (wahrscheinlich)", "#61AA57"],
["Nicht Haller", "#398949"],
// ["Haller", d3.interpolatePRGn(0.7)],
// ["Haller (wahrscheinlich)", d3.interpolatePRGn(0.6)],
// ["Weitere", d3.interpolatePRGn(0.3)],
// ["Weitere (wahrscheinlich)", d3.interpolatePRGn(0.4)],
// ["Unbekannt", d3.interpolatePRGn(0.5)],
].filter(d => (hallerOnly && (d[0] === "Haller" || d[0] === "Haller (wahrscheinlich)")) || !hallerOnly)
)
series = d3.stack()
.keys(colors.keys())
.value((group, key) => group.get(key) ? group.get(key).value : 0)
.order(d3.stackOrderNone)
(d3.rollup(data, ([d]) => d, d => d.year, 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.year))
.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])
color = d3.scaleOrdinal()
.domain(colors.keys())
.range(colors.values())
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)
.tickValues(x.domain().filter(d => d % 2 !== 0))
//.tickValues(d3.ticks(...d3.extent(x.domain()), width / 80))
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y)
.tickFormat(x => formatValue(x)))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.append("tspan")
.attr("x", 3)
.attr("y", -7)
.text(`Artikel`)
.append("tspan")
.attr("x", 3)
.attr("y", 7)
.text(`(n=${formatValue(dataRaw.length)})`));
formatValue = d3.format(",d")
height = 500
margin = ({top: 25, right: 35, bottom: 35, left: 35})
d3 = require("d3@6")
import {swatches} from "@d3/color-legend"
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.
