visjs-network
Version:
A dynamic, browser-based network visualization library.
70 lines (69 loc) • 2.16 kB
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>
</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 src='./index.js' type='text/javascript'></script>
</body>
</html>