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

fixed alot of bugs, expanded configurator, added more examples, updated docs, updated update interval

flowchartTest
Alex de Mulder 9 years ago
parent
50f6dbc0e7
commit
d404798174
35 changed files with 6056 additions and 6130 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4425
    -4404
      dist/vis.js
  2. +8
    -1
      docs/network/configure.html
  3. +1
    -1
      docs/network/physics.html
  4. +0
    -65
      examples/network/categories/02_random_nodes.html
  5. +0
    -69
      examples/network/categories/07_selections.html
  6. +0
    -145
      examples/network/categories/11_styling.html
  7. +0
    -69
      examples/network/categories/12_arrows.html
  8. +0
    -69
      examples/network/categories/13_dashed_lines.html
  9. +0
    -111
      examples/network/categories/18_fully_random_nodes_clustering.html
  10. +0
    -138
      examples/network/categories/19_scale_free_graph_clustering.html
  11. +0
    -386
      examples/network/categories/22_les_miserables.html
  12. +0
    -115
      examples/network/categories/26_staticSmoothCurves.html
  13. +0
    -156
      examples/network/categories/27_world_cup_network.html
  14. +0
    -222
      examples/network/categories/29_neighbourhood_highlight.html
  15. +3
    -3
      examples/network/categories/basic_usage.html
  16. +97
    -0
      examples/network/categories/edgeStyles/smoothWorldCup.html
  17. +396
    -0
      examples/network/categories/exampleApplications/les_miserables.html
  18. +503
    -0
      examples/network/categories/exampleApplications/loadingBar.html
  19. +162
    -0
      examples/network/categories/exampleApplications/neighbourhood_highlight.html
  20. +10
    -8
      examples/network/categories/exampleApplications/nodeLegend.html
  21. +5
    -6
      examples/network/categories/exampleApplications/worldCupPerformance.html
  22. +4
    -1
      examples/network/categories/nodeStyles/colors.html
  23. +119
    -0
      examples/network/categories/nodeStyles/shadows.html
  24. +0
    -114
      examples/network/categories/physics/25_physics_configuration.html
  25. +80
    -0
      examples/network/categories/physics/physicsConfiguration.html
  26. +25
    -4
      examples/network/categories/rest/clusteringByZoom.html
  27. +72
    -0
      examples/network/categories/rest/configuration.html
  28. +91
    -0
      examples/network/categories/rest/performance.html
  29. +0
    -5
      examples/network/data/WorldCup2014.js
  30. +1
    -1
      lib/network/modules/EdgesHandler.js
  31. +3
    -3
      lib/network/modules/NodesHandler.js
  32. +1
    -1
      lib/network/modules/PhysicsEngine.js
  33. +5
    -2
      lib/network/modules/components/Node.js
  34. +13
    -12
      lib/network/options.js
  35. +32
    -19
      lib/shared/Configurator.js

+ 4425
- 4404
dist/vis.js
File diff suppressed because it is too large
View File


+ 8
- 1
docs/network/configure.html View File

@ -100,7 +100,8 @@ var options = {
configure: {
enabled: true,
filter: 'nodes,edges',
container: undefined
container: undefined,
showButton: true
}
}
@ -154,6 +155,12 @@ function (option, path) {
<td><code>undefined</code></td>
<td>This allows you to put the configure list in another HTML container than below the network.</td>
</tr>
<tr>
<td>showButton</td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Show the generate options button at the bottom of the configurator.</td>
</tr>
</table>
</div>

+ 1
- 1
docs/network/physics.html View File

@ -184,7 +184,7 @@ network.setOptions(options);
<tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td>Object | Boolean</td><td><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td>Number</td> <td><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td>Number</td> <td><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td>Number</td> <td><code>50</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td>Boolean</td> <td><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td> <td>Boolean</td> <td><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td> <td>Number</td> <td><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>

+ 0
- 65
examples/network/categories/02_random_nodes.html View File

@ -1,65 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Random nodes</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: { stabilization: true }
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
Generate a random network with nodes and edges.
</p>
<p>
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go" onclick="draw()">
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/07_selections.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Selections</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
</p>
<div id="mynetwork"></div>
<pre id="info"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 2, to: 4},
{from: 2, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
}
};
network = new vis.Network(container, data, options);
// add event listener
network.on('select', function(properties) {
console.log('select', properties);
delete properties.event;
document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
});
// set initial selection (id's of some nodes)
network.selectNodes([3, 4, 5]);
</script>
</body>
</html>

