Removing from a Binary Search Tree

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<goto "Introduction">>

! Example In this interactive web page, we will be exploring how to remove values from the binary search tree that we built last week. <<include "Figure 7">> The easiest way to remove a value is to remove the node it is in. When that node has no children, we can simply ''clip'' it off the tree. If it has only one non-null child, we can ''promote'' this child to replace this node in the tree. Otherwise, the situation is ''hard''. In the next web page, you need to classify each value to remove as one of these three cases. [[Continue|Classify]]

!! Removal For this exercise, we will be working with the whole list of seven grocery items: <<include "Figure 7">> In the following table, we want you to classify how difficult it would be to remove the indicated element from the list. We have three columns in which you can classify how hard it would be to remove the given value. To move an element to different column, click on the blue arrow in the direction you want it to move. <span id="classify"><<include "Classify Table">></span> [[Check My Classification|Check-classification]] !!! Explanation !!!! Clip off To remove this kind of node, we simply replace it with the null pointer; we clip it off the tree. Not all removals are this easy because we only want to remove a //single// node. !!!! Promote child To remove this kind of node, we promote one of the children of this node to take the place of the removed node. The other child (if any) is discarded. !!!! Hard To remove this kind of node, we have to do something more complex; either of the previous techniques would drop more than just one node from the tree.

<<nobr>><table style="border:1px solid white"><colgroup> <col span="3" style="border: 1px solid white"> </colgroup><tr><th> Clip Off  </th><th>Promote Child</th><th> Hard</th></tr> <<for _i=0; _i lt setup.elements.length; _i++>> <<set _cl to $classify[_i]>><tr> <<capture _i>> <<if _cl is 0>> <td><<= setup.elements[_i]>> <<link "→">><<set $classify[_i] to 1>> <<replace "#classify">><<include "Classify Table">><</replace>> <</link>></td><td></td><td></td> <<elseif _cl is 1>> <td></td><td> <<link "← ">><<set $classify[_i] to 0>> <<replace "#classify">><<include "Classify Table">><</replace>> <</link>><<= setup.elements[_i]>> <<link "→">><<set $classify[_i] to 2>> <<replace "#classify">><<include "Classify Table">><</replace>> <</link>></td><td></td> <<else>> <td></td><td></td><td> <<link "← ">><<set $classify[_i] to 1>> <<replace "#classify">><<include "Classify Table">><</replace>> <</link>><<= setup.elements[_i]>></td> <</if>> <</capture>> </tr> <</for>></table><</nobr>>

{<<set $code to 0>> <<set $indices to (a: 2,3,4,5,6,7,8>>) <<set $elements to (a: "", "carrots","celery","eggs","grapes","kale","lemon","melon", "">>) <<set $class to (a: 0,0,0,0,0,0,0,0,0>>) <<set $aclass to (a: 0,1,0,1,2,1,0,1,0>>) <<set $classname to (a: "Clip off", "Promote child", "Hard">>) <<set $remOptions to (a: "Clip off", "Promote child", "Replace with 'celery'", "Replace with 'jello'", "Replace with 'orange'", "Replace with 'salad'">>) <<set $options to 6>> <<set $option1 to 1>> <<set $option2 to 1>> <<set $option3 to 1>> <<set $option4 to 1>> <<set $option5 to 1>> <<set $option6 to 1>> <<set $option7 to 1>> <<set $option8 to 1>> <<set $option9 to 1>> <<set $option10 to 1>> <<set $option11 to 1>> <<set $option12 to 1>> <<set $option13 to 1>> <<set $option14 to 1>> <<set $length to 9>> <<set $quiz1 to 0>>}

