jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Some updates in example 29 30

flowchartTest
jos 9 years ago
parent
233b5f2ccb
commit
6aebfcf602
2 changed files with 151 additions and 108 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -3
      examples/network/29_neighbourhood_highlight.html
  2. +149
    -105
      examples/network/30_importing_from_gephi.html

+ 2
- 3
examples/network/29_neighbourhood_highlight.html View File

@ -15,7 +15,8 @@
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<script src="../googleAnalytics.js"></script>
</head>
<body> <body>
@ -213,6 +214,4 @@ redrawAll()
</script> </script>
</body></html> </body></html>

+ 149
- 105
examples/network/30_importing_from_gephi.html View File

@ -1,107 +1,148 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <!-- 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;
}
<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;
}
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>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
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> <body>
<h2>Dynamic Data - Importing from Gephi (JSON)</h2> <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
<div style="width:700px; font-size:14px; text-align: justify;"> <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 />
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> </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>
<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 id="mynetwork"></div>
<div class="nodeContent"><h4>Node Content:</h4> <pre id="nodeContent"></pre></div>
<div class="nodeContent"><h4>Node Content:</h4>
<pre id="nodeContent"></pre>
</div>
<script type="text/javascript"> <script type="text/javascript">
var network;
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var gephiImported;
var allowedToMoveCheckbox = document.getElementById("allowedToMove");
allowedToMoveCheckbox.onchange = redrawAll;
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 parseColorCheckbox = document.getElementById("parseColor");
parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById("nodeContent");
var nodeContent = document.getElementById("nodeContent");
loadJSON("./data/WorldCup2014.json",redrawAll);
loadJSON("./data/WorldCup2014.json", redrawAll);
var container = document.getElementById('mynetwork');
var data = {
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes, nodes: nodes,
edges: edges edges: edges
};
var options = {
};
var options = {
nodes: { nodes: {
shape: 'dot',
fontFace: "Tahoma"
shape: 'dot',
font: {
face: "Tahoma"
}
}, },
edges: { edges: {
width: 0.15,
inheritColor: "from"
width: 0.15,
color: {
inherit: "from"
},
smooth: {
dynamic: false,
type: "continuous"
}
}, },
tooltip: {
delay: 200,
fontSize: 12,
color: {
background: "#fff"
}
interaction: {
tooltipDelay: 200
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -10000,
springConstant: 0.002,
springLength: 150
}
}, },
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) {
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) { if (gephiJSON.nodes === undefined) {
gephiJSON = gephiImported;
gephiJSON = gephiImported;
} }
else { else {
gephiImported = gephiJSON;
gephiImported = gephiJSON;
} }
nodes.clear(); nodes.clear();
@ -109,7 +150,10 @@ function redrawAll(gephiJSON) {
var allowedToMove = allowedToMoveCheckbox.checked; var allowedToMove = allowedToMoveCheckbox.checked;
var parseColor = parseColorCheckbox.checked; var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {allowedToMove:allowedToMove, parseColor:parseColor});
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
allowedToMove: allowedToMove,
parseColor: parseColor
});
// add the parsed data to the DataSets. // add the parsed data to the DataSets.
nodes.add(parsed.nodes); nodes.add(parsed.nodes);
@ -117,50 +161,50 @@ function redrawAll(gephiJSON) {
var data = nodes.get(2); // get the data from node 2 var data = nodes.get(2); // get the data from node 2
nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
network.zoomExtent(); // zoom to fit
}
network.fit(); // zoom to fit
}
// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
function syntaxHighlight(json) {
// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
function syntaxHighlight(json) {
if (typeof json != 'string') { if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
json = JSON.stringify(json, null, 2);
} }
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { 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';
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
} }
return '<span class="' + cls + '">' + match + '</span>';
} 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) {
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
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.open("GET", path, true);
xhr.send(); xhr.send();
}
}
</script> </script>
</body></html>
</body>
</html>

Write Preview
Loading…
Cancel
Save