anvaka / anvaka/VivaGraphJS

"Spiral visualization" to reduce computation and improve readability of large graphs?

Open
#151 3 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.