circleSize = 1 / 80
nodePadding = 0.5
margin = ({ top: 10, right: 5, bottom: 50, left: 5 })
height = width / 2.5
labels = [
{
label: "Countys ganz links wählen 100% demokratisch",
value: -1,
offset: 0,
anchor: "start"
},
{
label: "Countys ganz rechts wählen 100% republikanisch",
value: 1,
offset: -310,
anchor: "end"
}
]
y = d3.scaleLinear()
.domain([-1, 1])
.range([height - margin.bottom, margin.top])
x = d3.scaleLinear()
.domain([-1, 1])
.range([margin.left, width - margin.right])
xAxis = (g) =>
g
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(d3.format(",.0%")))
yAxis = g => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
chartStyle = {
return html`<style>
.chartTitle {
font-family: Arial,sans-serif;
font-size: 22px;
font-weight: 600;
margin-top: 2px;
margin-bottom: 2px;
line-height: 1.1;
}
.chartSubtitle {
font-family: Arial,sans-serif;
font-size: 18px;
font-weight: 500;
margin-top: 2px;
margin-bottom: 2px;
line-height: 1.1;
}
.labels {
font-family: Arial,sans-serif;
font-size: 14px;
}
.xAxisLabel {
font-family: Arial,sans-serif;
font-size: 12px;
}
.tooltip {
position: absolute;
font-family: Arial,sans-serif;
font-size: 12px;
background-color: #ffff99;
border: solid;
border-width: 1px;
border-radius: 4px;
padding: 2px;
width: 100px;
text-align: left;
}
</style> `;
}
currentdata = data.filter(d => d.year == year)
data = FileAttachment("countydata2@1.csv").csv({ typed: true })
d3 = require("d3@5")
import {slider, radio} from "@jashkenas/inputs"
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.
