2b:null 2c:["$","title",null,{"children":"Decision Table to Tree Visualization | joesquito | Observable"}] 31:Teb8,{ let ids = [], currentStepName = '', currentStepNumber = 0, currentStep = {text:''}, yn = null, steps, includes = [] const conditions = selectData.filter((e) => e.name === 'condition') if (currentTrace.length > 0) { currentStep = currentTrace[currentTrace.length-1] ids = currentStep.id.substr(1).split('/') steps = ids.map( (d,i,a) => { const step = {yn:'', name:'', number:''} const first = d.substr(0,1) step.yn = a[i+1]?.substr(0,1) if(first === 'y' | first === 'n'){ step.name = d.substr(1,1) === 'c' ? 'condition' : 'rule' step.number = d.substr(2) } else { step.name = first === 'c' ? 'condition' : 'rule' step.number = d.substr(1) } return(step) }) currentStepName = steps[steps.length - 1].name currentStepNumber = steps[steps.length - 1].number yn = steps[steps.length - 1].yn includes = steps .map( (d, i) => { if(i === steps.length - 1){ return Object.entries(conditions[0]) .reduce( (res, e) => { if(e[0].substr(0,4) !== 'rule' ) return res if(e[1] !== '' || res.length > 0 ){ res.push(e[0]) return res } else { return res } }, [] ) } const condition = conditions.filter(e => { return d.number === e.number })[0] const include = Object.keys(condition) .reduce( (res, key) => { if( key.substr(0,4) === 'rule' ){ if(d.yn === 'y' && condition[key] === 'Y'){ res.push(key) } else if(d.yn === 'n' && condition[key] !== 'Y'){ res.push(key) } } return(res) },[]) return include }).reduce( (res, d) => { return res.filter(e => d?.includes(e)) }, Object.keys(conditions[0]) ) } const table = html` ${Object.keys(selectData[0]).map((e) => htl.html``)} ${selectData.map((e, i, a) => { let html = htl.html.fragment`` let bgColor = "" if(steps?.filter( f => e['number'] === f.number).length && e.name === 'condition'){ bgColor = currentStepName === 'condition' && e.number === currentStepNumber ? "background-color:lightgreen;" : "background-color:aliceblue;" } bgColor = currentStepName === 'rule' && e.name === 'action' && e[currentStepName + ' ' + currentStepNumber] !== '' ? "background-color:lightgreen;" : bgColor let bgAttr = e['number'] <= currentStepNumber ? bgColor : '' for (let f in e) { if(f.substr(0,4) === 'rule' && !includes.includes(f)){ html = htl.html.fragment`${html}` } else { html = htl.html.fragment`${html}` } } // for (let f in e) { // const bgAttr2 = stepName + ' ' + stepNumber === f ? 'background-color:lightgreen;' : bgAttr // html = htl.html.fragment`${html}` // } if (e.name === "condition" && a[i + 1]?.name === "action") { html = htl.html .fragment`${html}` } else { html = htl.html.fragment`${html}` } return html })}

${e}
${e[f]}	${e[f]}	${e[f]}

${currentStep.text}

` return table }32:T6c8,mockTraces = [ [ {id:'/c1', text:'value of this = 100\nvalue of that = 100\ncondition 1 is true'}, {id:'/c1/yc2',text:'value of this = 10\nvalue of that = 100\ncondition 2 is false'}, {id:'/c1/yc2/nr2',text:'executing actions in rule 2\nreturning to condition 3'}, {id:'/c1/nc3', text:'condition 3 is true'},{id:'/c1/nc3/yc4', text:'value of this = 10\nvalue of that = 100\ncondition 4 is true'}, {id:'/c1/nc3/yc4/yr3', text:'executing actions in rule 3\nreturning to condition 4'}, {id:'/c1/nc3/yc4', text:'value of this = 100\nvalue of that = 100\ncondition 4 is false'}, {id:'/c1/nc3/yc4/nr4', text:'executing actions in rule 4\nExiting'} ],[ {id:'/c1',text:'testing condition...'}, {id:'/c1/nc3',text:'testing condition...'}, {id:'/c1/nc3/yc4',text:'testing condition...'}, {id:'/c1/nc3/yc4/nr4',text:'Excecuting action(s)...'}, {id:'/c5',text:'testing condition...'}, {id:'/c5/nc6',text:'testing condition...'}, {id:'/c5/nc6/yr7',text:'Excecuting action(s)...'} ],[ {id:'/c1',text:'testing condition...'}, {id:'/c1/nc2',text:'testing condition...'}, {id:'/c1/nc2/yc3',text:'testing condition...'}, {id:'/c1/nc2/yc3/yr5',text:'Excecuting action(s)...'} ],[ {id:'/c1',text:'testing condition...'}, {id:'/c1/yc2',text:'testing condition...'}, {id:'/c1/yc2/nr2',text:'Excecuting action(s)...'}, {id:'/c1/nc3',text:'testing condition...'}, {id:'/c1/nc3/nc4',text:'testing condition...'}, {id:'/c1/nc3/nc4/yr4',text:'Excecuting action(s)...'}, {id:'/c1/nc3/nc4/nc5',text:'testing condition...'}, {id:'/c1/nc3/nc4/nc5/nc6',text:'testing condition...'}, {id:'/c1/nc3/nc4/nc5/nc6/yr6',text:'Excecuting action(s)...'} ] ] 33:T9e0,tableToPath = function(tableData){ // prevents changes made to data to show on table at top of this notebook const data = _.cloneDeep (tableData) let conditions = data.filter((e) => e.name === 'condition') //['rule 1', 'rule 2', 'rule 3', ...] const rules = Object.keys(data[0]).filter( e => e.slice(0, 4) === 'rule') // use a set to throw out duplicate paths, unfortunately sets don't work with objects const pathset = new Set() const paths = [{path: '/', type: '', number: 0}] // for each rule, iterates down the column adding to the path string for that column because the // decision tables don't explicitly display all 'N's some testing is done on to determine if an 'N' // should be present. Looks for 'N' to the left of the currenct cell (previous column) and checks if // somewhere below there exist non-blank cells in both the current column and the previous column rules.forEach( (e,i) => { let path = '' let parent = '' conditions.forEach( (f,j) => { if(f[e] === '') { if(f['rule ' + i] === 'N'){ let matchesBelow = conditions .slice(j + 1) // start looking at next row .filter( g => g['rule ' + i] && g[e] && !(g['rule ' + i] === 'N' && g[e] === 'Y')) .length if(matchesBelow) { f[e] = 'N' } else return } else return } path = (path + '/' + parent + 'c' + (j + 1)).toLowerCase() parent = f[e] if(!pathset.has(path)){ paths.push({ path: path, type: 'condition', number: j + 1, statement: f.statement }) pathset.add(path) } }) path = (path + '/' + parent + 'r' + (i + 1)).toLowerCase() let actions = data .filter(f => f.name === 'action' && f[e] ) .map(f => ({ type: f.name, number: parseInt(f.number), statement: f.statement.toLowerCase() === 'return to condition' ? f.statement + ' ' + f[e] : 'Action ' + f.number + ': ' + f.statement })) const row = { path: path, type: 'rule', number: i + 1, actions: actions } const returnToCondition = data .filter( f => f.name === 'action' && f[e] && f.statement.toLowerCase() === 'return to condition' ) .map(f => f[e] ) returnToCondition.length > 0 ? row.returnToCondition = parseInt(returnToCondition[0]) : undefined paths.push(row) }) return paths }34:T27d7,function graphDecisionTree(root, { fontFamily = 'Arial,Helvetica Neue,Helvetica,sans-serif', fontSize = 12, panZoom = false } = {}) { const dx = 40 const dy = 120 const marginLeft = -dy + 2.5 const tree = d3.tree() .nodeSize([dx, dy]) .separation( (a,b) => { let sep = 1.25 const aVertPriority = a.id.replace(/[^yn]/g, '').replace(/y/g, 1).replace(/n/g, 0) const bVertPriority = b.id.replace(/[^yn]/g, '').replace(/y/g, 1).replace(/n/g, 0) if(aVertPriority > bVertPriority) sep = a.data.actions ? (a.data.actions.length + 1)/1.8 : 1 if(aVertPriority < bVertPriority) sep = b.data.actions ? (b.data.actions.length + 1)/1.8 : 1 return sep }) root = tree(root) let maxWidthByDepth = new Map() root.descendants().forEach(d => { if(d.depth < 1) { d.textWidth = 0 return maxWidthByDepth.set(d.depth, 0) } const w = maxWidthByDepth.get(d.depth) const statementText = d.data.statement ? d.data.statement : '' const typeText = (d.data.type + ' ' + d.data.number) console.log(d.data.statement?.split('>')) const actionText = d.data.actions ? d.data.actions .reduce( (a, b) => a.statement.length > b.statement.length ? a : b, {statement: ''} ).statement : '' const largestText = [statementText, typeText, actionText].reduce( (a,b) => a.length > b.length ? a : b, '' ) d.textWidth = elementSize( d3.create('svg:text').text(largestText).node(), `0,0,${500},${500}`, fontFamily).width if(w){ if( d.textWidth > w ) { maxWidthByDepth.set(d.depth, d.textWidth) } } else { maxWidthByDepth.set(d.depth, d.textWidth) } }) //calc cummulative sums maxWidthByDepth.forEach((value, key) => { if(key < 2) return const w = maxWidthByDepth.get(key-1) + value maxWidthByDepth.set(key, w) }) let x0 = Infinity let x1 = -x0 let maxWidth = 0 root.descendants().forEach( d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; if(d.depth < 1) return d.y = d.y + maxWidthByDepth.get(d.depth-1) maxWidth = d.y }) const svg = d3.create('svg') .attr('viewBox', [0, 0, maxWidth + 20, x1 - x0 + dx * 2]) const defs = svg.append('svg:defs') defs.append('svg:marker') .attr('id','arrow') .attr('markerWidth','10') .attr('markerHeight','10') .attr('refX','10') .attr('refY','4') .attr('orient','auto') .attr('markerUnits','userSpaceOnUse') .append('path') .attr('d', 'M0,0 L10,4 L0,8') .attr('stroke', '#999') .attr('fill', 'transparent') defs.append('svg:marker') .attr('id','arrow-selected') .attr('markerWidth','10') .attr('markerHeight','10') .attr('refX','10') .attr('refY','4') .attr('orient','auto') .attr('markerUnits','userSpaceOnUse') .append('path') .attr('d', 'M0,0 L10,4 L0,8') .attr('stroke', 'green') .attr('fill', 'transparent') defs.append('svg:marker') .attr('id','arrow-red') .attr('markerWidth','12') .attr('markerHeight','8') .attr('refX','10') .attr('refY','4') .attr('orient','auto') .attr('markerUnits','userSpaceOnUse') .append('path') .attr('d', 'M0,0 L10,4 L0,8') .attr('stroke', 'green') .attr('fill', 'transparent') const g = svg.append('g') .attr('font-family', fontFamily) .attr('font-size', fontSize) //.attr('transform', `translate(${marginLeft},${dx - x0})`) let zoom = d3.zoom() .on('zoom', handleZoom) let first = true function handleZoom(e) { g.attr('transform', e.transform) } if(panZoom){ svg.call(zoom) .call(zoom.translateBy, marginLeft, dx - x0) } else { g.attr('transform', `translate(${marginLeft},${dx - x0})`) } // links const link = g.append('g') .attr('fill', 'none') .attr('stroke-width', 1.5) .selectAll('path') .data(root.links()) .join('path') .attr('stroke', 'lightgray') .attr('d', d => treeLink(d.source.textWidth + 20)(d) ) .style('visibility', d => d.source.depth ? 'visible' : 'hidden' ) const node = g.append('g') .attr('stroke-linejoin', 'round') .attr('stroke-width', 3) .selectAll('g') .data(root.descendants()) .join('g') .attr('transform', d => `translate(${d.y},${d.x})`) node.append('circle') .attr('fill', d => d.children ? '#000' : 'salmon') .attr('r', 2.5) .style('opacity', d => !d.depth ? 0 : 1 ) // node text const nodeLabel = node.append('text') .attr('dx', 10) nodeLabel.append('tspan') .text(d => d.id !== '/' ? d.data.type + ' ' + d.data.number : '') nodeLabel.append('tspan') .attr('x', 10) .attr('dy', '1.2em') .text(function(d) { return d.data.statement ? d.data.statement : '' }) nodeLabel .each( function(d) { const nodeLabelNode = this d.data.actions?.forEach(e => { d3.select(nodeLabelNode).append('tspan') .attr('x', 10) .attr('dy', '1.2em') .text(e.statement) }) }) //re-adjust viewBox height const box = elementSize(node.filter(':last-child').select('text').clone(true).node(), svg.attr('viewBox'), fontFamily) const vb = svg.attr('viewBox').split(',') vb[3] = parseInt(vb[3]) + box.height svg.attr('viewBox', vb.toString()) node.append('rect') .attr('width', function(d,i,a){ const box = elementSize( this.parentNode.querySelector('text').cloneNode(true), svg.attr('viewBox'), fontFamily) return box.width + 10 } ) .attr('height', function(d){ const box = elementSize( this.parentNode.cloneNode(true), svg.node().attributes['viewBox'].nodeValue, fontFamily) return box.height + 5 } ) .attr('fill', 'aliceblue') // .attr('fill', d => { // }) .attr('rx', '3px') .style('visibility', d => !d.depth ? 'hidden' : 'visible' ) .attr('x', 5) .attr('y', '-13.3') .lower() // return to condition root.each( e => { if(e.data.returnToCondition){ const filt = root.descendants().filter( f => f.data.type === 'condition' && f.data.number === e.data.returnToCondition) // if the same number condition occurs more than once find shortest path let toPosition = filt[0] if(filt.length > 1){ const lengths = filt .map( f => e.path(f).length ) let idx = lengths.indexOf(Math.min(...lengths)) toPosition = filt[idx] } let hoveredId = '' const mid1 = e.id.substr(-3,1) === 'n' ? e.x < toPosition.x && Math.abs(toPosition.x - e.x) < 45 ? [e.y, (e.x + toPosition.x )/2 ] : [e.y, e.x + e.data.actions.length*15] : e.x > toPosition.x ? [e.y, (e.x + toPosition.x )/2 ] : [e.y, e.x - 15] const mid2 = e.id.substr(-3,1) === 'n' ? e.x < toPosition.x && Math.abs(toPosition.x - e.x) < 45 ? [toPosition?.y, (e.x + toPosition.x )/2 ] : [toPosition?.y+1, e.x + e.data.actions.length*15] : e.x > toPosition.x ? [toPosition?.y, (e.x + toPosition.x )/2 ] : [toPosition?.y+1, e.x - 15] const line = Math.abs(e.x - toPosition?.x) < 25 ? d3.line()( [[e.y,e.x], mid1, [toPosition?.y + toPosition.textWidth + 20, mid1[1] ]] ) : e.y === toPosition?.y ? d3.line()( [[e.y,e.x], [toPosition?.y , toPosition?.x]] ) : d3.line()( [[e.y,e.x], mid1, mid2, [toPosition?.y+1, toPosition?.x]] ) const returnLineContainer = g.append('g') .attr('fill', 'none') const returnLine = returnLineContainer .append('path') .attr('stroke-width', 0.75) .attr('stroke-dasharray', '5,2') .attr('marker-end', 'url(#arrow)' ) .attr('d', line) returnLineContainer .append('path') .attr('d', line) .attr('stroke', 'black') .attr('stroke-width', 10) .attr('stroke-opacity', '0%') .on('mouseover', function() { update(true) }) .on('mouseout', function() { update(false) }) returnLineContainer .append('title') .text('return to condition ' + e.data.returnToCondition) function update(hover){ returnLine .attr('stroke', hover ? 'green' //: trace[trace.length-2]?.id === e.id && trace[trace.length-1]?.id === toPosition.id ? 'red' : '#999' ) .attr('stroke-width', hover ? 1.25 : 0.75) .attr('marker-end', hover ? 'url(#arrow-selected)' //: trace[trace.length-2]?.id === e.id && trace[trace.length-1]?.id === toPosition.id ? 'url(#arrow-red)' : 'url(#arrow)' ) //if(hover || trace[trace.length-2]?.id === e.id && trace[trace.length-1]?.id === toPosition.id ) { if(hover) { returnLineContainer.raise() } else { returnLineContainer.lower() } } update(false) } }) // Y/N labels const label = g.append('g') .selectAll('g') .data(root.links()) .join('g') .style('visibility', d => !d.source.depth ? 'hidden' : 'visible' ) .attr('transform', d => { const midy = 0.3 * ( d.source.y + d.source.textWidth ) + 0.7 * d.target.y const midx = 0.3 * d.source.x + 0.7 * d.target.x return `translate(${midy},${midx})`}) label.append('text') .attr('class', 'link-label') .text(d => { const numDigits = Math.log10(d.target.data.number) + 1 |0 return d.target.id.substr(-numDigits - 2,1) === 'y' ? 'Y' : 'N' }) .attr('dy', d => { const numDigits = Math.log10(d.target.data.number) + 1 |0 return d.target.id.substr(-numDigits - 2,1) === 'n' ? '1.6em' : '-0.8em' }) .attr('dx', '-0.8em') d3.select(node.node().parentNode).raise() return {tree: svg.node(), d3Vars: {svg, node, link} } }35:Tadd,function updateTrace(trace, d3Vars){ const svg = d3Vars.svg const node = d3Vars.node const link = d3Vars.link d3.selectAll('#trace-text').transition().duration(transitionDuration).attr('opacity', 0).remove() d3.selectAll('#trace-rect').transition().duration(transitionDuration).attr('opacity', 0).remove() //if(trace.length <= 0) return node.each(function(d){ const currentStep = trace[trace.length-1] d3.select(this).select('rect') .transition().duration(transitionDuration) .attr('fill', e => { return trace.length < 1 ? 'aliceblue' : trace[trace.length-1]?.id === e.id ? 'lightgreen' : trace.filter(f => f?.id === e.id).length ? 'aliceblue' : 'lightgray' }) link .transition().duration(transitionDuration) .attr('stroke', e => { const traceIds = trace.map(f => f.id) const darkenLink = traceIds.filter( (f,i,a) => { return f === e.target.id && a[i-1] === e.source.id }) return trace.length < 1 ? '#555' : trace[trace.length-2]?.id === e.source.id && trace[trace.length-1]?.id === e.target.id ? 'green' : darkenLink.length ? '#555' : 'lightgray' }) if( currentStep?.id === d.id ){ const traceText = d3.select(this) .raise() .append('text') .attr('id', 'trace-text') .attr('dx', 15) .attr('dy', 35) //.style('font-weight', 'bold') traceText.selectAll('tspan') .data(currentStep.text.split('\n')) .join('tspan') .text(e => e) .attr('x', (e,i) => i === 0 ? '' : 15) .attr('dy', (e,i) => i === 0 ? '' : '1.2em' ) .attr('fill', 'black') traceText.transition().duration(transitionDuration).attr('opacity', 1) const box = elementSize(traceText.node().cloneNode(true), svg.attr('viewBox')) const rect = d3.select(this) .append('rect') .attr('id', 'trace-rect') .attr('x', 10) .attr('y', 20) .attr('stroke', 'black') .attr('stroke-width', '1') .attr('width', box.width + 10) .attr('height', box.height + 10) .attr('fill', 'white') .transition().duration(transitionDuration).attr('opacity', 1) // const vb = svg.attr('viewBox').split(',') // const vbWidth = parseInt(vb[2]) // const gSize = elementSize(g.clone(true).remove().node(),vb.toString()) // if( gSize.width - dy > vbWidth + 2.5){ // const shift = gSize.width - dy - vbWidth + 25 // vb[0] = shift // svg.transition() // .duration(transitionDuration) // .attr('viewBox', vb.toString()) // } traceText.raise() } }) return 'Update Trace' }36:[{"id":"5e42ac29bc433d1178b5eb3c091f35f7a963223448aa9c97b681e33a7efafd446b4edbd8d7aa767576546f75a8c4c3eb3061df18a6a4c84aa3a99f9678d7df23","href":"https://static.observableusercontent.com/files/5e42ac29bc433d1178b5eb3c091f35f7a963223448aa9c97b681e33a7efafd446b4edbd8d7aa767576546f75a8c4c3eb3061df18a6a4c84aa3a99f9678d7df23","name":"mock_data1@3.csv","type":"text/csv","lastModified":1668309509852.158,"size":339},{"id":"9f0a388eb74860808e554b620c366cc465535c089978cfbdb6c1b526873caf3d083c29637b3c2701a8a7f1f6f9968ad6380ecbf00e04c629bc75c7f6fa7de067","href":"https://static.observableusercontent.com/files/9f0a388eb74860808e554b620c366cc465535c089978cfbdb6c1b526873caf3d083c29637b3c2701a8a7f1f6f9968ad6380ecbf00e04c629bc75c7f6fa7de067","name":"mock_data2@2.csv","type":"text/csv","lastModified":1662139812873.292,"size":429},{"id":"77a7a56a51f6fae7a963ef5b2913099702280ba372a12045f888639c06771edc9d87a02b3754f9fe12deb5a1f64f07d9e4f4656e643cdab194aa9fd177943c05","href":"https://static.observableusercontent.com/files/77a7a56a51f6fae7a963ef5b2913099702280ba372a12045f888639c06771edc9d87a02b3754f9fe12deb5a1f64f07d9e4f4656e643cdab194aa9fd177943c05","name":"mock_data3@2.csv","type":"text/csv","lastModified":1662463620723.55,"size":344},{"id":"672586025182d6c5ca010617c49b2de1559d943932ef9448caf41ccda8ef92193029b9930b73ac95a8bafca1618b63f015e4b9537d42550fbb06b5f2fccbaa0d","href":"https://static.observableusercontent.com/files/672586025182d6c5ca010617c49b2de1559d943932ef9448caf41ccda8ef92193029b9930b73ac95a8bafca1618b63f015e4b9537d42550fbb06b5f2fccbaa0d","name":"mock_data4@4.csv","type":"text/csv","lastModified":1663212363651.844,"size":432}] 2f:{"id":"95a16e0b6f8fd261","slug":null,"title":"Decision Table to Tree Visualization","thumbnail":"e422bec8e47e461685417db60788297678795493fca60b02c6cb9961addc6c16","access_level":"unlisted","create_time":"$D2022-08-31T20:15:23.097Z","update_time":"$D2022-11-22T01:24:51.817Z","view_time":null,"first_public_time":"$D2022-11-13T18:14:01.310Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0060d7e6ab876335","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":"starter_2024"},"version":4471,"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,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Decision Table to Tree Visualization","cells":[{"id":0,"value":"## Work in progress\n# Decision Table to Tree Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This notebook converts decision tables first into hierarchical data then into tidy tree visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"viewof selectTable = Inputs.select( ['mockData1','mockData2','mockData3','mockData4'], {label: 'Select Table'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"\n \n \n ${Object.keys(selectData[0]).map( e => htl.html``)}\n \n \n \n ${selectData.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]}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"graphDecisionTree(root, {panZoom}).tree","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4260,"value":"viewof panZoom = Inputs.toggle({value: false, label: \"Allow pan and zoom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3964,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3948,"value":"## Trace","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3954,"value":"Interactively follow a trace through a decision table. Use the \"Next step\" button to advance through trace.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"{\n return html`Trace paths:
${\n Array.from(selectData.trace).map( (d,i) => {\n const bgColor = i === currentTrace.length -1 ? \"background-color:lightgreen;\" : \"background-color:aliceblue;\"\n return currentTrace.includes(d) ?\n html`${d.id}
` :\n html`${d.id}
` \n })\n }`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2668,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3310,"value":" viewof nextStep = {\n\n const N = selectData.trace.length\n \n return Inputs.button(\n \"Next step\", \n {\n value: [],\n reduce: () => {\n if(currentIdx === N){\n //mutable currentTrace.length = 0\n mutable currentTrace = []\n mutable currentIdx = 0\n } else {\n mutable currentTrace = currentTrace.concat(selectData.trace[mutable currentIdx++])\n }\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4331,"value":"viewof reset = Inputs.button(\"Reset\", {value: null, reduce: () => {\n mutable currentTrace = []\n mutable currentIdx = 0\n}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3615,"value":"graphTrace.tree","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2357,"value":"graphTrace = graphDecisionTree(root)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3630,"value":"updateTrace( currentTrace, graphTrace.d3Vars )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4367,"value":"mutable currentIdx = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"## Table to paths\n\nThe function below uses loops to create 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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"paths = tableToPath(selectData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"root = d3.stratify().path(d => d.path)(paths)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"import {Tree} from \"@d3/tree\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"import {graph} from \"@d3/d3-hierarchy\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mockData1 = FileAttachment(\"mock_data1@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"mockData2 = FileAttachment(\"mock_data2@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mockData3 = FileAttachment(\"mock_data3@2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"mockData4 = FileAttachment(\"mock_data4@4.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"selectData = {\n let selectData = null\n switch(selectTable) {\n case 'mockData1': \n selectData = mockData1\n selectData.trace = mockTraces[0]\n break\n case 'mockData2': \n selectData = mockData2\n selectData.trace = mockTraces[1]\n break\n case 'mockData3':\n selectData = mockData3 //\n selectData.trace = mockTraces[2]\n break\n case 'mockData4':\n selectData = mockData4\n selectData.trace = mockTraces[3]\n break\n }\n return selectData\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2710,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4427,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3703,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3697,"value":"transitionDuration = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"treeLink = gap => {\n return d3.linkHorizontal()\n .x(d => d.y)\n .y(d => d.x)\n .source(d => {return {x: d.source.x, y: d.source.y + gap }})\n .target(d => {return {x: d.target.x, y: d.target.y}})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"elementSize = function(element, vb, fontFamily = '') {\n const svg = html``;\n\n const g = svg.querySelector('[name=content]')\n g.appendChild(element)\n\n // Add the SVG element to the DOM so we can determine its size.\n document.body.appendChild(svg);\n \n // Computing the bounding box of the content.\n const box = g.getBBox()\n\n // Remove the SVG element from the DOM.\n svg.remove();\n\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4354,"value":"mutable currentTrace = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"### Links\nhttps://observablehq.com/@d3/d3-hierarchy \nhttps://github.com/d3/d3-hierarchy/blob/main/README.md#stratify \nhttps://github.com/d3/d3-hierarchy/blob/main/README.md#_tree \nhttps://observablehq.com/@d3/tree \nhttps://observablehq.com/@d3/hierarchy-traversal-animated?collection=@d3/d3-hierarchy \nhttps://observablehq.com/@mojaie/collapsible-tree-with-checkboxes-d3-js \nhttps://observablehq.com/@observablehq/introduction-to-mutable-state \nhttps://observablehq.com/@observablehq/synchronized-inputs?collection=@observablehq/inputs \nhttps://observablehq.com/@observablehq/introduction-to-generators?collection=@observablehq/generators \n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"