You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
5.1 KiB
210 lines
5.1 KiB
<!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="../../dist/vis.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="../../dist/vis.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="allowedToMove"/> Allow to move 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 allowedToMoveCheckbox = document.getElementById('allowedToMove');
|
|
allowedToMoveCheckbox.onchange = redrawAll;
|
|
|
|
var parseColorCheckbox = document.getElementById('parseColor');
|
|
parseColorCheckbox.onchange = redrawAll;
|
|
|
|
var nodeContent = document.getElementById('nodeContent');
|
|
|
|
loadJSON('./data/WorldCup2014.json', redrawAll);
|
|
|
|
var container = document.getElementById('mynetwork');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var options = {
|
|
nodes: {
|
|
shape: 'dot',
|
|
font: {
|
|
face: 'Tahoma'
|
|
}
|
|
},
|
|
edges: {
|
|
width: 0.15,
|
|
color: {
|
|
inherit: 'from'
|
|
},
|
|
smooth: {
|
|
dynamic: false,
|
|
type: 'continuous'
|
|
}
|
|
},
|
|
interaction: {
|
|
tooltipDelay: 200
|
|
},
|
|
physics: {
|
|
stabilization: false,
|
|
barnesHut: {
|
|
gravitationalConstant: -10000,
|
|
springConstant: 0.002,
|
|
springLength: 150
|
|
}
|
|
},
|
|
rendering: {
|
|
hideEdgesOnDrag: true
|
|
}
|
|
};
|
|
|
|
network = new vis.Network(container, data, options);
|
|
|
|
/**
|
|
* 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 allowedToMove = allowedToMoveCheckbox.checked;
|
|
var parseColor = parseColorCheckbox.checked;
|
|
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
|
|
allowedToMove: allowedToMove,
|
|
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
|
|
nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
|
|
network.fit(); // zoom to fit
|
|
}
|
|
|
|
// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
|
|
function syntaxHighlight(json) {
|
|
if (typeof json != 'string') {
|
|
json = JSON.stringify(json, null, 2);
|
|
}
|
|
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
|
var cls = 'number';
|
|
if (/^"/.test(match)) {
|
|
if (/:$/.test(match)) {
|
|
cls = 'key';
|
|
} else {
|
|
cls = 'string';
|
|
}
|
|
} else if (/true|false/.test(match)) {
|
|
cls = 'boolean';
|
|
} else if (/null/.test(match)) {
|
|
cls = 'null';
|
|
}
|
|
return '<span class="' + cls + '">' + match + '</span>';
|
|
});
|
|
}
|
|
|
|
function loadJSON(path, success, error) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
if (xhr.status === 200) {
|
|
success(JSON.parse(xhr.responseText));
|
|
}
|
|
else {
|
|
error(xhr);
|
|
}
|
|
}
|
|
};
|
|
xhr.open('GET', path, true);
|
|
xhr.send();
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|