th_map_function = (data) =>
Plot.plot({
width: chart_width,
height: chart_width * 0.75,
marginTop: 10,
marginBottom: 10,
projection: {
type: "mercator",
domain: gemeinden_geo,
inset: 5
},
color: {
legend: false
},
marks: [
// ausgegraute Kreise
Plot.geo(gemeinden_geo, {
fill: "#eff3f5",
stroke: "#fff",
strokeOpacity: 0.5
}),
// farbige Kreise
Plot.geo(gemeinden_geo, {
fill: (d) =>
Array.from(hochburgen.keys()).includes(data)
? hochburgen.get(data)
: "#99AFC2",
fillOpacity: (d) =>
d.properties.percent_max == "0" ? 0 : d.properties[data],
stroke: "#fff",
strokeOpacity: 0.1
}),
// Kreise
Plot.geo(kreise_geo, {
stroke: "#fff",
strokeWidth: 0.4,
strokeOpacity: 0.6
}),
// Mouseover-Effekt
Plot.geo(
gemeinden_geo,
Plot.pointer(
Plot.centroid({
stroke: "#fff"
})
)
),
// Tooltip
Plot.tip(
gemeinden_geo.features,
Plot.pointer(
Plot.centroid({
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
d.properties.percent_max == "0"
? `${d.properties.gemeinde_name}\n${d.properties.kreis_name}\n\nnoch kein Ergebnis`
: `${d.properties.gemeinde_name}\n${
d.properties.kreis_name
}\n\n${data}\n${
d.properties[data].toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
}) + " Prozent"
}`
})
)
)
]
})
kreise_geo = rewind(await FileAttachment("kreise_th.geojson").json())
gemeinden_zweit = geo.filter(
gemeinden_raw,
(d) => d.stimme == "Zweitstimme"
)
gemeinden_geo = geo.map(gemeinden_zweit, (d, i) => ({
...d,
percent_max: +d.percent_max
}))
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.
