28:null 29:["$","title",null,{"children":"Meme Generator | Mike Bostock | Observable"}] 2e:T4fa,viewof image = { const files = [ ["Beastie Boys", FileAttachment("beastie-boys.jpg")], ["Bohemian Rhapsody", FileAttachment("bohemian-rhapsody.jpg")], ["Buy a Boat Cat", FileAttachment("buy-a-boat-cat.jpg")], ["Is This a Pigeon", FileAttachment("is-this-a-pigeon.jpg")], ["Picard Annoyed", FileAttachment("picard-annoyed.jpg")], ["Picard Facepalm", FileAttachment("picard-facepalm.jpg")] ]; const form = html`

`; form.file.onchange = () => { form.select.value = "Other"; form.value = new Promise((resolve, reject) => { const image = new Image; image.src = URL.createObjectURL(form.file.files[0]); image.onload = () => resolve(image); image.onerror = reject; }); form.dispatchEvent(new CustomEvent("input")); }; form.select.onchange = async () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = files[form.select.selectedIndex][1].image(); form.dispatchEvent(new CustomEvent("input")); } }; form.select.selectedIndex = 0; form.select.onchange(); return form; }2f:[{"id":"b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","href":"https://static.observableusercontent.com/files/b9f4eb7f29053d0d12900a476f95f6cdf9439c7048493117a8109cb8a5a591d1eb55a9b8885b8fbc016966a66b537c4e74b9ac41d26e5b9ed9eafa373bc16808","name":"picard-facepalm.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":91853},{"id":"3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","href":"https://static.observableusercontent.com/files/3bb24463f8d46fa82f3c575dceea2fe782eba71e4a5625893070c46d0f1f0adc07bbeadbdd65f307b444fa808840512f0c62f80a3ef5da4056b52027d1be0f53","name":"picard-annoyed.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":91822},{"id":"02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","href":"https://static.observableusercontent.com/files/02d4686b3f107afa5d119b47408ac2f2a52a93c484e873c6b6408bffb30abe9e8804d0e43a5e50c6b3fb2f38a73cddc7aa0f249e26bd196708ddee0acdae1a3c","name":"is-this-a-pigeon.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":54721},{"id":"2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","href":"https://static.observableusercontent.com/files/2814df6f046dab031dce6434538afd6892affceac550f607b575664043825407e393b22c9417b8e0619494d3b4714def2ac4d1b385b8811110b77f2f70663b04","name":"buy-a-boat-cat.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":34772},{"id":"49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","href":"https://static.observableusercontent.com/files/49c9daa4baf608af8e9f7f805772814d0f1ded0e109a46c1ae80765a83f5a98bd9591e0c81463ae94bc1c9e929482fc511a3941aff40e494ced41b0bce44c753","name":"bohemian-rhapsody.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":46848},{"id":"b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","href":"https://static.observableusercontent.com/files/b27f10ef72c75823ca1c0d46cf1c0990d19a478d1e8e05c62db012aa81fc977e648175cc9d96040ac06df012ba6f1ed1b08bb75ec5aebe5e30eb89c9f2ae9b8f","name":"beastie-boys.jpg","type":"image/jpeg","lastModified":1572461274346.421,"size":73554}] 2c:{"id":"4c56423769abd096","slug":"meme-generator","title":"Meme Generator","thumbnail":"d596d1501a3241b7df13713e13a1ee5f418dac3ce137623f34f5819d8b5bef0d","access_level":"public","create_time":"$D2018-09-30T15:52:33.801Z","update_time":"$D2019-11-03T14:28:40.383Z","view_time":null,"first_public_time":"$D2018-09-30T22:38:09.865Z","has_unpublished_edits":null,"fork":false,"stars":31,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":195,"publish_version":195,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"dfdfb0e58dceb865","slug":"applications","title":"Applications","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"title":"Meme Generator","cells":[{"id":0,"value":"md`# Meme Generator\n\nI’m sorry. Right click to save or copy the image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"canvas = {\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n const context = DOM.context2d(width, height, 1);\n context.canvas.style.maxWidth = \"100%\";\n context.drawImage(image, 0, 0);\n context.font = `${fontSize}px ${fontFamily}`;\n context.textAlign = \"center\";\n context.fillStyle = \"#fff\";\n context.lineWidth = 3;\n context.lineJoin = \"round\";\n context.textBaseline = \"top\";\n context.strokeText(toptext, width / 2, height * padding);\n context.fillText(toptext, width / 2, height * padding);\n context.textBaseline = \"bottom\";\n context.strokeText(bottomtext, width / 2, height * (1 - padding));\n context.fillText(bottomtext, width / 2, height * (1 - padding));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof toptext = textarea({placeholder: \"Enter top text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof bottomtext = textarea({value: \"memes\", placeholder: \"Enter bottom text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof fontFamily = {\n const form = html`\n \n \n`;\n form.text.oninput = () => form.value = form.text.value;\n form.select.onchange = () => {\n if (form.select.value === \"Other\") {\n form.text.style.display = \"inline\";\n form.text.select();\n form.value = form.text.value;\n } else {\n form.text.style.display = \"none\";\n form.value = form.select.value;\n }\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof fontSize = {\n const form = html`\n \n \n

`;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px font-size`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof padding = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed(0)}% padding`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function textarea({value = \"\", placeholder = \"Enter text here\"}) {\n const textarea = html``;\n textarea.placeholder = placeholder;\n textarea.value = value;\n textarea.style = `\n display: block;\n box-sizing: border-box;\n width: calc(100% + 28px);\n font: var(--mono_fonts);\n border: none;\n padding: 6px 10px;\n margin: 0 -14px;\n background: rgb(247,247,249);\n `;\n return textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"