<<set $i to -1>><<for _i = 0; _i lt setup.elements.length; ++_i>><<if $classify[_i] is not setup.aclass[_i]>><<set $i to _i>><</if>><</for>><<if $i is -1>><<goto "Hard Removal">><</if>><<set _c to $classify[$i]>><<set _a to setup.aclass[$i]>><<set _e to setup.elements[$i]>> !! Classification Error On the previous page, one or more of the classifications is wrong. In particular, the classification for the "<<= _e>>" node is wrong (You classified it as "<<= setup.classnames[_c]>>"). Take a look at the tree again: <<include "Figure 7">> <<if _c is 2>>Think about whether the node could be removed by simply clipping it off the tree, or promoting one of its children.<<elseif _c is 1>>What child of the "<<= _e>>" node would you promote?<<if _a is 0>> Null pointers are not children.<</if>><<else>>If we clipped off the "<<= _e>>" node, we'd end up with the following tree: <<set _f to "Figure 7-" + ($i+1)>><<include _f>> More than one node is removed!<</if>> [[Try Again|Classify]]

!! Hard Removal <<set $factor1 to 2873623>><<set $factor2 to 2425>> So you correctly classified all the nodes of the tree of seven grocery items. Most of them are easy to remove, but even in this tree, there is a node with more than one child. (With zero or one child, you can use one of the easier techniques.) The "grapes" node has two (non-null) children and therefore, we can't just clip it off or promote one of its children (and what happens to the other one?). Instead, the recommended way to handle removal is to //replace// the key of the node with the key from either the immediate predecessor or the immediate successor, and then delete //that// node instead. Here's our tree again: <<include "Figure 7">> !!! QUIZ: What is the key of the immediate successor of the "grapes" node? [[celery|celery-not-is]] [[eggs|eggs-not-is]] [[grapes|grapes-not-is]] <<linkappend "kale">>? Yes! <<replace "#more">><<include "more">><</replace>><<set $quiz1 to 4>>(Scroll down)<</linkappend>> [[lemon|lemon-not-is]] [[melon|melon-not-is]] <span id="more"><<if $quiz1 is 4>><<include "more">><</if>></span>

The immediate successor or predecessor node of a node with two non-null children never has more than one child, so it's easy to remove. !!! QUIZ: Why does the immediate predecessor never have two children? [[Because it's always lower in the tree|ip-lower]] [[Because if it had a right child, it wouldn't be immediately before.|ip-no-right-child]] [[Because if it had a left child, it wouldn't be a predecessor.|ip-no-left-child]] [[Because only the root ever has two children.|ip-lower]]

<<include "Figure 7">> In this tree, the "celery" node is not the immediate //succ//essor of the "grapes" node. Indeed it's not even a successor at all! It comes //before// (not after) "grapes" in an in-order traversal. (See textbook Section 9.4, pages 484ff). [[Return|Hard Removal]]

<<include "Figure 7">> In this tree, the "eggs" node is not the immediate //succ//essor of the "grapes" node. It's the immediate //pred//ecessor. It comes right //before// (not after) "grapes" in an in-order traversal. (See textbook Section 9.4, pages 484ff). [[Return|Hard Removal]]

<<include "Figure 7">> In this tree, the "grapes" node is not the immediate //succ//essor of the "grapes" node. It's the same node! [[Return|Hard Removal]]

<<include "Figure 7">> In this tree, the "lemon" node is not the //immediate// successor of the "grapes" node. If we placed "lemon" as the key in the "grapes" node, which node would find themselves in the wrong place? <<linkappend "carrots">>? Actually "carrots" would be happy to be left of "lemon".<</linkappend>> <<linkappend "eggs">>? Actually "eggs" would be happy to be left of "lemon".<</linkappend>> <<linkappend "grapes">>? There wouldn't be a node with "grapes" as a key any more.<</linkappend>> <<linkappend "kale">>? Yes, "kale" would not be comfortable to the right of "lemon". [[Return|Hard Removal]]<</linkappend>> <<linkappend "lemon">>? Well, this node would be slated for removal, so we can ignore its discomfort.<</linkappend>> <<linkappend "melon">>? Actually "melon" would be happy to live to the right of "lemon"<</linkappend>>

