title_asylum = html`
<div class="mode">
<h2 class="mode">Wo Flüchtlinge untergekommen sind</h2>
<span class="subtitle">Betroffenheit vom Klimawandel in den Weltregionen und Zahl der Flüchtlinge in den aufnehmenden Ländern zur Jahresmitte 2024</span>
</div>
`
viewof longitude = Inputs.range([-180, 180], {
label: "Globus drehen (zentraler Längengrad):",
step: 1,
value: 18
})
credits_asylum = md`<span style="font-family: InterRegular; font-size: 12px; color: #99AFC2;">Karte: Christ/RND • Flüchtlinge: durch Kriege, Konflikte, Menschenrechtsverletzungen und/oder Naturkatastrophen vertriebene Personen • Quelle: UNHCR<span>`
asylum_data = FileAttachment("climate_asylum_centroid@1.csv")
.csv()
.then(function (data) {
data.forEach(function (d) {
d.value = +d.value;
d.lat = +d.lat;
d.lon = +d.lon;
});
return data;
})
climate_hazards_blue = rewind(
await FileAttachment("climate_hazards_blue@1.geojson").json()
)
climate_hazards_red = rewind(
await FileAttachment("climate_hazards_red.geojson").json()
)
climate_hazards_yellow = rewind(
await FileAttachment("climate_hazards_yellow_simplified.geojson").json()
)
countries_global = FileAttachment("world_countries.geojson").json()
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
function swatches({
color,
columns = null,
format = (x) => x,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
}) {
const id = DOM.uid().id;
if (columns !== null)
return html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id}-item {
break-inside: avoid;
display: flex;
align-items: center;
padding-bottom: 1px;
}
.${id}-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}
.${id}-swatch {
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin: 0 0.5em 0 0;
}
</style>
<div style="width: 100%; columns: ${columns};">${color
.domain()
.map((value) => {
const label = format(value);
return html`<div class="${id}-item"">
<div class="${id}-swatch" style="background:${color(value)};"></div>
<div class="${id}-label" title="${label.replace(
/["&]/g,
entity
)}">${document.createTextNode(label)}</div>
</div>`;
})}
</div>
</div>`;
return html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; margin-top: 20px; margin-bottom: 20px; font: 10px sans-serif;">
<style>
.${id} {
display: inline-flex;
align-items: center;
margin-right: 1em;
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
width: 100%;
}
.${id}::before {
content: "";
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin-right: 0.5em;
background: var(--color);
}
</style>
<div>${color
.domain()
.map(
(value) =>
html`<span class="${id}" style="--color: ${color(
value
)}">${document.createTextNode(format(value))}</span>`
)}</div>`;
}
import { getLabelLength } from "@bayre/svg-swatches"
import { rewind } from "@fil/rewind"
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.
