What is it?

Gexf Explorer is an open-source free web widget created by Alexis Jacomy, allowing webmasters to offer a simple interface to explore their own graphs. To do this, you first have to spatialize and export your graph in GEXF format by using Gephi, a free software graph exploration, or libgexf.

How to use it?

When you have your GEXF file, next steps are simple:

  1. Download 'bin/GexfExplorer1.0.swf'.
  2. Put it with your GEXF graph somewhere locally in your server.
  3. Write the following lines in your HTML code:
<object width="[your_width_value]" height="[your_height_value]">
  <param name="movie" 
  value="[your_local_GexfExplorer_path]?path=[your_local_graph_path]&[variable1_name]=[variable1_value]"/>
  <param name="allowFullScreen" value="true"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="bgcolor" value="#[your_hexa_backgroundcolor]"/>
  <embed 
    src="[your_local_GexfExplorer_path]?path=[your_local_graph_path]&[variable1_name]=[variable1_value]" 
    allowfullscreen="true" 
    allowScriptAccess="always" 
    width="[your_width_value]" 
    height="[your_height_value]" 
    bgcolor="#[your_hexa_backgroundcolor]">
  </embed>
</object>

Parameters

  • curvedEdges: 'true': edges are clockwise curved; 'false': edges are linear, colored as the source node.
  • clickableNodes: If your label are URLs, you can make it 'true', and clicking on a node opens tue URL in a new tab.
  • labelsColor: Adobe hexadecimal color: 0x[your_hexa_label_color] (Example: Black = 0x000000, White = 0xFFFFFF, ...).
  • font: The font of your label ('Arial', 'Verdana', ...).
  • edgesThickness: The integer thickness of your edges.
  • Others parameters will be available soon...

Features

  • zoom towards your cursor with the mouse wheel.
  • move the graph with arrow keys.
  • change nodes size with a slider in fullscreen mode.

Example

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

<object width="550" height="400">
  <param name="movie" 
  value="GexfExplorer1.0.swf?path=./test.gexf&curvedEdges=true&clickableNodes&clickableNodes=true&labelsColor=0x454545&font=Verdana"/>
  <param name="allowFullScreen" value="true"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="bgcolor" value="#000000"/>
  <embed 
    src="GexfExplorer1.0.swf?path=./test.gexf&curvedEdges=true&clickableNodes=true&labelsColor=0x454545&font=Verdana" 
    allowfullscreen="true" 
    allowScriptAccess="always" 
    width="550" 
    height="400" 
    bgcolor="#000000">
  </embed>
</object>

Result: