graphic visualization

GD and GD::GraphChart::Clicker

GraphVizSVG

Graphic VisualizationThere is a Life after GD and GD::Graph

Uwe Voelker

XING AG

August 5th 2010

Uwe Voelker Graphic Visualization


GraphVizSVG

HistoryExamplesCode

History

1990 ImageMagick

1994 gdlib

1996 GD

1997 GD::Graph

1997 Image::Magick

2003 Book “Grafiken mit Perl” (GD, ImageMagick, Gimp)



GraphVizSVG

HistoryExamplesCode

Examples



GraphVizSVG

HistoryExamplesCode

Code

use GD : : Graph : : b a r s ;use GD : : Graph : : Data ;

my $data = GD : : Graph : : Data−>new ( [[qw/1 s t 2nd 3 rd 4 th 5 th 6 th 7 th 8 th 9 th / ] ,[ 1 , 2 , 5 , 6 , 3 , 1 . 5 , 1 , 3 , 4 ] ,

] ) o r die GD : : Graph : : Data−>e r r o r ;

my $graph = GD : : Graph : : bars−>new ; # 400 x 300$graph−>s e t ( b a r s p a c i n g => 8 ,

shadow depth => 4 ,s h a d o w c l r => ’ d red ’ ,t r a n s p a r e n t => 0 ,

) o r warn $graph−>e r r o r ;



GraphVizSVG

HistoryExamplesCode

Code

$graph−>p l o t ( $data ) o r die $graph−>e r r o r ;

open (OUT, ”>b a l k e n . png” ) or die $ ! ;binmode OUT;p r i n t OUT $graph−>gd−>png ;c lose OUT;



GraphVizSVG

AboutExamplesCode

About

started 2006

current version 2.65, July 2010

http://github.com/gphat/chart-clicker/

http://www.onemogin.com/clicker/


http://github.com/gphat/chart-clicker/

http://www.onemogin.com/clicker/


GraphVizSVG

AboutExamplesCode

Examples

2 4 6 8 10

1

3

5

Series 0 Series 1 Series 2



GraphVizSVG

AboutExamplesCode

Examples

2 4 6 8 10

1

5

9




GraphVizSVG

AboutExamplesCode

Examples

2 4 6 8 10

1

3

5




GraphVizSVG

AboutExamplesCode

Examples

Series 0 Series 1 Series 2 Series 3



GraphVizSVG

AboutExamplesCode

Examples

2 4 6 8 10

1

3

5




GraphVizSVG

AboutExamplesCode

Code

use Chart : : C l i c k e r ;use Chart : : C l i c k e r : : Context ;use Chart : : C l i c k e r : : Data : : DataSet ;use Chart : : C l i c k e r : : Data : : Marker ;use Chart : : C l i c k e r : : Data : : S e r i e s ;use Chart : : C l i c k e r : : R e n d e r e r : : Bar ;use Geometry : : P r i m i t i v e : : R e c t a n g l e ;use G r a p h i c s : : C o l o r : : RGB;

my $cc = Chart : : C l i c k e r−>new (width => 500 ,h e i g h t => 250 ,format => ’ pd f ’ ,

) ;



GraphVizSVG

AboutExamplesCode

Code

my @hours = qw/1 2 3 4 5 6 7 8 9 10 11 1 2 / ;

my $ s e r i e s 1 = Chart : : C l i c k e r : : Data : : S e r i e s−>new (keys => \@hours ,va lues => [qw/ 5 . 8 5 . 0 4 . 9 4 . 8 4 . 5 4 . 2 5

3 . 5 2 . 9 2 . 5 1 . 8 . 9 . 8 / ] ) ;my $ s e r i e s 2 = Chart : : C l i c k e r : : Data : : S e r i e s−>new (

keys => \@hours ,va lues => [qw/ . 7 1 . 1 1 . 7 2 . 5 3 . 0 4 . 5

5 . 0 4 . 9 4 . 7 4 . 8 4 . 2 4 . 4 / ] ) ;my $ s e r i e s 3 = Chart : : C l i c k e r : : Data : : S e r i e s−>new (

keys => \@hours ,va lues => [qw/ . 3 1 . 4 1 . 2 1 . 5 4 . 0 3 . 5

2 . 0 1 . 9 2 . 7 4 . 2 3 . 2 1 . 1 / ] ) ;