+ 0
- 145
examples/network/categories/11_styling.html View File

@ -1,145 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Custom style</title>
<style type="text/css">
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var options = null;
var network = null;
// Called when the Visualization API is loaded.
function draw() {
// create nodes
nodes = [
{id: 1, label: 'black node', group: 'black'},
{id: 2, label: 'black node', group: 'black'},
{id: 3, label: 'black node', group: 'black'},
{id: 4, label: 'red node', group: 'black', color: 'red'},
{id: 5, label: 'gray node', group: 'gray'},
{id: 6, label: 'gray node', group: 'gray'},
{id: 7, label: 'gray node', group: 'gray'},
{id: 8, label: 'gray node', group: 'gray'},
{id: 9, label: 'image node', group: 'white'},
{id: 10, label: 'image node', group: 'white'},
{id: 11, label: 'default node'},
{id: 12, label: 'default node'}
];
// create edges
edges = [
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 5, to: 6},
{from: 5, to: 7},
{from: 5, to: 8},
{from: 9, to: 10},
{from: 9, to: 11},
{from: 9, to: 12},
{from: 1, to: 5},
{from: 5, to: 9},
{from: 9, to: 1}
];
// specify options
options = {
physics: {
stabilization: false,
barnesHut: {
springLength:200
}
},
edges: {
width: 2,
arrows: 'to',
color: 'gray'
},
nodes: {
// default for all nodes
font: {
face: 'times'
},
shape: 'circle',
color: {
border: 'orange',
background: 'yellow',
highlight: {
border: 'darkorange',
background: 'gold'
}
}
},
groups: {
black: {
// defaults for nodes in this group
size: 15,
color: 'black',
font: {
color: 'white',
size: 18,
face: 'courier'
},
shape: 'box'
},
gray: {
color: {
border: 'black',
background: 'gray',
highlight: {
border: 'black',
background: 'lightgray'
}
},
font: {
size: 18,
face: 'arial'
},
shape: 'circle'
},
white: {
color: {
border: 'black',
background: 'white'
},
font: {
color: 'red'
},
shape: 'image',
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
}
}
};
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<p>
Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
</p>
<body onload="draw()">
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/12_arrows.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Arrows</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'arrows\nexamples'},
{id: 2, label: 'none'},
{id: 3, label: '"to"'},
{id: 4, label: '"from, to"'},
{id: 5, label: '"middle"'},
{id: 6, label: '{to: {scaleFactor: 2}}'}
];
var edges = [
{from: 1, to: 2},
{from: 1, to: 3, arrows: 'to'},
{from: 1, to: 4, arrows: 'from, to'},
{from: 1, to: 5, arrows: 'middle'},
{from: 1, to: 6, arrows: {to: {scaleFactor: 2}}}
];
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
This example shows the different options for arrows.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 69
examples/network/categories/13_dashed_lines.html View File

