This talk is all about drawing on your webpage. We will have a short introduction to d3.js, a library to easily create SVGs in your webpage. Along the way we will render graphs using different layouting strategies. But what are the problems when displaying a graph? Just think of graphs having more vertices then you have pixels on your screen. Or what if you want a user to manupilate the graph and his changes being persistent? Michael will present his answers to this questions, ending up wit a GUI for a graph database.

1. Having fun with graphs
An introduction to d3.js
Michael Hackstein
@mchacki
August 13, 2013
1 / 15

2. d3.js
Short Description
Take javascript objects or a JSON file
Create SVGs out of them
Synchronize objects and SVG
API quite similar to jQuery
⇒ “The jQuery for SVG”
2 / 15

3. Examples
3 / 15

4. Examples
3 / 15

5. Examples
3 / 15

6. Simple Setup
var nodes = [{ id : 0 , x : 100 , y : 80} , ...];
var edges = [{ id : 0 ,
source : nodes [0] ,
target : nodes [1]
} , ...];
var svg = d3 . select ( " body " )
. append ( " svg " )
. attr ( " width " , 960)
. attr ( " height " , 500) ;
draw ( svg , nodes , edges ) ;
4 / 15

7. The draw function
var draw = function ( svg , nodes , edges )
var d3Edge = svg . selectAll ( " . link " )
. data ( edges )
. enter () . append ( " line " )
. attr ( " class " , " link " )
. attr ( " x1 " , function ( d ) { return
. attr ( " y1 " , function ( d ) { return
. attr ( " x2 " , function ( d ) { return
. attr ( " y2 " , function ( d ) { return
{
d . source . x ;
d . source . y ;
d . target . x ;
d . target . y ;
})
})
})
}) ;
var d3Node = svg . selectAll ( " . node " )
. data ( nodes )
. enter () . append ( " circle " )
. attr ( " r " , 25)
. attr ( " cx " , function ( d ) { return d . x })
. attr ( " cy " , function ( d ) { return d . y })
. style ( " fill " , " red " ) ;
};
5 / 15

8. Tree Layout Datastructure
var treeData = {
id : 1 ,
children : [
{ id : 2} ,
{
id : 3 ,
children : [
{ id : 4} ,{ id : 5} ,{ id : 6}
]
},
]
};
6 / 15

9. Tree Layout
var tree = d3 . layout . tree ()
. size ([ width , height ]) ;
var nodes = tree . nodes ( treeData ) ;
var edges = tree . links ( nodes ) ;
draw ( svg , nodes , edges ) ;
7 / 15

10. on
lsi
on
pu
re
re
pu
l si
←
→
Force-Based Layout Idea
←
→
→ attraction ←
Figure : Forces in Force-Directed Layout
Attention
Runtime: O(n2 ) ⇒ Only small number of nodes
8 / 15

11. Force-Based Layout Setup
var force = d3 . layout . force ()
. charge ( -120)
. linkDistance (30)
. size ([ width , height ])
. nodes ( nodes )
. links ( edges )
. start () ;
draw ( svg , nodes , edges ) ;
9 / 15

12. Force-Based Layout Update Position
force . on ( " tick " , function ()
svg . selectAll ( " . edge " )
. attr ( " x1 " , function ( d )
. attr ( " y1 " , function ( d )
. attr ( " x2 " , function ( d )
. attr ( " y2 " , function ( d )
{
{ return
{ return
{ return
{ return
d . source . x ;})
d . source . y ;})
d . target . x ;})
d . target . y ;}) ;
svg . selectAll ( " . node " )
. attr ( " cx " , function ( d ) { return d . x ; })
. attr ( " cy " , function ( d ) { return d . y ; }) ;
}) ;
10 / 15

13. Adding User-Interaction
Similar to jQuery.
Add in the draw function:
d3Node . on ( " click " , function ( d ) {
alert ( " Clicked on Node with ID : " + d . id ) ;
})
. on ( " mouseover " , function ( d ) {
d3 . select ( this ) . style ( " fill " , " green " ) ;
})
. on ( " mouseout " , function ( d ) {
d3 . select ( this ) . style ( " fill " , " red " ) ;
}) ;
11 / 15

14. Difficulties
Often details are important
Show everything always is not useful
Many nodes
Layout-algorithms get slow
Not enough pixels for nodes
12 / 15

15. Fisheye-Distortion
Figure : Fish-Eye Distortion
Mouse-pointer is the focus
Magnifies close objects
Minifies far away objects
13 / 15

16. Group Nodes to smaller parts
Figure : Group similar nodes
Group nodes (f.e. by similar attributes)
Layout each group separately
Treat each group as one large node
Then layout group-nodes
14 / 15

17. A complete GUI for a Graph-Database
DEMO
15 / 15