2b:null 2c:["$","title",null,{"children":"formform playground | Peter Hofmann | Observable"}] 31:[] 2f:{"id":"7963c9185f951b13","slug":"formform-playground","title":"formform playground","thumbnail":"5adaa6c678f20b7675f89c3c5e03103dd89f7adb913ecdaf3b07efaa83803be9","access_level":"public","create_time":"$D2019-02-27T22:04:41.385Z","update_time":"$D2019-04-14T11:46:15.126Z","view_time":null,"first_public_time":"$D2019-03-03T13:08:57.575Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024"},"version":270,"publish_version":270,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"41a7dc676993b9ac","slug":"experiments","title":"Experiments","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"title":"formform playground","cells":[{"id":0,"value":"md`# formform playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`Just a little playground for my [formform](https://github.com/formsandlines/formform) library.\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"viewof formulaInput = text({\n title: 'Enter formula',\n placeholder: '(a)b',\n submit: 'render',\n value: '( ((a)b) ((b)a) ) {2r+1|/deeming/,/telling/,/understanding/} {open|\"a_1\",\"a_2\",…,\"a_n\"}'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"{\n const id = DOM.uid();\n yield md`\n### GSB hook-notation (custom D3 \"box model\"-layout) output:\n\n

\n`;\n formform.graph.createGraph('gsbhooks', formulaInput, {\n parentId: id.id,\n compactChecked: compact\n }); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"viewof compact = checkbox({options: [{value: true, label: \"Compact re-entries\"}] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"{\n const id = DOM.uid();\n yield md`\n### Graph (D3 circle packing) output:\n\n

\n`;\n formform.graph.createGraph('pack', formulaInput, {\n parentId: id.id, \n styleClass: styleClass\n }); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof styleClass = radio({\n title: 'Choose style',\n options: [\n { label: 'basic', value: 'basic' },\n { label: 'gestalt', value: 'gestalt' }\n ],\n value: 'basic'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"{\n const id = DOM.uid();\n yield md`\n### Tree output:\n\n

\n`;\n formform.graph.createGraph('tree', formulaInput, {\n parentId: id.id\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"md`### JSON representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"formform.form.jsonString(formulaInput)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"md`### Calculated values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"JSON.stringify( formform.form.calcAll(formulaInput), undefined, 2 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"formula = '{\"content\",\"focus\",\"context\"}'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"{\n const id1 = DOM.uid();\n const id2 = DOM.uid();\n yield html`\n

`;\n formform.graph.createGraph('pack', formula, {\n width: width,\n parentId: id1.id,\n styleClass: 'basic'\n });\n formform.graph.createGraph('pack', formula, {\n width: width,\n parentId: id2.id, \n styleClass: 'gestalt'\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"{\n const id = DOM.uid();\n yield html`

`;\n formform.graph.createGraph('tree', formula, {\n width: width,\n parentId: id.id\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"formform = require('formform@0.5.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"import {text, radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"