GraphVizSVG

AboutExamplesCode

Code

my $ds = Chart : : C l i c k e r : : Data : : DataSet−>new (s e r i e s => [ $ s e r i e s 1 , $ s e r i e s 2 , $ s e r i e s 3 ] ) ;

$cc−>a d d t o d a t a s e t s ( $ds ) ;my $ a r e a = Chart : : C l i c k e r : : R e n d e r e r : : Bar−>new (

o p a c i t y => . 6 ) ;$area−>brush−>width ( 3 ) ;my $ d e f = $cc−>g e t c o n t e x t ( ’ d e f a u l t ’ ) ;$def−>r e n d e r e r ( $ a r e a ) ;$def−>r a n g e a x i s−>t i c k v a l u e s ( [qw(1 3 5 ) ] ) ;$def−>r a n g e a x i s−>format ( ’%d ’ ) ;$def−>d o m a i n a x i s−>t i c k v a l u e s ( [qw(2 4 6 8 1 0 ) ] ) ;$def−>d o m a i n a x i s−>format ( ’%d ’ ) ;$def−>d o m a i n a x i s−>fudge amount ( . 0 5 ) ;$cc−>w r i t e o u t p u t ( ’ bar . pdf ’ ) ;



GraphVizSVG

AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm

About

graph visualization software

different renderers

http://www.graphviz.org/


http://www.graphviz.org/


GraphVizSVG


Examples

course

C-I

n

ins t i tu te

n a m e

S-I

1

s t u d e n t n a m e

gradenumber

S-C m

n a m e

code

1

nn



GraphVizSVG


Examples

0x10ba8

0xf7fc4380

-1

0xf7fc44b8

2

3 .43322790286038071e-06

44.79998779296875

0

0xf7fc4380

2

(nil)

-1

0xf7fc4380

1

(nil)

-1

0xf7fc4380

2

(nil)

-1

(nil)

-1

(nil)

-1

0xf7fc43e0

1



GraphVizSVG


Examples - simple dot file

d i g r a p h t e s t {London ;P a r i s [ l a b e l=” C i t y o f \ n l u r v e ” ] ;”New York ” ;

London −> ”New York ” [ l a b e l=” Far ” ] ;London −> P a r i s ;P a r i s −> London ;

}



GraphVizSVG


Examples - image map

d i g r a p h mainmap {i n p u t [ URL=”\N” , i d=”\N” ] ;command [ URL=”\N” , i d=”\N” ] ;output [ URL=”\N” , i d=”\N” ] ;

i n p u t −> command −> output ;}



GraphVizSVG



my $ f i l e = $ARGV [ 1 ] | | ’ x . dot ’ ;

# gene r a t e f i l e s‘ dot −Tcmapx np −oout .map −T g i f −oout . g i f $ f i l e ‘ ;

# read image mapmy @map = r e a d f i l e ( ’ out . map ’ ) ;my %node = ( ) ;foreach ( r e a d f i l e ( ’ out . map ’ ) ) {

i f (/< a r e a .+ i d=” ( [ ˆ ” ]+) ” .+ c o o r d s=” ( [ ˆ ” ]+) ” /) {$node{$1} = [ s p l i t / , / , $2 ] ;

}}



GraphVizSVG



my $app = sub {my $r eq = Plack : : Request−>new ( s h i f t ) ;my $x = $req−>param ( ’ image . x ’ ) | | 0 ;my $y = $req−>param ( ’ image . y ’ ) | | 0 ;

my $message = ’ ’ ;foreach my $ i d ( keys %node ) {

my @c = @{$node{ $ i d }} ;i f ( $x >= $c [ 0 ] and $x <= $c [ 2 ] and

$y >= $c [ 1 ] and $y <= $c [ 3 ] ) {$message = ” H i t $ i d . ” ;l a s t ;

}}



GraphVizSVG



my $ r e s = $req−>n e w r e s p o n s e ( 2 0 0 ) ;$ r e s−>c o n t e n t t y p e ( ’ t e x t / html ’ ) ;$ r e s−>body ( ’<html><body><form> ’ .

’< i n p u t t y p e=”image ” name=”image ” s r c =”out . g i f ”> ’ .’</form><p> ’ . $message . ’</p></body></html> ’ ) ;

return $ r e s−> f i n a l i z e ;} ;

