27:null 28:["$","title",null,{"children":"SEPTEMBER Gasoline/transportation costs | Test - Jacob | Observable"}] 2d: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; }2e:T7cd,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()}

` 2f: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; }30:T8e0,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()}

`31: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()} //

// ` 32: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 }) // ] // }); 33:[{"id":"f91dd3c5ab37da3a8ce70293c6a1329755b35615dea54a9d8385eb3b09b3667e5d2c1b91d07e518200022332db8f38c3642cf1be169a509faba7742b2ef7d7fb","href":"https://static.observableusercontent.com/files/f91dd3c5ab37da3a8ce70293c6a1329755b35615dea54a9d8385eb3b09b3667e5d2c1b91d07e518200022332db8f38c3642cf1be169a509faba7742b2ef7d7fb","name":"fuel-transportation.csv","type":"text/csv","lastModified":1789661589768.583,"size":115},{"id":"b3d97b301925f6f079c7a1a52b5e0aa874ade73674924a455798e2a1313a6ef522f5f17791dd9db4a338801ff8aa52ea1c61551f7622a0aa151f204f072768ae","href":"https://static.observableusercontent.com/files/b3d97b301925f6f079c7a1a52b5e0aa874ade73674924a455798e2a1313a6ef522f5f17791dd9db4a338801ff8aa52ea1c61551f7622a0aa151f204f072768ae","name":"immigration-polling - ice-approval-combined.csv","type":"text/csv","lastModified":1789661386498.439,"size":98}] 2b:{"id":"6e977bd3d40b552b","slug":null,"title":"SEPTEMBER Gasoline/transportation costs","thumbnail":"f22c98d860118aa9e9c6b5df5ef126e4d5e2c610476d500c6c0bd61be80f00c2","access_level":"public","create_time":"$D2026-09-17T16:09:46.498Z","update_time":"$D2026-09-17T16:26:57.395Z","view_time":null,"first_public_time":"$D2026-09-17T16:09:46.498Z","has_unpublished_edits":null,"fork":{"id":"422f06442513dbd1","slug":null,"title":"SEPTEMBER How important is affordability to your 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":610,"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":"SEPTEMBER Gasoline/transportation costs","cells":[{"id":0,"value":"# SEPTEMBER Gasoline/transportation costs ","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":"chartMeta = ({\n desktopFilename: 'desktopGasCosts.png',\n mobileFilename: 'mobileGasCosts.png',\n title: \"How difficult is it to afford gas or transportation?\",\n // subtitle: \"{Optional}\",\n source: \"Per responses to Aug 27-Sept 7, 2026 MTFP-Eagleton poll. Margin of Error ±4.2%\",\n credit: \"Jacob Olness / MTFP\",\n // note: \"Note: {optional}\",\n\n data: processedData,\n primaryColor: '#ce5a00',\n secondaryColor: '#d8d8d8',\n outlineColor: '#606060',\n yAxis: \"Yscale\",\n yDomain: [0, 50],\n yTicks: d3.range(0, 41, 20)\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"// [\"Very difficult\", \"Somewhat difficult\", \"Not very difficult\", \"Not at all difficult\", \"Not applicable\", \"Don't know\"];\nlabels = ({\n \"Very difficult\": \"Very\\ndifficult\",\n \"Somewhat difficult\": \"Somewhat\\ndifficult\",\n \"Not very difficult\": \"Not very\\ndifficult\",\n \"Not at all difficult\": \"Not at all\\ndifficult\",\n \"Not applicable\": \"Not\\napplicable\",\n \"Don't know\": \"Don't\\nknow\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"barChartScaffold = Plot.plot({\n width: 600,\n height: 420,\n style: { fontSize: 20, fontFamily: \"Arial, sans-serif\" },\n marginLeft: 48,\n marginBottom: 48,\n marginTop: -40,\n marginRight: 0,\n\n x: {\n type: \"band\",\n domain: chartMeta.data.map(d => d.category),\n padding: 0.25,\n ...xAxis(chartMeta),\n arrow: false,\n label: null,\n tickFormat: d => labels[d] ?? d\n },\n\n y: {\n ...yAxis(chartMeta),\n ...yDomain(chartMeta),\n ...yTicks(chartMeta),\n grid: true,\n tickFormat: d => d + \"%\",\n arrow: false,\n label: null,\n },\n\n marks: [\n Plot.barY(chartMeta.data, {\n x: \"category\",\n y: \"value\",\n fill: d => d.category === \"Don't know\" ? chartMeta.secondaryColor : chartMeta.primaryColor,\n stroke: chartMeta.outlineColor,\n strokeWidth: 3,\n inset: 0\n }),\n Plot.ruleY([0], { stroke: \"black\", strokeWidth: 2 })\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"mobileBarChartScaffold = Plot.plot({\n width: 925,\n height: 950,\n style: { fontSize: 28.5, fontFamily: \"Arial, sans-serif\" },\n marginLeft: 70,\n marginBottom: 67,\n marginTop: -100,\n marginRight: 0,\n\n x: {\n type: \"band\",\n domain: chartMeta.data.map(d => d.category),\n padding: 0.25,\n ...xAxis(chartMeta),\n arrow: false,\n label: null,\n tickFormat: d => labels[d] ?? d\n },\n\n y: {\n ...yAxis(chartMeta),\n ...yDomain(chartMeta),\n ...yTicks(chartMeta),\n grid: true,\n tickFormat: d => d + \"%\",\n arrow: false,\n label: null,\n },\n\n marks: [\n Plot.barY(chartMeta.data, {\n x: \"category\",\n y: \"value\",\n fill: d => d.category === \"Don't know\" ? chartMeta.secondaryColor : chartMeta.primaryColor,\n stroke: chartMeta.outlineColor,\n strokeWidth: 3,\n inset: 0\n }),\n Plot.ruleY([0], { stroke: \"black\", strokeWidth: 2 })\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","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 = {\n const categories = [\"Very difficult\", \"Somewhat difficult\", \"Not very difficult\", \"Not at all difficult\", \"Not applicable\"];\n const keys = [\"very-difficult\", \"somewhat-difficult\", \"not-very-difficult\", \"not-at-all-difficult\", \"not-applicable\"];\n const row = data[0];\n return categories.map((cat, i) => ({\n category: cat,\n value: +row[keys[i]]\n }));\n}\n\n// processedData = {\n// const categories = [\"Strongly approve\", \"Somewhat approve\", \"Neither\", \"Somewhat disapprove\", \"Strongly disapprove\", \"Don't know\"];\n// const keys = [\"strongly-approve\", \"somewhat-approve\", \"neither\", \"somewhat-disapprove\", \"strongly-dissaprove\", \"dont-know\"];\n// const row = data[0];\n// return categories.map((cat, i) => ({\n// category: cat,\n// value: +row[keys[i]]\n// }));\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = FileAttachment(\"fuel-transportation.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":"$W33","stdlib":"1","titling":"auto"}} 2c:"$2b:body"