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