1. GD and GD::Graph
Chart::Clicker
GraphViz
SVG
Graphic Visualization
There is a Life after GD and GD::Graph
Uwe Voelker
XING AG
August 5th 2010
Uwe Voelker Graphic Visualization
2. GD and GD::Graph
History
Chart::Clicker
Examples
GraphViz
Code
SVG
History
1990 ImageMagick
1994 gdlib
1996 GD
1997 GD::Graph
1997 Image::Magick
2003 Book “Grafiken mit Perl” (GD, ImageMagick, Gimp)
Uwe Voelker Graphic Visualization
3. GD and GD::Graph
History
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
Uwe Voelker Graphic Visualization
4. GD and GD::Graph
History
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
Uwe Voelker Graphic Visualization
5. GD and GD::Graph
History
Chart::Clicker
Examples
GraphViz
Code
SVG
Code
use GD : : Graph : : b a r s ;
use GD : : Graph : : Data ;
my $ d a t a = GD : : Graph : : Data−>new ( [
[ qw/1 s t 2 nd 3 r d 4 t h 5 t h 6 t h 7 t h 8 t h 9 t h / ] ,
[ 1 , 2 , 5 , 6 , 3 , 1.5 , 1 , 3 , 4] ,
] ) o r d i e GD : : Graph : : Data−>e r r o r ;
my $ g r a p h = GD : : Graph : : b a r s −>new ; # 400 x 300
$graph−>s e t ( b a r s p a c i n g => 8 ,
s h a d o w d e p t h => 4 ,
shadowclr => ’ d r e d ’ ,
t r a n s p a r e n t => 0 ,
) o r warn $graph−>e r r o r ;
Uwe Voelker Graphic Visualization
6. GD and GD::Graph
History
Chart::Clicker
Examples
GraphViz
Code
SVG
Code
$graph−>p l o t ( $ d a t a ) o r d i e $graph−>e r r o r ;
open (OUT, ”>b a l k e n . png ” ) o r d i e $ ! ;
binmode OUT;
p r i n t OUT $graph−>gd−>png ;
c l o s e OUT;
Uwe Voelker Graphic Visualization
7. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
About
started 2006
current version 2.65, July 2010
http://github.com/gphat/chart-clicker/
http://www.onemogin.com/clicker/
Uwe Voelker Graphic Visualization
8. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
5
3
1
2 4 6 8 10
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
9. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
9
5
1
2 4 6 8 10
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
10. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
5
3
1
2 4 6 8 10
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
11. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
Series 0 Series 1 Series 2 Series 3
Uwe Voelker Graphic Visualization
12. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Examples
5
3
1
2 4 6 8 10
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
13. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Code
use Chart : : C l i c k e r ;
use Chart : : C l i c k e r : : Context ;
use C h a r t : : C l i c k e r : : Data : : Dat aSe t ;
use C h a r t : : C l i c k e r : : Data : : Marker ;
use C h a r t : : C l i c k e r : : Data : : S e r i e s ;
use C h a r t : : 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 $ c c = C h a r t : : C l i c k e r −>new (
w i d t h => 5 0 0 ,
h e i g h t => 2 5 0 ,
format => ’ p d f ’ ,
);
Uwe Voelker Graphic Visualization
14. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
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 = C h a r t : : C l i c k e r : : Data : : S e r i e s −>new (
keys => @hours ,
v a l u e s => [ 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 = C h a r t : : C l i c k e r : : Data : : S e r i e s −>new (
keys => @hours ,
v a l u e s => [ 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 = C h a r t : : C l i c k e r : : Data : : S e r i e s −>new (
keys => @hours ,
v a l u e s => [ qw/ . 3 1 . 4 1 . 2 1 . 5 4 . 0 3 . 5
2.0 1.9 2.7 4.2 3.2 1 . 1 / ] ) ;
Uwe Voelker Graphic Visualization
15. GD and GD::Graph
About
Chart::Clicker
Examples
GraphViz
Code
SVG
Code
my $ d s = C h a r t : : 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 ( $ d s ) ;
my $ a r e a = C h a r t : : 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 ) ;
$ a r e a −>b r u s h −>w i d t h ( 3 ) ;
my $ d e f = $cc−>g e t c o n t e x t ( ’ d e f a u l t ’ ) ;
$ d e f −>r e n d e r e r ( $ a r e a ) ;
$ d e f −>r a n g e a x i s −>t i c k v a l u e s ( [ qw( 1 3 5 ) ] ) ;
$ d e f −>r a n g e a x i s −>format ( ’%d ’ ) ;
$ d e f −>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 ) ] ) ;
$ d e f −>d o m a i n a x i s −>format ( ’%d ’ ) ;
$ d e f −>d o m a i n a x i s −>f u d g e a m o u n t ( . 0 5 ) ;
$cc−>w r i t e o u t p u t ( ’ b a r . p d f ’ ) ;
Uwe Voelker Graphic Visualization
16. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
About
graph visualization software
different renderers
http://www.graphviz.org/
Uwe Voelker Graphic Visualization
17. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples
name
1
C-I institute
name
n 1
course S-I
n
code n
S-C m
student name
grade
number
Uwe Voelker Graphic Visualization
19. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples - simple dot file
digraph test {
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=” F a r ” ] ;
London −> P a r i s ;
P a r i s −> London ;
}
Uwe Voelker Graphic Visualization
20. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples - image map
d i g r a p h mainmap {
input [ URL=”N” , i d=”N” ] ;
command [ URL=” N” , i d=”N” ] ;
o u t p u t [ URL=”N” , i d=”N” ] ;
i n p u t −> command −> o u t p u t ;
}
Uwe Voelker Graphic Visualization
21. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples - image map
my $ f i l e = $ARGV [ 1 ] | | ’ x . dot ’ ;
# generate f i l e s
‘ d o t −Tcmapx np −o o u t . map −T g i f −o o u t . g i f $ f i l e ‘ ;
# r e a d image map
my @map = r e a d f i l e ( ’ o u t . map ’ ) ;
my %node = ( ) ;
f o r e a c h ( r e a d f i l e ( ’ o u t . map ’ ) ) {
i f (/< a r e a .+ i d=” ( [ ˆ ” ]+) ” .+ c o o r d s=” ( [ ˆ ” ]+) ” / ) {
$node { $1 } = [ s p l i t / , / , $2 ] ;
}
}
Uwe Voelker Graphic Visualization
22. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples - image map
my $app = sub {
my $ r e q = P l a c k : : Request −>new ( s h i f t ) ;
my $x = $req −>param ( ’ image . x ’ ) | | 0 ;
my $y = $req −>param ( ’ image . y ’ ) | | 0 ;
my $message = ’ ’ ;
f o r e a c h 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 . ” ;
last ;
}
}
Uwe Voelker Graphic Visualization
23. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Examples - image map
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 =”o u t . g i f ”> ’ .
’</form><p> ’ . $message . ’</p></body></html> ’ ) ;
r e t u r n $ r e s −> f i n a l i z e ;
};
builder {
e n a b l e ’ S t a t i c ’ , p a t h => q r / o u t . ( g i f | map ) / ;
$app ;
};
Uwe Voelker Graphic Visualization
24. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
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
Uwe Voelker Graphic Visualization
27. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
Hints - layout
use rank and randir
use invisible cluster to group nodes
reverse arrows
read the manual and FAQ
Uwe Voelker Graphic Visualization
28. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
GraphViz + Devel::NYTProf
sub add {
$sum += $ f o r e a c h ( @ ) ;
r e t u r n $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 ∗= $ f o r e a c h ( @ ) ;
return $product ;
}
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 ) ) ;
Uwe Voelker Graphic Visualization
29. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
GraphViz + Devel::NYTProf
main
main::RUNTIME
main::add main::CORE:print main::square
main::multiply
Uwe Voelker Graphic Visualization
30. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
GraphViz.pm
use G r a p h V i z ;
my $g = GraphViz−>new ( ) ;
$g−>a d d n o d e ( ’ London ’ ) ;
$g−>a d d n o d e ( ’ P a r i s ’ , l a b e l => ’ C i t y o f n l u r v e ’ ) ;
$g−>a d d n o d e ( ’New York ’ ) ;
$g−>a d d e d g e ( ’ London ’ => ’ P a r i s ’ ) ;
$g−>a d d e d g e ( ’ London ’ => ’New York ’ , l a b e l => ’ F a r ’
$g−>a d d e d g e ( ’ P a r i s ’ => ’ London ’ ) ;
$g−>a s p n g ( ’ o u t . png ’ ) ;
Uwe Voelker Graphic Visualization
31. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
GraphzViz.pm
London
Far
City of
New York
lurve
Uwe Voelker Graphic Visualization
32. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
GraphViz.pm
a little bit outdated (no big changes since 5 years)
some parameters incomplete (rankdir)
some output formats missing (PDF, EPS)
Uwe Voelker Graphic Visualization
33. About
GD and GD::Graph
Examples
Chart::Clicker
Hints
GraphViz
GraphViz + Devel::NYTProf
SVG
GraphViz.pm
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?
Uwe Voelker Graphic Visualization
34. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
About
Scalable Vector Graphics
XML dialect
http://www.w3.org/TR/SVG/
Uwe Voelker Graphic Visualization
35. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
Examples
http://www.mein-kreditmanager.de/
supplier of business informations (solvency)
SVG is generated with Template::Toolkit
rasterized on server side to PNG
Uwe Voelker Graphic Visualization
36. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
Examples
Uwe Voelker Graphic Visualization
37. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
Examples
Uwe Voelker Graphic Visualization
38. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
Examples
Uwe Voelker Graphic Visualization
39. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
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)
Uwe Voelker Graphic Visualization
40. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
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/
Uwe Voelker Graphic Visualization
41. GD and GD::Graph About
Chart::Clicker Examples
GraphViz Rasterizer
SVG BatikServer
Questions?
Uwe Voelker Graphic Visualization
