Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jacomyal/gexfexplorer

[no more maintained] A free web widget to explore graphs by a simply and intuitive way!
https://github.com/jacomyal/gexfexplorer

Last synced: 11 days ago
JSON representation

[no more maintained] A free web widget to explore graphs by a simply and intuitive way!

Awesome Lists containing this project

README 

        
-- GexfExplorer 1.0 --

@author: Alexis Jacomy 



---

I. INTRODUCTION



This open-source free web widget allows webmasters to offer to the user a simple interface to explore their own graphs. To do this, you first have to spatialize and export your graph in gexf format (www.gexf.net), and the best way is currently Gephi (www.gephi.org), a free software to visualize graphs.

When it's done, the next step is as simple: You must download 'bin/GexfExplorer1.0.swf' (available on www.github.com/jacomyal/GexfExplorer), put it and your gexf-encoded graph somewhere locally in your server, and write the following lines in your html code to use it:



	

	

	

	

	

	



---

II. LIST OF CURRENTLY EXISTING PARAMETERS



 .path (String):

	The path of your gexf file    /!\ NECESSARY /!\.

 

 .titleColor (0x******, uint, default=0x000000):

	Now, you can display the title and the author of a graph on stage. To do this, look at http://gexf.net/format/, and use the meta, creator and description balises. If you put those in your file, then title and author will be displayed on stage, with the color indicated by titleColor.



 .curvedEdges (Boolean, default=false):

	'true': edges are clockwise curved; 'false': edges are linear, colored as the source node.

	

 .clickableNodes (Boolean, default=true):

	If your label are URLs, you can make it 'true', and clicking on a node opens this URL in a new tab (only if label "looks like" an URL).

	

 .scaledTextSize (Boolean, default=true):

	'true': Labels size is proportional to nodes size; 'false': Labels size is independant of any other factor.

	

 .fps (Boolean, default=false):

	'true': The FPS are displayed in the top-left of the stage; 'false': nothing.

 

 .labelsColor (0x******, uint, default=0x000000):

	The color of your labels (0x[your_hexa_label_color], example: Black = 0x000000, White = 0xFFFFFF, ...).

 

 .nodeBorderColor (0x******, uint, default=[the_old_node_style]):

	You can know display your nodes differently from before. Actually, for little graphs, it can be really usefull to use full nodes instead of cocentric rings. So, if you define this parameter, your nodes will be displayed as a full disc, with a thin border colored as you define this parameter.

 

 .initialNodesRatio(Number, default=1):

	The initial ratio of each node size.

	

 .font (String, default=Arial):

	The font of your labels ('Arial', 'Verdana', ...)

 

 .edgesThickness(Number, default=1):

	The integer thickness of your edges.

	

 .edgesColor (0x******, uint, default=[source_node_color]):

	The color of your edges. If you want edges color to be the same as source node, don't define this parameter.

	

 .showAttributes (Boolean, default=true):

	'true': The palette contains a DataGrid which shows each attribute relative to the selected node (when you click on any one). It isn't really functionnal already, because there is a problem with UIComponent in this program... So, test your graph and use it carefully if you do; 'false': nothing.

	

 .clickableAttribute (String, default=undefined):

	If you define this parameter, use the name of an existing attribute name from your file (see http://gexf.net/format/data.html). Then, when you click on a node, you will (if it exists) open a new tab (or window with IE) which requests the value of this node at this attribute. If you don't define it, you can still define clickableNodes as true to open web windows. But if clickableAttribute is defined, then clickableNodes is ignored.

	



---

III. FUNCTIONALITIES



Currently, there isn't a lot of functionalities... You can zoom towards your cursor with your mouse wheel, and move the graph with arrow keys.

And when your fullscreened, you can change your nodes size with a slider, it may be usefull is large graphs, to explore them more locally.



---

IV. COMPLETE EXAMPLE



Download 'bin/*' in a folder, and launch in your web browser 'bin/test.html' (or download everything, and launch it). Then, you'll have a simple demo of this widget, with the following html code:



	

	

	

	

	

	



To download 'test.gexf', 'test.html' et 'GexfExplorer1.0.swf', you can also download the 'demo_gexfexplorer.zip' at http://github.com/jacomyal/GexfExplorer/downloads.

Finally, you can find others informations and an online demo at http://gexf.net/explorer/.