"Spiral visualization" to reduce computation and improve readability of large graphs?
- Dominant language
- JavaScript
- Stars
- 3.9k
- Forks
- 418
- PR merge metrics
- No merged PRs in 30d
Description
Hi Andrei,
this is a suggestion to improve UX.
I wonder if you could debrief in experimenting a new visualization, a sort of hybrid between constant layout and force-spring.
My goal is also to have a neater readability of many nodes linked to a parent, and reduce overlapping.
The first can serve readability for allowing position the nodes with coordinates, but if you don't know how many nodes and if they are interconnected, it is kinda cumbersome.
The latter distribute better larger graphs but often nodes needs more space for readability, at the cost of computation and shapes which are not very much organized; also, the flickering of nodes can be annoying and it would be better if children-parent nodes would stay still.
My proposal is to apply force-layout to clusters parent-children, considering them as a whole group (or sub-graph).
I am thinking on this pseudo-code.
I have a weighted-graph; at each interaction for adding new nodes, a number of nodes N and R relationships are fetched on click on the parent; R can connect parent with children, and also with neighbors.
The weight of the link is represented by the length: the stronger, the closer, so to adjust distance based on weight.
Leaves are the nodes with only one link.
I here call a "cluster" the group parent-leaves.
- display the parent node P
- add N children on the canvas, using as center the parent coordinates
- distribute R links by angle(360/N) (parent node is center)
- position N at distance(weight) by parent node AND sorted by weight, clockwise
- if new nodes N2 are added, adjust R and N,N2: set distance(weight) and angle(360/(N+N2))
- apply force-direct to "clusters" of parent-leaves (instead to the whole graph's nodes), and stretch inter-connecting links only.
I would like then to apply force-layout only to nodes having more than one link, in such a way moving the whole cluster of parent and leaves as a unique object, or to apply it locally, adjusting the length of inter-links between two clusters.
As a UX example, if I click and drag the canvas, the whole graph will move with no effort.
I think it would be an improvement to consider parent-leaves as a unique object while computing force-directed layout (it is a sort of _"changing scale"_ from leaves to cluster and so reduce computation ...)
Have you maybe already thought about it?
Could you give suggestions on how to implement a test?
Look to hear from your feedback, thank you.
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue names no files, tests, or entry points. Start by reviewing the existing layout and interaction implementation and reproduce a large graph with parent-child clusters; done would require an agreed algorithm, defined scope, and tests showing improved readability or reduced computation without disrupting graph interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100