summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/network/data/scalingCustom.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/examples/network/data/scalingCustom.html')
-rw-r--r--www/lib/vis/examples/network/data/scalingCustom.html86
1 files changed, 86 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/data/scalingCustom.html b/www/lib/vis/examples/network/data/scalingCustom.html
new file mode 100644
index 00000000..b1ffede5
--- /dev/null
+++ b/www/lib/vis/examples/network/data/scalingCustom.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+<head>
+ <title>Network | Sizing</title>
+
+ <style type="text/css">
+ html, body {
+ font: 10pt arial;
+ }
+ #mynetwork {
+ width: 600px;
+ height: 600px;
+ border: 1px solid lightgray;
+ }
+ </style>
+
+ <script type="text/javascript" src="../../../dist/vis.js"></script>
+ <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript">
+ var nodes = null;
+ var edges = null;
+ var network = null;
+
+ function draw() {
+ // create people.
+ // value corresponds with the age of the person
+ nodes = [
+ {id: 1, value: 2, label: 'Algie' },
+ {id: 2, value: 31, label: 'Alston'},
+ {id: 3, value: 12, label: 'Barney'},
+ {id: 4, value: 16, label: 'Coley' },
+ {id: 5, value: 17, label: 'Grant' },
+ {id: 6, value: 15, label: 'Langdon'},
+ {id: 7, value: 6, label: 'Lee'},
+ {id: 8, value: 5, label: 'Merlin'},
+ {id: 9, value: 30, label: 'Mick'},
+ {id: 10, value: 18, label: 'Tod'},
+ ];
+
+ // create connections between people
+ // value corresponds with the amount of contact between two people
+ edges = [
+ {from: 2, to: 8, value: 3},
+ {from: 2, to: 9, value: 5},
+ {from: 2, to: 10,value: 1},
+ {from: 4, to: 6, value: 8},
+ {from: 5, to: 7, value: 2},
+ {from: 4, to: 5, value: 1},
+ {from: 9, to: 10,value: 2},
+ {from: 2, to: 3, value: 6},
+ {from: 3, to: 9, value: 4},
+ {from: 5, to: 3, value: 1},
+ {from: 2, to: 7, value: 4}
+ ];
+
+ // Instantiate our network object.
+ var container = document.getElementById('mynetwork');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {
+ nodes: {
+ shape: 'dot',
+ scaling: {
+ customScalingFunction: function (min,max,total,value) {
+ return value/total;
+ },
+ min:5,
+ max:150
+ }
+ }
+ };
+ network = new vis.Network(container, data, options);
+ }
+ </script>
+ <script src="../../googleAnalytics.js"></script>
+</head>
+<body onload="draw()">
+<p>
+ Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
+</p>
+<div id="mynetwork"></div>
+</body>
+</html>