Public
Edited
Jun 10, 2024
2 forks
title = new URLSearchParams(document.location.search).get("title") ??
"Deutschlands Sitze im Europaparlament"
seats_stand = ep_seats_data.map((d) => ({
status: d.status,
election: d.election,
date: d.date.substring(0, 10),
time:
d.date.substring(11, 12) == "0"
? d.date.substring(12, 13).concat(".").concat(d.date.substring(14, 16))
: d.date.substring(11, 13).concat(".").concat(d.date.substring(14, 16))
}))[0]
ep_seats_data = FileAttachment("seats_deutschland@16.csv").csv()
stand = seats_stand.date != ""
? `${seats_stand.status} vom ${new Date(seats_stand.date).getDate()}.${
new Date(seats_stand.date).getMonth() + 1
}.${new Date(seats_stand.date).getFullYear()} um ${seats_stand.time} Uhr`
: `${seats_stand.status} ${seats_stand.election}`
seat_stand = ep_seats_data.map((d) => ({
status: d.status,
election: d.election,
date: d.date.substring(0, 10),
time: d.date.substring(11, 16).replace(":", ".")
}))[0]
seat_change = ep_seats_data.map((d) => ({
party: d.party,
former: +d.former,
recent: +d.recent,
change: +d.recent - +d.former
}))
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
import { hochburgen } from "c8ed288cee8a9c36"
ns = Inputs.text().classList[0]
style = html`
<div></div>
<style>
.${ns} input, .${ns}-input {
margin-right: 5px;
}
div.${ns}-input {
width: 250px;
margin-right: 5px;
}
text, p, span, label, .${ns} select, .${ns} input, .legend {
line-height: 125%;
font-weight: 400;
font-size: 12px;
color: #0f151a;
font-family: InterRegular;
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;
}
.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;
}
text, p, span, label, .${ns} select, .legend, .${ns} input {
line-height: 125%;
font-weight: 400;
font-size: 12px;
color: #ffffff;
font-family: InterRegular;
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.