@ -1,69 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Dashed lines</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Called on page load
function draw() {
var nodes = [
{id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'},
{id: 3, label: 'dashes: [20, 20]'},
{id: 4, label: 'dashes: [20, 5]'},
{id: 5, label: 'dashes: [5, 20]'},
{id: 6, label: 'dashes: [20, 5, 5, 5]'}
];
var edges = [
{from: 1, to: 2, dashes: true},
{from: 1, to: 3, dashes: [20, 20]},
{from: 1, to: 4, dashes: [20, 5]},
{from: 1, to: 5, dashes: [5, 20]},
{from: 1, to: 6, dashes: [20, 5, 5, 5]}
];
// create the network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'box'
},
physics: {
barnesHut: {
springLength: 150
},
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<p>
This example shows the different options for dashed lines.
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 111
examples/network/categories/18_fully_random_nodes_clustering.html View File

@ -1,111 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Fully random nodes clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
nodes = [];
edges = [];
// randomly create some nodes and edges
var nodeCount = parseInt(document.getElementById('nodeCount').value);
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
}
for (var i = 0; i < nodeCount; i++) {
var from = i;
var to = i;
to = i;
while (to == i) {
to = Math.floor(Math.random() * (nodeCount));
}
edges.push({
from: from,
to: to
});
}
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
clustering: {
enabled: clusteringOn
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="50" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<input type="submit" value="Go">
</form>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 0
- 138
examples/network/categories/19_scale_free_graph_clustering.html View File

@ -1,138 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Scale free network clustering</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function destroy() {
if (network !== null) {
network.destroy();
network = null;
}
}
function draw() {
destroy();
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a network
var clusteringOn = document.getElementById('clustering').checked;
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
clustering: {
enabled: clusteringOn,
clusterEdgeThreshold: clusterEdgeThreshold
},
stabilize: false
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw();">
<h2>Clustering - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
<br />
<br />
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
<br />
<br />
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
</div>
<br />
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="125" style="width: 50px;">
<label for="clustering">Enable Clustering:</label>
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
<label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
<input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
<input type="submit" value="Go">
</form>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 0
- 386
examples/network/categories/22_les_miserables.html View File

@ -1,386 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id:0,"label":"Myriel","group":1},
{id:1,"label":"Napoleon","group":1},
{id:2,"label":"Mlle.Baptistine","group":1},
{id:3,"label":"Mme.Magloire","group":1},
{id:4,"label":"CountessdeLo","group":1},
{id:5,"label":"Geborand","group":1},
{id:6,"label":"Champtercier","group":1},
{id:7,"label":"Cravatte","group":1},
{id:8,"label":"Count","group":1},
{id:9,"label":"OldMan","group":1},
{id:10,"label":"Labarre","group":2},
{id:11,"label":"Valjean","group":2},
{id:12,"label":"Marguerite","group":3},
{id:13,"label":"Mme.deR","group":2},
{id:14,"label":"Isabeau","group":2},
{id:15,"label":"Gervais","group":2},
{id:16,"label":"Tholomyes","group":3},
{id:17,"label":"Listolier","group":3},
{id:18,"label":"Fameuil","group":3},
{id:19,"label":"Blacheville","group":3},
{id:20,"label":"Favourite","group":3},
{id:21,"label":"Dahlia","group":3},
{id:22,"label":"Zephine","group":3},
{id:23,"label":"Fantine","group":3},
{id:24,"label":"Mme.Thenardier","group":4},
{id:25,"label":"Thenardier","group":4},
{id:26,"label":"Cosette","group":5},
{id:27,"label":"Javert","group":4},
{id:28,"label":"Fauchelevent","group":0},
{id:29,"label":"Bamatabois","group":2},
{id:30,"label":"Perpetue","group":3},
{id:31,"label":"Simplice","group":2},
{id:32,"label":"Scaufflaire","group":2},
{id:33,"label":"Woman1","group":2},
{id:34,"label":"Judge","group":2},
{id:35,"label":"Champmathieu","group":2},
{id:36,"label":"Brevet","group":2},
{id:37,"label":"Chenildieu","group":2},
{id:38,"label":"Cochepaille","group":2},
{id:39,"label":"Pontmercy","group":4},
{id:40,"label":"Boulatruelle","group":6},
{id:41,"label":"Eponine","group":4},
{id:42,"label":"Anzelma","group":4},
{id:43,"label":"Woman2","group":5},
{id:44,"label":"MotherInnocent","group":0},
{id:45,"label":"Gribier","group":0},
{id:46,"label":"Jondrette","group":7},
{id:47,"label":"Mme.Burgon","group":7},
{id:48,"label":"Gavroche","group":8},
{id:49,"label":"Gillenormand","group":5},
{id:50,"label":"Magnon","group":5},
{id:51,"label":"Mlle.Gillenormand","group":5},
{id:52,"label":"Mme.Pontmercy","group":5},
{id:53,"label":"Mlle.Vaubois","group":5},
{id:54,"label":"Lt.Gillenormand","group":5},
{id:55,"label":"Marius","group":8},
{id:56,"label":"BaronessT","group":5},
{id:57,"label":"Mabeuf","group":8},
{id:58,"label":"Enjolras","group":8},
{id:59,"label":"Combeferre","group":8},
{id:60,"label":"Prouvaire","group":8},
{id:61,"label":"Feuilly","group":8},
{id:62,"label":"Courfeyrac","group":8},
{id:63,"label":"Bahorel","group":8},
{id:64,"label":"Bossuet","group":8},
{id:65,"label":"Joly","group":8},
{id:66,"label":"Grantaire","group":8},
{id:67,"label":"MotherPlutarch","group":9},
{id:68,"label":"Gueulemer","group":4},
{id:69,"label":"Babet","group":4},
{id:70,"label":"Claquesous","group":4},
{id:71,"label":"Montparnasse","group":4},
{id:72,"label":"Toussaint","group":5},
{id:73,"label":"Child1","group":10},
{id:74,"label":"Child2","group":10},
{id:75,"label":"Brujon","group":4},
{id:76,"label":"Mme.Hucheloup","group":8}
];
// create some edges
var edges = [
{"from":1,"to":0},
{"from":2,"to":0},
{"from":3,"to":0},
{"from":3,"to":2},
{"from":4,"to":0},
{"from":5,"to":0},
{"from":6,"to":0},
{"from":7,"to":0},
{"from":8,"to":0},
{"from":9,"to":0},
{"from":11,"to":10},
{"from":11,"to":3},
{"from":11,"to":2},
{"from":11,"to":0},
{"from":12,"to":11},
{"from":13,"to":11},
{"from":14,"to":11},
{"from":15,"to":11},
{"from":17,"to":16},
{"from":18,"to":16},
{"from":18,"to":17},
{"from":19,"to":16},
{"from":19,"to":17},
{"from":19,"to":18},
{"from":20,"to":16},
{"from":20,"to":17},
{"from":20,"to":18},
{"from":20,"to":19},
{"from":21,"to":16},
{"from":21,"to":17},
{"from":21,"to":18},
{"from":21,"to":19},
{"from":21,"to":20},
{"from":22,"to":16},
{"from":22,"to":17},
{"from":22,"to":18},
{"from":22,"to":19},
{"from":22,"to":20},
{"from":22,"to":21},
{"from":23,"to":16},
{"from":23,"to":17},
{"from":23,"to":18},
{"from":23,"to":19},
{"from":23,"to":20},
{"from":23,"to":21},
{"from":23,"to":22},
{"from":23,"to":12},
{"from":23,"to":11},
{"from":24,"to":23},
{"from":24,"to":11},
{"from":25,"to":24},
{"from":25,"to":23},
{"from":25,"to":11},
{"from":26,"to":24},
{"from":26,"to":11},
{"from":26,"to":16},
{"from":26,"to":25},
{"from":27,"to":11},
{"from":27,"to":23},
{"from":27,"to":25},
{"from":27,"to":24},
{"from":27,"to":26},
{"from":28,"to":11},
{"from":28,"to":27},
{"from":29,"to":23},
{"from":29,"to":27},
{"from":29,"to":11},
{"from":30,"to":23},
{"from":31,"to":30},
{"from":31,"to":11},
{"from":31,"to":23},
{"from":31,"to":27},
{"from":32,"to":11},
{"from":33,"to":11},
{"from":33,"to":27},
{"from":34,"to":11},
{"from":34,"to":29},
{"from":35,"to":11},
{"from":35,"to":34},
{"from":35,"to":29},
{"from":36,"to":34},
{"from":36,"to":35},
{"from":36,"to":11},
{"from":36,"to":29},
{"from":37,"to":34},
{"from":37,"to":35},
{"from":37,"to":36},
{"from":37,"to":11},
{"from":37,"to":29},
{"from":38,"to":34},
{"from":38,"to":35},
{"from":38,"to":36},
{"from":38,"to":37},
{"from":38,"to":11},
{"from":38,"to":29},
{"from":39,"to":25},
{"from":40,"to":25},
{"from":41,"to":24},
{"from":41,"to":25},
{"from":42,"to":41},
{"from":42,"to":25},
{"from":42,"to":24},
{"from":43,"to":11},
{"from":43,"to":26},
{"from":43,"to":27},
{"from":44,"to":28},
{"from":44,"to":11},
{"from":45,"to":28},
{"from":47,"to":46},
{"from":48,"to":47},
{"from":48,"to":25},
{"from":48,"to":27},
{"from":48,"to":11},
{"from":49,"to":26},
{"from":49,"to":11},
{"from":50,"to":49},
{"from":50,"to":24},
{"from":51,"to":49},
{"from":51,"to":26},
{"from":51,"to":11},
{"from":52,"to":51},
{"from":52,"to":39},
{"from":53,"to":51},
{"from":54,"to":51},
{"from":54,"to":49},
{"from":54,"to":26},
{"from":55,"to":51},
{"from":55,"to":49},
{"from":55,"to":39},
{"from":55,"to":54},
{"from":55,"to":26},
{"from":55,"to":11},
{"from":55,"to":16},
{"from":55,"to":25},
{"from":55,"to":41},
{"from":55,"to":48},
{"from":56,"to":49},
{"from":56,"to":55},
{"from":57,"to":55},
{"from":57,"to":41},
{"from":57,"to":48},
{"from":58,"to":55},
{"from":58,"to":48},
{"from":58,"to":27},
{"from":58,"to":57},
{"from":58,"to":11},
{"from":59,"to":58},
{"from":59,"to":55},
{"from":59,"to":48},
{"from":59,"to":57},
{"from":60,"to":48},
{"from":60,"to":58},
{"from":60,"to":59},
{"from":61,"to":48},
{"from":61,"to":58},
{"from":61,"to":60},
{"from":61,"to":59},
{"from":61,"to":57},
{"from":61,"to":55},
{"from":62,"to":55},
{"from":62,"to":58},
{"from":62,"to":59},
{"from":62,"to":48},
{"from":62,"to":57},
{"from":62,"to":41},
{"from":62,"to":61},
{"from":62,"to":60},
{"from":63,"to":59},
{"from":63,"to":48},
{"from":63,"to":62},
{"from":63,"to":57},
{"from":63,"to":58},
{"from":63,"to":61},
{"from":63,"to":60},
{"from":63,"to":55},
{"from":64,"to":55},
{"from":64,"to":62},
{"from":64,"to":48},
{"from":64,"to":63},
{"from":64,"to":58},
{"from":64,"to":61},
{"from":64,"to":60},
{"from":64,"to":59},
{"from":64,"to":57},
{"from":64,"to":11},
{"from":65,"to":63},
{"from":65,"to":64},
{"from":65,"to":48},
{"from":65,"to":62},
{"from":65,"to":58},
{"from":65,"to":61},
{"from":65,"to":60},
{"from":65,"to":59},
{"from":65,"to":57},
{"from":65,"to":55},
{"from":66,"to":64},
{"from":66,"to":58},
{"from":66,"to":59},
{"from":66,"to":62},
{"from":66,"to":65},
{"from":66,"to":48},
{"from":66,"to":63},
{"from":66,"to":61},
{"from":66,"to":60},
{"from":67,"to":57},
{"from":68,"to":25},
{"from":68,"to":11},
{"from":68,"to":24},
{"from":68,"to":27},
{"from":68,"to":48},
{"from":68,"to":41},
{"from":69,"to":25},
{"from":69,"to":68},
{"from":69,"to":11},
{"from":69,"to":24},
{"from":69,"to":27},
{"from":69,"to":48},
{"from":69,"to":41},
{"from":70,"to":25},
{"from":70,"to":69},
{"from":70,"to":68},
{"from":70,"to":11},
{"from":70,"to":24},
{"from":70,"to":27},
{"from":70,"to":41},
{"from":70,"to":58},
{"from":71,"to":27},
{"from":71,"to":69},
{"from":71,"to":68},
{"from":71,"to":70},
{"from":71,"to":11},
{"from":71,"to":48},
{"from":71,"to":41},
{"from":71,"to":25},
{"from":72,"to":26},
{"from":72,"to":27},
{"from":72,"to":11},
{"from":73,"to":48},
{"from":74,"to":48},
{"from":74,"to":73},
{"from":75,"to":69},
{"from":75,"to":68},
{"from":75,"to":25},
{"from":75,"to":48},
{"from":75,"to":41},
{"from":75,"to":70},
{"from":75,"to":71},
{"from":76,"to":64},
{"from":76,"to":65},
{"from":76,"to":66},
{"from":76,"to":63},
{"from":76,"to":62},
{"from":76,"to":48},
{"from":76,"to":58}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 16
},
physics: {
stabilization: false
}
};
var network = new vis.Network(container, data, options);
}
</script>
<script src="../googleAnalytics.js"></script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

