Stop data retention! Click here & act! Are you a webmaster and want to participate? Here you can find all necessary material for your website - Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:
Chris Karakas Online Forum Index Karakas Online
 FAQFAQ   Forum SearchForum Search   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
How to use Graphviz to generate complex graphs



 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.
   Chris Karakas Online Forum Index -> Computer Graphics Forum RSS Feed of this Forum
Share this page: These icons link to social bookmarking sites where readers can share and discover new web pages.Digg  del.icio.us  tc.eserver.org  Blinklist  Furl  Reddit  Blogmarks  Magnolia  Sphere  Yahoo!  Google  Windows Live  Technorati  Blue Dot  Simpy  Newsvine  Stumble Upon  co.mments.com  Blinkbits  BlogMemes  Connotea  View previous topic :: View next topic  
Author Message
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Sun May 22, 2005 9:19 pm    Post subject: How to use Graphviz to generate complex graphs
Reply with quote

Question Problem: You want to visualize complex structural information with a graph. In a first stroke of over-optimism, you decide to do the layout yourself, using your favourite presentation program. Unfortunately, as it turns out, you are not as good in layouting as you thought. Your graph looks packed with colourful objects, fully interconnected with arrows in such a way that it misses its original objective: to convey structural information in a well-formatted way.

Arrow Example: The following graph was an attempt to convey the complex information that surrounds the topic of the semantic web:

See From Past to Future (Old) for an enlargement.

Image

Clearly, even if every inch of available real estate was used in this graph, there is still room for improvement. Wink

Idea Idea: A graph contains structural information. What most people do however, is spend all their time in formatting the graph. The situation is similar to document processing: a document contains (besides its content per se) also structural information: you have chapters, sections, paragraphs, lists, images... But instead of concentrating on the content and the structural information, most people spend their time in trying to format their documents, in an attempt to make them "look nice". There we have word processors, here presentation software. Here and there the problem is the same: we spend too much time in formatting issues and neglect content and structure. The solution in both situations is to concentarte on the latter and leave the former to automatic tools. For documents, those tools are SGML and XML processors, together with the aproppriate DSSSL or XSL stylesheets. For graphs, the tools are the Graphviz suite.

Graphviz is open source graph visualization software. It has several main graph layout programs. It also has web and interactive graphical interfaces, and auxiliary tools, libraries, and language bindings.

The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in several useful formats such as images and SVG for web pages, Postscript for inclusion in PDF or other documents; or display in an interactive graph browser. (Graphviz also supports GXL, an XML dialect.)

Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.

The solution to our problem can only be along the lines of using Graphviz. In my next post, I will describe how. Stay tuned! Very Happy
_________________
Regards

Chris Karakas
www.karakas-online.de
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Sun May 22, 2005 10:12 pm    Post subject:
Reply with quote

Arrow Solution: Download the latest version of Graphviz, compile and install it on your system. You need a recent version of Graphviz because some features we will need (custom shapefiles, for example) are fully (and comfortably) supported only in the recent 2.2.x versions. In case you would prefer to install RPMs, I have compiled them for you in Binary and source RPM packages for Graphviz.

Open a plain text file in your favourite text editor. We will use this file to store all structural information about our graph. The formatting we be done automatically by Graphviz, so we don't need to care about it at the moment.

We start our graph by typing:

Code:

digraph G {
        compound=true;
        ranksep=1.25;
        label="From Past to Future...";

        node [shape=plaintext, fontsize=16];

        bgcolor=white;
        edge [arrowsize=1, color=black];


With "digraph" we start a "directed graph". We need the "compound" attribute to make Graphviz combine our graph from smaller "subgraph clusters". A "ranksep" of 1.25 inch separates the horizontal layers a bit more from each other than the default of 0.75 inch, so that the arrow lines don't mess up with the labels of the persons in the graph (I determined this with a bit of experimentation).

Each subgraph cluster will contain only one node: an icon file without label. But since we have defined it as a cluster, we are allowed to add a label. Thus, each node of our graph consists of a subgraph cluster that holds an icon and a label. The "Computers" node, for example, is represented in our graph file by the cluster_Computers subgraph:

Code:

        subgraph cluster_Computers {label="Computers"; labelloc="b"; Computers_icon};
        Computers_icon [label="", shape=box, style=invis, shapefile="Computers.png"];


There are some things to note here:

  • We use a custom shape of type "box", taken from a custom shapefile which varies from node to node (more technically, from cluster to cluster).
  • We must use "cluster" as a prefix in the subgraph's name, otherwise it will not be identified as being a cluster by Graphviz.
  • A subgraph must be a cluster, if we want to display a label. And we have to use a cluster label, because there is no other way to attach a label to our shapefile (i.e. to our icons). If you try a non-empty label for Computers_icon, for example, you will find out that it is mixed with the Computers.png icon, appearing in its very center, instead of somewhere below it. Unfortunately, there is no way to specify a position for the label of Computers_icon.


Our graph nodes are thus:

Code:

        subgraph cluster_Semantic_Web {label="Semantic Web"; labelloc="b"; Semantic_Web_icon};
        Semantic_Web_icon [label="", shape=box, style=invis, shapefile="Semantic_Web.png"];
                 
        subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon};
        Cryptography_icon [label="", shape=box, style=invis, shapefile="Cryptography.png"];
                 
        subgraph cluster_Automata {label="Automata"; labelloc="b"; Automata_icon};
        Automata_icon [label="", shape=box, style=invis, shapefile="Automata.png"];


