Public
Edited
Mar 4, 2024
hunger_chart = Plot.plot(
(() => {
const n = 2;
const keys = Array.from(
d3.union(hunger_geschlecht.map((d) => d.Kontinent))
);
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
grid: true,
width,
marginRight: 20,
marginTop: 40,
marginLeft: 30,
facet: { label: null },
color: {
domain: ["Frauen", "Männer"],
range: ["#e84f1c", "#4f80ff"],
legend: true
},
fx: { axis: null },
fy: {
axis: null
},
x: {
label: null,
axis: "top",
ticks: [2022],
grid: false,
tickSize: 0,
tickFormat: d3.format("")
},
y: {
insetTop: 20,
label: "Prozent",
insetBottom: 5,
axis: "left",
ticks: [0, 10, 20],
grid: true
},
marks: [
Plot.frame(),
Plot.text(keys, {
fx,
fy,
frameAnchor: "top-left",
dx: 6,
dy: 6
}),
Plot.line(hunger_geschlecht, {
x: "Jahr",
y: "Prozent",
stroke: "Geschlecht",
curve: "catmull-rom",
fy: (d) => fy(d.Kontinent),
fx: (d) => fx(d.Kontinent)
}),
Plot.dot(hunger_geschlecht, {
x: "Jahr",
y: "Prozent",
fill: "Geschlecht",
r: 3,
curve: "catmull-rom",
fy: (d) => fy(d.Kontinent),
fx: (d) => fx(d.Kontinent)
}),
Plot.tip(
hunger_geschlecht,
Plot.pointerX({
x: "Jahr",
y: "Prozent",
fill: isDarkMode() ? "#0f151a" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
`${d.Jahr}\n${d.Kontinent}\n${
d.Geschlecht
}\n${d.Prozent.toLocaleString("de", {
minimumFractionDigits: 1,
maximumFractionDigits: 1
})} Prozent`,
fy: (d) => fy(d.Kontinent),
fx: (d) => fx(d.Kontinent)
})
)
]
};
})()
)
credits_hunger = md`<span style="font-family: InterRegular; font-size: 12px; color: #99AFC2;">Grafik: RND/Christ • Quelle: FAO<span>`
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
myStyles = html`
<div></div>
<style>
.plot-d6a7b5-figure, body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.legend {
bottom: 3px;
position: relative;
margin-right: 5px;
width: 20px;
height: 1px;
background-color: #0f151a;
display: inline-block;"
}
.mode {
color: #0f151a;
background-color: #ffffff;
}
p, span, label {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2 {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position: relative;
}
body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
svg {
background-color: white !important;
color: #0f151a !important;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
.legend {
bottom: 3px;
position: relative;
margin-right: 5px;
width: 20px;
height: 1px;
background-color: #ffffff;
display: inline-block;"
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
svg {
background-color: #293845 !important;
color: white !important;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
p, span, label {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
}
</style>`
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.