b u i l d e r {e n a b l e ’ S t a t i c ’ , path => qr / out . ( g i f |map ) / ;$app ;

} ;



GraphVizSVG


Hints - different renderer

dot hierarchical graphs, short edges, no crossings

neato “spring model”, compact graphs

twopi radial graphs, concentric circles

circo circular layout, for cyclic structures



GraphVizSVG


Hints - output

dot -Tpdf input.dot > output.pdf

smaller margins

dot -Teps input.dot > output.eps

epstopdf output.eps



GraphVizSVG


Hints - layout

use rank and randir

use invisible cluster to group nodes

reverse arrows

read the manual and FAQ



GraphVizSVG


GraphViz + Devel::NYTProf

sub add {$sum += $ foreach ( @ ) ;return $sum ;

}

sub m u l t i p l y {my $ p r o d u c t = 1 ;$ p r o d u c t ∗= $ foreach ( @ ) ;return $ p r o d u c t ;

}

sub s q u a r e { m u l t i p l y ( $ [ 0 ] , $ [ 0 ] ) }

p r i n t m u l t i p l y ( s q u a r e ( 2 ) , add ( 1 , 3 ) ) ;



GraphVizSVG


GraphViz + Devel::NYTProf

main

main::add

main::multiply

main::RUNTIME

main::CORE:print main: :square



GraphVizSVG


GraphViz.pm

use GraphViz ;

my $g = GraphViz−>new ( ) ;

$g−>add node ( ’ London ’ ) ;$g−>add node ( ’ P a r i s ’ , l a b e l => ’ C i t y o f \ n l u r v e ’ ) ;$g−>add node ( ’New York ’ ) ;

$g−>add edge ( ’ London ’ => ’ P a r i s ’ ) ;$g−>add edge ( ’ London ’ => ’New York ’ , l a b e l => ’ Far ’ ) ;$g−>add edge ( ’ P a r i s ’ => ’ London ’ ) ;

$g−>a s p n g ( ’ out . png ’ ) ;



GraphVizSVG


GraphzViz.pm

London

City oflurve

New York

Far



GraphVizSVG


GraphViz.pm

a little bit outdated (no big changes since 5 years)

some parameters incomplete (rankdir)

some output formats missing (PDF, EPS)

Anyone interested in improving?



GraphVizSVG

AboutExamplesRasterizerBatikServer

About

Scalable Vector Graphics

XML dialect

http://www.w3.org/TR/SVG/


http://www.w3.org/TR/SVG/


GraphVizSVG


Examples

http://www.mein-kreditmanager.de/

supplier of business informations (solvency)

SVG is generated with Template::Toolkit

rasterized on server side to PNG


http://www.mein-kreditmanager.de/


GraphVizSVG


Examples



GraphVizSVG


Rasterizer

Batik http://xmlgraphics.apache.org/batik/

Inkscape http://www.inkscape.org/

http://wiki.inkscape.org/wiki/index.php/

CompilingStatic

ImageMagick http://www.imagemagick.org/ (convert)


http://xmlgraphics.apache.org/batik/

http://www.inkscape.org/

http://wiki.inkscape.org/wiki/index.php/CompilingStatic

http://wiki.inkscape.org/wiki/index.php/CompilingStatic

http://www.imagemagick.org/


GraphVizSVG


BatikServer

Batik rasterizer as deamon

handelsauskunft.com uses patched 0.3.1

https://code.gocept.com/svn/websvn/listing.php?

repname=gocept&path=/BatikServer/trunk/


https://code.gocept.com/svn/websvn/listing.php?repname=gocept&path=/BatikServer/trunk/

https://code.gocept.com/svn/websvn/listing.php?repname=gocept&path=/BatikServer/trunk/


GraphVizSVG


Questions?


graphic visualization

Technology

r e c t

defr e n d e r e r

datasetnew s e r i e

r e n t

s e r i e s use chart

s e r i e snew keys

s e t s

datae r r o r