27:null 28:["$","title",null,{"children":"CROSSTAB Issues voters rank as \"Very Important\" to their vote | Test - Jacob | Observable"}] 2d:T41f,// Define title for both graphs // Comment out to remove field chartMeta = ({ desktopFilename: 'desktopPartyVoterIssues.png', mobileFilename: 'mobilePartyVoterIssues.png', // HTML stuff title: "What issues do voters say are very important to their voting decision?", // subtitle: "Share of voters who call each issue 'very important' to their decision", source: "Per responses to Aug 27-Sept 7, 2026 MTFP-Eagleton poll. Margin of error ±4.2%", credit: "Graphic: Jacob Olness / MTFP", // note: "Note: {optional}", // Basic color legend — rendered in HTML, scales cleanly across chart sizes legend: [ { label: "Democrat", color: "#4575b4" }, { label: "Independent", color: "#6f5bb5" }, { label: "Republican", color: "#d73027" } ], // Plot stuff data: processedData, partyOrder: ["Democrat", "Independent", "Republican"], colorMap: { Democrat: "#4575b4", Independent: "#6f5bb5", Republican: "#d73027" }, outlineColor: '#606060', xAxis: null, yDomain: [0, 100], yTicks: d3.range(0, 101, 20), });2e:T432,exportDesktop = { const button = html``; button.onclick = async () => { // Scale factor from display size to export size const EXPORT_W = 1200; const EXPORT_H = 1600; const DISPLAY_W = 600; const DISPLAY_H = 800; 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:T7d0,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:T511,barChartScaffold = Plot.plot({ width: 600, height: 670, style: { fontSize: 20, fontFamily: "Arial, sans-serif" }, marginLeft: 135, marginBottom: 35, marginTop: 10, // adjust higher if a value label near 100 might clip marginRight: 30, fy: { domain: [...new Set(chartMeta.data.map(d => d.label))], padding: 0.05, label: null, }, y: { domain: chartMeta.partyOrder, axis: null, padding: 0.1, }, x: { type: "linear", domain: chartMeta.yDomain, ticks: chartMeta.yTicks, grid: true, tickFormat: d => `${d}%`, label: chartMeta.xAxis ?? null, }, color: { domain: chartMeta.partyOrder, range: chartMeta.partyOrder.map(p => chartMeta.colorMap[p]), }, marks: [ Plot.barX(chartMeta.data, { fy: "label", y: "party", x: "value", fill: "party", stroke: chartMeta.outlineColor, strokeWidth: 2, inset: 0 }), // Value labels at end of each bar — remove this mark if you don't want them // Plot.text(chartMeta.data, { // fy: "label", // y: "party", // x: "value", // text: d => `${d.value}%`, // dx: 8, // textAnchor: "start", // fill: "black" // }), Plot.ruleX([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:T8df,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:T499,mobileBarChartScaffold = Plot.plot({ width: 925, height: 900, style: { fontSize: 29, fontFamily: "Arial, sans-serif", }, marginLeft: 192, marginBottom: 30, marginTop: 10, marginRight: 60, fy: { domain: [...new Set(chartMeta.data.map(d => d.label))], padding: 0.25, label: null, }, y: { domain: chartMeta.partyOrder, axis: null, padding: 0.08, }, x: { type: "linear", domain: chartMeta.yDomain, ticks: chartMeta.yTicks, grid: true, tickFormat: d => `${d}%`, label: chartMeta.xAxis ?? null, }, color: { domain: chartMeta.partyOrder, range: chartMeta.partyOrder.map(p => chartMeta.colorMap[p]), }, marks: [ Plot.barX(chartMeta.data, { fy: "label", y: "party", x: "value", fill: "party", stroke: chartMeta.outlineColor, strokeWidth: 4, inset: 0 }), // Plot.text(chartMeta.data, { // fy: "label", // y: "party", // x: "value", // text: d => `${d.value}%`, // dx: 12, // textAnchor: "start", // fill: "black" // }), Plot.ruleX([0], { stroke: "black", strokeWidth: 2 }) ] });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:[{"id":"e1a900dd3ded9e99041369a6f910145b3faa47f067c29df66a1ca2d0f284b65098f864dbe49f7f95a2d19b0dd906034cc028b262ec8c2219051da4d3856fc0a1","href":"https://static.observableusercontent.com/files/e1a900dd3ded9e99041369a6f910145b3faa47f067c29df66a1ca2d0f284b65098f864dbe49f7f95a2d19b0dd906034cc028b262ec8c2219051da4d3856fc0a1","name":"very-important-issue-graphics - very-important-issues@1.csv","type":"text/csv","lastModified":1790269378961.959,"size":211},{"id":"23ca67adde0f3fc41af85304c642626462e18fb8dfe7052a169de517f09ceb5f055eed13fd9e5064922518d1ea27390886972311a2b59ab092353998d793a33e","href":"https://static.observableusercontent.com/files/23ca67adde0f3fc41af85304c642626462e18fb8dfe7052a169de517f09ceb5f055eed13fd9e5064922518d1ea27390886972311a2b59ab092353998d793a33e","name":"very-important-issue-graphics - very-important-cross-tab.csv","type":"text/csv","lastModified":1790269990507.338,"size":236}] 2b:{"id":"4d63b77c4c23268e","slug":null,"title":"CROSSTAB Issues voters rank as \"Very Important\" to their vote","thumbnail":"ba4247af01290b16225b2a424d238a87d8c300214d0ec343e5c0fcf4a0821990","access_level":"public","create_time":"$D2026-09-24T17:02:58.961Z","update_time":"$D2026-09-24T17:26:07.099Z","view_time":null,"first_public_time":"$D2026-09-24T17:02:58.961Z","has_unpublished_edits":null,"fork":{"id":"815cf43e8426156a","slug":null,"title":"Issues voters rank as \"Very Important\" to their vote","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":601,"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":"CROSSTAB Issues voters rank as \"Very Important\" to their vote","cells":[{"id":0,"value":"# CROSSTAB Issues voters rank as \"Very Important\" to their vote","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$31","pinned":true,"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":206,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"processedData = data.flatMap(d => [\n { question: d.question, label: labelMap[d.question] ?? d.question, party: \"Democrat\", value: +d.democrats },\n { question: d.question, label: labelMap[d.question] ?? d.question, party: \"Independent\", value: +d.independents },\n { question: d.question, label: labelMap[d.question] ?? d.question, party: \"Republican\", value: +d.republicans }\n]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = FileAttachment(\"very-important-issue-graphics - very-important-cross-tab.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"labelMap = ({\n \"cost-affordability\": \"Cost/\\nAffordability\",\n \"jobs/economy\": \"Jobs/\\nEconomy\",\n \"healthcare\": \"Healthcare\",\n \"taxes\": \"Taxes\",\n \"immigration\": \"Immigration\",\n \"gun-policy\": \"Gun Policy\",\n \"environmental-issues\": \"Environmental\\nIssues\",\n \"data-centers\": \"Data Centers\",\n \"reproductive-issues\": \"Reproductive\\nIssues\",\n \"foreign-affairs\": \"Foreign Affairs\"\n})","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":"$W36","stdlib":"1","titling":"auto"}} 2c:"$2b:body"