|
|
- <!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>
- </head>
-
- <body>
-
- <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
- <div style="width:900px; font-size:14px;">
- 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. An example of this is shown next to the network.
- <br /><br />
- </div>
-
-
- <input type="checkbox" id="allowedToMove">: Allow to move after import. <br/>
- <input type="checkbox" id="parseColor">: Parse the color instead of copy (adds borders, highlights etc.)
- <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',
- fontFace: "Tahoma"
- },
- edges: {
- width: 0.15,
- inheritColor: "from"
- },
- tooltip: {
- delay: 200,
- fontSize: 12,
- color: {
- background: "#fff"
- }
- },
- smoothCurves: {dynamic:false, type: "continuous"},
- stabilize: false,
- physics: {barnesHut: {gravitationalConstant: -10000, springConstant: 0.002, springLength: 150}},
- hideEdgesOnDrag: true
- };
-
- network = new vis.Network(container, data, options);
-
- /**
- * This function fills the DataSets. These DataSets will update the network.
- */
- function redrawAll(gephiJSON) {
- // only have to get the JSON from the file once
- if (gephiJSON.nodes === undefined) {
- gephiJSON = gephiImported;
- }
- else {
- gephiImported = gephiJSON;
- }
-
-
- // empty the DataSets
- 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.zoomExtent(); // 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, undefined, 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>
|
