|
@ -1,661 +1,122 @@ |
|
|
<!DOCTYPE HTML> |
|
|
|
|
|
|
|
|
<!doctype html> |
|
|
|
|
|
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> |
|
|
<html> |
|
|
<html> |
|
|
<head> |
|
|
<head> |
|
|
<script src="../dist/vis.js"></script> |
|
|
|
|
|
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /> |
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
.graph { |
|
|
|
|
|
width: 600px; |
|
|
|
|
|
height: 500px; |
|
|
|
|
|
} </style> |
|
|
|
|
|
</head> |
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
|
Reset causes crash |
|
|
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF8"> |
|
|
|
|
|
<title>Network | Static smooth curves - World Cup Network</title> |
|
|
|
|
|
|
|
|
<pre> |
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../dist/vis.js"></script> |
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="../dist/vis.css"> |
|
|
|
|
|
|
|
|
When you press the button, the nodes dataset will receive an update which shall reset the font and color properties, instead, vis crashes :( |
|
|
|
|
|
|
|
|
|
|
|
(The browser console shows the details) |
|
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
#mynetwork { |
|
|
|
|
|
width: 800px; |
|
|
|
|
|
height: 800px; |
|
|
|
|
|
border: 1px solid lightgray; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
<script src="../../googleAnalytics.js"></script> |
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
</pre> |
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
<button onclick="javascript:action()">Click me!</button> |
|
|
|
|
|
|
|
|
<h2>Performance - World Cup Network</h2> |
|
|
|
|
|
|
|
|
<div class="graph" id="visualization1"></div> |
|
|
|
|
|
|
|
|
<div style="width:700px; font-size:14px;"> |
|
|
|
|
|
This example shows the performance of vis with a larger network. The edges in |
|
|
|
|
|
particular (~9200) are very computationally intensive |
|
|
|
|
|
to draw. Drag and hold the graph to see the performance difference if the |
|
|
|
|
|
edges are hidden. |
|
|
|
|
|
<br/><br/> |
|
|
|
|
|
We use the following physics configuration: <br/> |
|
|
|
|
|
<code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001, |
|
|
|
|
|
springLength: 200}}</code> |
|
|
|
|
|
<br/><br/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="mynetwork"></div> |
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
<script type="text/javascript"> |
|
|
|
|
|
|
|
|
var action = function() { |
|
|
|
|
|
nodes.update([ |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "35b99ac8-aa07-4834-b508-6e9435f573cb", |
|
|
|
|
|
"label": "Adam", |
|
|
|
|
|
"x": -96, |
|
|
|
|
|
"y": -382, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "38d37e10-3c8b-487c-9757-1061d2bbbd07", |
|
|
|
|
|
"label": "Betsy", |
|
|
|
|
|
"x": -19, |
|
|
|
|
|
"y": -548, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "4762501a-6bcb-4d35-acfd-f2e9d6310389", |
|
|
|
|
|
"label": "Carol", |
|
|
|
|
|
"x": -243, |
|
|
|
|
|
"y": -378, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d", |
|
|
|
|
|
"label": "Catherine", |
|
|
|
|
|
"x": -551, |
|
|
|
|
|
"y": -214, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "e017a09b-4526-4b4d-b097-f70e56f20ab4", |
|
|
|
|
|
"label": "Craig", |
|
|
|
|
|
"x": 155, |
|
|
|
|
|
"y": -381, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e", |
|
|
|
|
|
"label": "George", |
|
|
|
|
|
"x": -302, |
|
|
|
|
|
"y": -536, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415", |
|
|
|
|
|
"label": "Jessica", |
|
|
|
|
|
"x": -4, |
|
|
|
|
|
"y": -379, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "afd75e95-e45a-4dea-848a-e16ca735bc57", |
|
|
|
|
|
"label": "John", |
|
|
|
|
|
"x": -531, |
|
|
|
|
|
"y": -543, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "9c050064-d805-48b3-80a6-181d3599daff", |
|
|
|
|
|
"label": "Mary", |
|
|
|
|
|
"x": -280, |
|
|
|
|
|
"y": -210, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "f24ab062-62a1-4555-a57f-dfcd597c3515", |
|
|
|
|
|
"label": "Michael", |
|
|
|
|
|
"x": -98, |
|
|
|
|
|
"y": -211, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb", |
|
|
|
|
|
"label": "Michelle", |
|
|
|
|
|
"x": -630, |
|
|
|
|
|
"y": -387, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"label": "Robert", |
|
|
|
|
|
"x": -360, |
|
|
|
|
|
"y": -380, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "a1485262-99fe-4b1e-a246-cc70fbb1859a", |
|
|
|
|
|
"label": "Sharon", |
|
|
|
|
|
"x": -532, |
|
|
|
|
|
"y": -384, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"color": null, |
|
|
|
|
|
"font": null |
|
|
|
|
|
|
|
|
var network; |
|
|
|
|
|
|
|
|
|
|
|
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(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
var nodes = new vis.DataSet([ |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "35b99ac8-aa07-4834-b508-6e9435f573cb", |
|
|
|
|
|
"label": "Adam", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -96, |
|
|
|
|
|
"y": -382, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "38d37e10-3c8b-487c-9757-1061d2bbbd07", |
|
|
|
|
|
"label": "Betsy", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -19, |
|
|
|
|
|
"y": -548, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "4762501a-6bcb-4d35-acfd-f2e9d6310389", |
|
|
|
|
|
"label": "Carol", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -243, |
|
|
|
|
|
"y": -378, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d", |
|
|
|
|
|
"label": "Catherine", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -551, |
|
|
|
|
|
"y": -214, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "e017a09b-4526-4b4d-b097-f70e56f20ab4", |
|
|
|
|
|
"label": "Craig", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": 155, |
|
|
|
|
|
"y": -381, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e", |
|
|
|
|
|
"label": "George", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -302, |
|
|
|
|
|
"y": -536, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415", |
|
|
|
|
|
"label": "Jessica", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -4, |
|
|
|
|
|
"y": -379, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "afd75e95-e45a-4dea-848a-e16ca735bc57", |
|
|
|
|
|
"label": "John", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -531, |
|
|
|
|
|
"y": -543, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "9c050064-d805-48b3-80a6-181d3599daff", |
|
|
|
|
|
"label": "Mary", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -280, |
|
|
|
|
|
"y": -210, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "f24ab062-62a1-4555-a57f-dfcd597c3515", |
|
|
|
|
|
"label": "Michael", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -98, |
|
|
|
|
|
"y": -211, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb", |
|
|
|
|
|
"label": "Michelle", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -630, |
|
|
|
|
|
"y": -387, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"label": "Robert", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -360, |
|
|
|
|
|
"y": -380, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "a1485262-99fe-4b1e-a246-cc70fbb1859a", |
|
|
|
|
|
"label": "Sharon", |
|
|
|
|
|
"color": { |
|
|
|
|
|
"background": "rgba(252,245,170,1)", |
|
|
|
|
|
"border": "rgba(183,148,134,1)" |
|
|
|
|
|
}, |
|
|
|
|
|
"x": -532, |
|
|
|
|
|
"y": -384, |
|
|
|
|
|
"fixed": { |
|
|
|
|
|
"x": true, |
|
|
|
|
|
"y": true |
|
|
|
|
|
}, |
|
|
|
|
|
"font": { |
|
|
|
|
|
"color": "#000000" |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
var edges = new vis.DataSet([ |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "62b28c2f-c6dc-4b6b-b108-722eb47d5972", |
|
|
|
|
|
"from": "35b99ac8-aa07-4834-b508-6e9435f573cb", |
|
|
|
|
|
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515", |
|
|
|
|
|
"type": "family:father of", |
|
|
|
|
|
"label": "father of", |
|
|
|
|
|
"color": "#bc960d", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "4ae8de41-ef1a-400a-b51b-05662ce24597", |
|
|
|
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07", |
|
|
|
|
|
"to": "e017a09b-4526-4b4d-b097-f70e56f20ab4", |
|
|
|
|
|
"type": "family:mother of", |
|
|
|
|
|
"label": "mother of", |
|
|
|
|
|
"color": "#eec75b", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "70f6e36a-ce9a-47b4-97e1-14b2df17d204", |
|
|
|
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07", |
|
|
|
|
|
"to": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415", |
|
|
|
|
|
"type": "family:mother of", |
|
|
|
|
|
"label": "mother of", |
|
|
|
|
|
"color": "#eec75b", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "c32a86ce-ab9a-49b6-a202-e93a37265fda", |
|
|
|
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07", |
|
|
|
|
|
"to": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"type": "family:mother of", |
|
|
|
|
|
"label": "mother of", |
|
|
|
|
|
"color": "#eec75b", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "bbce9cc0-0353-45cd-bfa6-a13834ff7218", |
|
|
|
|
|
"from": "4762501a-6bcb-4d35-acfd-f2e9d6310389", |
|
|
|
|
|
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515", |
|
|
|
|
|
"type": "family:mother of", |
|
|
|
|
|
"label": "mother of", |
|
|
|
|
|
"color": "#eec75b", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "deb7eb05-f667-496b-aeda-205c37b2484b", |
|
|
|
|
|
"from": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e", |
|
|
|
|
|
"to": "afd75e95-e45a-4dea-848a-e16ca735bc57", |
|
|
|
|
|
"type": "family:brother of", |
|
|
|
|
|
"label": "brother of", |
|
|
|
|
|
"color": "green", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "3c8c7947-6c82-4f98-978a-26bbb372bfbb", |
|
|
|
|
|
"from": "afd75e95-e45a-4dea-848a-e16ca735bc57", |
|
|
|
|
|
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a", |
|
|
|
|
|
"type": "family:father of", |
|
|
|
|
|
"label": "father of", |
|
|
|
|
|
"color": "#bc960d", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "cd4e71e7-9735-4a42-8632-e88cc01ab64f", |
|
|
|
|
|
"from": "f24ab062-62a1-4555-a57f-dfcd597c3515", |
|
|
|
|
|
"to": "9c050064-d805-48b3-80a6-181d3599daff", |
|
|
|
|
|
"type": "family:brother of", |
|
|
|
|
|
"label": "brother of", |
|
|
|
|
|
"color": "green", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "b4499f60-04f9-4306-9c57-3d73b72f37c0", |
|
|
|
|
|
"from": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb", |
|
|
|
|
|
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d", |
|
|
|
|
|
"type": "family:mother of", |
|
|
|
|
|
"label": "mother of", |
|
|
|
|
|
"color": "#eec75b", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "16562853-b597-44f6-9c55-2ce8a1fe4f83", |
|
|
|
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d", |
|
|
|
|
|
"type": "family:father of", |
|
|
|
|
|
"label": "father of", |
|
|
|
|
|
"color": "#bc960d", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "599dd644-e61f-401e-8b17-dfdd340c125e", |
|
|
|
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"to": "9c050064-d805-48b3-80a6-181d3599daff", |
|
|
|
|
|
"type": "family:father of", |
|
|
|
|
|
"label": "father of", |
|
|
|
|
|
"color": "#bc960d", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"id": "961f7f2b-5abe-4036-a155-aa9b30ae1260", |
|
|
|
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91", |
|
|
|
|
|
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a", |
|
|
|
|
|
"type": "family:married to", |
|
|
|
|
|
"title": "Does not need to be a christian marriage though...", |
|
|
|
|
|
"label": "married to", |
|
|
|
|
|
"color": "#17bba3", |
|
|
|
|
|
"labelAlignment": "line-above" |
|
|
|
|
|
} |
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
var data = { |
|
|
|
|
|
nodes: nodes, |
|
|
|
|
|
edges: edges |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var options = { |
|
|
|
|
|
"autoResize": true, |
|
|
|
|
|
"height": "100%", |
|
|
|
|
|
"width": "100%", |
|
|
|
|
|
"interaction": { |
|
|
|
|
|
"dragNodes":true, |
|
|
|
|
|
"dragView": true, |
|
|
|
|
|
"hideEdgesOnDrag": false, |
|
|
|
|
|
"hideNodesOnDrag": false, |
|
|
|
|
|
"hover": false, |
|
|
|
|
|
"navigationButtons": true, |
|
|
|
|
|
"selectable": true, |
|
|
|
|
|
"selectConnectedEdges": true, |
|
|
|
|
|
"tooltipDelay": 300, |
|
|
|
|
|
"zoomView": true, |
|
|
|
|
|
"keyboard": { |
|
|
|
|
|
"enabled": false, |
|
|
|
|
|
"speed": { |
|
|
|
|
|
"x": 10, |
|
|
|
|
|
"y": 10, |
|
|
|
|
|
"zoom": 0.02 |
|
|
|
|
|
}, |
|
|
|
|
|
"bindToWindow": true |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
"nodes": { |
|
|
|
|
|
"shape": "box", |
|
|
|
|
|
font: {color:"#ff0000"}, |
|
|
|
|
|
"color": { |
|
|
|
|
|
"border" : "#2B7CE9", |
|
|
|
|
|
"background" : "#97C2FC", |
|
|
|
|
|
"highlight": { |
|
|
|
|
|
"border": "#2B7CE9", |
|
|
|
|
|
"background": "#D2E5FF" |
|
|
|
|
|
}, |
|
|
|
|
|
"hover": { |
|
|
|
|
|
"border": "white", |
|
|
|
|
|
"background": "white" |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
"physics": { |
|
|
|
|
|
"barnesHut": { |
|
|
|
|
|
"centralGravity": 0, |
|
|
|
|
|
"springLength": 240 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
"groups": { |
|
|
|
|
|
"neighbours": { |
|
|
|
|
|
"color": "#E6E6E6" |
|
|
|
|
|
}, |
|
|
|
|
|
"matches": { |
|
|
|
|
|
"color": "#97C2FC" |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
"locale": "en_EN" |
|
|
|
|
|
|
|
|
function redrawAll(data) { |
|
|
|
|
|
|
|
|
|
|
|
// remove positoins |
|
|
|
|
|
// for (var i = 0; i < nodes.length; i++) { |
|
|
|
|
|
// delete nodes[i].x; |
|
|
|
|
|
// delete nodes[i].y; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// create a network |
|
|
|
|
|
var container = document.getElementById('mynetwork'); |
|
|
|
|
|
console.log(data) |
|
|
|
|
|
var options = { |
|
|
|
|
|
edges:{ |
|
|
|
|
|
// smooth:false, |
|
|
|
|
|
}, |
|
|
|
|
|
layout:{ |
|
|
|
|
|
improvedLayout:false |
|
|
|
|
|
}, |
|
|
|
|
|
interaction: { |
|
|
|
|
|
hideEdgesOnDrag: true, |
|
|
|
|
|
keyboard: true, |
|
|
|
|
|
multiselect: true |
|
|
|
|
|
}, |
|
|
|
|
|
physics: { |
|
|
|
|
|
enabled: true, |
|
|
|
|
|
solver: 'forceAtlas2Based', |
|
|
|
|
|
forceAtlas2Based: { |
|
|
|
|
|
gravitationalConstant: -100, |
|
|
|
|
|
springConstant: 0.40, |
|
|
|
|
|
springLength: 50, |
|
|
|
|
|
damping: 0.1, |
|
|
|
|
|
avoidOverlap: 0 |
|
|
|
|
|
}, |
|
|
|
|
|
stabilization: { |
|
|
|
|
|
enabled: true, |
|
|
|
|
|
iterations: 1000, |
|
|
|
|
|
fit: true |
|
|
|
|
|
}, |
|
|
|
|
|
timestep: 0.5 |
|
|
} |
|
|
} |
|
|
; |
|
|
|
|
|
|
|
|
|
|
|
var container = document.getElementById("visualization1"); |
|
|
|
|
|
|
|
|
|
|
|
var network = new vis.Network(container, data, options); |
|
|
|
|
|
|
|
|
|
|
|
var hasNetworkStabilized = false; |
|
|
|
|
|
network.on("stabilized", function(properties) { |
|
|
|
|
|
|
|
|
|
|
|
if(!hasNetworkStabilized) { |
|
|
|
|
|
hasNetworkStabilized = true; |
|
|
|
|
|
|
|
|
|
|
|
network.storePositions(); |
|
|
|
|
|
setNodesMoveable(data.nodes.get(), false); |
|
|
|
|
|
|
|
|
|
|
|
network.fit(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
network.on("dragStart", function(properties) { |
|
|
|
|
|
if(properties.nodes.length) { |
|
|
|
|
|
var node = data.nodes.get(properties.nodes[0]); |
|
|
|
|
|
setNodesMoveable([ node ], true); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
network.on("dragEnd", function(properties) { |
|
|
|
|
|
if(properties.nodes.length) { |
|
|
|
|
|
var node = data.nodes.get(properties.nodes[0]); |
|
|
|
|
|
setNodesMoveable([ node ], false); |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
setNodesMoveable = function(nodes, isMoveable) { |
|
|
|
|
|
|
|
|
|
|
|
// first store positions |
|
|
|
|
|
network.storePositions(); |
|
|
|
|
|
|
|
|
|
|
|
var updates = []; |
|
|
|
|
|
var keys = Object.keys(nodes); |
|
|
|
|
|
|
|
|
|
|
|
for(var i = 0; i < keys.length; i++) { |
|
|
|
|
|
|
|
|
|
|
|
var id = nodes[keys[i]].id; |
|
|
|
|
|
|
|
|
|
|
|
var update = { |
|
|
|
|
|
id: id, |
|
|
|
|
|
fixed: { // v4: formerly allowToMoveX, allowToMoveY |
|
|
|
|
|
x: !isMoveable, |
|
|
|
|
|
y: !isMoveable |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
updates.push(update); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
data.nodes.update(updates); |
|
|
|
|
|
|
|
|
|
|
|
console.log(updates); |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// Note: data is coming from ./datasources/WorldCup2014.js |
|
|
|
|
|
network = new vis.Network(container, data, options); |
|
|
|
|
|
network.on("startStabilizing", function (params) { |
|
|
|
|
|
console.log("started") |
|
|
|
|
|
}); |
|
|
|
|
|
network.on("stabilizationProgress", function (params) { |
|
|
|
|
|
console.log("progress:",params); |
|
|
|
|
|
}); |
|
|
|
|
|
network.on("stabilizationIterationsDone", function (params) { |
|
|
|
|
|
console.log("finished stabilization interations"); |
|
|
|
|
|
}); |
|
|
|
|
|
network.on("stabilized", function (params) { |
|
|
|
|
|
console.log("stabilized!", params); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
loadJSON('./dataTest.json', redrawAll, function(err) {console.log('error')}); |
|
|
</script> |
|
|
</script> |
|
|
</body> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
|
|
</html> |