28:null 29:["$","title",null,{"children":"Zine Spokes | Jacob Rus | Observable"}] 2e: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}

`) }2f:[{"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}] 2c:{"id":"d32eb974ae237801","slug":"zine-spokes","title":"Zine Spokes","thumbnail":"713af7e3d6c7aefc007d4b59cb80c611e342a4a5d9b4e0014d23102f26fdd3b8","access_level":"public","create_time":"$D2021-02-16T05:22:21.353Z","update_time":"$D2021-03-06T05:37:02.706Z","view_time":null,"first_public_time":"$D2021-02-16T06:22:26.943Z","has_unpublished_edits":null,"fork":{"id":"5d9bb17c84755e0f","slug":"chapter-1-spokes","title":"Chapter 1: Spokes","owner":{"id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans"}},"stars":2,"starred":false,"owner":{"type":"team","id":"9b8a8e177a49059a","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":"starter_2024"},"version":1018,"publish_version":1018,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}],"members":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof n = Range([2, 62], \n {value: 38, step: 4, label: \"Spokes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"md`Based on the original:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`${await FileAttachment(\"Screen Shot 2021-02-14 at 3.59.19 PM.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"