How to recreate for custom applications?

[frankvp11]

Recently I came up with a "cool" application that I was interested in building. One of the "issues" that I would need to solve it visualizing a N-ary tree. I really liked the way that your app looks and works, and need something similar. The reason I don't just use this application however is because it'd be difficult to implement with the data that i'd be working with. I plan on re-implementing it as I need it, however I was wondering if you could help me with my approach? My initial idea was to get the diameter of the tree, then use that to determine the spacing. Would this be appropriate/smart or did you use a different/faster approach? Thanks in advance.

[coolkingsingh97]

Hi

Could you tell me a bit more about the use case and the input/output you are looking to achieve?

[frankvp11]

Yeah absolutely. I would like to use this to display json data in a "prettier" way. Basically, I plan on making an algorithm to turn the Json data into a N-ary tree, then I wanted to use your application to display the data, where the data would be the values (unless its a dictionary (python) in a dictionary wherein it would traverse further).
This is kinda the approach that I plan on taking. I would like your opinion -> is it a good approach, and do you know if it is possible to code (myself, unless you want to) the visualizer for a tree in a different tech stack?

[frankvp11]

Ideally it would look something like this: Edit: this image looks horrible -> taken from here: https://mljar.com/blog/visualize-decision-tree/ Basically just the image with the tree with the data.

[coolkingsingh97]

What's the tech stack you are using? And is this a web app we are talking about?

[frankvp11]

My plan was to initially test with pygame then transfer to a web app, since I have very little experience with web apps/languages. The tech stack I wanted to use was just raw JS since I don't know the other languages yet ☠️ However I am open to learning if necessary

[coolkingsingh97]

Not privy with pygame. I'd be happy to learn and contribute as you think is best. Do you have a repo started with this project? How would you like to collaborate? Here is the link I used to learn MERN stack to build this web app. Might be helpful.

[frankvp11]

I'm just curious on how you approached this project/general idea behind this visualization algorithm thats all. What I mean with that is what's kind of the core idea, (ie, do you take the widest point and divide it evenly there? Do you divide and conquer and store the points and run some overlap algo, etc). If you'd like to contribute, i'll be opening my repo this weekend, however it's not necessary. As for the MERN stack, ill be sure to look into that, thank you for that.

[coolkingsingh97]

Gotcha, I took a recursive approach. My input is an array/list of n numbers. And essentially pushing them into a json/dictionary and using one of the react packages https://www.npmjs.com/package/react-d3-tree I am able to visualize it

In level order traversal if we observe carefully we can see that if the parent node is at index i in the array then the left child of that node is at index (2i + 1) and the right child is at index (2i + 2) in the array. Using this concept, we can easily insert the left and right nodes by choosing their parent node. We will insert the first element present in the array as the root node at level 0 in the tree and start traversing the array and for every node, we will insert both children left and right in the tree.

My ending condition is that I look at if the children of the node exist and then I recursively enter and build the tree.

Utilized the logic here (https://www.geeksforgeeks.org/binary-tree-array-implementation/)

function list_to_tree(list,i,map) {

if (map === undefined) {
      map = {"name":"null"};
      }

    if (i < list.length) {

      map = {
              "name": list[i],
              "children":[]
            };

            if (2*i+1 < list.length  ) {
            map.children.push(list_to_tree(list,2*i+1,map.children[0]));
          }
            if (2*i+2 < list.length ){
            map.children.push(list_to_tree(list,2*i+2,map.children[1])); 
          }
      }
      return map;

    }

Hope this makes sense

[frankvp11]

Yes that's exactly what I was looking for. I have yet to read those other two articles but I will be sure to get to it once I have time w/ school and everything. From superficial view though it looks great, and exactly like I was looking for.

[coolkingsingh97]

Great let me know how I can help and thanks for reaching out, closing this issue. Curious also how did you stumble onto the website?

[frankvp11]

Well, I realized that I would need to be solving this problem so I looked online to see if anyone had solved it. Then Google recommended a Leetcode question to me wherein it was posted. I just went for there lol.