Public
Edited
Dec 1, 2022
Importers
subtitle = md`<span class = "subtitle">Ein Monatsgehalt von ${textcolor(gehalt.toLocaleString("de")+" Euro", {background: '#4f80ff', fontSize: "16px", fontFamily: "Source Serif Pro", fontWeight: 400, padding: "0px 5px 0px 5px"})} hat seit ${raiseneu.toLocaleDateString("de", {month: "long", year: "numeric"})} in ${land} ${textcolor(Math.round(wertverlust)+" Euro", {background: '#e84f1c', fontSize: "16px", fontFamily: "Source Serif Pro", fontWeight: 400, padding: "0px 5px 0px 5px"})} an Kaufkraft verloren. Insgesamt hat die Inflation die Kaufkraft in diesem Zeitraum um ${textcolor(Math.round(kumuliert).toLocaleString("de")+" Euro", {background: '#F0C1B2', fontSize: "16px", fontFamily: "Source Serif Pro", fontWeight: 400, padding: "0px 5px 0px 5px"})} reduziert. Um den monatlichen Verlust auszugleichen, müsste das Gehalt um ${textcolor(raisenew.toLocaleString("de", {minimumFractionDigits: "1"})+" Prozent", {background: '#6bb024', fontSize: "16px", fontFamily: "Source Serif Pro", fontWeight: 400, padding: "0px 5px 0px 5px"})} steigen.</span>`
line = addTooltips(
Plot.plot({
marginTop: 40,
marginLeft: 50,
marginRight: 90,
height: 340,
width,
marks: [
Plot.areaY(reallohnland, {
x: "date",
y1: gehalt,
y2: d => (gehalt / (d.rate) * index),
fill: "#eff3f5",
opacity: .6
}),
Plot.text(reallohnland, Plot.selectLast({
x: "date",
y: d => (gehalt / (d.rate) * index),
textAnchor: "start",
dx: 5,
fill: "#e84f1c",
text: (d) => `${((gehalt / (d.rate) * index)-gehalt).toLocaleString("de", {signDisplay: "exceptZero", maximumFractionDigits: 0})} Euro`
})),
Plot.ruleY([gehalt], {
stroke: "#4f80ff",
strokeWidth: 1.5
}),
Plot.text([gehalt], {
x: [datummax],
y: [gehalt],
textAnchor: "start",
dx: 5,
fill: "#4f80ff",
text: (d) => `${[gehalt].toLocaleString("de")} Euro`
}),
Plot.line(reallohnland, {
x: "date",
y: d => (gehalt / (d.rate) * index),
z: "land",
stroke: "#e84f1c",
opacity: 1,
curve: "monotone-x"
}),
Plot.text([gehalt], {
x: [datummax],
y: [gehalt - (wertverlust / 2)],
textAnchor: "start",
dx: 5,
fill: "#6bb024",
text: (d) => `${[raisenew].toLocaleString("de", {signDisplay: "exceptZero", minimumFractionDigits: 1})} Prozent`
}),
Plot.dot([gehalt], {
x: [datummax],
y: [gehalt],
fill: "#4f80ff",
opacity: 1
}),
Plot.arrow([gehalt], {
x1: [datummax],
y1: [gehalt - wertverlust],
x2: [datummax],
y2: [gehalt],
stroke: "#6bb024",
strokeWidth: 1.5
}),
Plot.dot(reallohnland, {
x: "date",
y: d => (gehalt / (d.rate) * index),
fill: "#e84f1c",
opacity: 1,
title: (d) => `${d.date.toLocaleString("de", {month: "long", year: "numeric"})}\n${d.land}\nKaufkraft: ${(gehalt / (d.rate) * index).toLocaleString("de", {maximumFractionDigits: 0})} Euro`
}),
],
x: {
tickFormat: d => d.toLocaleString("de", {month: "short", year: "numeric"}),
ticks: width / 240,
axis: "top",
grid: true,
domain: [raiseneu,datummax]
},
y: {
tickFormat: d => d.toLocaleString("de"),
domain: [gehaltmin,gehaltmax],
ticks: 4,
grid: true
}
}),
{ opacity: 1, fontWeight: "normal", strokeWidth: 0 }
)
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.
