Public
Edited
May 29
Paused
mitgliedschaften_chart = Plot.plot({
marginLeft: 80,
width,
y: {
grid: true,
tickFormat: (d) => `${d.toLocaleString("de")}`,
label: "Mitglieder",
ticks: 3
},
x: {
domain: ["Parteien", "Sportverbände", "Kirchen"],
label: null
},
color: {
domain: [
"CDU",
"CSU",
"SPD",
"Grüne",
"FDP",
"Linke",
"AfD",
"BSW",
"Evangelische Kirche",
"Katholische Kirche",
"Sonstige",
"Fußball",
"Turnen",
"Tennis",
"Alpenverein",
"Schützen"
],
range: [
"#333333",
"#333333",
"#f44647",
"#6abf4a",
"#ffd600",
"#c72767",
"#5fb1bf",
"#312783",
"#F0C1B2",
"#E84F1C",
"#b8d8ff",
"#a5c6ff",
"#7ca2ff",
"#4f80ff",
"#0858cf",
"#002a95"
]
},
marks: [
// Balken
Plot.barY(mitgliedschaften, {
x: "Gruppe",
y: "Wert",
strokeOpacity: 0,
fill: "Kategorie"
}),
// Umrisse
Plot.barY(mitgliedschaften, {
filter: (d) =>
(d.Gruppe == "Sportverbände") |
(d.Gruppe == "Kirchen") |
((d.Gruppe == "Parteien") & (groups_selected == "Parteien")),
x: "Gruppe",
y: "Wert",
stroke: "#fff",
strokeOpacity: 1,
fill: "Kategorie"
}),
// Total
Plot.text(
total.filter((d) => groups_selected.includes(d.Gruppe)),
{
x: (d) => d.Gruppe,
y: "Total",
textAnchor: "center",
dy: -7,
text: (d) => d.Total.toLocaleString("de"),
dx: 3
}
),
Plot.ruleY([0]),
// Label
Plot.text(
mitgliedschaften,
Plot.stackY({
filter: (d) =>
groups_selected == "Parteien"
? d.Wert > 0
: ((d.Gruppe == "Sportverbände") | (d.Gruppe == "Kirchen")) &
(d.Wert > 0),
text: (d) =>
d.Kategorie.replace("Katholische Kirche", "katholisch").replace(
"Evangelische Kirche",
"evangelisch"
),
x: "Gruppe",
y: "Wert",
textAnchor: "center",
fill: "#fff"
})
),
// Tooltip
Plot.tip(
mitgliedschaften,
Plot.pointerY(
Plot.stackY({
filter: (d) => d.Wert > 0,
x: "Gruppe",
y: "Wert",
anchor: "bottom",
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) => `${d.Kategorie}\n${d.Wert.toLocaleString("de")}`
})
)
)
]
})
mitgliedschaften_data = FileAttachment("mitgliedschaften_kurz.csv").csv()
mitgliedschaften_filtered = mitgliedschaften_data.filter((d) =>
groups_selected.includes(d.Gruppe)
)
mitgliedschaften = mitgliedschaften_filtered.map((d) => ({
...d,
Wert: +d.Wert
}))
total = [
{ Gruppe: "Parteien", Total: 1141941 },
{ Gruppe: "Kirchen", Total: 38911907 },
{ Gruppe: "Sportverbände", Total: 28764951 }
]
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
ns = Inputs.text().classList[0]
style = html`
<div></div>
<style>
.plot-d6a7b5-figure, body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
g:not([font-size], [font-weight]) text, p, span, label, :where(.plot-d6a7b5-swatches), .${ns} select, .${ns}-checkbox div label {
line-height: 125%;
font-weight: 400;
font-size: 12px;
color: #0f151a;
font-family: InterRegular;
background-color: #ffffff;
}
.selected {
font-weight: 700;
font-size: 18px;
font-family: "DIN Next LT Pro", sans-serif;
}
th, td, tr, td {
padding: 8px;
border: 1px solid #eff3f5;
vertical-align: middle
}
.table_ep {
width: 100%;
color: #0f151a;
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
table-layout: fixed;
border-collapse: collapse;
vertical-align: middle;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2, .title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
letter-spacing: 0px;
line-height: 26px;
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position:relative;
}
@media (prefers-color-scheme: dark) {
svg {
background-color: #293845 !important;
color: white !important;
}
.table_ep {
color: #fff
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text, p, span, label, :where(.plot-d6a7b5-swatches), .${ns} select, .${ns}-checkbox div label {
line-height: 125%;
font-weight: 400;
font-size: 12px;
color: #ffffff;
font-family: InterRegular;
background-color: #293845;
}
.selected {
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
}
</style>`
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.
