2e:null 2f:["$","title",null,{"children":"Apparatus | Joshua Horowitz | Observable"}] 34:T8c7,md` Hopefully, you are now excited to embed your very own Apparatus diagram in your very own Observable notebook. Here's how to do it. First, you need to make a diagram in Apparatus. Right off the bat, I'll drop some real talk: While Apparatus is a conceptually fantastic tool, it's rough around the edges and does not have an active community of users. Learning to use Apparatus effectively might be difficult. Your best starting point is [the video tutorials on the Apparatus home page](http://aprt.us/#tutorials) (as well as the examples and documentation on that page). Good luck and have fun! Once you have a workable version of your diagram, it's time to get it into Observable. This takes two steps: 1. **Download it from Apparatus:** Press "Save" on the Apparatus editor menu bar. This will download a copy of the diagram to your computer with a \`.json\` file extension. 2. **Upload it to Observable:** For this, you'll use the "file attachment" feature of Observable notebooks. Full details on how to do that can be found [in the Observable docs](https://observablehq.com/@observablehq/file-attachments). Once you have a notebook with an Apparatus file attached, it's time to get the diagram running inside of a cell. To do that, you need the "\`apparatus\`" function. Easy! \`\`\`js import {apparatus} from "@joshuahhh/apparatus" \`\`\` Here's a sample use of "\`apparatus\`" from the "Adding up odds" example: \`\`\`js viewof diagram = apparatus({ width: 300, height: 300, projectData: await FileAttachment("sum-of-odds.json").json(), regionOfInterest: { x: [-0.5, 7.5], y: [-1.5, 7.5] }, }) \`\`\` Here's what these options are about: * Always provide ${btt`width`} and ${btt`height`}. They are in pixels or, if you provide a string, CSS lengths. * Use ${btt`projectData`} as shown here to access your attached diagram. * Always provide ${btt`regionOfInterest`} to specify which part of the Apparatus diagram should be shown. (Each grid square in the Apparatus editor is one unit. x goes left to right, and y goes bottom to top.) Once you've fiddled with these values a bit, you ought to have a working interactive diagram embedded in your notebook. Congratulations! `35:T405,md` ### Reading & writing Standalone interactive diagrams are great, but you might want to make your diagram talk with other parts of your notebook. There are two ways to do this: * **Reading values from the diagram:** The "Adding up odds" example shows this. It has a cell with the code: \`\`\`N = diagram.getAttributeByLabel("N").value()\`\`\`. This means the cell should contain the value of the attribute named "N" in the Apparatus editor. Through the magic of Observable, the Observable cell will automatically update whenever you interact with the Apparatus diagram. * **Writing values to the diagram:** Suppose you want a button in your notebook to change the value of an Apparatus attribute. Your event handler can contain code like: \`\`\`diagram.getAttributeByLabel("attribute to change").setExpression(newValue)\`\`\`. For these to work, the attribute in the Apparatus editor must have a unique name. This should not be a significant obstacle, since you can always make a new attribute with whatever name you want. `36:[{"id":"a96660087dcb10a2bd6dff16a54c3e9998c641f3420cef887f01dab3d72e69b0144ed32ff6cff28ffd6852d4f0bfcb2f8140dc3bc1779526e89d2d2157e03371","href":"https://static.observableusercontent.com/files/a96660087dcb10a2bd6dff16a54c3e9998c641f3420cef887f01dab3d72e69b0144ed32ff6cff28ffd6852d4f0bfcb2f8140dc3bc1779526e89d2d2157e03371","name":"sum-of-odds.json","type":"application/json","lastModified":1584074033264.747,"size":281480},{"id":"a0ae32f3bd199b7fea386aa2457bf83e07f94925f3c13cfdd7975c0e3756a5033042ff848508dd824e251a6b3d2d381c5510001f21c310d13db28e783622b73b","href":"https://static.observableusercontent.com/files/a0ae32f3bd199b7fea386aa2457bf83e07f94925f3c13cfdd7975c0e3756a5033042ff848508dd824e251a6b3d2d381c5510001f21c310d13db28e783622b73b","name":"apparatus@1.png","type":"image/png","lastModified":1591911997281.143,"size":229881},{"id":"3f75690f52fa69d17878134959cefe8211004c91bb68df4b8b25747d5571116d3e44881adeaafb1efc660510b014201ad208d88554b493df991dd5044c54f8b7","href":"https://static.observableusercontent.com/files/3f75690f52fa69d17878134959cefe8211004c91bb68df4b8b25747d5571116d3e44881adeaafb1efc660510b014201ad208d88554b493df991dd5044c54f8b7","name":"proj@1.gif","type":"image/gif","lastModified":1591922335762.695,"size":646718},{"id":"4f976ef9364f96ba0c74e2761d4d03b04de77d3d272b4070d6da8e11a0ee8d65985828c303bceca10c9dbd09b70da73b583bac778b37ba064f7c1ea390ba23e3","href":"https://static.observableusercontent.com/files/4f976ef9364f96ba0c74e2761d4d03b04de77d3d272b4070d6da8e11a0ee8d65985828c303bceca10c9dbd09b70da73b583bac778b37ba064f7c1ea390ba23e3","name":"prefixes.png","type":"image/png","lastModified":1594014361791.244,"size":158379}] 32:{"id":"53862e6e4f910997","slug":"apparatus","title":"Apparatus","thumbnail":"f1781cc419eca3ea85797b2d330b658826135787f30ff93c1189e9eb46ef5d0a","access_level":"public","create_time":"$D2020-03-13T04:18:07.913Z","update_time":"$D2020-07-06T05:48:21.440Z","view_time":null,"first_public_time":"$D2020-06-11T21:35:43.960Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"4a29764d3c5ac978","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":"starter_2024"},"version":350,"publish_version":350,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null}],"members":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Apparatus","cells":[{"id":0,"value":"md`# Apparatus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`\n $\"Apparatus$ \n\n[Apparatus](http://aprt.us/) is a hybrid graphics editor and programming environment for creating **interactive diagrams**.\n\nThis notebook is about embedding Apparatus diagrams in Observable. First, we'll show a simple example of an embedded diagram. Then, we'll talk about how to embed diagrams in your own notebooks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`## Example: Adding up odds`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`\nWhat happens when you add up a bunch of odd numbers in a row, like 1 + 3 + 5 + 7? Drag the circle to find out.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof diagram = apparatus({\n width: 300,\n height: 300,\n projectData: await FileAttachment(\"sum-of-odds.json\").json(),\n regionOfInterest: {\n x: [-0.5, 7.5],\n y: [-1.5, 7.5]\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\nThis diagram shows how the sum of the first ${tex`n`} odd numbers is always a square number – each odd number fits perfectly onto the last square number, to make the next square number.\n\nIn symbols & arithmetic,\n ${tex.block`\\begin{array}{ccc}\n n^2 & + & (2n + 1) & = & (n+1)^2 \\\\\n ${N-1}^2 & + & (2\\cdot${N - 1} + 1) & = & ${N}^2 \\\\\n ${(N-1)**2} & + & ${2*(N - 1) + 1} & = & ${N**2} \\\\\n \\end{array}`}\n\nWhich do you find more convincing: the diagram or the symbols? (Or the diagram *plus* the symbols?)\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`### Example appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"N = diagram.getAttributeByLabel(\"N\").value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`## How to embed a diagram`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"md`## Gallery of notebooks with Apparatus diagrams\n\n* [Cylindrical equal-area projections

](https://observablehq.com/@joshuahhh/cylindrical-equal-area-projections)\n* [Timeline of SI Prefixes

](https://observablehq.com/@joshuahhh/timeline-of-si-prefixes)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"apparatus = (options) => {\n let { width, height } = options;\n if (typeof width === 'number') { width = width + \"px\"; }\n if (typeof height === 'number') { height = height + \"px\"; }\n const viewerElem = html`

`\n options.element = viewerElem;\n options.onLoad = () => {\n // honestly, idk why this particular setTimeout is needed, but it is!\n setTimeout(() => {\n viewerElem.dispatchEvent(new CustomEvent(\"input\"))\n }, 0);\n };\n options.onRender = () => {\n viewerElem.dispatchEvent(new CustomEvent(\"input\"))\n };\n setTimeout(() => {\n viewerElem.value = new ApparatusViewer(options)\n }, 0);\n return viewerElem\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"ApparatusViewer = loadScript(\n \"https://cdn.jsdelivr.net/gh/joshuahhh/apparatus-embed-boilerplate@master/apparatus-viewer.js\",\n () => window.ApparatusViewer\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"btt = (contents) => html`${contents}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"loadScript = (scriptUrl, getter) => {\n var scriptElem = document.createElement('script');\n scriptElem.src = scriptUrl;\n document.body.appendChild(scriptElem);\n return new Promise((resolve) => {\n let interval = setInterval(() => {\n let maybeGotten = getter();\n if (maybeGotten) {\n clearInterval(interval);\n resolve(maybeGotten);\n }\n }, 10);\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"