Decision Tree Demo
This demo shows how to create an interactive decision tree from a graph.
The decision tree contains different types of nodes.
Orange nodes are the current options that can be clicked in order to expand the next
- Blue nodes are nodes that have been previously chosen.
- Green nodes represent options along the path that have not been chosen.
- Red nodes are end nodes.
Things to Try
- Browse the Sample graphs.
Click the orange nodes
to make a decision and expand the next level of the tree.
Click the blue or green nodes
to reset the decision tree back to this level and select the clicked option.
- Click Restart to reset the current decision tree.
Click the edit button
to edit the current sample and view the complete graph.
- Modify the current sample graph or load other graphs from your computer.
Right click a node and select "Set as root node" to start the decision tree at this
node. Right click the empty canvas to clear the root node.
Click the start button
to start the decision tree with the current graph.
Source Graph Structure
The DecisionTree component supports different formats of graphs.
The source graph does not have to be a tree. It can be an arbitrary graph structure.
- Loops in the graph are supported (see quiz sample).
The graph can contain group nodes, but the clickable nodes have to be normal nodes.
Only group nodes that are direct parents of clickable nodes appear in the decision
Edges connecting nodes in groups can either end directly at the child nodes (as in the
quiz sample), or at the containing group node (as in the what-to-do
The first node that's found that has no incoming edges serves as the start node. The
DecisionTree component also supports explicitly specifying a start node.