biden_trump_legend = swatches({
color: d3.scaleOrdinal(direction, color)
})
biden_trump_chart = Plot.plot({
width,
height: 150,
marginLeft: 0,
marginRight: 0,
marginTop: 50,
marginBottom: 50,
color: {
domain: direction,
range: color,
legend: false
},
x: {
axis: false
},
marks: [
Plot.barX(us_states_cumsum, { x: "vote", fill: "direction" }),
// 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: 538,
text: (d) => "Trump",
textAnchor: "end",
fill: "#e84f1c",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl Trump
Plot.text([0], {
x: 538,
text: (d) => trump_sum,
textAnchor: "end",
fill: "#e84f1c",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// enges Rennen
Plot.text([0], {
x: 538 / 2,
text: (d) => "enges Rennen",
textAnchor: "center",
fill: "#99AFC2",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl enges Rennen
Plot.text([0], {
x: 538 / 2,
text: (d) => tossup_sum,
textAnchor: "center",
fill: "#99AFC2",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// Harris
Plot.text([0], {
x: 0,
text: (d) => "Harris",
textAnchor: "start",
fill: "#4f80ff",
fontSize: 12,
fontWeight: 600,
dy: -60,
dx: 0
}),
// Zahl Harris
Plot.text([0], {
x: 0,
text: (d) => harris_sum,
textAnchor: "start",
fill: "#4f80ff",
fontSize: 22,
fontWeight: 600,
fontFamily: "DIN Next LT Pro",
dy: -40,
dx: 0
}),
// Label
Plot.text(us_states_cumsum, {
filter: (d) => (d.vote > 20) & (d.direction != "enges Rennen"),
x: (d) => d.cumsum - d.vote / 2,
fill: "color",
fontSize: 12,
fontWeight: 600,
text: (d) => d.vote
}),
// Tooltip
Plot.tip(
us_states_cumsum,
Plot.pointerX(
Plot.stackX({
x: "vote",
fill: isDarkMode() ? "#293845" : "#ffffff",
fillOpacity: 0.8,
strokeOpacity: 0.5,
title: (d) =>
`${d.direction}: ${d.vote.toLocaleString("de", {
minimumFractionDigits: 0,
maximumFractionDigits: 0
})}`
})
)
)
]
})
// Georgia
// Arizona
// Michigan
// Nevada
// Pennsylvania
// North Carolina
// Wisconsin
us_states_correct = d3.json(
"https://static.rndtech.de/share/rnd/geojson/us_states_correct.geojson"
)
us_states_electoral = d3.json(
"https://static.rndtech.de/share/rnd/geojson/us_states_electoral.geojson"
)
us_states_geo = map_select == "geografisch"
? us_states_correct
: us_states_electoral
us_states_table = geo.properties.table(us_states_electoral).map((d) => ({
direction: d.direction,
stand: d.stand,
vote: +d.vote
}))
us_states_table
us_states_sum
harris_sum = us_states_cumsum[2].cumsum
tossup_sum = us_states_cumsum[3].vote
trump_sum = 538 - harris_sum - tossup_sum
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.
