Animating decision trees

Animation
1

Hi All,

I’m looking for inspiration on how to animate decision trees.

Has anyone done one of these? Or are there examples out there that you know of?

Here is a online version, but kind of boring:
https://zingtree.com/host.php?style=buttons&tree_id=802643648&persist_names=Restart&persist_node_ids=1&notitle=1

I think a simple solution would be just to have transition exits (left, right, bottom, or top) from each scene (or node in the decision tree) to give the appearance of animation.

I’d like to create something more compelling.

Thanks!!

decisiontree
decisiontree.jpg782×360 144 KB

2

You could create a big tree with nodes and then move the group containing it programmatically to the offset of each node that should be centered. Each node has a position (top, left) and you could move a group containing all the nodes to a position of minus top and minus left. The command would be hypeDocumet.setProperty

Hope you understand what I mean and I understood what you are trying todo.

1 Like
3

Hey Max!
Thanks for the response.
Great idea!!
Basically, if I understand your concept: create one large scene with the whole decision tree in it. The initial view would be a zoomed in view of only the top node of the tree. Then based on input from the user (using the hypeDocumet.setProperty command), the app would navigate to the next level (down) of the tree and only showing that level. This will continue down the tree based on user input until we get to the bottom conclusion node. Right?

Thanks Max!

4

Sounds about right! :wink: You could also use relative timelines but coding would probably be more intuitive if you’re comfortable with code.

5

Hi DBear,

So based on user input (i.e. onClick), go to timeline? Then run that timeline, stop, then wait for user input, then go to a specific timeline for that response?

I am somewhat familiar with Javascript and I am willing to put in the time to learn it more for this project. Do you have any examples of what you are describing?

I’m also considering using ReactJS to develop this. I want to animate transitions in between decision nodes for visual interest. I’m researching if this is feasible with html, css, and ReactJS only.

Thanks for your input. I appreciate it.

Aloha

6

Hi @Cip2u

Using relative timelines, here is a crude example:

treeDiagramExample.hype.zip (23.8 KB)

Take from it what you will. I’m not overly sure of your intentions but this shows how relative timelines could work.

1 Like
7

Thanks DBear!

This is one of the solutions I was looking at.

I’ll check it out.

Thank you very much! :smile:

CIpriano