CODEWITHSUNDEEP
javascriptgraphvizsigma.js
Ashish Pal
Ashish Pal

Reputation: 43

Place nodes in circular way using Sigma.js

I have a network in tree like structure. I want to place nodes occuring at same level in form of a circle. So, a levels can be visualized as co-centric circles.

I want to do this using Sigma.js .

Suppose I know the level of each node. Then how to choose x and y co-ordinate of nodes.

The data of nodes and edges is in a json file.

Upvotes: 0

Views: 940

Answers (1)

Max
Max

Reputation: 13334

There is an example which goes a graph animating its nodes from grid to circles:
https://github.com/jacomyal/sigma.js/blob/master/examples/animate.html

for (i = 0; i < N; i++) {
  o = {
    id: 'n' + i,
    label: 'Node ' + i,
    circular_x: L * Math.cos(Math.PI * 2 * i / N - Math.PI / 2),
    circular_y: L * Math.sin(Math.PI * 2 * i / N - Math.PI / 2),
    circular_size: Math.random(),
    circular_color: '#' + (
      Math.floor(Math.random() * 16777215).toString(16) + '000000'
    ).substr(0, 6),
    grid_x: i % L,
    grid_y: Math.floor(i / L),
    grid_size: 1,
    grid_color: '#ccc'
};

You simply need to define x/y positions (see circular_x and ciruclar_y) which position the nodes in a circle.

Libraries such as networkx have algorithms to help you calculate those positions:
https://networkx.github.io/documentation/stable/auto_examples/drawing/plot_circular_tree.html

Once you've generated your graph object with networkx (usually G in the documentation), you can use one of the export functions to retrieve the underlying graph data (eg node positions): https://networkx.github.io/documentation/stable/reference/readwrite/index.html

enter image description here

Upvotes: 1

Related Questions