and so on. What is missing now is the structural information of "who points to whom". From our original graph we deduce that, for example:

  • "Computers" points to "Sematic Web" and vice versa.
  • "Cryptography" points to "Semantic Web" and "Computers".
  • "Automata" points to "Computers".


We capture this information in our file as follows:

Code:

        Computers_icon -> Semantic_Web_icon;
        Semantic_Web_icon -> Computers_icon;
        Cryptography_icon -> Semantic_Web_icon;
        Cryptography_icon -> Computers_icon;
        Automata_icon -> Computers_icon;


Finally, we set the rank of the "person nodes" of Turing, Rajewski, Dertouzos and Berners-Lee to be equal with each other, so that those persons appear all on the same layer:

Code:

        { rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon };


After looking at the result, I decided to do the same with "Social Networks", "Biology" and "AI". In other words, I decided to put "Social Networks" on the same layer as the other two - otherwise it would appear on the same layer as the persons and I felt this would be semantically misleading (although structurally correct):

Code:

        { rank=same; Biology_icon; AI_icon; Social_Networks_icon };


We are almost finished! All we still have to do is find the aproppriate icons (I just used the image search facility of my favourite search engine for most of them), scale them down and save them in the image files whose names were given in the shapefile attributes in the code of the subgraph clusters above.

In my next post, I will assemble the whole solution for you. Stay tuned! Very Happy
_________________
Regards

Chris Karakas
www.karakas-online.de
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Sun May 22, 2005 10:48 pm    Post subject:
Reply with quote

For our custom shapes we use the following icons:



The whole text file that describes our graph in the Dot language is from-past-to-future.dot:

Code:

digraph G {
        compound=true;
        ranksep=1.25;
        label="From Past to Future...";

        node [shape=plaintext, fontsize=16];

        bgcolor=white;
        edge [arrowsize=1, color=black];

        /* Nodes */
        subgraph cluster_Computers {label="Computers"; labelloc="b"; Computers_icon};
        Computers_icon [label="", shape=box, style=invis, shapefile="Computers.png"];

        subgraph cluster_Semantic_Web {label="Semantic Web"; labelloc="b"; Semantic_Web_icon};
        Semantic_Web_icon [label="", shape=box, style=invis, shapefile="Semantic_Web.png"];

        subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon};
        Cryptography_icon [label="", shape=box, style=invis, shapefile="Cryptography.png"];

        subgraph cluster_Automata {label="Automata"; labelloc="b"; Automata_icon};
        Automata_icon [label="", shape=box, style=invis, shapefile="Automata.png"];

        subgraph cluster_AI {label="A.I."; labelloc="b"; AI_icon};
        AI_icon [label="", shape=box, style=invis, shapefile="AI.png"];
               
        subgraph cluster_Chaos {label="Chaos / Fractals"; labelloc="b"; Chaos_icon};
        Chaos_icon [label="", shape=box, style=invis, shapefile="Chaos.png"];
               
        subgraph cluster_XML {label="XML / RDF / URI"; labelloc="b"; XML_icon};
        XML_icon [label="", shape=box, style=invis, shapefile="XML.png"];
               
        subgraph cluster_Ontology {label="Ontology / Clustering"; labelloc="b"; Ontology_icon};
        Ontology_icon [label="", shape=box, style=invis, shapefile="Ontology.png"];
               
        subgraph cluster_Biology {label="Biology / Neurons"; labelloc="b"; Biology_icon};
        Biology_icon [label="", shape=box, style=invis, shapefile="Biology.png"];
               
        subgraph cluster_Agents {label="Agents / Security"; labelloc="b"; Agents_icon};
        Agents_icon [label="", shape=box, style=invis, shapefile="Agents.png"];
               
        subgraph cluster_Small_World {label="The Small World Project"; labelloc="b"; Small_World_icon};
        Small_World_icon [label="", shape=box, style=invis, shapefile="Small_World.png"];
               
        subgraph cluster_Social_Networks {label="Social Networks"; labelloc="b"; Social_Networks_icon};
        Social_Networks_icon [label="", shape=box, style=invis, shapefile="Social_Networks.png"];

        subgraph cluster_Search_Engines {label="Search Engines"; labelloc="b"; Search_Engines_icon};
        Search_Engines_icon [label="", shape=box, style=invis, shapefile="Search_Engines.png"];

        subgraph cluster_Turing {label="A. Turing"; labelloc="b"; Turing_icon};
        Turing_icon [label="", shape=box, style=invis, shapefile="Turing.png"];
               
        subgraph cluster_Rejewski {label="M. Rejewski"; labelloc="b"; Rejewski_icon};
        Rejewski_icon [label="", shape=box, style=invis, shapefile="Rejewski.png"];
               
        subgraph cluster_Dertouzos {label="M. Dertouzos"; labelloc="b"; Dertouzos_icon};
        Dertouzos_icon [label="", shape=box, style=invis, shapefile="Dertouzos.png"];
               
        subgraph cluster_Berners_Lee {label="T. Berners-Lee"; labelloc="b"; Berners_Lee_icon};
        Berners_Lee_icon [label="", shape=box, style=invis, shapefile="Berners_Lee.png"];

        /* Relationships */
        Computers_icon -> Semantic_Web_icon;
        Semantic_Web_icon -> Computers_icon;
        Cryptography_icon -> Semantic_Web_icon;
        Cryptography_icon -> Computers_icon;
        Automata_icon -> Computers_icon;
        AI_icon -> Automata_icon;
        Automata_icon -> AI_icon;
        Chaos_icon -> Computers_icon;
        Chaos_icon -> AI_icon;
        AI_icon -> Chaos_icon;
        Computers_icon -> Chaos_icon;
        XML_icon -> Semantic_Web_icon;
        XML_icon -> Computers_icon;
        Computers_icon -> XML_icon;
        Ontology_icon -> Semantic_Web_icon;
        Biology_icon -> AI_icon;
        Biology_icon -> Chaos_icon;
        Chaos_icon -> Biology_icon;
        Chaos_icon -> Semantic_Web_icon;
        Agents_icon -> Semantic_Web_icon;
        Semantic_Web_icon -> Agents_icon;
        Agents_icon -> AI_icon;
        AI_icon -> Agents_icon;
        Small_World_icon -> Chaos_icon;
        Small_World_icon -> Agents_icon;
        Small_World_icon -> Biology_icon;
        Biology_icon -> Small_World_icon;
        Social_Networks_icon -> Small_World_icon;
        Social_Networks_icon -> Biology_icon;
        Search_Engines_icon -> Semantic_Web_icon;
        Computers_icon -> Search_Engines_icon;
        Turing_icon -> Cryptography_icon;
        Turing_icon -> Computers_icon;
        Turing_icon -> Automata_icon;
        Rejewski_icon -> Turing_icon;
        Rejewski_icon -> Cryptography_icon;
        Dertouzos_icon -> Computers_icon;
        Dertouzos_icon -> Berners_Lee_icon;
        Berners_Lee_icon -> Semantic_Web_icon;


        { rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon };
        { rank=same; Biology_icon; AI_icon; Social_Networks_icon };

}


