Having fun with graphs, a short introduction to D3.js

1,633 views
1,337 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,633
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Having fun with graphs, a short introduction to D3.js

  1. 1. Having fun with graphs An introduction to d3.js Michael Hackstein @mchacki August 13, 2013 1 / 15
  2. 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. 3. Examples 3 / 15
  4. 4. Examples 3 / 15
  5. 5. Examples 3 / 15
  6. 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. 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. 8. Tree Layout Datastructure var treeData = { id : 1 , children : [ { id : 2} , { id : 3 , children : [ { id : 4} ,{ id : 5} ,{ id : 6} ] }, ] }; 6 / 15
  9. 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. 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. 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. 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. 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. 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. 15. Fisheye-Distortion Figure : Fish-Eye Distortion Mouse-pointer is the focus Magnifies close objects Minifies far away objects 13 / 15
  16. 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. 17. A complete GUI for a Graph-Database DEMO 15 / 15

×