Data Visualisation
Contents
GraphViz for diagram construction
GraphViz with MySQL in a pipeline
Generating SVG (Scaleable Vector Graphics)
Generating Client side Image map
Continuous Graphs with Gnuplot
Other examples
Software
On unix pathname is:
/usr/local/graphviz/bin/
GraphViz for Diagram Construction
GraphViz is a set of tools developed at AT & T for automated graph layout. The GraphViz dot program generates a digraph from a textual definition of the graph written in the ‘dot’ language. This defines the nodes and edges of the graph, the labels to be placed on nodes and edges and of a large set of options of appearance and layout. This file is then processed to generate any of a wide range of images formats, including GIF and JPEG.
The graph specification can be very simple: Here is an example of a simple process model:
digraph pcspec {
initReq -> req;
req
-> procSpec -> pcSpec;
req -> diskSpec -> pcSpec;
req
-> ioSpec -> pcSpec;
req
-> otherSpec -> pcSpec;
pcSpec -> reviewedSpec;
reviewedSpec -> approvedSpec ;
reviewedSpec -> rejectedSpec ;
rejectedSpec -> req;
approvedSpec -> customerConfiguation;
}
Run through the dot program, this creates the graph:
Simple ER models can be constructed in a similar manner:
digraph x {
node
[shape=record];
emp
[label= "{Emp | empno | ename \n job \ hiredate \n \ sal \ comm}"];
dept
[label ="{Dept | deptno | dname \n location }"];
emp
-> emp [arrowhead=crow label =
"mgr" ];
dept
-> emp [arrowhead=crow];
}
With GraphViz we achieve a separation of the logical content of a diagram (expressed in textual form) from the layout of the graph. The textual form can be written using any text editor. Additional power is gained when the file is generated from other sources, perhaps by developing a simple processor to convert data in one format (say as SQL DDL statements) into the dot language, and hence into a visual form.
GraphViz with MySQL in a Pipeline
One use of tools like GraphViz is to visualise relationships in databases. Here is a simple example using the sample emp-dept-salgrade database.
Recall that the
First, extract the employee names and the names of their manager:
use emp;
select e.ename, m.ename
from emp e, emp m
where e.mgr = m.empno;
When run in batch mode, mysql produces a table in which fields are tab separated:
ename ename
SMITH
ALLEN BLAKE
WARD BLAKE
JONES KING
BLAKE KING
CLARK KING
SCOTT JONES
TURNER BLAKE
ADAMS SCOTT
JAMES BLAKE
MILLER
MARTIN BLAKE
A simple Perl script will convert this into the DOT format for a directed graph:
print "digraph hierarchy { \n";
$heading = <>;
while ($line = <>) {
chop($line);
($ename, $mname) = split ('\t', $line);
print " $ename -> $mname ;\n";
}
print "}\n";
The output from this script will be a dot format file like:
digraph hierarchy {
SMITH ->
ALLEN -> BLAKE ;
WARD -> BLAKE ;
JONES -> KING ;
BLAKE -> KING ;
SCOTT -> JONES ;
TURNER -> BLAKE ;
JAMES -> BLAKE ;
MILLER ->
MARTIN -> BLAKE ;
}
If this file is then input to the GraphViz dot program, selecting GIF format as output:
Using the command prompt in Windows or Unix, these transformations can be combined into a single data flow:
mysql
< hier.sql | perl hier.pl | dot –Tgif > hier.gif
[Full program pathnames may be required in your environment if the synonyms are not defined]
GraphViz for DFD production
If you would rather see that data flow as a graph, you could draw by hand using a package like Visio, or in a Case tool like Select SSADM.
An alternative is to specify it as a directed graph in the GraphViz language and get GraphViz to layout the diagram:
Here is the dot file :
digraph pipe {
rankdir=LR;
MYSQL [ shape=box];
DOT [ shape=box];
df1 [shape=circle];
df2 [shape=circle];
empDB [shape=house]
"-Tgif" [shape=invtriangle];
empDB -> MYSQL;
"hier.sql" -> MYSQL;
MYSQL -> df1;
df1 ->
"hier.pl" ->
df2 -> DOT;
"-Tgif" -> DOT;
DOT -> "hier.gif";
}
and here the generated diagram: The symbol palette lacks some DFD symbols and I’ve had to improvise – the house instead of a data store, the inverted triangle to distinguish parametric data:
PHP generated Graphs
GraphViz is even more useful when it is used to generate graphs interactively. We can convert the application above to a PHP script by combining all of the steps into a single script. For a bit of interest, I’ve added one parameter- the name of a person to highlight in the hierarchy, and drawn the graph top-down (by reversing the order of manager name and employee name). Here’s the link to run this script:
You can change the name passed in the URL to highlight a different employee. In practice, an HTML file containing a form could be used to provide this parameter.
Source: hier2gif.php
More complex graphs
We can add nodes and links to the graph as we need: For example, we could include links from emp to dept, and make the dept nodes a different shape:
Run: org2gif.php
Script: org2gif.php
PHP Generated SVG
A more interactive approach is to generate SVG, since this also allows us to embed links in the graph. Here, each node links to a script to display the employee’s full details.
You will need the Adobe SVG viewer in your browser to load these SVG files.
Run: hier2svg.php
Script : hier2svg.php
Script : showemp.php
Only the last lines of the script need be changed to generate SVG
//set output to be SVG
header("Content-type: image/svg+xml");
//execute the dot program and pass thru the output back to the client
passthru("echo ‘$f’ | /pub_domain/GraphViz/bin/dot -Tsvg");
To make the graph interactive, add URLs to the dot file. To put links on each node, we need to add a query to retrieve all the employee names, and for each, add a line to the dot file to specify the URL. e.g.
$f .= " $name [shape=box, URL=\"showemp.php?name=$name\"];\n";
You need to be very careful to get the header exactly as defined in the example.
PHP Generated Client Side map
Another, perhaps more portable approach, to generating interactive graphs is to use client side maps in HTML.
Run: hier2cmap.php
Script : hier2cmap.phps
Note that two processes are now required, one to create the image map (using the output mode CMAP), the other to create the image itself. In this simple example, I’ve just used the existing hier2gif.php for the image but this approach processes the database twice. A better approach would be to generate a temporary image file:
Run: hier2cmap2.php
The advantage of the HTML client map approach is that it is easier to integrate the map with JavaScript on the same page. The detailed information can be loaded into a separate frame to the graph. The map generated by Graphviz needs a bit of post-processing because the target attribute cannot be generated.
Run: hiercmap.html
Script: hier2cmap3.phps
A further advantage is that the image map is more accurate – the hot area is the whole node, not just the name as it seems to be with SVG.
Embedded SVG
Whilst a gif file can be embedded in an HTML document using the img tag:
<img src=makegif.php>
an SVG file needs to be embedded using the form:
<embed source=”hier2svg.php”
width=”1000” height=”1000”/>