🐾 Minor Update: Update Friend Diagram to show Binary Tree

[EDWIN1669086]

Context

In Excursion 2 (Dining Out), the visual image shows the model as a linked list, where Lea calls May who calls Jane, and so on. The call stack in Understand the Problem is based on this image, where Lea knows how long her phone calls based on the people she's calling and their phone call times. Read Recursion Lab Notes to understand the problem itself.

Problem

The issue is with the (1) people with phones image and (2) the stack in Understand the Problem. The current implementation treats this problem as a simple list, where one person calls another who calls another, etc. However, the original emphasis of the problem is the binary tree-like nature, where Lea can call May and Jane, not just one other person. This tree representation aligns nicely with the recursive solution, so we want to get rid of the list structure.

Note: just ignore the stack implementation stuff for now (ie. create a new page/component with the tree work, maybe visually on top of the stack stuff).

Proposed Solution

• Replace list-people picture with tree-people picture
• Implement a tree (and node) class that uses the given people as nodes as stores their node values as specified below.
• Make sure the postsum function works when iterating through this tree (ie. hits the nodes in the correct order)
• Begin the SVG CSS + JavaScript animations

Node values (in minutes):
Lea: 10
May: 7
Ryan: 5
Jane: 15
Sam: 12

(Future reference:push Lea, push May, push Sam, pop Sam, pop May, push Jane, push Ryan, pop Ryan, pop Jane, pop Lea, display answer.)

@kesdlvi -- for this upcoming Tuesday, 11/14, I would only expect check points #1,2,3 to be completed. It would be great if you looked into SVG CSS / JavaScript animations, but the animation implementation of that can begin next week.

Interesting JavaScript-focused binary tree animation solution: Youtube Video