bb_gemeindewahl_map = Plot.plot({
width,
marginTop: 10,
marginBottom: 10,
projection: {
type: "mercator",
domain: gemeinden_kreis,
inset: 25
},
color: {
legend: false
},
marks: [
// hell ausgegraute Kreise
Plot.geo(gemeinden_geo, {
fill: "#eff3f5",
stroke: "#fff",
fillOpacity: 0.5
}),
// dunkel ausgegraute Kreise
Plot.geo(gemeinden_geo, {
filter: (d) =>
kreis_select != "alle Kreise"
? (d.properties.kreis == kreis_select) & (d.properties.typ != "-")
: d.properties.typ != "-",
fill: "#99AFC2",
fillOpacity: 0.5,
stroke: "#fff"
}),
// farbige Kreise
Plot.geo(gemeinden_geo, {
filter: (d) =>
kreis_select != "alle Kreise" ? d.properties.kreis == kreis_select : d,
fill: (d) =>
party_select == "Sieger"
? hochburgen.get(d.properties.party_max)
: hochburgen.get(party_select),
fillOpacity: (d) => (party_select == "Sieger" ? 1 : d.properties.percent),
stroke: "#fff",
strokeOpacity: 0.1
}),
// Mouseover-Effekt
Plot.geo(
gemeinden_geo,
Plot.pointer(
Plot.centroid({
filter: (d) =>
kreis_select != "alle Kreise"
? d.properties.kreis == kreis_select
: d,
stroke: "#fff"
})
)
),
// Tooltip
Plot.tip(
gemeinden_geo.features,
Plot.pointer(
Plot.centroid({
filter: (d) =>
kreis_select != "alle Kreise"
? (d.properties.kreis == kreis_select) & (d.properties.typ != "-")
: d.properties.typ != "-",
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
party_select == "Sieger"
? `${d.properties.gebiet}\n${d.properties.typ}\n${
d.properties.party_max
}\n${d.properties.percent_max.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
})} Prozent`
: `${d.properties.gebiet}\n${
d.properties.typ
}\n${party_select}\n${
isNaN(d.properties.percent)
? "-"
: d.properties.percent.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}) + " Prozent"
}`
})
)
)
]
})
gemeinden_kreis = kreis_select != "alle Kreise"
? geo.filter(gemeinden_geo, (d) => d.kreis == kreis_select)
: gemeinden_geo
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.
