30:T4e7,{ var svgelem = svg` `; var code = md` \`\`\` viewof n = Range([2, 62], {value: 38, step: 4, label: "Spokes"}) svg\` \` \`\`\` ` return responsive_scale(invalidation, html`

${code}

${svgelem}

`) }31:[{"id":"958d1f72a5bc1c77bced4e32711543aba58d5f1ea7269657bc4f4fd76fddf38ff4c02c9c1f223f9378123a3426d1d4a77164362a2dd687dfb9ab8aad3fb7c5df","href":"https://static.observableusercontent.com/files/958d1f72a5bc1c77bced4e32711543aba58d5f1ea7269657bc4f4fd76fddf38ff4c02c9c1f223f9378123a3426d1d4a77164362a2dd687dfb9ab8aad3fb7c5df","name":"Screen Shot 2021-02-14 at 3.59.19 PM.png","type":"image/png","lastModified":1613452941353.357,"size":385203}] 2e:{"title":"Zine Spokes","cells":[{"id":0,"value":"md`# Zine Spokes\n\nHere’s a slimmed down version of [\"Spokes\"](/@mayagans/chapter-1-spokes) by [Maya Gans](/@mayagans) and [Ijeamaka Anyene](https://ijeamaka-anyene.netlify.app/posts/2021-01-04-radial-patterns-in-ggplot2/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"viewof n = Range([2, 62], \n {value: 38, step: 4, label: \"Spokes\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"md`Based on the original:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`${await FileAttachment(\"Screen Shot 2021-02-14 at 3.59.19 PM.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"responsive_scale = (cell_invalidation, elem) => {\n const div = html`

${elem}`;\n div.style.transformOrigin = `top left`;\n\n const width_updates = width_observer();\n cell_invalidation.then(() => width_updates.return());\n \n (async function (){\n // wait for the content to render before measuring size\n await new Promise(callback => requestAnimationFrame(callback));\n const elem_width = elem.getBoundingClientRect().width;\n const elem_height = elem.getBoundingClientRect().height;\n\n // listen to changes in width and rescale as necessary.\n for await (const width of width_updates) {\n const scale = Math.min(width/elem_width, 1);\n const vertical_gap = (1-scale)*elem_height;\n div.style.transform = `scale(${scale})`;\n div.style.marginBottom = `-${vertical_gap}px`;\n }\n })();\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"width_observer = () => Generators.observe(callback => {\n let current_width, previous_width; \n const resized = () => {\n if ((current_width = document.body.clientWidth) !== previous_width)\n callback(previous_width = current_width); };\n resized(), window.addEventListener('resize', resized);\n return () => window.removeEventListener('resize', resized);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}