<<include "Figure 7">> In this tree, the "melon" node is not the //immediate// successor of the "grapes" node. If we placed "melon" as the key in the "grapes" node, which node(s) would find themselves in the wrong place? <<linkappend "carrots">>? Actually "carrots" would be happy to be left of "melon".<</linkappend>> <<linkappend "eggs">>? Actually "eggs" would be happy to be left of "melon".<</linkappend>> <<linkappend "grapes">>? There wouldn't be a node with "grapes" as a key any more.<</linkappend>> <<linkappend "kale">>? Yes, "kale" would not be comfortable to the right of "melon". [[Return|Hard Removal]]<</linkappend>> <<linkappend "lemon">>? Yes, "lemon" would not be comfortable to the right of "melon". [[Return|Hard Removal]]<</linkappend>> <<linkappend "melon">>? Well, this node would be slated for removal, so we can ignore its discomfort.<</linkappend>>

Just because a node comes lower in the tree doesn't mean it can't have two children. Consider this tree which results if we add "bread" to our grocery list: <<include "Figure 8">> Which node now has two children? <<linkappend "bread">>? No it's a leaf.<</linkappend>> <<linkappend "carrots">>? Yes! [[Return|Hard Removal]]<</linkappend>> <<linkappend "celery">>? No it's a leaf.<</linkappend>> <<linkappend "eggs">>? No it still has a single child.<</linkappend>> <<linkappend "grapes">>? No, it //already// had two children.<</linkappend>> <<linkappend "melon">>? No it has two //descendants// but only one is a child.<</linkappend>>

Yes, if the immediate //pred//ecessor of a node above it had a right child, then this right child would be between this node and its ancestor. Similarly the immediate //succ//essor node always has a null left pointer. So the immediate //succ//essor of "grapes" in this tree is the "kale" node which has no left child: <<include "Figure 7">> So the first step to removing "grapes" is to find the immediate successor and copy its its key to the "grapes" node: <<include "Figure R1">> !!! Quiz: What do we do now? [[Nothing|do-nothing]] [[Clip off the "kale" node|clip-kale]] [[Find the immediate predecessor|find-ip]] [[Promote the "lemon" node to replace "kale"|promote-lemon]]

Consider our tree again: <<include "Figure 7">> In this tree, the "eggs" node is the immediate predecessor of "grapes" and yet it has a left child. What is it? <<linkappend "carrots">>? Yes! [[Return|Hard Removal]]<</linkappend>> <<linkappend "celery">>? No. That's not a child of the "eggs" node.<</linkappend>> <<linkappend "graoes">>? No. That's a parent node of the "eggs" node.<</linkappend>> <<linkappend "kale">>? No. That's an unrelated node.<</linkappend>>

What's wrong with this tree? <<include "Figure R1">> <<linkappend "melon comes after kale">>? That's fine.<</linkappend>> <<linkappend "It has two 'kale' nodes">>? Yes! [[Return|ip-no-right-child]]<</linkappend>> <<linkappend "lemon comes after kale">>? That's fine.<</linkappend>> <<linkappend "eggs is to the left of kale">>? That's fine.<</linkappend>>

If we simply 'clip' away the "kale" node, we end up with <<include "Figure R3">> !!! Quiz what is missing? <<linkappend "bread">>? It wasn't in the tree before.<</linkappend>> <<linkappend "eggs">>? It's still there.<</linkappend>> <<linkappend "fish">>? It was never in the tree.<</linkappend>> <<linkappend "grapes">>? We are removing it!<</linkappend>> <<linkappend "kale">>? It's still there.<</linkappend>> <<linkappend "lemon">>? Yes! We lost the "lemon" node! [[Return|ip-no-right-child]]<</linkappend>> <<linkappend "melon">>? It's still there.<</linkappend>> <<linkappend "orange">>? It was never in the tree.<</linkappend>>

OK, let's find the immediate predecessor of the root of this tree: <<include "Figure R1">> !!! Quiz: What is the immediate predecessor of the root? <<linkappend "carrots">>? No. Not immediate.<</linkappend>> <<linkappend "celery">>? No. Not immediate.<</linkappend>> <<linkappend "eggs">>? Yes. <<replace "#rest">><<include "rest">><</replace>>(Scroll Down)<</linkappend>> <<linkappend "kale">>? No. Not predecessor.<</linkappend>> <<linkappend "lemon">>? No. Neither predecessor nor immediate.<</linkappend>> <<linkappend "melon">>? No. Neither predecessor nor immediate.<</linkappend>> <span id="rest"></span>

