Visualizing system architecture, Plotly limitations or are we unaware of a graphtype or module?

Dash Python
1

Hello, Plotly community,

We are working on a project where we need to be able to display a system architecture structure from an object and a relations CSV file. The target visualisation needs to look something like this:
image
(Keep in mind that this is a highly simplified example. Real-world datasets will have thousands of objects and relations)

So far, we managed to get a rough left-to-right structure in a scatter plot that looks like this:

image
image1625Ă—848 62.1 KB

(The functional and physical door system nodes aren’t in the top graph, but functional should be left of the barriers, and physical should be left of the door assy)

The user first selects a “starting item” from where we follow the relations from left to right and see which objects we end up with. As you can see, we indicate relations between the objects by highlighting colour. The intended behaviour would be that it shows all relations when no starting item is selected. When a starting is selected, it either gets rid of all others or lowers the opacity of the others. It might be possible to display the relations by overlaying multiple line traces, but this might be too costly. We tried something similar in a 3D graph (we plan to add another dimension in the future), which looks like this:
image

As you can see, this results in a messy graph, even on this scale. It would help if there were another way to display the relations instead of a straight line. A smarter way that avoids overlap etc.

For our project, it is also required to be able to select (or click) on a node in the graph to be able to interact with the graph that way. We thought this might be a limitation of Plotly (the graph nodes not being clickable), but if there is a way to do this, it will help us tremendously.

TL;DR: We need a way to display the relations between the objects in the scatterplot smartly and dynamically. Plus, we need clickable nodes, which would open up many possibilities for us.

Thanks for any input anyone can give, if there are questions about this, please ask them.

2

There’s the Dash Cytoscape component for network/graph visualisation.

Although it sounds like you have a fairly bespoke use-case here. If what you need is sufficiently custom, it could be worth looking at building a custom component using D3.js, which would give you the flexibility you need, but obviously requires some D3 familiarity and time to build

3

You may need this.

1 Like
4

Hey nedned,

Thanks for your reaction! We looked at Dash Cytoscape more to the start of our project. We had some problems with it, like the placement of the nodes being manual. But in the time since then, we are already doing the positioning manually and our goal is more clear. So this might actually be a good option now! It looks very promising, especially since everything is clickable, including the relationships.

I looked at some videos and documentation of D3.js. This will definitely be a good option if we need more customization. I will need to learn javascript though, so I hope we can make it work with the first option.

1 Like
5

Hey stu,

Thanks for your reaction! We have tried Graphviz to make this work in the past, but we could not reach the required level of customizability and interaction that we needed. But it might be worth revisiting as we progressed a lot since the last time we tried it.