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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>Dynamic Data - Importing from Gephi (JSON)</title>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
div.nodeContent {
position: relative;
border: 1px solid lightgray;
width: 480px;
height: 780px;
margin-top: -802px;
margin-left: 810px;
padding: 10px;
}
pre {
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
</style>
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how to import a JSON file exported by Gephi. The two
options available for the import are
available through the checkboxes. You can download the Gephi JSON exporter
here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
All of Gephi's attributes are also contained within the node elements. This
means you can access all of this data through the DataSet.
<br/>
</div>
<p>
<label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
<label><input type="checkbox" id="parseColor"/> Parse the color instead of
copy (adds borders, highlights etc.)</label>
</p>
<div id="mynetwork"></div>
<div class="nodeContent"><h4>Node Content:</h4>
<pre id="nodeContent"></pre>
</div>
<script type="text/javascript">
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var gephiImported;
var fixedCheckbox = document.getElementById('fixed');
fixedCheckbox.onchange = redrawAll;
var parseColorCheckbox = document.getElementById('parseColor');
parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById('nodeContent');
loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
font: {
face: 'Tahoma'
}
},
edges: {
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -10000,
springConstant: 0.002,
springLength: 150
}
}
};
network = new vis.Network(container, data, options);
network.on('click', function (params) {
if (params.nodes.length > 0) {
var data = nodes.get(params.nodes[0]); // get the data from selected node
nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
}
})
/**
* This function fills the DataSets. These DataSets will update the network.
*/
function redrawAll(gephiJSON) {
if (gephiJSON.nodes === undefined) {
gephiJSON = gephiImported;
}
else {
gephiImported = gephiJSON;
}
nodes.clear();
edges.clear();
var fixed = fixedCheckbox.checked;
var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
fixed: fixed,
parseColor: parseColor
});
// add the parsed data to the DataSets.
nodes.add(parsed.nodes);
edges.add(parsed.edges);
var data = nodes.get(2); // get the data from node 2 as example
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
network.fit(); // zoom to fit
}
</script>
</body>
</html>
|