But once we have the immediate predecessor, what do we do? We are trying to remove the key in the root of the tree. The whole point of copying in "kale" is to shift what we need to remove to an easy node. [[Try Again|ip-no-right-child]]

Yes. We promote "lemon" to take the place of the "kale" node: <<include "Figure R2">> We have successfully removed "grapes" from the shopping list. Next we will look at a larger tree. [[Continue|General]]

<<set _prime to 1000159>><<set $code1 to ($code0 + $num)>><<set $code to ($code1 % _prime) + Math.floor($code1 / _prime)>> You have now completed the quiz. Please write down this code: "<<= $code>>" and turn it in as the solution. <<if $name eq "guest">>''Warning'': You logged in as 'guest' and so the completion code will not work for you.<</if>>

!! Summary Test Consider the following tree (some items have moved) <<include "Figure 13">> We're going to ask about how to remove each of the values in this tree, for each indicate whether (as before) we can clip off the node, promote a child, or (new) replace the value with another value which is easier to remove. tea <<cyclearray "$option1" setup.options>> fish <<cyclearray "$option2" setup.options>> kale <<cyclearray "$option3" setup.options>> eggs <<cyclearray "$option4" setup.options>> jello <<cyclearray "$option5" setup.options>> salad <<cyclearray "$option6" setup.options>> bread <<cyclearray "$option7" setup.options>> onion <<cyclearray "$option8" setup.options>> lemon <<cyclearray "$option9" setup.options>> melon <<cyclearray "$option10" setup.options>> celery <<cyclearray "$option11" setup.options>> orange <<cyclearray "$option12" setup.options>> carrots <<cyclearray "$option13" setup.options>> <<link "Check Answers">> <<set $num to ($option1+1+6*($option2+1+6*($option3+1+6*($option4+1+6*($option5+1+6*($option6+1+6*($option7+1+6*($option8+1+6*($option9+1+6*($option10+1+6*($option11+1+6*($option12+1+6*(1+$option13) )))) )))) ))))>> <<if $num is ($factor1 * $factor2)>><<goto "Done">><<else>> <<replace "#check-response" t8n>>Not correct! <</replace>><</if>> <</link>> <span id="check-response"></span>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)grapes((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">8</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "5". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "6". The right arrow from the lemon box points to null, with label "7". The right arrow from the melon box points to null, with label "8". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree ((((bread)carrots(celery))eggs)grapes((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">bread</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">8</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">9</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to a box labeled "bread". This box has arrows going left and right from it. The left arrow from the bread box points to null, with label "1". The right arrow from the bread box points to null, with label "2". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "3". The right arrow from the celery box points to null, with label "4". The right arrow from the eggs box points to null, with label "5". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "6". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "7". The right arrow from the lemon box points to null, with label "8". The right arrow from the melon box points to null, with label "9". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)grapes(((ice)kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23node4"/> <text x="-7" y="18" class="label">ice</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">8</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">9</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to a box labeled "ice". This box has arrows going left and right from it. The left arrow from the ice box points to null, with label "5". The right arrow from the ice box points to null, with label "6". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "7". The right arrow from the lemon box points to null, with label "8". The right arrow from the melon box points to null, with label "9". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)kale((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">8</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the kale box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "5". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "6". The right arrow from the lemon box points to null, with label "7". The right arrow from the melon box points to null, with label "8". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)kale((lemon)melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the kale box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "5". The right arrow from the lemon box points to null, with label "6". The right arrow from the melon box points to null, with label "7". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)kale(melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the kale box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to null, with label "5". The right arrow from the melon box points to null, with label "6". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree ((eggs)grapes((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to null, with label "1". The right arrow from the eggs box points to null, with label "2". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "3". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "4". The right arrow from the lemon box points to null, with label "5". The right arrow from the melon box points to null, with label "6". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots)eggs)grapes((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to null, with label "2". The right arrow from the eggs box points to null, with label "3". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "4". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "5". The right arrow from the lemon box points to null, with label "6". The right arrow from the melon box points to null, with label "7". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (grapes((kale(lemon))melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to null, with label "1". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "2". The right arrow from the kale box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "3". The right arrow from the lemon box points to null, with label "4". The right arrow from the melon box points to null, with label "5". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="100"> <title>Tree </title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> </g> <desc> An arrow from the top of the picture points to null, with label "1". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)grapes(melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to null, with label "5". The right arrow from the melon box points to null, with label "6". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)grapes((kale)melon))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the grapes box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to null, with label "5". The right arrow from the kale box points to null, with label "6". The right arrow from the melon box points to null, with label "7". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree (((carrots(celery))eggs)grapes)</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-21" y="18" class="label">grapes</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "grapes". This box has arrows going left and right from it. The left arrow from the grapes box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to null, with label "1". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "2". The right arrow from the celery box points to null, with label "3". The right arrow from the eggs box points to null, with label "4". The right arrow from the grapes box points to null, with label "5". </desc> </svg> '/>

