GraphGear -- A platform for simple, interactive graph generation - Graph, Gear, GraphGear, Hier, MTASC, Graphen, Netzwerks, Demo, Visualisierung, Informationen, Daten, Zahlen, Beispiele

GraphGear — A platform for simple, interactive graph generation

20. September 2008 – 15:10

GraphGear kann mittels eines einfachen XML Graphen eines Netzwerks erstellen. Hier gibt es eine GraphGear Demo.

“Graph Gear is an open platform for graph visualization (the mathematical kind, not the bar chart kind). It allows you to create an interactive graph with force directed layout that has a good interactive user experience. Graph Gear allows you to quickly render a customizable interaction graph that is described by a graph xml file. All you need to do is embed it in your page and pass the xml over javascript. It provides nice interactive capabilities and a force directed layout. The code is editable and compilable with MTASC, and it also features a javascript api to control graph interactions.”

Hier das XML file:

<?xml version="1.0"?>
<graph title="Sample Graph" bgcolor="ffffff" linecolor="cccccc" viewmode="display" 
width="725" height="400">
     
     
     <node id="n1" text="Viktor Dite" 
     image="http://dl.getdropbox.com/u/188418/IMG_5833.jpg"
     link="http://viktor-dite.de" scale="100" color="0000ff" textcolor="0000ff"/>
     <node id="n2" text="Wolle" 
     image="Some Image Link" 
     link="Some Link" scale="100" color="0000ff" textcolor="0000ff"/>
     <node id="n3" text="Tobias" 
     image="Some Image Link" 
     link="Some Link" scale="100" color="0000ff" textcolor="0000ff"/>
     <node id="n4" text="Viktor Dite" 
     image="http://dl.getdropbox.com/u/188418/IMG_5833.jpg" 
     link="http://viktor-dite.de" scale="100" color="0000ff" textcolor="0000ff"/>
     <node id="n5" text="Wolle" 
     image="Some Image Link" 
     link="Some Link" scale="100" color="0000ff" textcolor="0000ff"/>
     <node id="n6" text="Tobias" 
     image="Some Image Link" 
     link="Some Link" scale="100" color="0000ff" textcolor="0000ff"/>

     <edge sourceNode="n1" targetNode="n2" label="some text" textcolor="555555"/>
     <edge sourceNode="n1" targetNode="n3" label="some text" textcolor="555555"/>
     <edge sourceNode="n2" targetNode="n3" label="sone text" textcolor="555555"/>
     <edge sourceNode="n1" targetNode="n6" label="some text" textcolor="555555"/>
     <edge sourceNode="n4" targetNode="n5" label="some text" textcolor="555555"/>
     <edge sourceNode="n1" targetNode="n4" label="some text" textcolor="555555"/>
     <edge sourceNode="n2" targetNode="n6" label="sone text" textcolor="555555"/>
</graph>

ViskoDa