2f:Tf40,chart4 ={ const width = 928; const dx = 25; const root = d3.hierarchy(currentTreeData); const dy = width / (root.height + 1); const tree = d3.cluster().nodeSize([dx, dy]); initializePathCount(root); // Initialize path counts root.sort((a, b) => d3.ascending(a.data.name, b.data.name)); tree(root); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const height = x1 - x0 + dx * 2; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-dy / 3, x0 - dx, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;"); // Define mouseover and mouseout functions function mouseover(event, d) { // existing mouseover logic } function mouseout(event, d) { // existing mouseout logic } // Call the function to get the links to highlight const linksToHighlight = getLinksFromPath(allPathElementsFound, root); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.4) .attr("stroke-width", 1.5) .selectAll("path") .data(root.links()) .join("path") .attr("d", d3.linkHorizontal() .x(d => d.y) .y(d => d.x)) .attr("stroke", d => { const isHighlighted = linksToHighlight.some(link => link.source.data.name === d.source.data.name && link.target.data.name === d.target.data.name ); return isHighlighted ? "#ffab00" : "#555"; }) .attr("class", d => { return linksToHighlight.some(link => link.source.data.name === d.source.data.name && link.target.data.name === d.target.data.name ) ? "link--active" : ""; }) .on("mouseover", mouseover) .on("mouseout", mouseout); // Animate the drawing of the path link.filter(".link--active") .attr("stroke-dasharray", function() { const length = this.getTotalLength(); return `${length} ${length}`; }) .attr("stroke-dashoffset", function() { return this.getTotalLength(); }) .transition() .duration(2000) .attr("stroke-dashoffset", 0); const node = svg.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})`) .on("mouseover", mouseover) .on("mouseout", mouseout); node.append("circle") .attr("fill", d => { // Highlight the node if it's part of the path return allPathElementsFound.path.includes(d.data.name) ? "#ffab00" : "#999"; }) .attr("r", 2.5); node.append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name) .clone(true).lower() .attr("stroke", "white"); // Add CSS for active classes d3.select('head').append('style').text(` .link--active { stroke: #ffab00; stroke-width: 3; } .label--active { font-weight: bold; } .link-extension--active { stroke-opacity: 0.6; } `); initializePathCount(root); pathCount: 0 function incrementPathCount(node, targetLeaf) { if (node.isLeaf && node.data.name === targetLeaf) { node.data.pathCount += 1; } if (node.children) { node.children.forEach(child => incrementPathCount(child, targetLeaf)); } } function traverseAndUpdatePath() { const targetLeaf = pathForInstance[pathForInstance.length - 1]; // Assuming the last element is the leaf incrementPathCount(root, targetLeaf); } node.append("text") .attr("dy", "0.31em") .attr("x", d => d.children ? -6 : 6) .attr("text-anchor", d => d.children ? "end" : "start") .text(d => d.children ? d.data.name : `${d.data.name} (${d.data.pathCount})`) .clone(true).lower() .attr("stroke", "white"); return svg.node(); }; 30:Taa4,function path(root, pathForInstance) { let leafNode = null; // Step 1: Find the leaf node based on its identifier (leafIndex) const leafIndex = pathForInstance[pathForInstance.length - 1]; root.each(node => { if (node.data.name === leafIndex) { leafNode = node; } }); if (!leafNode) { return { status: 'Leaf node not found', leafIndex, pathFound: false, path: [] }; } let currentNode = leafNode; const path = [leafNode.data.name]; let currentIndex = pathForInstance.length - 2; // Function to evaluate node condition against the path condition function evaluateCondition(nodeCondition, pathCondition) { // Check if the indexes (field names) are the same if (nodeCondition.index !== pathCondition.index) { return false; } // If no operator is involved, it's a simple name match if (!nodeCondition.operator || !pathCondition.operator) { return true; // Names match and no operator to compare } // Convert string values to numbers for comparison const nodeValue = parseFloat(nodeCondition.value); const pathValue = parseFloat(pathCondition.value); // Compare based on operators switch (pathCondition.operator) { case '<=': return nodeValue <= pathValue; case '>=': return nodeValue >= pathValue; case '<': return nodeValue < pathValue; case '>': return nodeValue > pathValue; // Handle other operators as needed default: return false; } } // Step 2: Trace backwards from the leaf to the root currentNode = currentNode.parent; while (currentNode && currentIndex >= 0) { const nodeNameComponents = splitNodeName(currentNode.data.name); const pathNameComponents = splitNodeName(pathForInstance[currentIndex]); if (evaluateCondition(nodeNameComponents.index, pathNameComponents.index)) { path.push(currentNode.data.name); currentIndex--; } else { // Updated return statement with detailed mismatch information return { status: 'Mismatch during traversal', unmatchedNode: currentNode.data.name, expectedMatch: nodeNameComponents.index, pathSoFar: path.reverse(), remainingPath: pathForInstance.slice(0, currentIndex + 1) }; } currentNode = currentNode.parent; } // Step 3: Validate the path const pathFound = currentIndex < 0; // Check if all elements were matched if (!pathFound) { return { status: 'Path incomplete', completedPath: path.reverse(), missingElements: pathForInstance.slice(0, currentIndex + 1) }; } return { status: 'Path found', pathFound, path: path.reverse() }; } 31:[{"id":"1f7a567f1e51e4dc973a4511f1d873429441b3e075886c834c2628e431431ac2640c489b7a112f28ee3547b5063ee6cb33465d09a1e5e310736518cbd5fa578a","href":"https://static.observableusercontent.com/files/1f7a567f1e51e4dc973a4511f1d873429441b3e075886c834c2628e431431ac2640c489b7a112f28ee3547b5063ee6cb33465d09a1e5e310736518cbd5fa578a","name":"combined_forest_data.json","type":"application/json","lastModified":1702588969270.885,"size":146440},{"id":"3a20b18133868e6dec3c32869d1093c4301a73c6ead1e7402daaa1ac44a766b9721b7811a4ad3deef58ee204a9914cb20a94d52f1615262c4607040ffcc49dfc","href":"https://static.observableusercontent.com/files/3a20b18133868e6dec3c32869d1093c4301a73c6ead1e7402daaa1ac44a766b9721b7811a4ad3deef58ee204a9914cb20a94d52f1615262c4607040ffcc49dfc","name":"forest_tree.json","type":"application/json","lastModified":1701905536212.367,"size":154596},{"id":"8dd6aeff2b70c607e9b83f19ef358be7976936869a02d9d014c20a92bb416b58ae34a93a0e61fe7728f4569d192b9083cb524a28f80a69f3a031924905a2ea87","href":"https://static.observableusercontent.com/files/8dd6aeff2b70c607e9b83f19ef358be7976936869a02d9d014c20a92bb416b58ae34a93a0e61fe7728f4569d192b9083cb524a28f80a69f3a031924905a2ea87","name":"prediction_paths_subset.json","type":"application/json","lastModified":1701905536212.367,"size":5069548},{"id":"5b2f3230f8909250462633d77c4b475af34f9923b85860b6e19e5d8d1787302a76102cdbbac0b956cdb63b556dd161585643a9e722ae67233bb05c29ac70a7aa","href":"https://static.observableusercontent.com/files/5b2f3230f8909250462633d77c4b475af34f9923b85860b6e19e5d8d1787302a76102cdbbac0b956cdb63b556dd161585643a9e722ae67233bb05c29ac70a7aa","name":"test.svg","type":"image/svg+xml","lastModified":1701958297943.79,"size":971069}] 2d:{"title":"Random Forest Visualizer","cells":[{"id":0,"value":"# Random Forest Visualizer ","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"This was adapted from https://observablehq.com/@d3/cluster/2","pinned":false,"hidden":false,"mode":"md"},{"id":816,"value":"Draws inspiration from https://r2d3.us/","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"forestData = FileAttachment(\"forest_tree.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"prediction_paths_subset = FileAttachment(\"prediction_paths_subset.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"### Step 1 Select Decision Tree From Random Forest","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof selectedTree = Inputs.select(\n forestData.children.map((tree, index) => `Tree ${index}`), // This will create options like \"Tree 0\", \"Tree 1\", etc.\n { label: 'Select a Decision Tree:' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"currentTreeData = {\n // Split the selectedTree string by space and get the second part, which should be the number\n const treeNumber = selectedTree.split(' ')[1]; \n // Find the tree in the forestData.children array by name\n // The name is constructed by concatenating 'tree_' with the tree number\n return forestData.children.find(tree => tree.name === `tree_${treeNumber}`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"function getSelectedInstance(treePaths) {\n // Check if there is a selected row\n if (treePaths && treePaths.value) {\n // Return the Instance ID from the selected row\n return treePaths.value.Instance;\n } else {\n // If no row is selected, return null or an appropriate default value\n return null;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"selectedTree","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"### Step 2 Get Prediction Paths for the Data Instances","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"### Each data instance represents a single day of weather observations in Australia ","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"viewof treePaths = {\n // This cell will update automatically when `selectedTree` changes.\n const paths = getPathsForTree(selectedTree, prediction_paths_subset);\n\n // Convert the paths into a format suitable for `Inputs.table`\n const tableData = paths.map((path, index) => {\n // Spread the properties of the path object into individual columns\n return { index, ...path };\n });\n\n // Instead of retuning the table directly, you store it in a variable\n \n // Create a reactive value that holds the selected instance ID\n let selectedInstanceID = null;\n \n // When a row is selected, update the selectedInstanceID\n\n const table = Inputs.table(tableData, { layout: \"auto\", selectable: true });\n\n // Observable's reactive cell requires you to return a DOM element, so you return the table here\n // The selectedInstanceID will be reactive and can be used in other cells\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"### Step 3 See how the data instances fall on the decision tree","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"viewof counter = Inputs.button([\n [\"Next\", value => value + 1],\n [\"Back\", value => value - 1],\n [\"Reset\", value => 0]\n], {value: 0, label: \"Random Day\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"counter","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"instanceId = treePaths[counter].Instance\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"### Dtreeviz output looking to replicate: ","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"test = FileAttachment(\"test.svg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"### Helper Functions","pinned":false,"hidden":false,"mode":"md"},{"id":257,"value":"treePaths","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"function getPathsForTree(selectedTree, predictionPathsData) {\n const treeIndex = parseInt(selectedTree.split(' ')[1]);\n const treeKey = `tree_${treeIndex}`;\n const tableData = [];\n\n // Determine the maximum number of steps in any path\n let maxSteps = 0;\n predictionPathsData.forEach(instanceData => {\n const steps = instanceData[treeKey] || [];\n if (steps.length > maxSteps) {\n maxSteps = steps.length;\n }\n });\n\n // Generate table data with separate columns for each step\n predictionPathsData.forEach(instanceData => {\n const instanceId = instanceData.instance || 'N/A';\n const treePaths = instanceData[treeKey] || [];\n\n // Create an object with a key for each step\n const pathObject = { Instance: instanceId };\n for (let i = 0; i < maxSteps; i++) {\n pathObject[`Step ${i + 1}`] = treePaths[i] || 'N/A';\n }\n3\n tableData.push(pathObject);\n });\n\n return tableData;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"function getLinksFromPath(allPathElementsFound, hierarchyRoot) {\n const links = [];\n const path = allPathElementsFound.path;\n const nodesByName = new Map();\n\n // Function to recursively populate nodesByName\n function populateMap(node) {\n nodesByName.set(node.data.name, node);\n if (node.children) {\n node.children.forEach(child => populateMap(child));\n }\n }\n\n // Populate the map with nodes from the hierarchy\n populateMap(hierarchyRoot);\n\n // Function to get a node by its name\n function getNodeByName(name) {\n return nodesByName.get(name);\n }\n\n // Iterate over the path to create links\n for (let i = 1; i < path.length; i++) {\n const sourceNode = getNodeByName(path[i - 1]);\n const targetNode = getNodeByName(path[i]);\n\n // If both nodes are found, create a link\n if (sourceNode && targetNode) {\n links.push({ source: sourceNode, target: targetNode });\n }\n }\n\n return links;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"function getPathForInstance(instance, treeRoot) {\n let currentNode = treeRoot;\n const path = [];\n\n while (currentNode && !currentNode.data.isLeaf) {\n path.push(currentNode);\n // This assumes that each node has a 'test' function that returns true or false\n currentNode = instance[currentNode.data.feature] <= currentNode.data.threshold \n ? currentNode.children[0] // assuming left child is 'true'\n : currentNode.children[1]; // assuming right child is 'false'\n }\n\n if (currentNode) {\n // Push the leaf node to the path\n path.push(currentNode);\n }\n\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"function extractPathFromTable(instanceId, tableData) {\n // Find the row in the table data that corresponds to the given instanceId\n const instanceRow = tableData.find(row => row.Instance === instanceId);\n\n if (!instanceRow) {\n console.error('Instance not found');\n return null;\n }\n\n // Extract the path steps from the instance row\n const pathSteps = [];\n let stepIndex = 1;\n let stepKey = `Step ${stepIndex}`;\n\n while (instanceRow[stepKey]) {\n pathSteps.push(instanceRow[stepKey]);\n stepIndex++;\n stepKey = `Step ${stepIndex}`;\n }\n\n return pathSteps;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"pathForInstance = extractPathFromTable(instanceId, treePaths);","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"allPathElementsFound = path(d3.hierarchy(currentTreeData), pathForInstance)","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"links = getLinksFromPath(allPathElementsFound, d3.hierarchy(currentTreeData))","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"pathForInstance[pathForInstance.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"nodes = d3.hierarchy(currentTreeData).descendants();","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"function findPathFromLeaf(root, pathForInstance) {\n let leafNode = null;\n\n // Step 1: Find the leaf node\n root.each(node => {\n if (node.data.name === pathForInstance[pathForInstance.length - 1]) {\n leafNode = node;\n }\n });\n\n if (!leafNode) {\n return { pathFound: false, path: [] };\n }\n\n let currentNode = leafNode;\n const path = [];\n\n // Step 2: Trace backwards from the leaf to the root\n for (let i = pathForInstance.length - 1; i >= 0; i--) {\n if (currentNode.data.name === pathForInstance[i]) {\n path.push(currentNode.data.name);\n currentNode = currentNode.parent;\n } else {\n return { pathFound: false, path: [] }; // Path does not match\n }\n }\n\n // Step 3: Validate the path\n const pathFound = path.length === pathForInstance.length;\n return { pathFound, path: path.reverse() };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"\n\nresult = findPathFromLeaf(nodes[0], pathForInstance);","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"function splitNodeName(name) {\n const parts = name.match(/(.*?)\\s*(<=|>=|<|>|==|!=)\\s*(-?\\d+\\.?\\d*)/);\n if (parts) {\n return { index: parts[1], operator: parts[2], value: parseFloat(parts[3]) };\n }\n return { index: name }; // Assuming the node might not always have an operator and value\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"function initializePathCount(node) {\n if (!node.data.pathCount) {\n node.data.pathCount = 0; // Initialize pathCount if it doesn't exist\n }\n if (node.children) {\n node.children.forEach(initializePathCount);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"combined_forest_data = FileAttachment(\"combined_forest_data.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"viewof ST = Inputs.select(\n combined_forest_data.forest.map((tree, index) => `Tree ${index}`), // This maps over the 'forest' array\n { label: 'Select a Decision Tree:' }\n);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"root = d3.hierarchy(ST)","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"function drawTree(treeData) {\n // Set dimensions and margins for the diagram\n const margin = {top: 40, right: 90, bottom: 50, left: 90},\n width = 960 - margin.left - margin.right,\n height = 500 - margin.top - margin.bottom;\n\n // Create a D3 tree layout\n const treemap = d3.tree().size([height, width]);\n const root = d3.hierarchy(treeData);\n\n // Compute the tree layout\n treemap(root);\n\n // Code to draw the tree (nodes, links) goes here\n // ...\n}\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}