27:null 28:["$","title",null,{"children":"AI How often do you use SEPTEMBER | Test - Jacob | Observable"}] 2d:T6db,chartMeta = ({ desktopFilename: 'desktopSeptemberAiUseFrequencyBarChart.png', mobileFilename: 'mobileSeptemberAiUseFrequencyBarChart.png', title: "How often do you use AI tools for each of the following?", // subtitle: "", source: "Per responses to Aug 27-Sept 7, 2026 MTFP-Eagleton poll. Margin of Error ±4.2%", credit: "Jacob Olness / MTFP", // note: "Note: “Weekly+” is the share who use AI tools several times a week or more. Results may not add up to 100% due to rounding.", domain: [0, 100], ticks: d3.range(0, 101, 20), xAxis: "", // X axis is often readily apparent so not needed // xAxis: "Xscale", xDomain: [0, 100], xTicks: d3.range(0, 101, 20), // Single source of truth: order here = left-to-right stack order = legend order. // `key` must match the `category` values in stackedData. legend: [ { key: "severalPerDay", label: "Several times a day", color: "#3a9d5d" }, { key: "onceADay", label: "Once a day", color: "#86cf9b" }, { key: "severalPerWeek", label: "Several times a week", color: "#b6e2c3" }, { key: "lessOftenNever", label: "Less often / never", color: "#f3a15f" }, { key: "dontKnow", label: "Don't know", color: "#D3D1C7" }, ], data: processedData, // Y-axis labels, keyed by the `task` value in the csv taskLabels: { "search": "Search", "work": "Work", "writing": "Writing", "diet-fitiness": "Diet & fitness", // NOTE: key matches the csv's "fitiness" spelling "companionship": "Companionship", "coding": "Coding", }, // Optional second line under each Y label (uses several-per-week-plus) showRollup: false, rollupLabel: "weekly+", rollupColor: "#3a9d5d", outlineColor: "#202020", })2e:T432,exportDesktop = { const button = html``; button.onclick = async () => { // Scale factor from display size to export size const EXPORT_W = 1200; const EXPORT_H = 1200; const DISPLAY_W = 600; const DISPLAY_H = 600; 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:T68f,barChartScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

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

${chartMeta.subtitle}

` : empty()} ${barChartScaffold}

${legendHTML}

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

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

` : empty()}

` 30:T832,barChartScaffold = Plot.plot({ width: 600, height: 408, style: { fontSize: 14, fontFamily: "Arial, sans-serif" }, marginLeft: 159, marginBottom: 20, marginTop: 0, marginRight: 18, x: { domain: [0, 100], ticks: d3.range(0, 101, 20), tickFormat: d => d + "%", grid: true, arrow: false, label: null, }, y: { domain: processedData.map(d => d.task), tickFormat: null, label: null, arrow: false, padding: 0.25, }, color: { domain: chartMeta.legend.map(l => l.key), range: chartMeta.legend.map(l => l.color), }, marks: [ Plot.barX( stackedData, Plot.stackX({ order: chartMeta.legend.map(l => l.key), x: "value", y: "task", z: "category", fill: "category", stroke: chartMeta.outlineColor, strokeWidth: 0.5, title: d => `${chartMeta.legend.find(l => l.key === d.category).label}: ${d.value}%`, }) ), Plot.axisX({ tickFormat: d => d + "%", ...xAxis(chartMeta), // Manual X axis domain ...xDomain(chartMeta), // Manual ticks ({start}, {max}, {interval}) (max should be domain +1) ...xTicks(chartMeta), fontWeight: "bold", label: null, arrow: false }), Plot.ruleX([0], { stroke: "black", strokeWidth: 1.5 }), // Y-axis tick labels: task name (+ optional weekly+ rollup line) Plot.text(processedData, { x: 0, y: "task", text: d => chartMeta.taskLabels[d.task] ?? d.task, textAnchor: "end", dx: -9, dy: chartMeta.showRollup ? -6 : 0, fontSize: 20, fontWeight: "bold", fontFamily: "Arial, sans-serif", fill: "black", }), ...(chartMeta.showRollup ? [ Plot.text(processedData, { x: 0, y: "task", text: d => `${d.weeklyPlus}% ${chartMeta.rollupLabel}`, textAnchor: "end", dx: -9, dy: 8, fontSize: 12.5, fontWeight: "bold", fontFamily: "Arial, sans-serif", fill: chartMeta.rollupColor, }) ] : []), ] })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:T7d3,mobileBarChartScaffoldEmbed = html`

${chartMeta.title ? html`

${chartMeta.title}

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

${chartMeta.subtitle}

` : empty()}

${mobileBarChartScaffold}

${mobileLegendHTML}

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

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

` : empty()}

`33:T81e,mobileBarChartScaffold = Plot.plot({ width: 915, height: 895, style: { fontSize: 29, fontFamily: "Arial, sans-serif" }, marginLeft: 238, marginBottom:55, marginTop: 65, marginRight: 37, x: { domain: [0, 100], ticks: d3.range(0, 101, 20), tickFormat: d => d + "%", grid: true, arrow: false, label: null, }, y: { domain: processedData.map(d => d.task), tickFormat: null, label: null, arrow: false, padding: 0.25, }, color: { domain: chartMeta.legend.map(l => l.key), range: chartMeta.legend.map(l => l.color), }, marks: [ Plot.barX( stackedData, Plot.stackX({ order: chartMeta.legend.map(l => l.key), x: "value", y: "task", z: "category", fill: "category", stroke: chartMeta.outlineColor, strokeWidth: 0.5, title: d => `${chartMeta.legend.find(l => l.key === d.category).label}: ${d.value}%`, }) ), Plot.axisX({ tickFormat: d => d + "%", ...xAxis(chartMeta), // Manual X axis domain ...xDomain(chartMeta), // Manual ticks ({start}, {max}, {interval}) (max should be domain +1) ...xTicks(chartMeta), fontWeight: "bold", label: null, arrow: false }), Plot.ruleX([0], { stroke: "black", strokeWidth: 1.5 }), // Y-axis tick labels at mobile scale Plot.text(processedData, { x: 0, y: "task", text: d => chartMeta.taskLabels[d.task] ?? d.task, textAnchor: "end", dx: -10, dy: chartMeta.showRollup ? -15 : 0, fontSize: 29, fontWeight: "bold", fontFamily: "Arial, sans-serif", fill: "black", }), ...(chartMeta.showRollup ? [ Plot.text(processedData, { x: 0, y: "task", text: d => `${d.weeklyPlus}% ${chartMeta.rollupLabel}`, textAnchor: "end", dx: -10, dy: 12, fontSize: 25, fontWeight: "bold", fontFamily: "Arial, sans-serif", fill: chartMeta.rollupColor, }) ] : []), ] })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":"33d8bcb7dbcfb1fec1e36a149ef5ed0b97ba8e931d299c7ee198b7616108ef0f97d535d9a7947d67d15ca700b98ab37813480df283b4de54e18e73d34c01c375","href":"https://static.observableusercontent.com/files/33d8bcb7dbcfb1fec1e36a149ef5ed0b97ba8e931d299c7ee198b7616108ef0f97d535d9a7947d67d15ca700b98ab37813480df283b4de54e18e73d34c01c375","name":"mtfp-ai-polling - filtered-tasks-several-times-per-week-or-more@1.csv","type":"text/csv","lastModified":1789750216946.434,"size":245},{"id":"cf4f52ec636acf04a18dc1d45c4294a9c8418234dabbf9ae258d60e6bba957017629353e5370b8bd0850cc1699ef864c46b5af317bb3a2b3575a4b5a83dd41f5","href":"https://static.observableusercontent.com/files/cf4f52ec636acf04a18dc1d45c4294a9c8418234dabbf9ae258d60e6bba957017629353e5370b8bd0850cc1699ef864c46b5af317bb3a2b3575a4b5a83dd41f5","name":"eastern-house-district-polling-september-graphics - favorability.csv","type":"text/csv","lastModified":1789749815303.015,"size":245},{"id":"5cb3e18bdf66e3eb7f3ac8de4114bb0fd306eadb5ad144e4241333ca2afa626a214b92a66beddca82ad27d570c65970bc554ec60dfe07a7a84009b56fa25ca1a","href":"https://static.observableusercontent.com/files/5cb3e18bdf66e3eb7f3ac8de4114bb0fd306eadb5ad144e4241333ca2afa626a214b92a66beddca82ad27d570c65970bc554ec60dfe07a7a84009b56fa25ca1a","name":"senate-candidate-favorablity-may-13 - combined (1).csv","type":"text/csv","lastModified":1789749815303.015,"size":328},{"id":"06c928bc426cbcc4ef34ea1ab33f423eff858b18b3f51e3b35fa914fae9e10590376b96605e2d65d88a6ddcdf022c67dce3f6ecb5624154c8494ce420ad33b1b","href":"https://static.observableusercontent.com/files/06c928bc426cbcc4ef34ea1ab33f423eff858b18b3f51e3b35fa914fae9e10590376b96605e2d65d88a6ddcdf022c67dce3f6ecb5624154c8494ce420ad33b1b","name":"mtfp-ai-polling - filtered-tasks-several-times-per-week-or-more.csv","type":"text/csv","lastModified":1789749916475.184,"size":334},{"id":"56752bdc12fa11da98e6dd0cc4a3f287a5e28ff5f9176ab34b9dd32563bdaddb8469b5ca847cebd33f158283020f9b446b4507116d3e1a9dbe52f008dcd2ad1c","href":"https://static.observableusercontent.com/files/56752bdc12fa11da98e6dd0cc4a3f287a5e28ff5f9176ab34b9dd32563bdaddb8469b5ca847cebd33f158283020f9b446b4507116d3e1a9dbe52f008dcd2ad1c","name":"mtfp-ai-polling - how-often-decimals.csv","type":"text/csv","lastModified":1789752327871.714,"size":332}] 2b:{"id":"c0daf5d59cd8c159","slug":null,"title":"AI How often do you use SEPTEMBER","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-09-18T16:43:35.303Z","update_time":"$D2026-09-18T18:28:24.636Z","view_time":null,"first_public_time":"$D2026-09-18T16:43:35.303Z","has_unpublished_edits":null,"fork":{"id":"34d307f63726d2a3","slug":null,"title":"Eastern House candidate favorability September","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":875,"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":"AI How often do you use SEPTEMBER","cells":[{"id":0,"value":"# AI How often do you use SEPTEMBER","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\n\n- Tom lede: Lack of name ID","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":361,"value":"lastName = (name) => {\n const parts = name.trim().split(\" \");\n // \"Michael Black Wolf\" → \"Black Wolf\"; \"Kurt Alme\" → \"Alme\"\n return parts.length > 2 ? parts.slice(1).join(\" \") : parts[parts.length - 1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"stackedData = processedData.flatMap(d => [\n { task: d.task, category: \"severalPerDay\", value: d.severalPerDay },\n { task: d.task, category: \"onceADay\", value: d.onceADay },\n { task: d.task, category: \"severalPerWeek\", value: d.severalPerWeek },\n { task: d.task, category: \"lessOftenNever\", value: d.lessOftenNever },\n { task: d.task, category: \"dontKnow\", value: d.dontKnow },\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"$2e","pinned":false,"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":598,"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":386,"value":"mobileLegendHTML = html`

\n ${chartMeta.legend.map(item =>\n html`

\n \n ${item.label}\n

`\n )}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"legendHTML = html`

\n ${chartMeta.legend.map(item =>\n html`

\n \n ${item.label}\n

`\n )}\n

`","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.map(d => ({\n task: d.task,\n severalPerDay: +d[\"several-per-day\"],\n onceADay: +d[\"once-a-day\"],\n severalPerWeek: +d[\"several-per-week\"],\n lessOftenNever: +d[\"less-often-never\"],\n dontKnow: +d[\"dont-know\"],\n weeklyPlus: +d[\"several-per-week-plus\"], // rollup of the first three; used for the label only, not stacked\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = FileAttachment(\"mtfp-ai-polling - how-often-decimals.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"oldData = FileAttachment(\"senate-candidate-favorablity-may-13 - combined (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":593,"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"