Coding Challenge #65.2: Visualizing a Binary Tree

Other Parts of this Challenge:

References:

Related Coding Challenges:

Timestamps:
0:00 Visualizing the Binary Tree
1:15 Add a x and y position to each node
2:46 Draw the node
4:29 Draw a line between the nodes
7:03 Conclusion and suggested visualization variations

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#binarysearchtree #datastructure #intelligenceandlearning #javascript #p5js

[alexi]

I love it when Dan walks us through the middle, then cuts the damn rope that we're walking on and leave us there to handle stuff by ourselves...

[GRAHAMAUS]

The Reingold-Tilford algorithm will layout n-ary trees "tidily". It's not that complicated and the results are very nice. It's pretty much the standard for tree layout visualisation.

[mdminhaj]

Finally, I properly understand the concept of Tree from this video. I always appreciate your teaching and your attitude. You're so much helpful. Thanks for you from my heart!

[Flo-rjtz]

for a better layout, just have a global counting variabel while traversing the nodes to determine the x value and the nodes height for the y value

[lionhardt]

You could divide each "row" into (2^row + 1) segments, starting with the root at row 0, and place any nodes in that row in their appropriate place. That would prevent overlap and ensure that for every "column" there is only one node.

[paritoshdutta]

most unique use channel ever . I love it

[liwaiyip]

To draw the tree properly, I think we can do something like this:



For every tree node we give it an x range.
Then the x value of the tree node is the middle of the x range.
Then we recursively draw the left child and right child.
For the left child's x range will be [node's begin x range, the middle of node x range - 1]
For the right child's x range will be [the middle of node x range + 1, node's end x range]


The root's x range is something like [0, canvas.width]

[planketroo]

I want someone exactly like this guy but the programming language to be C++ :/

[trolledwoods]

I made a separate recursive function that displays the tree.
Something like this:

var renderNode(node, x, y, diffX, diffY)
{

text(node.value, x, y);

if(node.left) {
renderNode(node.left, x - diffX / 2, y + diffY);
}

if(node.right) {
renderNode(node.right, x + diffX / 2, y + diffY);
}

}

[Manu]

Ehi Dan, I've a coding challenge that could be called "Coding Challenge #65.3".
The task should be how to balance a tree, so how to have the same amount of nodes on the left and on the right side of the root. Hope you'll accept my suggestion :'D
You're the master!!!

[Nagibatoritze]

Hi! I'm sure that you get many solutions for code challenges from subscribers. You probably should show us some of them!

[eazybeeilori]

Please have a playinglist for you coding challenge

[Jacker_Deluxe]

Thanks for the hurry uploading! I've been excited for this one! :3

[MrZakrencony]

still... what about numbers being equal? :c

[DimitrisValsamis-qqcy]

hey Dan can you tell me why i cant insert nodes from my console?

[mworld]

i like it. might implement this in c++ just for fun.

[anonymousvevo]

can i have the source code for processing ?

[tristancam]

Could you try to do tree that link/connect all the numbers to a certain value, for the Syracuse problem (a.k.a the "3n+1 problem") ?

[adammontgomery]

Definitely animate the search function to highlight the path taken

[xadam]

Get cousin node and calculate the distance between and add a buffer