jacomyal / sigma.js

A JavaScript library aimed at visualizing graphs of thousands of nodes and edges
https://www.sigmajs.org/
MIT License
11.24k stars 1.59k forks source link

Collapsible nodes #366

Closed mabossert closed 2 years ago

mabossert commented 10 years ago

I would like to be able to visualize really large networks and would like to be able to collapse nodes as a means to de clutter the view similar to what is seen for D3 here: http://bl.ocks.org/mbostock/1062288

Ideally, this would be both manual (e.g. User click or something) and also tied to zoom level such that at a certain zoom level/ratio, the collapsed nodes in view are "opened".

Would this be a trivial thing to implement? Would this be best done as a plugin? If so, I am willing write code...but am not sure where to start. I am an experienced perl programmer, but relatively novice with javascript...but am a quick learner.

1tylermitchell commented 10 years ago

Does your data already have a hierarchical structure? That may be hardest part if not already built that way.
Clicking interaction on nodes is trivial - there are binding listeners already available. I haven't work with scales much in sigma but there certainly are scale levels being tracked and used elsewhere, so I assume they are exposed easily already. Your code will likely be calling out to your data sources regularly as you expand nodes. What is your back end? I'm going to be doing similar soon, with SPARQLVerse serving up my triples.

On Aug 8, 2014, at 23:45, mabossert notifications@github.com wrote:

I would like to be able to visualize really large networks and would like to be able to collapse nodes as a means to de clutter the view similar to what is seen for D3 here: http://bl.ocks.org/mbostock/1062288

Ideally, this would be both manual (e.g. User click or something) and also tied to zoom level such that at a certain zoom level/ratio, the collapsed nodes in view are "opened".

Would this be a trivial thing to implement? Would this be best done as a plugin? If so, I am willing write code...but am not sure where to start. I am an experienced perl programmer, but relatively novice with javascript...but am a quick learner.

— Reply to this email directly or view it on GitHub.

mabossert commented 10 years ago

My back end is a supercomputer serving up a customized jena SPARQL endpoint (I work at Cray if you know who that is). In some cases, the query results would include the results of a community detection algorithm...so I can easily represent the hierarchy in the returned JSON. In other cases, I would think that the egonets with some conditions could be used to determine the grouping. If you have the time, I can show you what the system outputs.

The only concern I have about multiple calls to the endpoint is that due to the size of the datasets (usually, several billion triples...the one for this particular project has 40 billion), the queries can take a little while to return...definitely not sub-second...but perhaps 5-10 seconds on the low end and several minutes on the high end. I would prefer to return one query result that contains the hierarchy in the form of an additional property such as "communityId" or similar that could be used for the grouping...

sheymann commented 10 years ago

Would you need to collapse the last level of hierarchy or any level? In the first case you could create a plugin that group nodes with a similar property.

mabossert commented 10 years ago

I'm thinking that the collapse should occur just one level deep, if you will. How might I code a plugin to do that? A separate/alternate node/edge object?

Aaron

On Aug 12, 2014, at 12:09, Sébastien Heymann notifications@github.com wrote:

Would you need to collapse the last level of hierarchy or any level? In the first case you could create a plugin that group nodes with a similar property.

— Reply to this email directly or view it on GitHub.

sheymann commented 10 years ago

Ah, the D3 example is a tree, it's not any graph! So now I don't think that you correctly describe the feature you want. To help you think about it, please provide 3 or 4 examples of "collapsed"/"uncollapsed" nodes on a graph.

mabossert commented 10 years ago

If, perhaps, a community detection algorithm were run to cluster nodes in the graph, then the communities could be collapsed to a single node each.

I can run community detection server-side...which would require an extra query, but only add a few seconds to the overall response time. Not optimal, but doable. Alternatively, community detection could be implemented client-side....

Good catch withe the D3 example...I had not noticed that it was a tree...

Aaron

On Aug 14, 2014, at 3:00, Sébastien Heymann notifications@github.com wrote:

Ah, the D3 example is a tree, it's not any graph! So now I don't think that you correctly describe the feature you want. To help you think about it, please provide 3 or 4 examples of "collapsed"/"uncollapsed" nodes on a graph.

— Reply to this email directly or view it on GitHub.

veronica-red commented 9 years ago

Like this example? https://gist.github.com/GerHobbelt/3071239 I would like to know as well, please.

AVermeij commented 9 years ago

Perhaps this piece of functionality in vis.js resembles what you're looking for? http://visjs.org/examples/network/18_fully_random_nodes_clustering.html

Would be great to have something similar in sigma.js indeed.

veronica-red commented 9 years ago

Exactly like the zoom out!

On Wed Jan 07 2015 at 2:07:49 PM AVermeij notifications@github.com wrote:

Perhaps this piece of functionality in vis.js resembles what you're looking for? http://visjs.org/examples/network/18_fully_random_nodes_clustering.html

Would be great to have something similar in sigma.js indeed.

— Reply to this email directly or view it on GitHub https://github.com/jacomyal/sigma.js/issues/366#issuecomment-69073451.

VarunWachaspati commented 8 years ago

Any update on this issue?. Would be a great feature to have.

usara0812 commented 7 years ago

Exactly what I wanted to do...could you tell me how you resolved this...I am trying to click on the purple circle and collapse the graphs and uncollapse the other way...D3 example is a tree !

Thanks !

screen shot 2017-04-07 at 5 27 21 pm
RA-Danny commented 6 years ago

Any update anyone ?

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.