Difference between revisions of "Wgraph"

From FollowTheScore
Jump to: navigation, search
Line 1: Line 1:
−
== wgraph : A universal wiki graph generator ==
+
== Wgraph -- the mediawiki graph definition tool ==
  
−
''wgraph'' relies on a graph drawing software called "aiSee". ''aiSee'' is free for academic use and can be downloaded from [http://www.absint.com]. ''aiSee'' is a brilliant product and came out of research results of the University of Bremen and Saarbrücken, Germany, one decade ago.
+
''Wgraph'' is a mediawiki extension which supports graph drawing. With ''Wgraph'' you '''define the semantics of a graph''' in an abstract textual notation called WGL (''Wiki Graph Language''). You may add hints for layout, but the graph itself is being produced automatically. ''Wgraph'' is a powerful visualisation instrument for objects and their relations. It is NOT a 'wysiwyg' drawing tool.
  
−
''wgraph'' integrates ''aiSee'' into a mediawiki environment. The syntax you use is basically the "GDL" - notation of ''aiSEE -- the "Graph Description Language". For use within mediawiki the syntax has been somewhat simplified and enhanced -- resulting in a "mediawiki graph description language" which will be referred to as "MGDL" in the following.
+
{|
 +
|
 +
{{#wgraph: svg | thumb = 40 |
 +
  node wgl        { type data    label "text notation\n-- WGL --" }
 +
  edge wgl wgraph  { kind rightnear color red }
 +
  node wgraph      { type process  label "Wgraph\nmediawiki extension" }
 +
  edge wgraph gdl  { }
 +
  node gdl        { type data    label "graph definition\n-- GDL --" }
 +
  edge gdl aisee  { }
 +
  node aisee      { type process  label "aiSee\nlayout generator" }
 +
  edge aisee img  { kind leftnear }
 +
  node img        { type data    label "image\n-- png, svg --"
 +
                    shape hexagon }
 +
  nodetype data    { shape ellipse, color lightyellow,
 +
                    bordercolor khaki, height 60 }
 +
  nodetype process { shape box color lightmagenta
 +
                    bordercolor magenta height 60 }
 +
  xspace=70, yspace=100
 +
}}
 +
|
 +
<small><pre><nowiki>
 +
{{#wgraph: svg | thumb = 40 |
 +
  node wgl        { type data    label "text notation\n-- WGL --" }
 +
  edge wgl wgraph  { kind rightnear color red }
 +
  node wgraph      { type process  label "Wgraph\nmediawiki extension" }
 +
  edge wgraph gdl  { }
 +
  node gdl        { type data    label "graph definition\n-- GDL --" }
 +
  edge gdl aisee  { }
 +
  node aisee      { type process  label "aiSee\nlayout generator" }
 +
  edge aisee img  { kind leftnear }
 +
  node img        { type data    label "image\n-- png, svg --"
 +
                    shape hexagon }
 +
  nodetype data    { shape ellipse, color lightyellow,
 +
                    bordercolor khaki, height 60 }
 +
  nodetype process { shape box color lightmagenta
 +
                    bordercolor magenta height 60 }
 +
  xspace=70, yspace=100
 +
}}
 +
</nowiki></pre></small>
 +
|}
 +
 +
----
 +
Graph layout is a very challenging task. ''Wgraph'' delegates most of this task to a brilliant product called '''[http://www.aisee.com aiSee]'''. aiSee came out of the German university area one decade ago and is now being marketed commercially by [http://www.absint.com ''AbsInt - Angewandte Informatik'', Saarbrücken, Germany]. You can download a [http://www.absint.com/aisee/download/ free 30-day trial license]. ''aiSee can be registered for free for non-commercial use.'' Non-commercial use is educational, academic research and private use. Non-commercial users can get a license key that extends the usage period of the trial version until February 14, 2008. After that you will have to download aiSee again (and the usage period will be extended for another year, provided the usage is still non-commercial).
 +
 
 +
== The two modes to use ''Wgraph'' ==
 +
 
 +
''Wgraph'' is an interface between mediawiki and aiSee. It hides aiSee completely from the eyes of the user and adds a small additional abstraction layer to make graph definitions even more comfortable than with native aiSee.
 +
 
 +
* The direct way to use ''wgraph'' is to invoke the parser function ''#wgraph'' with your WGL code as a parameter.
 +
* In combination with another mediawiki extension (called DPL: ''Dynamic Page List'') you can even visualize structural aspects of your wiki as a '''wikigraph'''. In a [[wikigraph]] articles map to nodes, categories to nodetypes and relations are deduced from template calls.
 +
 
 +
With ''wgraph'' you can view a graph definition from different angles. You can '''hide''' certain nodes / edges and emphasize others. You can '''group nodes to subgraphs''' and show them in a special surrounding box. There are several '''layout strategies''' to choose from. You control the graphical representation of nodes and edges using '''shapes, colors, linestyles, arrows''' and even '''bitmap images'''. To avoid redundancy and reach a higher level of abstraction you can take advantage of the built-in WGL '''type concept'''.
 +
 
 +
Graphs are produced in png and svg format. In addition there is a png thumb image. Apart from viewing the generated graph in the browser, aiSee can be used as a local client application. This gives enhanced possibilities of edge concentration, subgraph folding etc. Make sure that you comply to the licensing terms of [http://www.absint.com].
 +
 
 +
{|class=wikitable
 +
!more to read ..
 +
!Other stuff
 +
!Gallery
 +
|-
 +
|
 +
* '''[[Wgraph fundamentals]]'''
 +
* [[Wgraph architecture]]
 +
* [[Wgraph tutorial]]
 +
* [[Wgraph commandline arguments]]
 +
* [[Wgraph manual]]
 +
|
 +
* [[Wgraph installation]]
 +
* [[Wgraph bugs]]
 +
* [[Wgraph to do | the author's to do list]]
 +
|
 +
* [[Wgraph Sample Genealogy]]
 +
* [[Wgraph demo 1]]
 +
* [[Wgraph demo 2]]
 +
* [[Wgraph demo 3]]
 +
|}
 +
 
 +
== A first example ==
 +
 
 +
{|class=wikitable
 +
![[wgraph sample 1.wgl|WGL source]]
 +
!orientation = top_to_bottom<br>node.color = lightyellow
 +
!align=left|orientation = left_to_right<br>node.color = lightmagenta<br>node.shape = hexagon<br>node.width = 30<br>edge.color = red
 +
|-
 +
|{{:wgraph sample 1.wgl}}
 +
|{{#wgraph: name= wgraph_sample_1  | png | svg |
  
−
{{#wgraph: name=tmp | gdl | svg |
+
  {{:wgraph sample 1.wgl}}
−
node x {}
+
    node.color = lightyellow
−
node y {}
+
  }}
−
edge x y { label "a connection" }
+
 
−
}}
+
|{{#wgraph: name= wgraph_sample_1a | png | svg |
 +
 
 +
  {{:wgraph sample 1.wgl}}  
 +
    orientation = left_to_right
 +
    node.color = lightmagenta
 +
    node.shape = hexagon
 +
    node.width = 30
 +
    edge.color = red
 +
  }}
 +
|}
 +
 
 +
[[Category:Wgraph]]

Revision as of 14:26, 20 July 2007

Wgraph -- the mediawiki graph definition tool

Wgraph is a mediawiki extension which supports graph drawing. With Wgraph you define the semantics of a graph in an abstract textual notation called WGL (Wiki Graph Language). You may add hints for layout, but the graph itself is being produced automatically. Wgraph is a powerful visualisation instrument for objects and their relations. It is NOT a 'wysiwyg' drawing tool.

{{#wgraph: svg | thumb = 40 | 

 node wgl         { type data     label "text notation\n-- WGL --" }
 edge wgl wgraph  { kind rightnear color red }
 node wgraph      { type process  label "Wgraph\nmediawiki extension" }
 edge wgraph gdl  { }
 node gdl         { type data     label "graph definition\n-- GDL --" }
 edge gdl aisee   { }
 node aisee       { type process  label "aiSee\nlayout generator" }
 edge aisee img   { kind leftnear }
 node img         { type data     label "image\n-- png, svg --" 
                    shape hexagon }
 nodetype data    { shape ellipse, color lightyellow,
                    bordercolor khaki, height 60 }
 nodetype process { shape box color lightmagenta 
                    bordercolor magenta height 60 }
 xspace=70, yspace=100

}} 

{{#wgraph: svg | thumb = 40 |
  node wgl         { type data     label "text notation\n-- WGL --" }
  edge wgl wgraph  { kind rightnear color red }
  node wgraph      { type process  label "Wgraph\nmediawiki extension" }
  edge wgraph gdl  { }
  node gdl         { type data     label "graph definition\n-- GDL --" }
  edge gdl aisee   { }
  node aisee       { type process  label "aiSee\nlayout generator" }
  edge aisee img   { kind leftnear }
  node img         { type data     label "image\n-- png, svg --" 
                     shape hexagon }
  nodetype data    { shape ellipse, color lightyellow,
                     bordercolor khaki, height 60 }
  nodetype process { shape box color lightmagenta 
                     bordercolor magenta height 60 }
  xspace=70, yspace=100
}}

Graph layout is a very challenging task. Wgraph delegates most of this task to a brilliant product called aiSee. aiSee came out of the German university area one decade ago and is now being marketed commercially by AbsInt - Angewandte Informatik, Saarbrücken, Germany. You can download a free 30-day trial license. aiSee can be registered for free for non-commercial use. Non-commercial use is educational, academic research and private use. Non-commercial users can get a license key that extends the usage period of the trial version until February 14, 2008. After that you will have to download aiSee again (and the usage period will be extended for another year, provided the usage is still non-commercial).

The two modes to use Wgraph

Wgraph is an interface between mediawiki and aiSee. It hides aiSee completely from the eyes of the user and adds a small additional abstraction layer to make graph definitions even more comfortable than with native aiSee.

  • The direct way to use wgraph is to invoke the parser function #wgraph with your WGL code as a parameter.
  • In combination with another mediawiki extension (called DPL: Dynamic Page List) you can even visualize structural aspects of your wiki as a wikigraph. In a wikigraph articles map to nodes, categories to nodetypes and relations are deduced from template calls.

With wgraph you can view a graph definition from different angles. You can hide certain nodes / edges and emphasize others. You can group nodes to subgraphs and show them in a special surrounding box. There are several layout strategies to choose from. You control the graphical representation of nodes and edges using shapes, colors, linestyles, arrows and even bitmap images. To avoid redundancy and reach a higher level of abstraction you can take advantage of the built-in WGL type concept.

Graphs are produced in png and svg format. In addition there is a png thumb image. Apart from viewing the generated graph in the browser, aiSee can be used as a local client application. This gives enhanced possibilities of edge concentration, subgraph folding etc. Make sure that you comply to the licensing terms of [1].

more to read .. Other stuff Gallery

A first example

WGL source orientation = top_to_bottom
node.color = lightyellow 		orientation = left_to_right
node.color = lightmagenta
node.shape = hexagon
node.width = 30
edge.color = red
Wgraph sample 1.wgl png | svg | 
 Wgraph sample 1.wgl
   node.color = lightyellow
 }}
png | svg | 
 Wgraph sample 1.wgl 
   orientation = left_to_right
   node.color = lightmagenta
   node.shape = hexagon
   node.width = 30
   edge.color = red
 }}
Retrieved from "http://followthescore.org/dpldemo/index.php?title=Wgraph&oldid=4559"