Public
Edited
May 20
Paused
1 star
klimaanalogien_map = Plot.plot({
width: window.innerWidth,
height: window.innerWidth * 1.05,
projection: {
type: "mercator",
domain: europa
},
marks: [
// Land
Plot.geo(europa, {
fill: "#c9d8df",
imageFilter: "url(#inset-shadow)",
stroke: "white",
strokeOpacity: 0.7
}),
// Pfeile von Städte auf Klimazwilling im Hintergrund
Plot.arrow(klimaanalogien, {
x1: "lon",
y1: "lat",
x2: (d) => d["lon_" + zeit_select],
y2: (d) => d["lat_" + zeit_select],
stroke: "#ffffff",
strokeOpacity: 0.4,
bend: false
}),
// Städte im Hintergrund
Plot.dot(klimaanalogien, {
x: "lon",
y: "lat",
fill: "#4f80ff",
r: 2.5,
stroke: "#ffffff",
strokeWidth: 1,
strokeOpacity: 0.6,
klimaanalogien_data
klimaanalogien_filtered = klimaanalogien.filter((d) =>
stadt_select.includes(d.name)
)
städte_input = new Set(klimaanalogien.map((d) => d.name))
europa = FileAttachment("klimaanalogien.geojson").json()
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
import { yamultiselect } from "@saneef/yet-another-multi-select"
style = html`
<div></div>
<style>
figure {
margin-left: 0px;
margin-right: 0px;
}
.oi-3a86ea input, .oi-66c06c input, p, span, label, text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
.oi-66c06c select, .oi-ec050e select, .oi-ec050e-input>input {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
svg {
background-color: white !important;
color: #0f151a !important;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
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.
