Having fun with graphsAn introduction to d3.js

Michael Hackstein@mchacki

August 13, 2013

1 / 15

d3.js

Short DescriptionTake javascript objects or a JSON fileCreate SVGs out of themSynchronize objects and SVGAPI quite similar to jQuery

⇒ “The jQuery for SVG”

2 / 15

Examples

3 / 15

Examples

3 / 15

Examples

3 / 15

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

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 d. source .x; }).attr("y1", function (d) { return d. source .y; }).attr("x2", function (d) { return d. target .x; }).attr("y2", function (d) { return 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

Tree Layout Datastructure

var treeData = {id: 1,children : [

{id: 2},{

id: 3,children : [

{id: 4},{id: 5},{id: 6}]

},]

};

6 / 15

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

Force-Based Layout Idea

→ attraction ←

←rep

ulsion →

←repulsion →

Figure : Forces in Force-Directed Layout

AttentionRuntime: O(n2) ⇒ Only small number of nodes

8 / 15

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

Force-Based Layout Update Position

force.on("tick", function () {svg. selectAll (".edge")

.attr("x1", function (d) { return d. source .x;})

.attr("y1", function (d) { return d. source .y;})

.attr("x2", function (d) { return d. target .x;})

.attr("y2", function (d) { return d. target .y;});

svg. selectAll (".node").attr("cx", function (d) { return d.x; }).attr("cy", function (d) { return d.y; });

});

10 / 15

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

Difficulties

Often details are importantShow everything always is not useful

Many nodesLayout-algorithms get slowNot enough pixels for nodes

12 / 15

Fisheye-Distortion

Figure : Fish-Eye Distortion

Mouse-pointer is the focusMagnifies close objectsMinifies far away objects

13 / 15

Group Nodes to smaller parts

Figure : Group similar nodes

Group nodes (f.e. by similar attributes)Layout each group separatelyTreat each group as one large nodeThen layout group-nodes

14 / 15

A complete GUI for a Graph-Database

DEMO

15 / 15