th_map_function = (data) =>
Plot.plot({
width: chart_width,
marginTop: 10,
marginBottom: 10,
projection: {
type: "mercator",
domain: gemeinden_kreis_geo,
inset: 5
},
color: {
domain: new Set(th_kreise_table.map((d) => d.party_max)),
range: new Set(th_kreise_table.map((d) => d.color)),
legend: false
},
marks: [
// ausgegraute Kreise
Plot.geo(kreise_land, {
filter: (d) => d.properties.election == data,
fill: "#eff3f5",
stroke: "#fff",
strokeOpacity: 0.5
}),
// farbige Kreise
Plot.geo(kreise_land, {
filter: (d) => d.properties.election == data,
fill: (d) =>
party_select == "Sieger"
? hochburgen.get(d.properties.party_max)
: hochburgen.get(party_select),
fillOpacity: (d) =>
party_select == "Sieger"
? d.properties.percent_max
: d.properties.percent,
stroke: "#fff",
strokeOpacity: 0.1
}),
// Kreise
Plot.geo(kreise_geo, {
stroke: "#fff",
strokeWidth: 0.4,
strokeOpacity: 0.6
}),
// Mouseover-Effekt
Plot.geo(
kreise_land,
Plot.pointer(
Plot.centroid({
filter: (d) => d.properties.election == data,
stroke: "#fff"
})
)
),
// hervorgehobener Kreis
Plot.geo(kreis_geo, {
stroke: "#0f151a"
}),
// Tooltip
Plot.tip(
kreise_land.features,
Plot.pointer(
Plot.centroid({
filter: (d) => d.properties.election == data,
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
party_select == "Sieger"
? `${d.properties.gemeinde_name}\n${
d.properties.kreis_name
}\n\n${d.properties.party_max}\n${
d.properties.percent_max > 0
? d.properties.percent_max.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}) + " Prozent"
: "-"
}`
: `${d.properties.gemeinde_name}\n${
d.properties.kreis_name
}\n\n${party_select}\n${
d.properties.percent_max > 0
? d.properties.percent.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}) + " Prozent"
: "-"
}`
})
)
)
]
})
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.
