langstrecke_map = Plot.plot({
width,
insetTop: 10,
projection: { type: "equirectangular", rotate: [360, 0] },
marks: [
// Land
() => insetShadow,
Plot.geo(countries_global, {
fill: "#c9d8df",
imageFilter: "url(#inset-shadow)"
}),
// Borders
Plot.geo(countries_global, { stroke: "white", strokeOpacity: 0.7 }),
// Beelines
Plot.geo(beeline_sin_jfk, {
stroke: "#4f80ff",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_sin_ewr, {
stroke: "#e84f1c",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_doh_akl, {
stroke: "#6bb024",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_akl_jfk, {
stroke: "#4f80ff",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_per_lhr, {
stroke: "#e84f1c",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_mel_dfw, {
stroke: "#6bb024",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_dxb_akl, {
stroke: "#4f80ff",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_sin_lax, {
stroke: "#e84f1c",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_blr_sfo, {
stroke: "#6bb024",
strokeWidth: 1.5,
strokeOpacity: 0.7
}),
Plot.geo(beeline_iah_syd, {
stroke: "#e84f1c",
strokeWidth: 1.5,
strokeOpacity: 0.7
})
]
})
credits_langstrecke = md`<span style="font-family: InterRegular; font-size: 12px; color: #99AFC2;">Karte: RND/Christ • Quelle: meilenoptimieren.com<span>`
countries_global = FileAttachment("countries_global.geojson").json()
beelines = FileAttachment("beelines@1.geojson").json()
beeline_akl_jfk = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_akl_jfk.geojson"
)
beeline_blr_sfo = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_blr_sfo.geojson"
)
beeline_doh_akl = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_doh_akl.geojson"
)
beeline_dxb_akl = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_dxb_akl.geojson"
)
beeline_iah_syd = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_iah_syd.geojson"
)
beeline_mel_dfw = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_mel_dfw.geojson"
)
beeline_per_lhr = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_per_lhr.geojson"
)
beeline_sin_ewr = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_sin_ewr.geojson"
)
beeline_sin_jfk = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_sin_jfk.geojson"
)
beeline_sin_lax = d3.json(
"https://static.rndtech.de/share/rnd/geojson/beeline_sin_lax.geojson"
)
import { getLabelLength } from "@bayre/svg-swatches"
import { insetShadow } from "@ateliercartographie/plot-bar-map"
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.
