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.
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Having fun with graphs, a short introduction to D3.js
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
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
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
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