27:null 28:["$","title",null,{"children":"Independent candidates nationally | Test - Jacob | Observable"}] 2d:T43d,// Defime title for both graphs // Comment out to remove field chartMeta = ({ desktopFilename: 'mapIndependentCandidates.png', mobileFilename: 'mobileMapIndependentCandidates.png', // HTML stuff title: "Independent federal candidates, 2026", subtitle: "There are 263 independent candidates running for federal office in 2026 — the highest number recorded in data dating to 2008.", source: "Data: U.S. Federal Election Commission", credit: "Graphic: Jacob Olness / MTFP", // note: "Note: Data current as of ", // Optional basic color legend // "#8800d1" : "#866ee6"; // const label = d => d === "S" ? "Senate" : "House"; legend: [ { label: "Senate", color: "#8800d1" }, { label: "House", color: "#866ee6" } ], // Plot stuff data: processedCandidates, primaryColor: '#ce5a00', secondaryColor: '#d8d8d8', outlineColor: '#606060', yAxis: "Yscale", // X axis is often readily apparent so not needed // xAxis: "Xscale", yDomain: [0, 20000], yTicks: d3.range(0, 20001, 5000), xDomain: [2021, 2025], xTicks: d3.range(2021, 2026, 2) });2e:T42d,exportDesktop = { const button = html``; button.onclick = async () => { // Scale factor from display size to export size const EXPORT_W = 1200; const EXPORT_H = 1080; const DISPLAY_W = 600; const DISPLAY_H = 540; const scale = EXPORT_W / DISPLAY_W; // ~2.864x // Grab the container element const container = mapScaffoldEmbed.querySelector('.embed-container'); // Use html2canvas with scale override const canvas = await html2canvas(container, { scale: scale, width: DISPLAY_W, height: DISPLAY_H, useCORS: true, allowTaint: true, backgroundColor: '#ffffff', logging: false, }); // Sanity-check dimensions (html2canvas respects scale) // canvas should already be 945×1182 // Download const link = document.createElement('a'); link.download = chartMeta.desktopFilename; link.href = canvas.toDataURL('image/png'); link.click(); }; return button; }2f:T7f5,mapScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

` : empty()} ${chartMeta.subtitle ? html`

${chartMeta.subtitle}

` : empty()} ${mapScaffold} ${chartMeta.legend?.length ? html`

${chartMeta.legend.map(d => html`

${d.label}

`)}

` : empty()} ${(chartMeta.source || chartMeta.credit || chartMeta.note) ? html`

${chartMeta.source ? html`${chartMeta.source}
` : empty()} ${chartMeta.credit ? html`${chartMeta.credit}
` : empty()} ${chartMeta.note ? html`${chartMeta.note}` : empty()}

