The avatar for @rnd
RND
RedaktionsNetzwerk Deutschland
Public
Edited
Mar 17
Insert cell
Insert cell
title = new URLSearchParams(document.location.search).get("title") ??
"Trends seit der Vertrauensfrage"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
stand = new Date(d3.max(sonntagsfrage_data.map((d) => d.date)))
Insert cell
date_max = d3.max(sonntagsfrage.map((d) => d.date))
Insert cell
date_start = roundUTCDay(new Date(2024, 11, 16))
Insert cell
sonntagsfrage_data = d3.csv("https://static.rndtech.de/share/rnd/institut_total.csv")
Insert cell
sonntagsfrage = sonntagsfrage_data
.map((d) => ({
date: new Date(d.date),
rolling_avg: +d.rolling_avg,
party: d.party
.replace("union", "Union")
.replace("spd", "SPD")
.replace("grüne", "Grüne")
.replace("fdp", "FDP")
.replace("linke", "Linke")
.replace("afd", "AfD")
.replace("bsw", "BSW")
.replace("bvb", "BVB/FW")
.replace("sonstige", "Sonstige")
}))
.filter(
(d) =>
(d.party != "") &
(d.party != "Sonstige") &
(d.rolling_avg > 0) &
(d.date >= date_start)
)
Insert cell
sonntagsfrage
WITH sonntagsfrage AS (
SELECT
*,
ROW_NUMBER() OVER (PARTITION BY date, party) AS rn
FROM sonntagsfrage
)
SELECT date, party, rolling_avg
FROM sonntagsfrage
WHERE rn = 1
ORDER BY date desc
Insert cell
sonntagsfrage_smooth
WITH sonntagsfrage_high AS (
SELECT
date,
party,
rolling_avg,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY rolling_avg DESC) AS highest_rank,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY date) AS first_rank,
FROM sonntagsfrage_smooth
)
SELECT party, rolling_avg, highest_rank
FROM sonntagsfrage_high
WHERE highest_rank = 1 OR first_rank = 1
Insert cell
sonntagsfrage_high
WITH sonntagsfrage_high_diff AS (
SELECT
party,
rolling_avg,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY highest_rank) AS row_num
FROM sonntagsfrage_high
)
SELECT
a.party,
b.rolling_avg - a.rolling_avg AS difference
FROM sonntagsfrage_high_diff a
JOIN sonntagsfrage_high_diff b
ON a.party = b.party
AND a.row_num = 2
AND b.row_num = 1
ORDER BY difference desc
Insert cell
sonntagsfrage_smooth
WITH sonntagsfrage_high AS (
SELECT
date,
party,
rolling_avg,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY rolling_avg) AS lowest_rank,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY date) AS first_rank,
FROM sonntagsfrage_smooth
)
SELECT party, rolling_avg, lowest_rank
FROM sonntagsfrage_high
WHERE lowest_rank = 1 OR first_rank = 1
Insert cell
sonntagsfrage_low
WITH sonntagsfrage_low_diff AS (
SELECT
party,
rolling_avg,
ROW_NUMBER() OVER (PARTITION BY party ORDER BY lowest_rank) AS row_num
FROM sonntagsfrage_low
)
SELECT
a.party,
b.rolling_avg - a.rolling_avg AS difference
FROM sonntagsfrage_low_diff a
JOIN sonntagsfrage_low_diff b
ON a.party = b.party
AND a.row_num = 2
AND b.row_num = 1
ORDER BY difference
Insert cell
Insert cell
function roundUTCDay(d) {
return new Date(
Date.UTC(
d.getUTCFullYear(),
d.getUTCMonth(),
d.getUTCDate() + (d.getUTCHours() < 12 ? 0 : 1)
)
);
}
Insert cell
Insert cell
chart_width = window.innerWidth / 2 - 20
Insert cell
style = html`

<div></div>

<style>

.box_left {
width: calc((1/2*100)% - 10px);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 8px;
border-right: 2px dotted #c5d2dd;
}

.box_right {
width: calc((1/2*100)% - 10px);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 0px;
border-left: 0px dotted #c5d2dd;
}

.box_top {
display: flex;
flex-wrap: wrap;
border-bottom: 2px dotted #c5d2dd;
}

.box_bottom {
display: flex;
flex-wrap: wrap;
}

.legend {
bottom: 3px;
position: relative;
margin-right: 5px;
width: 20px;
height: 1px;
background-color: #0f151a;
display: inline-block;"
}

.box {
display: flex;
flex-wrap: wrap;
}

.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);
line-height: 26px
}

.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;
}

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>`
Insert cell

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.
Learn more