|
|
- <!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: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>
-
-
- <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) {
- if (gephiJSON.nodes === undefined) {
- gephiJSON = gephiImported;
- }
- else {
- gephiImported = gephiJSON;
- }
-
- 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>
|
