-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (143 loc) · 6.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<title> Confluent Graphs </title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</style>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script src="/lib/jquery-1.10.2.min.js"></script>
<script src="/lib/d3.v4.min.js"></script>
</head>
<body>
<h1 style="text-align: center; color:brown;"> Confluent Graphs </h1>
<div style="width:1000px; margin:0 auto;">
<p>This is the implementation of the paper
<a href="http://aviz.fr/~bbach/confluentgraphs/Bach2016confluentgraphs.pdf" target="_blank">"Towards Unambiguous Edge Bundling: Investigating Confluent Drawings for Network Visualization".</a>
The source code for this implementation can be found on github
<a href="https://github.com/ArpanMangal/CD_NetworkVisualization" target="_blank">here</a>.</p>
</div>
<div style="width:1000px; margin:0 auto;">
<p>
We implement the main algorithm of the paper as detailed in Sections 3.1 and 3.2 . This mainly consists of the following
steps:
</p>
<ol>
<li>
We will be given graph data on nodes and links. It will generate a graph as in the following image. As we can see there is
a lot of clutter in this "node-link" diagram. This clutter will make complex graphs unreadable. Confluent
Graphs are a way to bundle edges to reduce this clutter.
</li>
<li style="list-style-type: none; text-align: center">
<figure>
<img src="/img/graph.png" />
<figcaption>A Node-Link Graph</figcaption>
</figure>
</li>
<li value=2>
From the given nodes and links we construct a Power Graph (PG) Decomposition. This decomposition is done with the help of the <em><b>powerGraphGroups()</b></em> function of <em>cola.js</em>,
which gives a Power Graph from the Node-Link Diagram.
</li>
<li style="list-style-type: none; text-align: center">
<figure>
<img src="/img/PowerGraph.png" />
<figcaption>Power Graph representation</figcaption>
</figure>
</li>
<li value=3>
From this Power Graph we make a routing graph as detailed in the paper. It will appear as below. The black vertices are the
actual nodes, while blue ones are the routing nodes.
</li>
<li style="list-style-type: none; text-align: center">
<!-- routing graph -->
<figure>
<svg width="460" height="250" id="routingGraph"></svg>
<figcaption>Routing Graph</figcaption>
</figure>
</li>
<li value=4>
In this Routing Graph we connect each of the actual (black) vertices by curves using common B-Splines taking the routing
nodes as the control points. This results in a Confluent Graph as below.
</li>
<li style="list-style-type: none; text-align: center">
<!-- ConfluentDrawing -->
<figure>
<svg width="460" height="250" id="ConfDrawingCross"></svg>
<figcaption>Confluent Graph with crossing artifacts</figcaption>
</figure>
</li>
<li value=5>
This way of rendering confluent graphs, results in a specific artifact of crossing links where semantically there is a bundle.
This is described in detail in the paper. To overcome this we split certain routing nodes
<em>r</em> into routing nodes
<em>r</em>
<sub>in</sub> and
<em>r</em>
<sub>out</sub>. This gives another routing graph as below.
<br />
<em style="font-size: small">(The graph
<em>may</em> appear very different than before at first sight. It is due to d3 laying out the graph in a rotated
manner different from above. Just play around with the nodes till it regains the right order.)</em>
</li>
<li style="list-style-type: none; text-align: center">
<figure>
<!-- Splitted routing Graph -->
<svg width="460" height="300" id="routingGraphSplit"></svg>
<figcaption>Routing Graph after splitting</figcaption>
</figure>
</li>
<li value=6>
We then again apply the B-Spline method over this "splitted" routing graph and obtain a much better confluent graph.
</li>
<li style="list-style-type: none; text-align: center">
<figure>
<!-- Final Confluent Drawing -->
<svg width="460" height="300" id="ConfDrawing"></svg>
<figcaption>Confluent Graph with Node split</figcaption>
</figure>
</li>
</ol>
<br />
<div style="text-align: left; width: 20%">
<h3 style="color: #006400"> Examples </h3>
<p>Choose any graph from below: </p>
<form action="/example" style="text-align: center">
<select name="graph">
<option value="Graph1">Graph 1</option>
<option value="Graph2">Graph 2</option>
<option value="Graph3">Graph 3</option>
<option value="Graph4">Graph 4</option>
<option value="Graph5">Graph 5</option>
</select>
<br>
<br>
<input type="submit">
</form>
</div>
</div>
<svg width="460" height="250" id="node-link-graph"></svg>
<!-- Load our JS -->
<script src="/js/dijkstra.js"></script>
<script src="/js/shortestPath.js"></script>
<!-- JS for confluent drawings -->
<script src="/js/nodeLink.js"></script>
<script src="/js/PGtoRoutingGraph.js"></script>
<script src="/js/routingToConfGraph.js"></script>
<script src="/js/drawRoutingGraph.js"></script>
<script src="/js/drawRoutingSplit.js"></script>
<script src="/js/drawConfDrawingCross.js"></script>
<script src="/js/drawConfDrawing.js"></script>
<script>
d3.json("/data/indexPage.json", function (error, graph) {
var dataCopy1 = $.extend(true, {}, graph);
var dataCopy2 = $.extend(true, {}, graph);
var dataCopy3 = $.extend(true, {}, graph);
var dataCopy4 = $.extend(true, {}, graph);
genRoutingGraph(dataCopy1);
genConfluentDrawingCross(dataCopy2);
genRoutingGraphSplit(dataCopy3);
genConfluentDrawing(dataCopy4);
});
</script>
</body>
</html>