Building Interactive Collapsible Tree on Dash

Thanks for developing the Dash framework! It has been very helpful for me as a data scientist to demo the ideas and visualize the models at work!

Question:
I want to build an interactive tree (when user clicks on a note, it grows the leave nodes on the next layer).
Something like this tree:

However, it seems Dash does not have such graph type in the library (the tree plot is not interactive: https://plot.ly/python/tree-plots/).

What are the possible ways to have this graph on my Dash app?
What is the easiest way? I’m a data scientist, and would like to pursue an lightweight way to develop and demo this.

Thanks!

Right now, the best way would be to either write your own component using that D3 example (see Is it possible to add an external graph, created for example with D3.js, to my dashboard?) or contract out Plotly to add this chart type to plotly.js (see “Custom Development” here: https://plot.ly/dash/pricing/)

@empet has also worked out some tree implementations in Python, published here:

You could listen to click events on this chart to redraw the tree with the children of the clicked nodes toggled:

This tree is the first and the simplest one, but these trees are more interesting:

https://plot.ly/~empet/14307
https://plot.ly/~empet/14305
https://plot.ly/~empet/14676
https://plot.ly/~empet/14005

2 Likes

Thank you all for the replies!
My tree will be a binary decision tree. And I believe some of the tree examples will be applicable.

It’s a good idea to listen to the click event on the tree node (I didn’t realize this is a viable approach). I will try this first.

If it does not work, I will try the user defined component.

I wonder how easy it would be to use this within Dash: https://github.com/bkrem/react-d3-tree

I have no experience in React.js so I don’t really know how compatible different React components are etc.

https://plot.ly/~empet/14307/a-radial-tree/#/

Appreciate if anyone can help me to understand, how to generate paths (SVG Path) between nodes in this graph . Thank you.

@Dimuthu Each edge is a cubic Bezier curve, of control points (x0, y0), (x1, y1), (x2, y2), (x3, y3).
The svg path defined by such four tuples is defined as follows:

path=f'M{x0} {y0}, C {x1} {y1}, {x2} {y2}, {x3} {y3}'

Here is an example on how you define the inner control points of coordinates (x1,y1), (x2,y2):

https://plot.ly/~empet/15090.

1 Like

@empet Thanks a lot. This is really helpful.

@empet When we draw graph with high volume of data, it’s rendering time is very high. Are there any way to populates node first and then draw edges? Any workaround for this kind of scenario. Thanks a lot. Appreciate your support.

Another solution to drawing trees is to use our new dash-cytoscape component. See đź“Ł Announcing Dash Cytoscape for more details.

In particular, an example from the documentation shows how to expand a network progressively by clicking on its elements.

@chriddyp Thanks a lot. this would be great. Thanks for the reply.

@Dimuthu Any luck? I would love to add this to one of my visualizations!