Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ForceLayout on JSON graph? #190

Closed
deemeetree opened this issue Feb 13, 2014 · 8 comments

Comments

Projects
None yet
4 participants
@deemeetree
Copy link

commented Feb 13, 2014

Hey, I'm trying to apply ForceLayout on a JSON graph, but it doesn't seem to work. I don't really understand how I can manipulate the instance of Sigma if I load it from a .gexf or .json file...

sigma.parsers.json('/javascripts/sigma/data/short.json', {
    container: 'graph-container',
    renderer: {
        container: document.getElementById('graph-container'),
        type: 'canvas'
    },
    settings: {
        minNodeSize: 8,
        maxNodeSize: 16
    }
});
sigma.startForceAtlas2();

This would not work.

I read that sigma.parser just adds .graph setting to sigma, but then why doesn't ForceAtlas work?

All the .js files are included fine.

It would be great to have one example, which shows how you can apply basic settings (size, color, layout, etc.) to the graph that's loaded from a file.

@deemeetree

This comment has been minimized.

Copy link
Author

commented Feb 13, 2014

Ok, after some playing around with settings from here and there and the readme files, I came up with this interim solution below. If you know a more elegant way, please, let me know... Thank you! If not, let me know and I'll add it into the examples list.

var g = {
            nodes: [],
            edges: []
        };

s = new sigma({
    graph: g,
    container: 'graph-container',
    renderer: {
        container: document.getElementById('graph-container'),
        type: 'canvas'
    },
    settings: {
        minNodeSize: 8,
        maxNodeSize: 16
    }
});


sigma.parsers.json(
        '/javascripts/sigma/data/arctic.json',
        s,
        function() {
            // this is needed in case the original JSON doesn't have color / size / x-y attributes 
            var i,
                    nodes = s.graph.nodes(),
                    len = nodes.length;

            for (i = 0; i < len; i++) {
                nodes[i].x = Math.random();
                nodes[i].y = Math.random();
                nodes[i].size = s.graph.degree(nodes[i].id);
                nodes[i].color = nodes[i].center ? '#333' : '#666';
            }

            // Refresh the display:
            s.refresh();

            // ForceAtlas Layout
            s.startForceAtlas2();
        }
);
@jacomyal

This comment has been minimized.

Copy link
Owner

commented Feb 14, 2014

Hi Dmitry,

Your first example did not work because the JSON parser first loads asynchronously the graph file. So, you have to give it a callback to have some code being executed only when the sigma instance is ready. So, here is your first example modified:

sigma.parsers.json('/javascripts/sigma/data/short.json', {
    container: 'graph-container',
    renderer: {
        container: document.getElementById('graph-container'),
        type: 'canvas'
    },
    settings: {
        minNodeSize: 8,
        maxNodeSize: 16
    }
}, function(s) {
    s.startForceAtlas2()
});

@jacomyal jacomyal closed this Feb 14, 2014

@deemeetree

This comment has been minimized.

Copy link
Author

commented Feb 14, 2014

Would you like me to add this example to your examples and submit a pull request?

@mindog

This comment has been minimized.

Copy link

commented Feb 27, 2014

Than I use above example, the map disappear if i use startForceAtlas2(), why?

@jacomyal

This comment has been minimized.

Copy link
Owner

commented Feb 27, 2014

Nodes might have NaN coordinates. This might happen if some nodes have the exact same coordinates from your JSON file, I guess. If this happens, then the NaN will propagate through your graph because of the FA2 algorithm.

You can see if this is the case by checking if s.graph.nodes()[0].x is NaN. And if it is the case, you might solve that, by just modifying the initial layout of you graph before starting the FA2 layout:

// Display the nodes on a circle:
s.graph.nodes().forEach(function(node, i, a) {
  node.x = Math.cos(Math.PI * 2 * i / a.length);
  node.y = Math.sin(Math.PI * 2 * i / a.length);
});

// Start the layout:
s.startForceAtlas2();
@mindog

This comment has been minimized.

Copy link

commented Feb 27, 2014

yes the problem was with coordinates,
Thanks again

@deemeetree

This comment has been minimized.

Copy link
Author

commented Feb 27, 2014

I also had a problem that if my JSON doesn't have coordinates, I have to add the code that automatically generates random coordinates for them. Which is related also to this issue. Maybe it could be good to include a script that "patches" JSON inside Sigma as it seems to be a recurrent problem and, frankly, I can imagine a lot of instances where JSON won't have the coordinates... Thanks for considering this :)

@Fannon

This comment has been minimized.

Copy link

commented Jun 12, 2014

+1 for deemeetree's suggestion!

A---- pushed a commit to A----/sigma.js that referenced this issue Sep 16, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.