27:null 28:["$","title",null,{"children":"Voter turnout graphics | Test - Jacob | Observable"}] 2d:T4ea,chartMeta = ({ desktopFilename: 'voterTurnout.png', mobileFilename: 'mobileVoterTurnout.png', title: "Montana midterm primary turnout, 1998–2026", subtitle: "Share of registered voters who cast ballots", source: "Data: Montana Secretary of State", credit: "Graphic: Jacob Olness / MTFP", note: "Note: Data for 2026 not final as of Jun 9, 2026", // legend: [ // { label: "Votes cast", color: "#ce5a00" }, // { label: "Registered voters", color: "#b0b0b0" } // ], legend: [ { label: "Votes cast", fill: "#ce5a00", fillOpacity: 1, stroke: "#606060", strokeWidth: 2, strokeDasharray: null }, { label: "Registered voters", fill: "#b0b0b0", fillOpacity: 0.25, stroke: "#606060", strokeWidth: 2, strokeDasharray: "4,3" } ], // Drop years you don't want by removing them from this array. // e.g. remove 1994 to exclude the outlier: // yearsToShow: [2002, 2006, 2010, 2014, 2018, 2022, 2026], yearsToShow: [1998, 2002, 2006, 2010, 2014, 2018, 2022, 2026], data: processedData, primaryColor: '#ce5a00', registeredColor: '#b0b0b0', outlineColor: '#606060', labelColor: '#222222', yAxis: "Votes", yDomain: [0, 1000000], yTicks: d3.range(0, 1000001, 300000), xDomain: null, xTicks: null });2e:T432,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 = barChartScaffoldEmbed.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:T8fd,barChartScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

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

${chartMeta.subtitle}

` : empty()} ${barChartScaffold} ${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:T626,barChartScaffold = { const filtered = chartMeta.data.filter(d => chartMeta.yearsToShow.includes(d.year)); return Plot.plot({ width: 600, height: 371, style: { fontSize: 20, fontFamily: "Arial, sans-serif" }, marginLeft: 51, marginBottom: 35, marginTop: 0, marginRight: 10, x: { type: "band", domain: filtered.map(d => d.year), tickFormat: "d", padding: 0.25, ...xAxis(chartMeta), arrow: false, label: null, }, y: { ...yAxis(chartMeta), ...yDomain(chartMeta), ...yTicks(chartMeta), grid: true, tickFormat: d => d === 0 ? "0" : (d / 1000) + "k", arrow: false, label: null, }, marks: [ Plot.barY(filtered, { x: "year", y: "registeredVoters", fill: chartMeta.registeredColor, fillOpacity: 0.25, stroke: chartMeta.outlineColor, strokeWidth: 2, strokeDasharray: "6,3", inset: 0 }), Plot.barY(filtered, { x: "year", y: "castVotes", fill: chartMeta.primaryColor, stroke: chartMeta.outlineColor, strokeWidth: 2, inset: 0 }), Plot.text(filtered, { x: "year", y: "castVotes", text: d => d.turnoutPercentage.toFixed(1) + "%", dy: 12, fontSize: 17, fontFamily: "Arial, sans-serif", fontWeight: "bold", fill: chartMeta.labelColor, textAnchor: "middle" }), Plot.ruleY([0], { stroke: "black", strokeWidth: 2 }) ] }); }31:T441,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 = mobileBarChartScaffoldEmbed.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:Ta0f,mobileBarChartScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

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

${chartMeta.subtitle}

` : empty()}

${mobileBarChartScaffold}

${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:T62e,mobileBarChartScaffold = { const filtered = chartMeta.data.filter(d => chartMeta.yearsToShow.includes(d.year)); return Plot.plot({ width: 925, height: 895, style: { fontSize: 30, fontFamily: "Arial, sans-serif" }, marginLeft: 73, marginBottom: 80, marginTop: -30, marginRight: 20, x: { type: "band", domain: filtered.map(d => d.year), tickFormat: "d", padding: 0.25, ...xAxis(chartMeta), arrow: false, label: null, }, y: { ...yAxis(chartMeta), ...yDomain(chartMeta), ...yTicks(chartMeta), grid: true, tickFormat: d => d === 0 ? "0" : (d / 1000) + "k", arrow: false, label: null, }, marks: [ Plot.barY(filtered, { x: "year", y: "registeredVoters", fill: chartMeta.registeredColor, fillOpacity: 0.25, stroke: chartMeta.outlineColor, strokeWidth: 3, strokeDasharray: "9,4", inset: 0 }), Plot.barY(filtered, { x: "year", y: "castVotes", fill: chartMeta.primaryColor, stroke: chartMeta.outlineColor, strokeWidth: 3, inset: 0 }), Plot.text(filtered, { x: "year", y: "castVotes", text: d => d.turnoutPercentage.toFixed(1) + "%", dy: 21, fontSize: 25, fontFamily: "Arial, sans-serif", fontWeight: "bold", fill: chartMeta.labelColor, textAnchor: "middle" }), Plot.ruleY([0], { stroke: "black", strokeWidth: 3 }) ] }); }34:Ta0a,// Shrunk to smaller dimensions, come back to this when time to write a custom export function // mobileBarChartScaffoldEmbed = html` // //

// ${chartMeta.title // ? html`

${chartMeta.title}

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

${chartMeta.subtitle}

` // : empty()} //

// ${mobileBarChartScaffold} //

// ${chartMeta.legend?.length // ? html` //

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

// // ${d.label} //

// `)} //

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

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

// ` // : empty()} //

// ` 35:T4b9,// Shrunk to smaller dimensions, come back to this when time to write a custom export function // mobileBarChartScaffold = Plot.plot({ // style: { // fontSize: 20, // height: 258, // width: 285, // }, // marginLeft: 80, // marginBottom: 15, // marginTop: 37, // x: { // type: "band", // domain: chartMeta.data.map(d => d.year), // tickFormat: "d", // padding: 0.25, // // label is in the variable being spread // ...xAxis(chartMeta), // // no arrow // arrow: false // }, // y: { // // label is in the variable being spread // ...yAxis(chartMeta), // // Manual Y axis domain // ...domain(chartMeta), // // Override domain [{start}, {end}] // // domain: [0, 20000], // ...ticks(chartMeta), // // Override ticks ({start}, {max}, {interval}) (max should be domain +1) // // ticks: d3.range(0, 20001, 5000), // grid: true, // tickFormat: d3.format(","), // arrow: false // }, // marks: [ // Plot.barY(chartMeta.data, { // x: "year", // y: "totalChange", // fill: "#2E6F40", // inset: 0 // }), // Plot.ruleY([0], { stroke: "black", strokeWidth: 2 }) // ] // }); 36:T527,legendSwatches = { const items = chartMeta.legend; const swatchW = 26, swatchH = 26, gap = 10, labelGap = 7, itemSpacing = 30; const fontSize = 19, fontFamily = "Arial, sans-serif"; // Measure approximate text widths to space items const itemWidths = items.map(d => swatchW + labelGap + d.label.length * 8.5); const totalWidth = itemWidths.reduce((a, b) => a + b, 0) + (items.length - 1) * itemSpacing; const svg = d3.create("svg") .attr("width", 600) .attr("height", swatchH + 4) .style("font-family", fontFamily) .style("font-size", fontSize + "px"); let x = Math.max(0, (600 - totalWidth) / 2); items.forEach(item => { const g = svg.append("g").attr("transform", `translate(${x}, 0)`); g.append("rect") .attr("width", swatchW) .attr("height", swatchH) .attr("fill", item.fill) .attr("fill-opacity", item.fillOpacity) .attr("stroke", item.stroke) .attr("stroke-width", item.strokeWidth) .attr("stroke-dasharray", item.strokeDasharray || null); g.append("text") .attr("x", swatchW + labelGap) .attr("y", swatchH / 2) .attr("dominant-baseline", "middle") .attr("fill", "#222") .text(item.label); x += swatchW + labelGap + item.label.length * 8.5 + itemSpacing; }); return svg.node(); }37:T551,mobileLegendSwatches = { const items = chartMeta.legend; const swatchW = 44, swatchH = 28, gap = 14, labelGap = 10, itemSpacing = 46; const fontSize = 27, fontFamily = "Arial, sans-serif"; const itemWidths = items.map(d => swatchW + labelGap + d.label.length * 13.5); const totalWidth = itemWidths.reduce((a, b) => a + b, 0) + (items.length - 1) * itemSpacing; const svg = d3.create("svg") .attr("width", 925) .attr("height", swatchH + 4) .style("font-family", fontFamily) .style("font-size", fontSize + "px"); let x = Math.max(0, (925 - totalWidth) / 2); items.forEach(item => { const g = svg.append("g").attr("transform", `translate(${x}, 0)`); g.append("rect") .attr("width", swatchW) .attr("height", swatchH) .attr("fill", item.fill) .attr("fill-opacity", item.fillOpacity) .attr("stroke", item.stroke) .attr("stroke-width", item.strokeWidth) // keep at 2px — stroke-dasharray scales visually .attr("stroke-dasharray", item.strokeDasharray ? "9,4" : null); // match mobile bar dash g.append("text") .attr("x", swatchW + labelGap) .attr("y", swatchH / 2) .attr("dominant-baseline", "middle") .attr("fill", "#222") .text(item.label); x += swatchW + labelGap + item.label.length * 13.5 + itemSpacing; }); return svg.node(); }38:[{"id":"abcad2968fe4e2fcb0612c654dd0b2a920ab7c5bd3dc2e4e40b00cedb7091f7646abcadcfe2c71a496ecedfc9f15b9ed3e7a625619fef6feafe66541808a225b","href":"https://static.observableusercontent.com/files/abcad2968fe4e2fcb0612c654dd0b2a920ab7c5bd3dc2e4e40b00cedb7091f7646abcadcfe2c71a496ecedfc9f15b9ed3e7a625619fef6feafe66541808a225b","name":"montana-pop-change-2021-2025.csv","type":"text/csv","lastModified":1780940182168.365,"size":322},{"id":"29673af6f0c348fc4555d6eb0d2774ff34ab1164b2e9498936d51a3e620ddd1419802db2b4bda4d1347bd13069357104f8b8cc502a839ab419895ebedc7fc037","href":"https://static.observableusercontent.com/files/29673af6f0c348fc4555d6eb0d2774ff34ab1164b2e9498936d51a3e620ddd1419802db2b4bda4d1347bd13069357104f8b8cc502a839ab419895ebedc7fc037","name":"voter-turnout-by-county-primary-cleaned - bar-chart-data (1)@1.csv","type":"text/csv","lastModified":1781025678354.407,"size":282},{"id":"9979b6666905ad457874a3eaab6d0376162717090f0a90391d58aa54265e420ac5800e81829a677bd631806fa5459ae90527a481e744d833db47b687c4f99e57","href":"https://static.observableusercontent.com/files/9979b6666905ad457874a3eaab6d0376162717090f0a90391d58aa54265e420ac5800e81829a677bd631806fa5459ae90527a481e744d833db47b687c4f99e57","name":"voter-turnout-by-county-primary-cleaned - bar-chart-data.csv","type":"text/csv","lastModified":1780954184190.29,"size":281},{"id":"db93703ccbdf1512bbad852af2b4ab707f47595294e1e8409919bbd592be846a111fd151379f2202dd406c1253e5b7c9d47a35c6af899335a69388f2858dbf3e","href":"https://static.observableusercontent.com/files/db93703ccbdf1512bbad852af2b4ab707f47595294e1e8409919bbd592be846a111fd151379f2202dd406c1253e5b7c9d47a35c6af899335a69388f2858dbf3e","name":"voter-turnout-by-county-primary-cleaned - bar-chart-data@1.csv","type":"text/csv","lastModified":1780956067173.51,"size":282},{"id":"459d50a6d05da869a0fec038bbd010241c7ccfb665dd4fd6b9ef5ca01c6609c5ef82e28ba1a522af5e175c147a0d72d9cb1aa912972dce030103b803c44d6e5d","href":"https://static.observableusercontent.com/files/459d50a6d05da869a0fec038bbd010241c7ccfb665dd4fd6b9ef5ca01c6609c5ef82e28ba1a522af5e175c147a0d72d9cb1aa912972dce030103b803c44d6e5d","name":"voter-turnout-by-county-primary-cleaned - bar-chart-data (1).csv","type":"text/csv","lastModified":1780956138574.637,"size":282}] 2b:{"id":"4b8123f4dabdb97e","slug":null,"title":"Voter turnout graphics","thumbnail":"f77b843754dea135cae5e96dbfe68b40b3498315ee2cab6a9736f435c5edeb85","access_level":"public","create_time":"$D2026-06-08T17:36:22.168Z","update_time":"$D2026-06-10T04:29:58.417Z","view_time":null,"first_public_time":"$D2026-06-08T17:36:22.168Z","has_unpublished_edits":null,"fork":{"id":"fef1c5a9edc07bfe","slug":null,"title":"Observable Plot bar chart scaffolding","owner":{"id":"4097a649455797ee","login":"jacob-test-mtfp","name":"Test - Jacob"}},"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":645,"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":"Voter turnout graphics","cells":[{"id":0,"value":"# Voter turnout graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"#### *Notes*\n- Optional Fields can be deleted\n- Export desktop graphics and resize to 1200px\n- Export mobile graphics and ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"// OPTIONS OBJECT FOR TITLE/SUBTITLE ETC.\n// Title as SVG?","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"processedData = data.map(d => ({\n year: +d.year,\n turnoutPercentage: +d.turnoutPercentage,\n registeredVoters: +d.registeredVoters,\n castVotes: +d.castVotes\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = FileAttachment(\"voter-turnout-by-county-primary-cleaned - bar-chart-data (1)@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"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":173,"value":"// Allows us to have empty or missing fields on `chartMeta` and then it won't render anything \n// default behavior is for it to render the word `undefined`\nempty = () => document.createDocumentFragment()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"// Helper for Plot values\nyAxis = meta => ({\n label: meta.yAxis ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"// Helper for Plot values\nxAxis = meta => ({\n label: meta.xAxis ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"yDomain = meta => ({\n domain: meta.yDomain ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"yTicks = meta => ({\n ticks: meta.yTicks ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"xDomain = meta => ({\n domain: meta.xDomain ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"xTicks = meta => ({\n ticks: meta.xTicks ?? null\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2c:"$2b:body"