anvaka / anvaka/VivaGraphJS

How to size the graph to fit the maximum window size?

Open
#193 2 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,

I built a network graph using vivagraph, and forcelayout. Nodes are dispersing from (0,0) to outward and makes circular shape system. I have about 400 nodes and they are keep dispersing though at some point they are quite stabilized (but still moving).

What I want: I want the graph to fit into the available window size. Two ways I thought about.

1. stopping the layout dispersion using layout.pause() method.
2. scale the svg to the window size.
3. use constant layout and positioning each node specifically.

Problems: for 1, I do not know how should I apply the layout.pause() when and where in my code.
for 2, I tried scaling the svg using viewBox method, but it didn't work out. Didn't have any effect.
for 3, it will take alot of time to define each and every node position for over 400 nodes.

Below is my code:

## data from Python Flask
var linkdata = {{ linkdata|safe }}
var graph = Viva.Graph.graph();

## forceDirected layout
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength:20,
springCoeff:0,
dragCoeff:0.1,
gravity: -0.0025,
theta: 0.3
});

## add links using the data
for (i = 0; i
svg { viewBox: 0 0 60 55; width: 100%; height: 97%; margin-top:-20px; background-color: #fff;}

and right at the "graphics" as an .attr('viewBox', '0 0 60 55'), but didn't work out.

Please let me know if you have some ideas to solve my problem. The svg got too big unless using scaling or layout.pause method, and it will be harder for users to see/browse the network.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the forceDirected layout and renderer.run setup shown in the issue, then inspect how layout.pause() and the SVG viewBox apply to the rendered graphics. Done means the roughly 400-node graph fits the available window and remains usable without manually positioning every node; verify the approach against the layout and graphics configuration shown.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.