Public
Edited
May 22
Paused
election_chart = Plot.plot({
width,
height: 203,
marginLeft: 10,
marginRight: 10,
marginTop: 40,
marginBottom: 20,
color: {
domain: ["Trump", "offen", "empty", "strich", "Harris"],
range: [
"#e84f1c",
isDarkMode() ? "#99AFC2" : "#DCE4EA",
"rgb(255, 255, 255, .0)",
isDarkMode() ? "#fff" : "#0f151a",
"#4f80ff"
],
legend: false
},
y: {
axis: null
},
x: {
axis: null
},
marks: [
// graue Fläche
Plot.areaX(
connection_right,
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
y: "version",
x: "vote",
fill: "#DCE4EA",
fillOpacity: 0.3
})
),
// weiße Fläche
Plot.areaX(
connection_left,
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
y: "version",
x: "vote",
fill: isDarkMode() ? "#293845" : "#ffffff"
})
),
// oberer Balken
Plot.barX(
election,
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
filter: (d) => d.version == 1,
fill: "candidate",
stroke: isDarkMode() ? "#293845" : "#ffffff",
insetBottom: 30,
y: "version",
x: "vote"
})
),
// unterer Balken
Plot.barX(election, {
filter: (d) => d.version == 2,
fill: "candidate",
fillOpacity: 0.5,
stroke: isDarkMode() ? "#293845" : "#ffffff",
insetTop: 30,
y: "version",
x: "vote"
}),
// Label vote
Plot.text(election, {
filter: (d) => d.version == 2,
x: (d) => d.cumsum + d.vote / 2,
y: "version",
fill: "#fff",
fillOpacity: (d) => (d.code == "NE" ? 0 : 1),
textAnchor: "center",
fontSize: 12,
fontWeight: 600,
text: (d) => d.vote,
dy: 15
}),
// Label code
Plot.text(election, {
filter: (d) => d.version == 2,
x: (d) => d.cumsum + d.vote / 2,
y: "version",
fill: "candidate",
textAnchor: "center",
fontSize: 12,
fontWeight: 600,
text: (d) => d.code,
dy: 40
}),
// Strich Mehrheit oben
Plot.barX(
strich_mehrheit_oben,
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
filter: (d) => d.version == 1,
fill: "candidate",
stroke: "candidate",
strokeWidth: 0.5,
insetBottom: 30,
y: "version",
x: "vote"
})
),
// Strich Mehrheit unten
Plot.barX(strich_mehrheit_unten, {
filter: (d) => d.version == 2,
fill: "candidate",
stroke: "candidate",
strokeWidth: 0.5,
insetTop: 30,
y: "version",
x: "vote"
}),
// Text Mehrheit oben
Plot.text(
[0],
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
x: 538 / 2,
y: 1,
text: (d) => "Mehrheit ab 270 Stimmen",
textAnchor: "center",
fontSize: 12,
fontWeight: 600,
dy: 10
})
),
// Text Mehrheit unten
Plot.text([0], {
x: 538 / 2 - harris_right,
y: 2,
text: (d) => "270",
textAnchor: "center",
fontSize: 12,
fontWeight: 600,
dy: -10
}),
// Harris
Plot.text([0], {
x: 0,
y: 1,
text: (d) => "Harris",
textAnchor: "start",
fill: "#4f80ff",
fontSize: 12,
fontWeight: 600,
dy: -65,
dx: 0
}),
// Zahl Harris
Plot.text([0], {
x: 0,
y: 1,
text: (d) => harris,
textAnchor: "start",
fill: "#4f80ff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -45,
dx: 0
}),
// offen
Plot.text(
[0],
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
x: harris_right + offen / 2,
y: 1,
text: (d) => "offen",
textAnchor: "center",
fill: "#99AFC2",
fontSize: 12,
fontWeight: 600,
dy: -65,
dx: 0
})
),
// Zahl offen
Plot.text(
[0],
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
x: harris_right + offen / 2,
y: 1,
text: offen,
textAnchor: "center",
fill: "#99AFC2",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -45,
dx: 0
})
),
// Trump
Plot.text(
[0],
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
x: 538,
y: 1,
text: (d) => "Trump",
textAnchor: "end",
fill: "#e84f1c",
fontSize: 12,
fontWeight: 600,
dy: -65,
dx: 0
})
),
// Zahl Trump
Plot.text(
[0],
Plot.mapX((d) => d.map(d3.scaleLinear([0, 538], [0, offen])), {
x: 538,
y: 1,
text: (d) => trump,
textAnchor: "end",
fill: "#e84f1c",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -45,
dx: 0
})
),
// Tooltip
Plot.tip(
election,
Plot.pointerX(
Plot.stackX({
filter: (d) => d.version == 2,
x: "vote",
dy: 45,
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) => `${d.state}\n${d.candidate}: ${d.vote}`
})
)
)
]
})
strich_mehrheit_oben = [
{ version: 1, candidate: "empty", vote: 269, state: "all" },
{ version: 1, candidate: "strich", vote: 0.1, state: "all" },
{ version: 1, candidate: "empty", vote: 269, state: "all" }
]
strich_mehrheit_unten = [
{
version: 2,
candidate: "empty",
vote: 538 / 2 - harris_right,
state: "all"
},
{ version: 2, candidate: "strich", vote: (0.1 / 538) * offen, state: "all" },
{
version: 2,
candidate: "empty",
vote: 538 / 2 - harris_right,
state: "all"
}
]
harris_right = election.filter(
(d) => (d.candidate == "Harris") & (d.version == 1)
)[0].vote
trump_left = election.filter(
(d) => (d.candidate == "offen") & (d.version == 1)
)[0].vote + harris_right
trump = election.filter((d) => (d.candidate == "Trump") & (d.version == 1))[0]
.vote
harris = election.filter((d) => (d.candidate == "Harris") & (d.version == 1))[0]
.vote
offen = election.filter((d) => d.candidate == "offen")[0].vote
connection_left = [
{ version: 1, vote: harris_right },
{ version: 2, vote: 0 }
]
connection_right = [
{ version: 1, vote: trump_left },
{ version: 2, vote: 538 }
]
background = [
{ version: 1, vote: 538 },
{ version: 2, vote: 538 }
]
majority_oben = [
{ version: 1, vote: 538 / 2 },
{ version: 2, vote: 538 / 2 }
]
majority_unten = [
{ version: 1, vote: 538 / 2 - harris_right },
{ version: 2, vote: 538 / 2 - harris_right }
]
electoral_college = [
{
candidate: "Trump",
color: "#e84f1c",
vote: 111,
cumsum: 111
},
{
candidate: "offen",
color: "#DCE4EA",
vote: 214,
cumsum: 325
},
{
candidate: "Harris",
color: "#4f80ff",
vote: 213,
cumsum: 538
}
]
ellectoral_college_chart = Plot.plot({
width: 350,
height: 150,
marginLeft: 0,
marginRight: 0,
marginTop: 50,
marginBottom: 50,
color: {
domain: ["Trump", "offen", "Harris"],
range: ["#e84f1c", "#DCE4EA", "#4f80ff"],
legend: false
},
x: {
axis: false
},
marks: [
Plot.barX(electoral_college, { x: "vote", fill: "candidate" }),
// Strich Mehrheit
Plot.ruleX([0], {
x: 538 / 2
}),
// Text Mehrheit
Plot.text([0], {
x: 538 / 2,
text: (d) => "Mehrheit ab 270 Stimmen",
textAnchor: "center",
fontSize: 12,
fontWeight: 600,
dy: 40,
dx: 0
}),
// Trump
Plot.text([0], {
x: 0,
text: (d) => "Trump",
textAnchor: "start",
fill: "#b82100",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl Trump
Plot.text([0], {
x: 0,
text: (d) =>
electoral_college.filter((d) => d.candidate == "Trump")[0].vote,
textAnchor: "start",
fill: "#b82100",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// offen
Plot.text([0], {
x: offen_position,
text: (d) => "offen",
textAnchor: "center",
fill: "#99AFC2",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl offen
Plot.text([0], {
x: offen_position,
text: (d) =>
electoral_college.filter((d) => d.candidate == "offen")[0].vote,
textAnchor: "center",
fill: "#99AFC2",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// Harris
Plot.text([0], {
x: 538,
text: (d) => "Harris",
textAnchor: "end",
fill: "#0858cf",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl Harris
Plot.text([0], {
x: 538,
text: (d) =>
electoral_college.filter((d) => d.candidate == "Harris")[0].vote,
textAnchor: "end",
fill: "#0858cf",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// Label
Plot.text(electoral_college, {
filter: (d) => (d.vote > 20) & (d.candidate != "offen"),
x: (d) => d.cumsum - d.vote / 2,
fill: "color",
fontSize: 12,
fontWeight: 600,
text: (d) => d.vote
}),
// Tooltip
Plot.tip(
electoral_college,
Plot.pointerX(
Plot.stackX({
x: "vote",
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
`${d.candidate}: ${d.vote.toLocaleString("de", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
})}`
})
)
)
]
})
Trump_vote = electoral_college.filter((d) => d.candidate == "Trump")[0].vote
offen_vote = electoral_college.filter((d) => d.candidate == "offen")[0].vote
offen_position = Trump_vote + offen_vote / 2
Harris_vote = electoral_college.filter((d) => d.candidate == "Harris")[0].vote
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.
