2a:null 2b:["$","title",null,{"children":"Decision Table to Tree Visualization Editable | joesquito | Observable"}] 31:[{"id":"f3afc96f1b9c6dbacf8b3d9fafc1e7293fa250ebce7ddd6c6b0fdc3c106f0295bf8fdd0bcd65a575a2666077d8fcacb24ecc4c9bce153ab1e13e95ea47c08d6e","href":"https://static.observableusercontent.com/files/f3afc96f1b9c6dbacf8b3d9fafc1e7293fa250ebce7ddd6c6b0fdc3c106f0295bf8fdd0bcd65a575a2666077d8fcacb24ecc4c9bce153ab1e13e95ea47c08d6e","name":"table_template@3.csv","type":"text/csv","lastModified":1668724453657.403,"size":1174}] 2e:{"id":"bbff9317aef5c8a9","slug":"decision-table-editable","title":"Decision Table to Tree Visualization Editable","thumbnail":"9a96e7b4eb152b792bf5671b16f2e2c469c2f76ea9666d392bae7fe2ecbf9eaf","access_level":"public","create_time":"$D2022-11-17T19:49:18.221Z","update_time":"$D2022-11-27T19:25:31.424Z","view_time":null,"first_public_time":"$D2022-11-18T01:07:19.283Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0060d7e6ab876335","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":"starter_2024"},"version":4759,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02ab589dd66f3f2f","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":null}],"members":[{"type":"individual","id":"02ab589dd66f3f2f","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"f5fb8e7e4adc9b7e","slug":"decision-tables","title":"Decision Tables","owner":{"id":"0060d7e6ab876335","login":"joesquito","name":""}},"type":"notebook","body":{"title":"Decision Table to Tree Visualization Editable","cells":[{"id":0,"value":"# Decision Table to Tree Visualization Editable","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"This notebook converts decision tables first into hierarchical data then into tidy tree visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":4611,"value":"Edit the decision table below to see the tree visualization updated","pinned":false,"hidden":false,"mode":"md"},{"id":4426,"value":"table = {\n return html`\n \n \n ${Object.keys(tableTemplate[0]).map( e => htl.html``)}\n \n \n \n ${tableTemplate.map( (e,i,a) => {\n let html = htl.html.fragment``\n \n for(let f in e){\n html = htl.html.fragment`${html}`\n } \n \n if(e.name === 'condition' && a[i+1]?.name === 'action'){\n html = htl.html.fragment`${html}`\n } else {\n html = htl.html.fragment`${html}`\n }\n return html\n })\n }\n \n

${e}
${e[f]}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"graphDecisionTree(root, {panZoom}).tree //","pinned":false,"hidden":false,"mode":"ojs"},{"id":4260,"value":"viewof panZoom = Inputs.toggle({value: false, label: \"Allow pan and zoom\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4498,"value":"\n \n \n \n ${Object.keys(trimmedData[0]).map( e => htl.html``)}\n \n \n \n ${trimmedData.map( (e,i,a) => {\n let html = htl.html.fragment``\n \n for(let f in e){\n html = htl.html.fragment`${html}`\n } \n \n if(e.name === 'condition' && a[i+1]?.name === 'action'){\n html = htl.html.fragment`${html}`\n } else {\n html = htl.html.fragment`${html}`\n }\n return html\n })\n }\n \n

Condensed Table
${e}
${e[f]}

","pinned":false,"hidden":false,"mode":"html"},{"id":4479,"value":"trimmedData = {\n const result = []\n for(let i = 0; i < tableData.length; i++){\n result[i] = {}\n }\n _.forEach(tableData[0], (value, key) => {\n let blank = true\n for(let i = 0; i < tableData.length; i++){\n if( tableData[i][key] !== '' ) blank = false\n }\n if(!blank){\n for(let i = 0; i < tableData.length; i++){\n result[i][key] = tableData[i][key]\n }\n }\n })\n\n return result.filter( e => {\n let includeRow = false\n _.forEach(e, (value, key) => {\n if( ! ['name', 'number', 'statement'].includes(key ) ){\n if( value !== '') { \n includeRow = true\n }\n }\n })\n\n return includeRow\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"---\n","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"## Table to paths\n\nThe function called below creates path strings for the tree graph. d3.stratify is called on the paths to create the hierarchy for the trees. ","pinned":false,"hidden":false,"mode":"md"},{"id":4650,"value":"paths = tableToPath(trimmedData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"root = d3.stratify().path(d => d.path)(paths)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4648,"value":"import {tableToPath, graphDecisionTree, treeLink, elementSize} from \"@joesquito/decision-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4417,"value":"// Adapted from \"@tomgp/editable-table\"\nfunction parseTableData(table) {\n const data = [];\n table.querySelectorAll(\"tr\")\n .forEach((row, i)=>{\n const rowData = []\n row.querySelectorAll('th')\n .forEach( cell => rowData.push(cell.innerText.trim()))\n row.querySelectorAll('td')\n .forEach( (cell, j) => { \n return j === 2 ? rowData.push(cell.innerText) \n : rowData.push(cell.innerText.trim())\n })\n data.push(rowData)\n })\n\n const formattedData = data.reduce((accumulator, row, i)=>{\n if(i==0){\n accumulator.properties = row;\n }else{\n const rowObject = {};\n accumulator.properties.forEach((key,i)=>{\n rowObject[key] = row[i];\n });\n accumulator.push(rowObject);\n }\n return accumulator;\n },[]);\n return formattedData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4424,"value":"tableData = Generators.observe(notify => {\n const keyinput = event => notify(parseTableData(table))\n table.addEventListener(\"input\", keyinput, false)\n notify(parseTableData(table));\n return () => window.removeEventListener(\"input\", keyinput);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4457,"value":"tableTemplate = FileAttachment(\"table_template@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4354,"value":"mutable currentTrace = []","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"