zigaretten_chart = {
const v1 = (d) => d.Zigaretten;
const v2 = (d) => d.Sterberate;
const y2 = d3.scaleLinear([10, 40], [0, 6]);
return Plot.plot({
marginLeft: 25,
marginRight: 30,
marginBottom: 40,
insetTop: 20,
height: 325,
width,
x: { tickFormat: d3.format(""), label: null },
y: {
axis: null
},
marks: [
// Strich 1955
Plot.ruleX([1955], {
x: (d) => d,
y1: 2.3,
y2: 6,
stroke: "#c5d2dd",
strokeWidth: 1,
strokeDasharray: "4 2",
strokeOpacity: 0.7
}),
// Text 1955
Plot.text([1955], {
textAnchor: "start",
lineAnchor: "top",
x: (d) => d,
y: (d) => 6,
dx: 3,
dy: -10,
text: (d) => "Assoziation\nmit Freiheit"
}),
// Text 1995
Plot.text([1995], {
textAnchor: "end",
lineAnchor: "top",
x: (d) => d,
y: (d) => 4,
dx: -3,
dy: 0,
text: (d) => "verpflichtende\nWarnhinweise"
}),
// Strich 1995
Plot.ruleX([1995], {
x: (d) => d,
y1: 0,
y2: 4.5,
stroke: "#c5d2dd",
strokeWidth: 1,
strokeDasharray: "4 2",
strokeOpacity: 0.7
}),
// Text 2007
Plot.text([2007], {
textAnchor: "end",
lineAnchor: "top",
x: (d) => d,
y: (d) => 3,
dx: -3,
dy: 10,
text: (d) => "Rauch- und\nWerbeverbote"
}),
// Strich 2007
Plot.ruleX([2007], {
x: (d) => d,
y1: 0,
y2: 3,
stroke: "#c5d2dd",
strokeWidth: 1,
strokeDasharray: "4 2",
strokeOpacity: 0.7
}),
// Text 2016
Plot.text([2016], {
textAnchor: "end",
lineAnchor: "top",
x: (d) => d,
y: (d) => 2,
dx: -3,
dy: 10,
text: (d) => "abschreckende\nBilder"
}),
// Strich 2016
Plot.ruleX([2016], {
x: (d) => d,
y1: 0,
y2: 2.5,
stroke: "#c5d2dd",
strokeWidth: 1,
strokeDasharray: "4 2",
strokeOpacity: 0.7
}),
// Text 2022
Plot.text([2022], {
textAnchor: "end",
lineAnchor: "top",
x: (d) => d,
y: (d) => 1,
dx: -3,
dy: 10,
text: (d) => "weitere\nSteuererhöhungen"
}),
// Strich 2022
Plot.ruleX([2022], {
x: (d) => d,
y1: 0,
y2: 2.1,
stroke: "#c5d2dd",
strokeWidth: 1,
strokeDasharray: "4 2",
strokeOpacity: 0.7
}),
// rechte Achse (blau)
Plot.axisY([10, 20, 30, 40], {
color: "#4f80ff",
anchor: "right",
label: "Sterberate",
tickSize: 0,
y: y2
}),
// linke Achse (rot)
Plot.axisY([0, 2, 4, 6], {
anchor: "left",
label: "Zigaretten",
color: "#e84f1c",
tickSize: 0,
tickFormat: (d) => d.toLocaleString("de")
}),
// Grid Line
Plot.gridY({ interval: 2 }),
// Plot.ruleY([0]),
// weißer Hintergrund zur Linie (rot)
Plot.lineY(zigaretten, {
x: "Jahr",
y: v1,
strokeWidth: 3,
stroke: "#fff",
curve: "catmull-rom"
}),
// Linie (rot)
Plot.lineY(zigaretten, {
x: "Jahr",
y: v1,
strokeWidth: 2,
stroke: "#e84f1c",
curve: "catmull-rom"
}),
// weißer Hintergrund zur Linie (blau)
Plot.lineY(
lungenkrebs,
Plot.mapY((D) => D.map(y2), {
x: "Jahr",
y: v2,
strokeWidth: 3,
stroke: "#fff",
curve: "catmull-rom"
})
),
// Linie (blau)
Plot.lineY(
lungenkrebs,
Plot.mapY((D) => D.map(y2), {
x: "Jahr",
y: v2,
strokeWidth: 2,
stroke: "#4f80ff",
curve: "catmull-rom"
})
),
// Tooltip (rot)
Plot.text(
zigaretten_lungenkrebs,
Plot.pointerX({
x: "Jahr",
y: "Zigaretten",
fill: "#e84f1c",
stroke: "#fff",
text: (d) =>
d.Zigaretten.toLocaleString("de", {
minimumFractionDigits: "1",
maximumFractionDigits: "1"
})
})
),
// Tooltip (blau)
Plot.text(
zigaretten_lungenkrebs,
Plot.mapY(
(D) => D.map(y2),
Plot.pointerX({
x: "Jahr",
y: v2,
fill: "#4f80ff",
stroke: "#fff",
text: (d) => d.Sterberate.toLocaleString("de")
})
)
),
// Tooltip (Jahr)
Plot.text(
zigaretten_lungenkrebs,
Plot.pointerX({
x: "Jahr",
y: 0,
dy: -10,
stroke: "#fff",
fill: "#0f151a",
text: (d) => d.Jahr.toString()
})
)
]
});
}
zigaretten_lungenkrebs_data = FileAttachment(
"zigaretten_lungenkrebs@17.csv"
).csv()
zigaretten_lungenkrebs = zigaretten_lungenkrebs_data.map((d) => ({
Jahr: +d.Jahr,
Sterberate: +d.Sterberate,
Zigaretten: +d.Zigaretten / 365
}))
zigaretten_data = FileAttachment("zigaretten.csv").csv()
zigaretten = zigaretten_data.map((d) => ({
Jahr: +d.Jahr,
Zigaretten: +d.Zigaretten / 365
}))
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
ns = Inputs.text().classList[0]
style = html`
<div></div>
<style>
html {
font: 17px/1 var(--serif);
}
.${ns} input, .${ns}-input {
margin-right: 5px;
}
div.${ns}-input {
width: 250px;
margin-right: 5px;
}
p, span, label, text, .${ns} select, .${ns}-input > input, .legend {
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);
letter-spacing: 0px;
line-height: 26px;
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position: relative;
}
@media (prefers-color-scheme: dark) {
svg {
background-color: #293845 !important;
color: white !important;
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
p, span, label, text, .${ns} select, .${ns}-input > input, .legend {
font-size: 12px;
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.
