2a:null 2b:["$","title",null,{"children":"d3 hierarchy to dom nested lists | Forrest O. | Observable"}] 30:T665,// Override this from your app inputEl = html`

`31:[] 2e:{"id":"fd2866fe13f2d80c","slug":"d3-hierarchy-to-dom-nested-lists","title":"d3 hierarchy to dom nested lists","thumbnail":"9e28bb5a27786c97a111295afa3d4c95a352df48f1f32877567dc50c86331d9a","access_level":"public","create_time":"$D2019-10-25T19:31:33.138Z","update_time":"$D2019-11-25T20:57:05.780Z","view_time":null,"first_public_time":"$D2019-10-25T20:23:38.656Z","has_unpublished_edits":null,"fork":{"id":"0120f9c8efc10d86","slug":"collapsible-tree-with-photos","title":"Collapsible Tree with Photos","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"stars":0,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":603,"publish_version":603,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d4c0dfbf81416ba7","slug":"util","title":"util","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"type":"notebook","body":{"titling":"auto","title":"d3 hierarchy to dom nested lists","cells":[{"id":0,"value":"md`# d3 hierarchy to dom nested lists\n\nProbably over-engineered.\n\nSee [inputEl](#inputEl) for how the tree data is defined.\n\n## Todo\n\n- [ ] ?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"linksData = {\n const docList = Array.from(\n inputEl.querySelectorAll('[data-doc-parent-href]')\n ).map(docLink => {\n const docHref = docLink.getAttribute('href');\n const docParentHref = docLink.getAttribute('data-doc-parent-href');\n\n return {\n el: docLink,\n id: docHref,\n parent: docParentHref,\n title: docLink.textContent\n };\n });\n\n docList.push({\n el: null,\n id: \"/docs/\",\n parent: null,\n title: \"All Docs\"\n });\n\n return docList;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"// Note: treeData will be mutated by the main viz code on expand / collapse / layout\ntreeData = {\n const tree = d3\n .stratify()\n .id(d => d.id)\n .parentId(d => d.parent)(linksData);\n\n return tree;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"makeIndentedTree = root => {\n const output = html`

`;\n\n const indentChildren = function(node, parentEl) {\n if (!node.children) return;\n const ul = html`

${cloned}