Home Wiki Blog Forum GEXF.net

Gephi forums

Community support

sigma.js index.html example file

Graphs inside the browser

sigma.js index.html example file

Postby WeezyF » 24 May 2012 21:05

Hi Guys; hope everyone is doing well.

Im trying to use that awesome sigma.js exporter thing to put a gephi graph on a web page. http://sigmajs.org/. But I cant really figure it out. Before i used the gexf-js by raphv and eduramiba (thanks guys). And on their github page they put an easy to follow index.html file that was, well... easy to follow and told me how to put this javascript thing in the body of a web page. https://github.com/raphv/gexf-js/blob/master/index.html.

So i was just wondering if a similar index.html file exists for the simga.js exporter? I know it's probably very easy for most of you, but I my skills in coding and syntax and stuff are rather n00bish. Any help would be most appreciated. Thanks again!
Weezy F Baybay
User avatar
WeezyF
 
Posts: 44
Joined: 03 May 2012 03:29

Re: sigma.js index.html example file

Postby seinecle » 24 May 2012 22:28

Hey again!

I was just like you since I don't practice javascript so I was not very sure how to make it work.

But that's quite simple, and with some help from the creator of sigmajs that worked fine. See the result here:
http://www.clementlevallois.net/datavizmap/index.php

To do the same, you need to have your own server, I assume you have one?

If so, you simply
- unzip the file attached to this post on your server
- upload your gexf file to the data folder
- in the file "index.html", replace the name of the existing gexf file by yours.
=>that is the line that says: sigInst.parseGexf('data/datavizmap.gexf');
=> replace "datavizmap.gexf" by the name of your file.
- that's it!

Good luck!

Best,

Clement
[EDIT: of course, change the rest of the index.html file where I wrote my own stuff, and put any text you like instead!]
Attachments
example sigmaJS.zip
(197.89 KiB) Downloaded 633 times
http://www.clementlevallois.net
Gephi tutorials and personalized trainings: http://www.clementlevallois.net/training.html
Join the Gephi Facebook group for help and support: https://www.facebook.com/groups/gephi/
User avatar
seinecle
Gephi Community Support
 
Posts: 527
Joined: 08 Feb 2010 17:55
Location: Lyon, France

Re: sigma.js index.html example file

Postby WeezyF » 25 May 2012 18:00

Last edited by WeezyF on 10 Jul 2013 04:36, edited 1 time in total.
User avatar
WeezyF
 
Posts: 44
Joined: 03 May 2012 03:29

Re: sigma.js index.html example file

Postby WeezyF » 25 May 2012 22:50

Now to build upon that... Would it be possible to use the sigma.js.ForcedAtlas2 script on a .gexf file (or another type of data file). I looked in the code found hurr (http://sigmajs.org/examples/random_clusters.html ) and he seems to have the ForceAtlas algo running on randomly generated nodes. So, would we be able to use this same algo, but have it run on nodes in a data file we upload?

All suggestions welcome;
zzz
User avatar
WeezyF
 
Posts: 44
Joined: 03 May 2012 03:29

Re: sigma.js index.html example file

Postby raphytaffy » 19 Jun 2012 00:06

seinecle wrote:Hey again!

I was just like you since I don't practice javascript so I was not very sure how to make it work.

But that's quite simple, and with some help from the creator of sigmajs that worked fine. See the result here:
http://www.clementlevallois.net/datavizmap/index.php

To do the same, you need to have your own server, I assume you have one?

If so, you simply
- unzip the file attached to this post on your server
- upload your gexf file to the data folder
- in the file "index.html", replace the name of the existing gexf file by yours.
=>that is the line that says: sigInst.parseGexf('data/datavizmap.gexf');
=> replace "datavizmap.gexf" by the name of your file.
- that's it!

Good luck!

Best,

Clement
[EDIT: of course, change the rest of the index.html file where I wrote my own stuff, and put any text you like instead!]


Hi, I am trying to do this locally, but am having issues with the graph showing up. I downloaded your example zip and kept everything as is, so are nodes supposed to show up as you have defined in your datavizmap.gexf? Because I am seeing an empty screen like so: Image
raphytaffy
 
Posts: 2
Joined: 18 Jun 2012 23:59

Re: sigma.js index.html example file

Postby seinecle » 19 Jun 2012 10:38

The problem might be with the fact that you run it locally. Try on the server side and see what happens!
http://www.clementlevallois.net
Gephi tutorials and personalized trainings: http://www.clementlevallois.net/training.html
Join the Gephi Facebook group for help and support: https://www.facebook.com/groups/gephi/
User avatar
seinecle
Gephi Community Support
 
Posts: 527
Joined: 08 Feb 2010 17:55
Location: Lyon, France

Re: sigma.js index.html example file

Postby raphytaffy » 19 Jun 2012 19:44

Thanks for the reply. I actually don't have a server of my own, but I am curious as to why it would run on the server side and not locally. Would you mind elaborating?
raphytaffy
 
Posts: 2
Joined: 18 Jun 2012 23:59

Re: sigma.js index.html example file

Postby shriman Nijagun » 21 Jun 2012 08:10

I too have the same issue as 'raphytaffy' has.
why we need the server when we want to run it in locally
(if its mandatory which server we required?)

i am on the train track i must get out of this things done
thanks in advance if any solutions
shriman Nijagun
 
Posts: 1
Joined: 21 Jun 2012 08:04

Re: sigma.js index.html example file

Postby WeezyF » 25 Jun 2012 04:22

Has anyone figured out how to use the sigma.js forceAtlas2 plugin with data that is not randomly generated... (ie; a gexf file...); http://sigmajs.org/examples/random_clusters.html

in the first few lines of the plugin code is where they randomly generate the nodes..
instead of randomly generated, can we just pass in data from our own graph..?

// Generate a random graph with :
// . N nodes
// . E edges
// . C clusters
// . d the proportion of edges that connect two nodes
// from the same cluster
var i, N = 500, E = 3000, C = 5, d = 0.5, clusters = [];
for(i = 0; i < C; i++){
clusters.push({
'id': i,
'nodes': [],
'color': 'rgb('+Math.round(Math.random()*256)+','+
Math.round(Math.random()*256)+','+
Math.round(Math.random()*256)+')'
});
}

for(i = 0; i < N; i++){
var cluster = clusters[(Math.random()*C)|0];
sigInst.addNode('n'+i,{
'x': Math.random(),
'y': Math.random(),
'size': 0.5+4.5*Math.random(),
'color': cluster['color'],
'cluster': cluster['id']
});
cluster.nodes.push('n'+i);
}

for(i = 0; i < E; i++){
if(Math.random() < 1-d){
sigInst.addEdge(i,'n'+(Math.random()*N|0),'n'+(Math.random()*N|0));
}else{
var cluster = clusters[(Math.random()*C)|0], n = cluster.nodes.length;
sigInst.addEdge(i,cluster.nodes[Math.random()*n|0],cluster.nodes[Math.random()*n|0]);
}
}
User avatar
WeezyF
 
Posts: 44
Joined: 03 May 2012 03:29


Return to Visualization on the Web

Who is online

Users browsing this forum: No registered users and 1 guest