<img src='data:image/svg+xml;utf8, <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"> <title>Tree ((((bread)carrots(celery))eggs((fish)jello))kale((lemon(melon))onion((orange)salad(tea))))</title> <style> .arrow { stroke : yellow } .box { fill : midnightblue } .label { stroke : lightskyblue } </style> <defs> <path id="head" d="M0,0 l-5,-10 l5,3 l5,-3 z" class="arrow"/> <g id="null"> <path d="M-5,0 h 10 M-5,3 h 10" class="arrow"/> </g> <g id="node"> <use xlink:href="%23head"/> <rect x="-25" y="0" width="50" height="50" class="box"/> <line x1="-25" y1="25" x2="25" y2="25"/> <line x1="0" y1="25" x2="0" y2="50"/> </g> <path id="R1arr" d="M15,40 q 185,0 185,50 v 10" class="arrow"/> <use id="L1arr" xlink:href="%23R1arr" transform="scale(-1,1)"/> <g id="node1"> <use xlink:href="%23node"/> <use xlink:href="%23R1arr"/> <use xlink:href="%23L1arr"/> </g> <path id="R2arr" d="M15,40 q 85,0 85,50 v 10" class="arrow"/> <use id="L2arr" xlink:href="%23R2arr" transform="scale(-1,1)"/> <g id="node2"> <use xlink:href="%23node"/> <use xlink:href="%23R2arr"/> <use xlink:href="%23L2arr"/> </g> <path id="R3arr" d="M15,40 q 35,0 35,50 v 10" class="arrow"/> <use id="L3arr" xlink:href="%23R3arr" transform="scale(-1,1)"/> <g id="node3"> <use xlink:href="%23node"/> <use xlink:href="%23R3arr"/> <use xlink:href="%23L3arr"/> </g> <path id="R4arr" d="M15,40 l 10,50 v 10" class="arrow"/> <use id="L4arr" xlink:href="%23R4arr" transform="scale(-1,1)"/> <g id="node4"> <use xlink:href="%23node"/> <use xlink:href="%23R4arr"/> <use xlink:href="%23L4arr"/> </g> <path id="R5arr" d="M15,40 v 60" class="arrow"/> <use id="L5arr" xlink:href="%23R5arr" transform="scale(-1,1)"/> <g id="node5"> <use xlink:href="%23node"/> <use xlink:href="%23R5arr"/> <use xlink:href="%23L5arr"/> </g> </defs> <g stroke="white" fill="none" transform="translate(0,-50)" font-size="15" font-weight="normal"> <line x1="400" y1="50" x2="400" y2="100" class="arrow"/> <g transform="translate(400,100)"> <use xlink:href="%23node1"/> <text x="-12" y="18" class="label">kale</text> <g transform="translate(-200,100)"> <use xlink:href="%23node2"/> <text x="-14" y="18" class="label">eggs</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-22" y="18" class="label">carrots</text> <g transform="translate(-50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">bread</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">1</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">2</text> </g> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-18" y="18" class="label">celery</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">3</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">4</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23node3"/> <text x="-12" y="18" class="label">jello</text> <g transform="translate(-50,100)"> <use xlink:href="%23node4"/> <text x="-10" y="18" class="label">fish</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">5</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">6</text> </g> </g> <g transform="translate(50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">7</text> </g> </g> </g> <g transform="translate(200,100)"> <use xlink:href="%23node2"/> <text x="-18" y="18" class="label">onion</text> <g transform="translate(-100,100)"> <use xlink:href="%23node3"/> <text x="-20" y="18" class="label">lemon</text> <g transform="translate(-50,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">8</text> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-20" y="18" class="label">melon</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-4" y="25" class="label">9</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-8" y="25" class="label">10</text> </g> </g> </g> <g transform="translate(100,100)"> <use xlink:href="%23node3"/> <text x="-16" y="18" class="label">salad</text> <g transform="translate(-50,100)"> <use xlink:href="%23node4"/> <text x="-22" y="18" class="label">orange</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-8" y="25" class="label">11</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-8" y="25" class="label">12</text> </g> </g> <g transform="translate(50,100)"> <use xlink:href="%23node4"/> <text x="-8" y="18" class="label">tea</text> <g transform="translate(-25,100)"> <use xlink:href="%23null"/> <text x="-8" y="25" class="label">13</text> </g> <g transform="translate(25,100)"> <use xlink:href="%23null"/> <text x="-8" y="25" class="label">14</text> </g> </g> </g> </g> </g> </g> <desc> An arrow from the top of the picture points to a box labeled "kale". This box has arrows going left and right from it. The left arrow from the kale box points to a box labeled "eggs". This box has arrows going left and right from it. The left arrow from the eggs box points to a box labeled "carrots". This box has arrows going left and right from it. The left arrow from the carrots box points to a box labeled "bread". This box has arrows going left and right from it. The left arrow from the bread box points to null, with label "1". The right arrow from the bread box points to null, with label "2". The right arrow from the carrots box points to a box labeled "celery". This box has arrows going left and right from it. The left arrow from the celery box points to null, with label "3". The right arrow from the celery box points to null, with label "4". The right arrow from the eggs box points to a box labeled "jello". This box has arrows going left and right from it. The left arrow from the jello box points to a box labeled "fish". This box has arrows going left and right from it. The left arrow from the fish box points to null, with label "5". The right arrow from the fish box points to null, with label "6". The right arrow from the jello box points to null, with label "7". The right arrow from the kale box points to a box labeled "onion". This box has arrows going left and right from it. The left arrow from the onion box points to a box labeled "lemon". This box has arrows going left and right from it. The left arrow from the lemon box points to null, with label "8". The right arrow from the lemon box points to a box labeled "melon". This box has arrows going left and right from it. The left arrow from the melon box points to null, with label "9". The right arrow from the melon box points to null, with label "10". The right arrow from the onion box points to a box labeled "salad". This box has arrows going left and right from it. The left arrow from the salad box points to a box labeled "orange". This box has arrows going left and right from it. The left arrow from the orange box points to null, with label "11". The right arrow from the orange box points to null, with label "12". The right arrow from the salad box points to a box labeled "tea". This box has arrows going left and right from it. The left arrow from the tea box points to null, with label "13". The right arrow from the tea box points to null, with label "14". </desc> </svg> '/>

! Log in (We will not ask for a password.) <<nobr>> <<set $code0 to 0>> <</nobr>> EPantherID: <<textboxplus "$name" "guest" autofocus>> <<set $code0 to jtb.icHash($name+setup.semester)>> <<set $badchars to jtb.badLogin($name)>> <<if setup.logins.includes($name)>><<goto "LoggedIn">><<else>> <<replace "#login-error">><<if $badchars isnot "">> An EPantherID cannot include characters such as $badchars.<<else>> The EPantherID $name is not registered with the class.<</if>> [[Proceed without credit->LoggedIn]]<</replace>><</if>> <</textboxplus>>@uwm.edu <span id="login-error"></span>