|
|
- <!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>
-
- </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>
|