` : empty()}

` 30:T7da,mapScaffold = { // Join the geographic shapes and the population data. const data = population.map((d) => ({ ...d, county: countymap.get(d.fips), state: statemap.get(d.state) })) .filter(d => d.county) .sort((a, b) => d3.descending(a.population, b.population)); // Construct the radius scale. const radius = d3.scaleSqrt([0, d3.max(data, d => d.population)], [0, 40]); // Construct a path generator. const path = d3.geoPath(); // Projection to convert candidate lat/long into the same pixel space // as the pre-projected topojson (Albers USA). const projection = d3.geoAlbersUsa() .scale(1300) .translate([487.5, 305]); // Color scale for office type const color = d => d === "S" ? "#8800d1" : "#866ee6"; const label = d => d === "S" ? "Senate" : "House"; // Create the SVG container. const svg = d3.create("svg") .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); // Create the cartographic background layers. svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ddd") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Candidate dots svg.append("g") .selectAll("circle") .data(chartMeta.data.filter(d => projection([d.long, d.lat]))) .join("circle") .attr("cx", d => projection([d.long, d.lat])[0]) .attr("cy", d => projection([d.long, d.lat])[1]) .attr("r", 6) .attr("fill", d => color(d.office)) .attr("fill-opacity", 0.95) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text(d => `${d.name} (${d.office === "S" ? "Senate" : "House"}) — ${d.city}, ${d.state}`); // Legend return svg.node(); }31:T43c,exportMobile = { const button = html``; button.onclick = async () => { // Scale factor from display size to export size const EXPORT_W = 945; const EXPORT_H = 1182; const DISPLAY_W = 945; const DISPLAY_H = 1182; const scale = EXPORT_W / DISPLAY_W; // ~2.864x // Grab the container element const container = mobileMapScaffoldEmbed.querySelector('.mobile-embed-container'); // Use html2canvas with scale override const canvas = await html2canvas(container, { scale: scale, width: DISPLAY_W, height: DISPLAY_H, useCORS: true, allowTaint: true, backgroundColor: '#ffffff', logging: false, }); // Sanity-check dimensions (html2canvas respects scale) // canvas should already be 945×1182 // Download const link = document.createElement('a'); link.download = chartMeta.mobileFilename; link.href = canvas.toDataURL('image/png'); link.click(); }; return button; }32:T8f4,mobileMapScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

` : empty()} ${chartMeta.subtitle ? html`

${chartMeta.subtitle}

` : empty()}

${mobileMapScaffold}

${chartMeta.legend?.length ? html`

${chartMeta.legend.map(d => html`

${d.label}

`)}

` : empty()} ${(chartMeta.source || chartMeta.credit || chartMeta.note) ? html`

${chartMeta.source ? html`${chartMeta.source}
` : empty()} ${chartMeta.credit ? html`${chartMeta.credit}
` : empty()} ${chartMeta.note ? html`${chartMeta.note}` : empty()}

` : empty()}

`33:T7d1,mobileMapScaffold = { // Join the geographic shapes and the population data. const data = population.map((d) => ({ ...d, county: countymap.get(d.fips), state: statemap.get(d.state) })) .filter(d => d.county) .sort((a, b) => d3.descending(a.population, b.population)); // Construct the radius scale. const radius = d3.scaleSqrt([0, d3.max(data, d => d.population)], [0, 40]); // Construct a path generator. const path = d3.geoPath(); // Projection to convert candidate lat/long into the same pixel space // as the pre-projected topojson (Albers USA). const projection = d3.geoAlbersUsa() .scale(1300) .translate([487.5, 305]); // Color scale for office type const color = d => d === "S" ? "#8800d1" : "#866ee6"; const label = d => d === "S" ? "Senate" : "House"; // Create the SVG container. const svg = d3.create("svg") .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); // Create the cartographic background layers. svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ddd") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // Candidate dots svg.append("g") .selectAll("circle") .data(chartMeta.data.filter(d => projection([d.long, d.lat]))) .join("circle") .attr("cx", d => projection([d.long, d.lat])[0]) .attr("cy", d => projection([d.long, d.lat])[1]) .attr("r", 9) .attr("fill", d => color(d.office)) .attr("fill-opacity", 0.95) .attr("stroke", "white") .attr("stroke-width", 0.5) .append("title") .text(d => `${d.name} (${d.office === "S" ? "Senate" : "House"}) — ${d.city}, ${d.state}`); return svg.node(); }34:[{"id":"be6ebcef790cb5de07f673ba7b6943c94f51585085525193fa90d3afcab72c7c02839211fa9786bd82d3fc2b87fb12afd093fa0d6ad918ac63df21d16a4095e3","href":"https://static.observableusercontent.com/files/be6ebcef790cb5de07f673ba7b6943c94f51585085525193fa90d3afcab72c7c02839211fa9786bd82d3fc2b87fb12afd093fa0d6ad918ac63df21d16a4095e3","name":"cleaned-candidates-2026.csv","type":"text/csv","lastModified":1782161295489.015,"size":18648},{"id":"beb56a2d9534662123fa352ffff2db8472e481776fcc1608ee4adbd532ea9ccf2f1decc004d57adc76735478ee68c0fd18931ba01fc859ee4901deb1bee2ed1b","href":"https://static.observableusercontent.com/files/beb56a2d9534662123fa352ffff2db8472e481776fcc1608ee4adbd532ea9ccf2f1decc004d57adc76735478ee68c0fd18931ba01fc859ee4901deb1bee2ed1b","name":"population.json","type":"application/octet-stream","lastModified":1782155378966.749,"size":64302},{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1782155378966.749,"size":795407}] 2b:{"id":"33b2fad3f3f13193","slug":null,"title":"Independent candidates nationally","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-06-22T19:09:38.966Z","update_time":"$D2026-06-25T17:41:59.055Z","view_time":null,"first_public_time":"$D2026-06-22T19:09:38.966Z","has_unpublished_edits":null,"fork":{"id":"29574d60427b184d","slug":"bubble-map/2","title":"Bubble map","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob","avatar_url":"https://avatars-next.observableusercontent.com/286ea806712c4101f38678daa20ec893487774be0cb915d1ec1d72122a1654ea","tier":"starter_2024"},"version":633,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"524ba9658b83acf5","login":"jacob-olness2","name":"Jacob Olness","avatar_url":"https://avatars-next.observableusercontent.com/dfa74109c8f708d522fb4a9f595e7b21ff67039e8e2057c1dacde7875e3a05a0","tier":null}],"members":[{"type":"individual","id":"524ba9658b83acf5","login":"jacob-olness2","name":"Jacob Olness","avatar_url":"https://avatars-next.observableusercontent.com/dfa74109c8f708d522fb4a9f595e7b21ff67039e8e2057c1dacde7875e3a05a0","tier":null,"role":"editor"},{"type":"team","id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob","avatar_url":"https://avatars-next.observableusercontent.com/286ea806712c4101f38678daa20ec893487774be0cb915d1ec1d72122a1654ea","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Independent candidates nationally","cells":[{"id":0,"value":"# Independent candidates nationally ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"This dataset comes from the U.S. Census API and contains three columns: the estimated population (as a string), the two-digit state FIPS code, and the three-digit county FIPS code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"population = FileAttachment(\"population.json\").json()\n .then((data) =>\n data\n .slice(1) // removes a header line\n .map(([p, state, county]) => ({\n state,\n fips: `${state}${county}`,\n population: +p\n }))\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"Since this dataset doesn’t include the positions of the counties, this _centroid_ helper method is used. It takes a (already projected) GeoJSON feature as input and returns the corresponding centroid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"centroid = {\n const path = d3.geoPath();\n return feature => path.centroid(feature);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"The geometries used in this example are from the [TopoJSON U.S. Atlas](https://github.com/topojson/us-atlas), which are derived from the U.S. Census Bureau shapefiles. (There’s also the [TopoJSON World Atlas](https://github.com/topojson/world-atlas), which is derived from [Natural Earth](https://www.naturalearthdata.com).) The *counties* feature collection is all U.S. counties, using the five-digit FIPS identifier. The *statemap* lets us lookup the name of the state that contains a given county; a state’s two-digit identifier corresponds to the first two digits of its counties’ identifiers. Similarly, the *countymap* lets us lookup the name and geometry of each county.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"statemap = new Map(topojson.feature(us, us.objects.states).features.map(d => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"countymap = new Map(topojson.feature(us, us.objects.counties).features.map(d => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"processedCandidates = candidates.map(d => ({\n name: d.name,\n id: d.id,\n district: +d.district,\n office: d.office,\n city: d.city,\n state: d.state,\n lat: +d.lat,\n long: +d.long\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"candidates = FileAttachment(\"cleaned-candidates-2026.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"empty = () => document.createDocumentFragment()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"html2canvas = require(\"html2canvas@1.4.1/dist/html2canvas.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"The *statemesh* is just the internal borders between states, *i.e.*, everything but the coastlines and country borders. This avoids an additional stroke on the perimeter of the map, which would otherwise mask intricate features such as islands and inlets. (Try removing the last argument to topojson.mesh below to see the effect.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"Using [Observable Plot](/plot/)’s concise API, a similar map can be produced with a few lines of code (see also the complete [Plot: U.S. bubble map example](/@observablehq/plot-us-bubble-map)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":426,"value":"Plot.plot({\n width: 975,\n projection: \"identity\",\n marks: [\n Plot.geo(nation, { fill: \"#eee\" }),\n Plot.geo(statemesh, { stroke: \"white\" }),\n Plot.dot(population, Plot.centroid({r: \"population\", geometry: ({fips}) => countymap.get(fips)}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2c:"$2b:body"