+ 0
- 115
examples/network/categories/26_staticSmoothCurves.html View File

@ -1,115 +0,0 @@
<!doctype html>
<html>
<head>
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
types. <br /> <br />
Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
that the direction (the from and to) of the curve matters.
<br /> <br />
</div>
<p>
Smooth curve type:
<select id="dropdownID">
<option value="continuous" selected="selected">continuous</option>
<option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option>
<option value="straightCross">straightCross</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option>
</select>
</p>
<p>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
];
// create an array with edges
var edges = [
{from: 1, to: 2, style:"arrow"}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:{
barnesHut: {
gravitationalConstant:0,
springConstant:0,
centralGravity: 0
}
},
edges: {
smooth: {
dynamic: false,
type: '1'
}
}
};
var network = new vis.Network(container, data, options);
function update() {
var type = dropdown.value;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
}
};
network.setOptions(options);
}
update();
</script>
</body>
</html>

+ 0
- 156
examples/network/categories/27_world_cup_network.html View File

@ -1,156 +0,0 @@
<!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>Network | Static smooth curves - World Cup Network</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script src="./data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. <br/>
<br/><br/>
To improve performance, the physics have been disabled with:
<br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0,
springConstant: 0}}</code><br/> and we have enabled
the toggle hideEdgesOnDrag.
<br/><br/>
</div>
Smooth curve type:
<select id="dropdownID">
<option value="continuous">continuous</option>
<option value="discrete">discrete</option>
<option value="diagonalCross">diagonalCross</option>
<option value="straightCross">straightCross</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value="curvedCW">curvedCW</option>
<option value="curvedCCW">curvedCCW</option>
</select><br/>
inheritColor option:
<select id="inheritColor">
<option value="from">from / true</option>
<option value="to">to</option>
<option value="false">false</option>
</select><br/>
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05"
style="width:200px" id="roundnessSlider"> <input
id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0
for the others)
<br/>
Hide edges on drag: <input type="checkbox" checked="checked"
id="hideEdgesOnDrag" /><br/>
Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" />
<div id="mynetwork"></div>
<script type="text/javascript">
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
hideEdgesOnDrag.onchange = update;
var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
hideNodesOnDrag.onchange = update;
var inheritColor = document.getElementById("inheritColor");
inheritColor.onchange = redrawAll;
var network;
function redrawAll() {
network = null;
var inheritColorVal = inheritColor.value;
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {
inherit: (inheritColorVal == 'false') ? false : inheritColorVal
},
smooth: {
dynamic: false,
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200
},
rendering: {
hideEdgesOnDrag: true
},
physics: false
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
function update() {
var type = dropdown.value;
var roundness = parseFloat(roundnessSlider.value);
roundnessScreen.value = roundness;
var options = {
edges: {
smooth: {
type: type,
roundness: roundness
}
},
rendering: {
hideEdgesOnDrag: hideEdgesOnDrag.checked,
hideNodesOnDrag: hideNodesOnDrag.checked
}
};
network.setOptions(options);
}
redrawAll()
</script>
</body>
</html>

+ 0
- 222
examples/network/categories/29_neighbourhood_highlight.html View File

@ -1,222 +0,0 @@
<!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>Network | Static smooth curves - World Cup Network</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script src="./data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<h2>Dynamic Data - Neighbourhood Highlight</h2>
<div style="width:800px; font-size:14px;">
This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..).
<br /><br />
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
function redrawAll() {
nodes.clear();
edges.clear();
network = null;
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 20,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
dynamic: false,
type: 'continuous'
}
},
physics: false,
interaction: {
tooltipDelay: 200
},
rendering: {
hideEdgesOnDrag: true
}
};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
network.on("click",onClick);
}
function onClick(selectedItems) {
var nodeId;
var degrees = 2;
// we get all data from the dataset once to avoid updating multiple times.
var allNodes = nodes.get({returnType:"Object"});
if (selectedItems.nodes.length == 0) {
// restore on unselect
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
allNodes[nodeId]['levelOfSeperation'] = undefined;
allNodes[nodeId]['inConnectionList'] = undefined;
}
}
}
else {
// we clear the level of separation in all nodes.
clearLevelOfSeperation(allNodes);
// we will now start to collect all the connected nodes we want to highlight.
var connectedNodes = selectedItems.nodes;
// we can store them into levels of separation and we could then later use this to define a color per level
// any data can be added to a node, this is just stored in the nodeObject.
storeLevelOfSeperation(connectedNodes,0, allNodes);
for (var i = 1; i < degrees + 1; i++) {
appendConnectedNodes(connectedNodes);
storeLevelOfSeperation(connectedNodes, i, allNodes);
}
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
if (allNodes[nodeId]['inConnectionList'] == true) {
if (allNodes[nodeId]['levelOfSeperation'] !== undefined) {
if (allNodes[nodeId]['levelOfSeperation'] >= 2) {
allNodes[nodeId].color = 'rgba(150,150,150,0.75)';
}
else {
allNodes[nodeId].color = undefined;
}
}
else {
allNodes[nodeId].color = undefined;
}
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
}
else {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].oldLabel === undefined) {
allNodes[nodeId].oldLabel = allNodes[nodeId].label;
allNodes[nodeId].label = '';
}
}
}
}
}
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodes.update(updateArray);
}
/**
* update the allNodes object with the level of separation.
* Arrays are passed by reference, we do not need to return them because we are working in the same object.
*/
function storeLevelOfSeperation(connectedNodes, level, allNodes) {
for (var i = 0; i < connectedNodes.length; i++) {
var nodeId = connectedNodes[i];
if (allNodes[nodeId]['levelOfSeperation'] === undefined) {
allNodes[nodeId]['levelOfSeperation'] = level;
}
allNodes[nodeId]['inConnectionList'] = true;
}
}
function clearLevelOfSeperation(allNodes) {
for (var nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
allNodes[nodeId]['levelOfSeperation'] = undefined;
allNodes[nodeId]['inConnectionList'] = undefined;
}
}
}
/**
* Add the connected nodes to the list of nodes we already have
*
*
*/
function appendConnectedNodes(sourceNodes) {
var tempSourceNodes = [];
// first we make a copy of the nodes so we do not extend the array we loop over.
for (var i = 0; i < sourceNodes.length; i++) {
tempSourceNodes.push(sourceNodes[i])
}
for (var i = 0; i < tempSourceNodes.length; i++) {
var nodeId = tempSourceNodes[i];
if (sourceNodes.indexOf(nodeId) == -1) {
sourceNodes.push(nodeId);
}
var connectedNodes = network.getConnectedNodes(nodeId);
addUnique(connectedNodes,sourceNodes);
}
tempSourceNodes = null;
}
/**
* Join two arrays without duplicates
* @param fromArray
* @param toArray
*/
function addUnique(fromArray, toArray) {
for (var i = 0; i < fromArray.length; i++) {
if (toArray.indexOf(fromArray[i]) == -1) {
toArray.push(fromArray[i]);
}
}
}
redrawAll()
</script>
</body></html>

