//Notizen zur Verbesserung
// Die Labels sind teilweise versteckt durch die Datenpunkte
// auch die 200 ist durch den Arbeitseinsatz versteckt
// Treibhausgase durch Reale Bruttowertschöpfung teilen (Daten sind im Excel)
//Notizen zur Verbesserung
//TFP Wert von Norwegen unrealistisch hoch
//Tippfehler in Indikatornamen (teilweise auch abgeschnitten)
// Fragezeichen bei Zeichen für Arbeitseinsatz
html`
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5em;">
<!-- Header -->
<h2 style="margin: 0; font-size: 1.1em; font-weight: 500; color: #333;">
Entwicklung der Landwirtschaftsindikatoren
</h2>
<!-- Dimension Legend (symbols follow text, wrap if needed) -->
<div style="display: flex; justify-content: center; gap: 1.5em; flex-wrap: wrap; font-size: 0.8em; color: #444;">
<span style="white-space: normal;">Ökonomisch ■</span>
<span style="white-space: normal;">Strukturell ◆</span>
<span style="white-space: normal;">Ökologisch ●</span>
</div>
<!-- Chart and legend layer -->
<div style="position: relative; display: inline-block;">
${Plot.plot({
width: 450,
height: 450,
marginTop: -20,
marginBottom: 0,
marginLeft: 30,
marginRight: 35,
projection: {
type: "azimuthal-equidistant",
rotate: [0, -90],
domain: d3.geoCircle().center([0, 90]).radius(maxValue / 2)()
},
color: {
domain: Array.from(new Set(sortedPoints3.map(d => d.name))),
scheme: "tableau10",
type: "categorical"
},
marks: [
Plot.geo([50, 150, 200], {
geometry: r => d3.geoCircle().center([0, 90]).radius(r / 2)(),
stroke: "black",
fill: "black",
strokeOpacity: 0.3,
fillOpacity: 0.03,
strokeWidth: 0.5
}),
Plot.geo([100], {
geometry: r => d3.geoCircle().center([0, 90]).radius(r / 2)(),
stroke: "#999",
fill: "none",
strokeOpacity: 1,
strokeWidth: 1.5
}),
Plot.link(Array.from(longitude3.domain()), {
x1: longitude3,
y1: 90 - (maxValue / 2),
x2: 0,
y2: 90,
stroke: "white",
strokeOpacity: 0.5,
strokeWidth: 2.5
}),
Plot.text([50, 100, 150, 200], {
x: 180,
y: d => 90 - (d / 2),
dx: 2,
textAnchor: "start",
text: d => `${d}`,
fill: "currentColor",
stroke: "white",
fontSize: 8
}),
Plot.text(longitude3.domain(), {
x: longitude3,
y: 90 - (maxValue / 2),
text: d => `${dimensionSymbolMap[indicatorDimension2[d]] ?? "?"} ${wrapLabel(d)}`,
textAnchor: "middle",
fontSize: 9,
fill: "currentColor",
stroke: "white"
}),
Plot.area(sortedPoints3, {
x1: d => longitude3(d.key),
y1: d => 90 - (d.value / 2),
x2: 0,
y2: 90,
fill: "name",
stroke: "name",
curve: "cardinal-closed"
}),
Plot.dot(sortedPoints3, {
x: d => longitude3(d.key),
y: d => 90 - (d.value / 2),
fill: "name",
stroke: "white"
}),
Plot.text(
sortedPoints3,
Plot.pointer({
x: d => longitude3(d.key),
y: d => 90 - (d.value / 2),
text: d => `${d.value}`,
textAnchor: "start",
dx: 4,
fill: "currentColor",
stroke: "white",
maxRadius: 10
})
),
() => svg`<style>
g[aria-label=area] path {fill-opacity: 0.1; transition: fill-opacity .2s;}
g[aria-label=area]:hover path:not(:hover) {fill-opacity: 0.05; transition: fill-opacity .2s;}
g[aria-label=area] path:hover {fill-opacity: 0.3; transition: fill-opacity .2s;}
</style>`
]
})}
<!-- Side legend for countries -->
<div style="position: absolute; top: 0; left: 100%; margin-left: -20px;">
${Plot.legend({
color: {
domain: Array.from(new Set(sortedPoints3.map(d => d.name))),
scheme: "tableau10",
type: "categorical",
label: "Country"
},
columns: 1
})}
</div>
<!-- Left-side annotation legend -->
<div style="position: absolute; top: 0; right: 100%; margin-right: -120px; width: 120px; font-size: 0.7em; color: #666; text-align: left;">
<div><strong>Index</strong></div>
<div>1995 = 100</div>
<div>Jahr = dargest. Werte</div>
</div>
</div>
</div>
`
panel = d3.dsvFormat(",").parse(clean, d3.autoType)
panel
Type Table, then Shift-Enter. Ctrl-space for more options.
indicatorDimension2 = ({
"Produktionswert_Erzeugerpreis": "Ökonomisch",
"TFP_LW": "Ökonomisch",
"Reales_Faktoreinkommen": "Ökonomisch",
"PSE_Prozent": "Ökonomisch",
"Arbeizeinsatz_JAE": "Strukturell",
"Landwirtschaftliche_FlOeche": "Strukturell",
"Betriebe": "Strukturell",
"Treibhausgase_CO2": "Ökologisch",
"Stickstoffbilanz": "Ökologisch"
})
sortedPoints3 = indexData.sort((a, b) =>
indicatorOrder2.indexOf(a.key) - indicatorOrder2.indexOf(b.key)
)
longitude3 = d3.scalePoint(
indicatorOrder2,
[180, -180] // ← behält das Layout im Uhrzeigersinn
).padding(0.5).align(1);
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.