Once we have the Dot file and the image files in the same directory, we can type:

Code:

dot -Tpng -ofrom-past-to-future.png from-past-to-future.dot


This will produce a nicely laid out image file, from-past-to-future.png:

See From Past to Future (New) for an enlargement.

Image

Now, compare this graph with the original one at the start of this thread! Wink

If you want to experiment yourself, I have assembled a tar archive that contains all the necessary files, both .dot and .png:

from-past-to-future.tgz

Enjoy! Very Happy
_________________
Regards

Chris Karakas
www.karakas-online.de
Back to top
View user's profile Send private message Send e-mail Visit poster's website
tecshine
Private
Private


Joined: 29 May 2008
Posts: 1

PostPosted: Thu May 29, 2008 2:14 pm    Post subject: Problem with label for the image
Reply with quote

Hi

I am using similar code in my application. But I want a label to be displayed on the image. How can I do this??

Even when I use it like this , I do not get a label on the cryptographyicon.

subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon};
Cryptography_icon [label="Label to be Displayed", shape=box, style=invis, shapefile="Cryptography.png"];


However if I remove style=invis for the icon, I get a label but that has a rectangle surrounding it.

subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon};
Cryptography_icon [label="Label to be Displayed", shape=box, shapefile="Cryptography.png"];


Can you suggest anything

Thanks
Sushmitha
Back to top
View user's profile Send private message
karajon
Private
Private


Joined: 15 Mar 2011
Posts: 1

PostPosted: Tue Mar 15, 2011 11:45 am    Post subject: How may i start to generate a computer graphics?
Reply with quote

Hello,

I finally read the top post on this forum and I find it very much interesting. I am so fund of the virtual graphics but I am just a little slow on how to generate it. I wanted to excel my action and learn how to so a computer graphics a little faster. For i find my work a little time consuming.

A response is highly appreciated.

Thank you!
Back to top
View user's profile Send private message
Share this page: These icons link to social bookmarking sites where readers can share and discover new web pages.Digg  del.icio.us  tc.eserver.org  Blinklist  Furl  Reddit  Blogmarks  Magnolia  Sphere  Yahoo!  Google  Windows Live  Technorati  Blue Dot  Simpy  Newsvine  Stumble Upon  co.mments.com  Blinkbits  BlogMemes  Connotea 
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.
   Chris Karakas Online Forum Index -> Computer Graphics Forum
Page 1 of 1
This page contains valid HTML 4.01 Transitional - click here to check it!
This page contains a valid CSS - click here to check it!

 

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group