Public
Edited
Nov 9, 2022
nytHouseResults = d3.json(
"https://static01.nyt.com/elections-assets/2022/data/2022-11-08/results-house.json"
)
viewof houseResults = Inputs.table(nytHouseResults.races)
tl_2019_us_cd116 = FileAttachment("tl_2019_us_cd116.json").json()
function getRaceFromNytHouseData(districtId) {
// NYT IDs look like this: nyt_id: "AL-G-H-1-2022-11-08"
// Our districtIDs look like AL-01
return _.find(nytHouseResults.races, (d) => {
const nytIdSplit = d.nyt_id.split("-");
const nytIdSimple = nytIdSplit[0] + "-" + _.padStart(nytIdSplit[3], 2, 0);
return nytIdSimple === districtId;
});
}
getRaceFromNytHouseData("NY-19")
houseMap = {
const svg = d3.select(DOM.svg(width, 500));
const districts = topojson.feature(
tl_2019_us_cd116,
tl_2019_us_cd116.objects["tl_2019_us_cd116"]
).features;
const projection = d3.geoAlbersUsa();
const path = d3.geoPath(projection);
const districtBorders = topojson.mesh(
tl_2019_us_cd116,
tl_2019_us_cd116.objects["tl_2019_us_cd116"],
function (a, b) {
return a !== b;
}
);
svg
.append("g")
.selectAll("path")
.data(districts)
.enter()
.append("path")
.attr("d", path)
.style("fill", "#CCC");
svg
.append("path")
.datum(districtBorders)
.attr("d", path)
.style("fill", "none")
.style("stroke", "#fff")
.style("stroke-width", 0.5);
return svg.node();
}
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.
