2d:null 2e:["$","title",null,{"children":"Council on Foreign Relations Inspired Visualization | willyq2 | Observable"}] 33:T6bd,

President's Party Almost Always Suffers in Midterms

The president's party has lost House seats in 37 of the 41 midterm elections since 1862

Lost seats Gained seats Forecast range

Source: Brookings Institution, Vital Statistics on Congress; Cook Political Report (2026 forecast)

34:T1ab4,//data accessors const xAccessor = (d) => +d.year; const yAccessor = (d) => +d.difference; const highAccessor = (d) => +d.difference_high; const lowAccessor = (d) => +d.difference_low; const statusAccessor = (d) => d.status; //data groups const lostData = data.filter((d) => statusAccessor(d) === "actual" && yAccessor(d) < 0); const gainedData = data.filter((d) => statusAccessor(d) === "actual" && yAccessor(d) > 0); const forecastData = data.filter((d) => statusAccessor(d) === "forecasted"); //colors const rust = "#a63d00"; const gray = "#a6a6a6"; const noteGray = "#6b6b6b"; //dimensions const dimensions = { width: 900, height: 460, margin: { top: 20, right: 20, bottom: 30, left: 48 } }; dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right; dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom; //scales const xScale = d3 .scaleBand() .domain(data.map(xAccessor)) .range([0, dimensions.boundedWidth]) .paddingInner(0.25); const yScale = d3.scaleLinear().domain([-130, 40]).range([dimensions.boundedHeight, 0]); const xCenter = (year) => xScale(year) + xScale.bandwidth() / 2; //canvas const container = d3.select("#chart"); container.selectAll("*").remove(); const svg = container .append("svg") .attr("width", dimensions.width) .attr("height", dimensions.height) .attr("role", "img") .attr( "aria-label", "Bar chart of House seats gained or lost by the president's party in each midterm election since 1862" ) .style("font-family", "Arial, Helvetica, sans-serif"); //arrowheads const defs = svg.append("defs"); defs .append("marker") .attr("id", "arrowhead-gray") .attr("viewBox", "0 0 10 10") .attr("refX", 8) .attr("refY", 5) .attr("markerWidth", 7) .attr("markerHeight", 7) .attr("orient", "auto") .append("path") .attr("d", "M2 1.5L8 5L2 8.5") .attr("fill", "none") .attr("stroke", noteGray) .attr("stroke-width", 1.5); defs .append("marker") .attr("id", "arrowhead-black") .attr("viewBox", "0 0 10 10") .attr("refX", 8) .attr("refY", 5) .attr("markerWidth", 7) .attr("markerHeight", 7) .attr("orient", "auto") .append("path") .attr("d", "M2 1.5L8 5L2 8.5") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5); //bounds const bounds = svg .append("g") .attr("transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})`); //y-axis bounds .append("g") .call( d3 .axisLeft(yScale) .tickValues([25, 0, -25, -50, -75, -100, -125]) .tickFormat((d) => (d === 0 ? "0" : d3.format("+")(d))) .tickSize(0) .tickPadding(8) ) .call((g) => { g.select(".domain").remove(); g.selectAll("text").style("font-size", "14px").style("fill", "gray"); }); //y-axis unit bounds .append("text") .attr("x", 0) .attr("y", yScale(25)) .attr("dy", "0.32em") .style("font-size", "14px") .style("fill", "gray") .text("seats"); //x-axis bounds .append("g") .attr("transform", `translate(0, ${dimensions.boundedHeight})`) .call( d3 .axisBottom(xScale) .tickValues([1862, 1882, 1902, 1922, 1942, 1962, 1982, 2002, 2022]) .tickSize(0) .tickPadding(10) ) .call((g) => { g.select(".domain").remove(); g.selectAll("text").style("font-size", "14px").style("fill", "gray"); }); //zero line bounds .append("line") .attr("x1", 0) .attr("x2", dimensions.boundedWidth) .attr("y1", yScale(0)) .attr("y2", yScale(0)) .attr("stroke", noteGray); //bars: lost seats bounds .selectAll(".lost") .data(lostData) .join("rect") .attr("class", "lost cat") .attr("data-category", "lost") .attr("x", (d) => xScale(xAccessor(d))) .attr("y", yScale(0)) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(yAccessor(d)) - yScale(0)) .attr("fill", rust); //bars: gained seats bounds .selectAll(".gained") .data(gainedData) .join("rect") .attr("class", "gained cat") .attr("data-category", "gained") .attr("x", (d) => xScale(xAccessor(d))) .attr("y", (d) => yScale(yAccessor(d))) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(0) - yScale(yAccessor(d))) .attr("fill", gray); //bars: forecast range bounds .selectAll(".forecast") .data(forecastData) .join("rect") .attr("class", "forecast cat") .attr("data-category", "forecast") .attr("x", (d) => xScale(xAccessor(d))) .attr("y", (d) => yScale(highAccessor(d))) .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(lowAccessor(d)) - yScale(highAccessor(d))) .attr("fill", rust) .style("fill-opacity", 0.3) .attr("stroke", rust) .attr("stroke-dasharray", "3, 2"); //annotation: 1998 and 2002 const xGains = (xCenter(1998) + xCenter(2002)) / 2; const xGainsText = xGains + xScale.bandwidth() / 2; bounds .append("line") .attr("class", "cat") .attr("data-category", "gained") .attr("x1", xGains) .attr("x2", xGains) .attr("y1", 46) .attr("y2", yScale(8) - 4) .attr("stroke", noteGray) .attr("marker-end", "url(#arrowhead-gray)"); bounds .append("text") .attr("class", "cat") .attr("data-category", "gained") .attr("text-anchor", "end") .attr("x", xGainsText) .attr("y", 18) .style("font-size", "16px") .style("fill", noteGray) .call((text) => { text.append("tspan").text("1998 and 2002: gains under"); text .append("tspan") .attr("x", xGainsText) .attr("dy", "1.25em") .text("presidents above 60% approval"); }); //annotation: 2026 forecast const xForecastText = xScale(2026) + xScale.bandwidth(); bounds .append("line") .attr("class", "cat") .attr("data-category", "forecast") .attr("x1", xCenter(2026)) .attr("x2", xCenter(2026)) .attr("y1", yScale(-80) - 20) .attr("y2", yScale(-15) + 4) .attr("stroke", "black") .attr("marker-end", "url(#arrowhead-black)"); bounds .append("text") .attr("class", "cat") .attr("data-category", "forecast") .attr("text-anchor", "end") .attr("x", xForecastText) .attr("y", yScale(-80)) .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "black") .call((text) => { text.append("tspan").text("2026 forecast:"); text .append("tspan") .attr("x", xForecastText) .attr("dy", "1.25em") .text("Republicans lose"); text .append("tspan") .attr("x", xForecastText) .attr("dy", "1.25em") .text("5 to 15 seats"); }); //hover const categories = d3.selectAll(".cat"); categories.on("mouseenter", (event) => { const hovered = event.currentTarget.dataset.category; categories.style("opacity", 0.25); d3.selectAll(`.cat[data-category="${hovered}"]`).style("opacity", 1); }); categories.on("mouseleave", () => { categories.style("opacity", 1); });35:[{"id":"a3432cab3dcd82eff73e1b9277f927d100eca9fa5670ad0686f1fd7a14fdc9222c9e18de8e29524c07362740506d854387fe4716a1f341f5e9244b450033f6f7","href":"https://static.observableusercontent.com/files/a3432cab3dcd82eff73e1b9277f927d100eca9fa5670ad0686f1fd7a14fdc9222c9e18de8e29524c07362740506d854387fe4716a1f341f5e9244b450033f6f7","name":"Losses by the Presidents Party.csv","type":"text/csv","lastModified":1790976329006,"size":934}] 31:{"id":"e8ae53a1de5c2c65","slug":"council-on-foreign-relations-inspired-visualization","title":"Council on Foreign Relations Inspired Visualization","thumbnail":"40894c9f10044bfeca37f453ab79e927d6ec7e6c0866928080716702682e19b1","access_level":"public","create_time":"$D2026-10-02T21:18:46.244Z","update_time":"$D2026-10-02T23:29:20.925Z","view_time":null,"first_public_time":"$D2026-10-02T22:46:10.296Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0bfcaea773f238e3","login":"willyq2","name":"willyq2","avatar_url":"https://avatars-next.observableusercontent.com/229551833b4ee48579e32c285e75fb589f5c879636fb09c93cfb24b8480dde3d","tier":"starter_2024"},"version":47,"publish_version":47,"role":null,"authored":false,"authors":[{"type":"individual","id":"d02b3e5692a9f597","login":"william-webster","name":"William Webster","avatar_url":"https://avatars-next.observableusercontent.com/11ce8cbcf73cf7c8dabe50765e9f9ffcf06c4363a713831330161d401a02639c","tier":null}],"members":[{"type":"team","id":"0bfcaea773f238e3","login":"willyq2","name":"willyq2","avatar_url":"https://avatars-next.observableusercontent.com/229551833b4ee48579e32c285e75fb589f5c879636fb09c93cfb24b8480dde3d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Council on Foreign Relations Inspired Visualization","cells":[{"id":1,"value":"# Council on Foreign Relations Inspired Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"In a recent article from the Council on Foreign Relations, James Lindsay commented:\n\n> _To repeat a fundamental point about House midterm elections, they generally function as a referendum on the president’s performance, and the president’s party almost always suffers as a result. It has lost seats in thirty-seven of the past forty-one midterm elections._\n\nHe also shared the forecast for this year:\n\n> _The betting money a month out from Election Day is that the Democrats will retake control of the House. The only question is how big their margin will be. The Cook Political Report has the Democrats picking up five to fifteen House seats. Democrats may even be a slight favorite to take back control of the Senate, something that seemed implausible at the start of 2026._\n\nThese stats stuck out to me, so I decided to make a viz:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const data = FileAttachment(\"Losses by the Presidents Party.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 32:"$31:body"