Graphic visualization
-
Upload
uwevoelker -
Category
Technology
-
view
932 -
download
1
Transcript of 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
GD and GD::GraphChart::Clicker
GraphVizSVG
HistoryExamplesCode
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
GD and GD::GraphChart::Clicker
GraphVizSVG
HistoryExamplesCode
Examples
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
HistoryExamplesCode
Examples
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
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 ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
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;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
About
started 2006
current version 2.65, July 2010
http://github.com/gphat/chart-clicker/
http://www.onemogin.com/clicker/
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
Examples
2 4 6 8 10
1
3
5
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
Examples
2 4 6 8 10
1
5
9
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
Examples
2 4 6 8 10
1
3
5
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
Examples
Series 0 Series 1 Series 2 Series 3
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesCode
Examples
2 4 6 8 10
1
3
5
Series 0 Series 1 Series 2
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
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 ’ ,
) ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
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 / ] ) ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
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 ’ ) ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
About
graph visualization software
different renderers
http://www.graphviz.org/
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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 ;
}
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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 ;}
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
Examples - image map
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 ] ;
}}
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
Examples - image map
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 ;
}}
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.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 =”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 ;
} ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
Hints - output
dot -Tpdf input.dot > output.pdf
smaller margins
dot -Teps input.dot > output.eps
epstopdf output.eps
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
Hints - output
dot -Tpdf input.dot > output.pdf
smaller margins
dot -Teps input.dot > output.eps
epstopdf output.eps
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
Hints - layout
use rank and randir
use invisible cluster to group nodes
reverse arrows
read the manual and FAQ
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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 ) ) ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
GraphViz + Devel::NYTProf
main
main::add
main::multiply
main::RUNTIME
main::CORE:print main: :square
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
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 ’ ) ;
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.pm
GraphzViz.pm
London
City oflurve
New York
Far
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesHintsGraphViz + Devel::NYTProfGraphViz.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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
About
Scalable Vector Graphics
XML dialect
http://www.w3.org/TR/SVG/
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
Examples
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
Examples
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
Examples
Uwe Voelker Graphic Visualization
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
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
GD and GD::GraphChart::Clicker
GraphVizSVG
AboutExamplesRasterizerBatikServer
Questions?
Uwe Voelker Graphic Visualization