|
|
- <!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>
- <script src="../googleAnalytics.js"></script>
- </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="allowedToMove"/> Allow to move 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 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',
- font: {
- face: 'Tahoma'
- }
- },
- edges: {
- width: 0.15,
- color: {
- inherit: 'from'
- },
- smooth: {
- dynamic: false,
- type: 'continuous'
- }
- },
- interaction: {
- tooltipDelay: 200
- },
- physics: {
- stabilization: false,
- barnesHut: {
- gravitationalConstant: -10000,
- springConstant: 0.002,
- springLength: 150
- }
- },
- rendering: {
- 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.fit(); // 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, null, 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>
|
