Mon 21 Jul 22:43:21 CEST 2025
This commit is contained in:
parent
775b63695d
commit
19ec345dd2
174
js/dos/ext/vis/examples/network/data/importingFromGephi.html
Normal file
174
js/dos/ext/vis/examples/network/data/importingFromGephi.html
Normal file
|
|
@ -0,0 +1,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.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>
|
||||
Loading…
Reference in New Issue
Block a user