Public
Edited
Nov 21, 2024
1 fork
schlafzeiten_credits = md`<div class="mode" style = "margin-top: 5px;"><span class="credits">Grafik: RND/Christ • Quelle: Destatis</span></div>`
schlafzeiten_function = (data) =>
Plot.plot({
width,
height: data.length * 50 + 70,
grid: true,
marginLeft: 120,
marginBottom: 20,
marginTop: 50,
x: {
axis: "top",
label: "Stunden",
domain: [8, 10],
ticks: [8, 9, 10],
tickFormat: (d) =>
d.toLocaleString("de", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
})
},
y: {
domain: data.map((d) => d.Gruppe),
grid: true
},
r: {
domain: [8, 10],
range: [15, 25]
},
marks: [
Plot.text(new Set(data.map((d) => d.Kategorie)), {
frameAnchor: "top-left",
textAnchor: "start",
dx: -120,
dy: -40,
fontSize: 12,
fontWeight: 600,
fontFamily: "InterRegular"
}),
// Dots
Plot.dot(data, {
x: (d) => d.Decimal,
y: (d) => d.Gruppe,
r: (d) => d.Decimal,
fill: "#4f80ff",
title: (d) =>
`${d.Decimal.toLocaleString("de", { day: "numeric", month: "long" })}`
}),
// Label
Plot.text(data, {
x: (d) => d.Decimal,
y: (d) => d.Gruppe,
text: (d) => d.Wert,
fill: "#fff",
title: (d) =>
`${d.Decimal.toLocaleString("de", { day: "numeric", month: "long" })}`
})
]
})
schlafzeit_data = FileAttachment("schlafzeit.csv").csv()
schlafzeit = schlafzeit_data.map((d) => ({
...d,
Gesamt: d3.utcMinute
.offset(new Date(2024, 0, 1), +d.Gesamt)
.toLocaleString("de-DE", {
timeZone: "Europe/Berlin",
hour: "numeric",
minute: "numeric"
})
}))
schlafzeit_alter = schlafzeit.filter((d) => d.Kategorie == "Alter")
schlafzeit_haushalt = schlafzeit.filter((d) => d.Kategorie == "Haushalt")
style = html`
<div></div>
<style>
figure {
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
.mode {
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-weight: 400;
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;
}
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.
