GEXF
Open in a new window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<style>
#graph-container { top:0; height:66%; left:0; right:0; position:absolute; }
#output { top:66%; bottom:0; left:0; right:0; position:absolute; background:#eee; overflow:auto; }
</style>
</head>
<body>
<div id="graph-container"></div>
<pre id="output"></pre>
<script>
'use strict';
function randomGraph(N, E) {
var g = {nodes:[], edges:[]};
for (var i = 0; i < N; i++) {
g.nodes.push({
id: 'n' + i,
attributes: {
x: Math.random() * 100,
y: Math.random() * 100,
text: 'Node ' + i,
radius: 3 + Math.random() * 3,
color: '#FF0000'
},
data: {
properties: {
aString: 'abc ' + i,
aCrappyString: 'cr"p\n\r ',
aBoolean: true,
anInteger: i,
aFloat: Math.random(),
anArray: [1, 2, 3],
aNull: null,
anUndef: undefined,
anObject: {},
aFunction: function (argument) {}
},
categories: ['catA', 'catB']
}
});
}
for (var i = 0; i < E; i++) {
g.edges.push({
id: 'e' + i,
source: 'n' + (Math.random() * N | 0),
target: 'n' + (Math.random() * N | 0),
attributes: {
text: 'Edge ' + i,
width: 1 + Math.random(),
color: '#FF0000'
},
data: {
aString: 'abc ' + i,
aBoolean: true,
anInteger: i,
aNull: null,
anObject: {},
aFunction: function (argument) {}
},
type: 'catA'
});
}
return g;
}
var g = randomGraph(10, 10);
var ogma = new Ogma({
graph: g,
container: 'graph-container'
});
ogma.export.gexf({
// Set to true if you wish to have Ogma display a prompt so you can download the file
download: false,
}).then(function(gexf) {
document.getElementById('output').innerText = gexf;
});
</script>
</body>
</html>