examples/network/categories/01_basic_usage.html → examples/network/categories/basic_usage.html View File

@ -3,8 +3,8 @@
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
@ -50,6 +50,6 @@
var network = new vis.Network(container, data, options);
</script>
<script src="../googleAnalytics.js"></script>
<script src="../../googleAnalytics.js"></script>
</body>
</html>

+ 97
- 0
examples/network/categories/edgeStyles/smoothWorldCup.html View File

@ -0,0 +1,97 @@
<!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>Network | Static smooth curves - World Cup Network</title>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css">
<script src="../../data/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height:280px;
}
</style>
<script src="../../../googleAnalytics.js"></script>
</head>
<body>
<h2>Static smooth curves - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
The static smooth curves are based only on the positions of the connected
nodes.
There are multiple ways to determine the way this curve is drawn.
This example shows the effect of the different types on a large network.
<br/> <br/>
Also shown in this example is the inheritColor option of the edges as well as
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
</div>
<div id="optionsContainer"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
color:{inherit:true},
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
hideEdgesOnDrag: true,
tooltipDelay: 200
},
configure: {
filter: function (option, path) {
if (option === 'inherit') {return true;}
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
if (option === 'roundness') {return true;}
if (option === 'hideEdgesOnDrag') {return true;}
if (option === 'hideNodesOnDrag') {return true;}
return false;
},
container: document.getElementById('optionsContainer'),
showButton: false
},
physics: false
};
var data = {nodes:nodes, edges:edges};
// Note: data is coming from ./data/WorldCup2014.js
network = new vis.Network(container, data, options);
}
redrawAll()
</script>
</body>
</html>

