solar_zubau = Plot.plot({
height: 650,
width,
insetRight: 35,
insetLeft: 10,
insetTop: 10,
insetBottom: 10,
r: {
domain: [1, 200],
range: [1, 20]
},
projection: {
type: "mercator",
domain: bundesland_select == "Deutschland" ? bundesländer : bundesland
},
marks: [
// Land
Plot.geo(bundesland_select == "Deutschland" ? bundesländer : bundesland, {
fill: "#c9d8df",
imageFilter: "url(#inset-shadow)"
}),
// Grenzen
Plot.geo(bundesland_select == "Deutschland" ? bundesländer : bundesland, {
stroke: "white",
strokeOpacity: 0.7
}),
// Solar-Zubau
Plot.dot(
bundesland_select == "Deutschland" ? solar_plz : solar_plz_bundesland,
{
x: "lon",
y: "lat",
r: "bruttoleistung",
fill: "#fff4b4",
stroke: "#99AFC2",
strokeWidth: 0.4,
strokeOpacity: 1,
fillOpacity: 0.8,
sort: true ? { channel: "r", order: "descending" } : null
}
),
// damit die Kreise gleich groß bleiben
Plot.dot(
bundesland_select == "Deutschland" ? solar_plz : solar_plz_bundesland,
{
x: "lon",
y: "lat",
r: "bruttoleistung",
filter: (d) => d.bruttoleistung == bruttoleistung_max,
strokeOpacity: 0,
fillOpacity: 0
}
),
// Pfeil auf Borna
Plot.arrow([0], {
x1: 13,
y1: 50,
x2: 12.5,
y2: 50.8,
stroke: isDarkMode() ? "#99AFC2" : "#0f151a",
strokeOpacity: bundesland_select == "Deutschland" ? 1 : 0,
bend: true
}),
// Text für Borna
Plot.text([0], {
x: 14.1,
y: 49.9,
text: (d) => `Energiepark Witznitz\nbei Borna`,
textAnchor: "middle",
lineAnchor: "top",
strokeOpacity: 0,
fill: isDarkMode() ? "#ffffff" : "#0f151a",
fillOpacity: bundesland_select == "Deutschland" ? 1 : 0
}),
// feststehendes Tooltip
Plot.tip(
solar_plz_bundesland,
Plot.select(
{ r: "max" },
{
x: "lon",
y: "lat",
r: "bruttoleistung",
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
`${d.name}\n${d.land}\n${d.bruttoleistung.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
})} Megawatt`
}
)
),
// Tooltip
Plot.tip(
bundesland_select == "Deutschland" ? solar_plz : solar_plz_bundesland,
Plot.pointer({
x: "lon",
y: "lat",
sort: true ? null : { channel: "r", order: "descending" },
fill: isDarkMode() ? "#0f151a" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
`${d.name}\n${d.land}\n${d.bruttoleistung.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
})} Megawatt`
})
)
]
})
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.