+ 396
- 0
examples/network/categories/exampleApplications/les_miserables.html View File

@ -0,0 +1,396 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id: 0, "label": "Myriel", "group": 1},
{id: 1, "label": "Napoleon", "group": 1},
{id: 2, "label": "Mlle.Baptistine", "group": 1},
{id: 3, "label": "Mme.Magloire", "group": 1},
{id: 4, "label": "CountessdeLo", "group": 1},
{id: 5, "label": "Geborand", "group": 1},
{id: 6, "label": "Champtercier", "group": 1},
{id: 7, "label": "Cravatte", "group": 1},
{id: 8, "label": "Count", "group": 1},
{id: 9, "label": "OldMan", "group": 1},
{id: 10, "label": "Labarre", "group": 2},
{id: 11, "label": "Valjean", "group": 2},
{id: 12, "label": "Marguerite", "group": 3},
{id: 13, "label": "Mme.deR", "group": 2},
{id: 14, "label": "Isabeau", "group": 2},
{id: 15, "label": "Gervais", "group": 2},
{id: 16, "label": "Tholomyes", "group": 3},
{id: 17, "label": "Listolier", "group": 3},
{id: 18, "label": "Fameuil", "group": 3},
{id: 19, "label": "Blacheville", "group": 3},
{id: 20, "label": "Favourite", "group": 3},
{id: 21, "label": "Dahlia", "group": 3},
{id: 22, "label": "Zephine", "group": 3},
{id: 23, "label": "Fantine", "group": 3},
{id: 24, "label": "Mme.Thenardier", "group": 4},
{id: 25, "label": "Thenardier", "group": 4},
{id: 26, "label": "Cosette", "group": 5},
{id: 27, "label": "Javert", "group": 4},
{id: 28, "label": "Fauchelevent", "group": 0},
{id: 29, "label": "Bamatabois", "group": 2},
{id: 30, "label": "Perpetue", "group": 3},
{id: 31, "label": "Simplice", "group": 2},
{id: 32, "label": "Scaufflaire", "group": 2},
{id: 33, "label": "Woman1", "group": 2},
{id: 34, "label": "Judge", "group": 2},
{id: 35, "label": "Champmathieu", "group": 2},
{id: 36, "label": "Brevet", "group": 2},
{id: 37, "label": "Chenildieu", "group": 2},
{id: 38, "label": "Cochepaille", "group": 2},
{id: 39, "label": "Pontmercy", "group": 4},
{id: 40, "label": "Boulatruelle", "group": 6},
{id: 41, "label": "Eponine", "group": 4},
{id: 42, "label": "Anzelma", "group": 4},
{id: 43, "label": "Woman2", "group": 5},
{id: 44, "label": "MotherInnocent", "group": 0},
{id: 45, "label": "Gribier", "group": 0},
{id: 46, "label": "Jondrette", "group": 7},
{id: 47, "label": "Mme.Burgon", "group": 7},
{id: 48, "label": "Gavroche", "group": 8},
{id: 49, "label": "Gillenormand", "group": 5},
{id: 50, "label": "Magnon", "group": 5},
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
{id: 52, "label": "Mme.Pontmercy", "group": 5},
{id: 53, "label": "Mlle.Vaubois", "group": 5},
{id: 54, "label": "Lt.Gillenormand", "group": 5},
{id: 55, "label": "Marius", "group": 8},
{id: 56, "label": "BaronessT", "group": 5},
{id: 57, "label": "Mabeuf", "group": 8},
{id: 58, "label": "Enjolras", "group": 8},
{id: 59, "label": "Combeferre", "group": 8},