RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/events/interactionEvents.html ADDED

@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Interaction events</title>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <style type="text/css">
+        #mynetwork {
+            width: 600px;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+    </style>
+</head>
+<body>
+<p>
+    Create a simple network with some nodes and edges. Some of the events are logged in the console in improve readability.
+</p>
+<div id="mynetwork"></div>
+<pre id="eventSpan"></pre>
+<script type="text/javascript">
+    // create an array with nodes
+    var nodes = new vis.DataSet([
+        {id: 1, label: 'Node 1', title: 'I have a popup!'},
+        {id: 2, label: 'Node 2', title: 'I have a popup!'},
+        {id: 3, label: 'Node 3', title: 'I have a popup!'},
+        {id: 4, label: 'Node 4', title: 'I have a popup!'},
+        {id: 5, label: 'Node 5', title: 'I have a popup!'}
+    ]);
+    // create an array with edges
+    var edges = new vis.DataSet([
+        {from: 1, to: 3},
+        {from: 1, to: 2},
+        {from: 2, to: 4},
+        {from: 2, to: 5}
+    ]);
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {
+			interaction:{hover:true},
+			manipulation: {
+				enabled: true
+			}
+		};
+    var network = new vis.Network(container, data, options);
+    network.on("click", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
+    });
+    network.on("doubleClick", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>doubleClick event:</h2>' + JSON.stringify(params, null, 4);
+    });
+    network.on("oncontext", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
+    });
+    network.on("dragStart", function (params) {
+        // There's no point in displaying this event on screen, it gets immediately overwritten
+        params.event = "[original event]";
+        console.log('dragStart Event:', params);
+        console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
+    });
+    network.on("dragging", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>dragging event:</h2>' + JSON.stringify(params, null, 4);
+    });
+    network.on("dragEnd", function (params) {
+        params.event = "[original event]";
+        document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('dragEnd Event:', params);
+        console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
+    });
+    network.on("zoom", function (params) {
+        document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);
+    });
+    network.on("showPopup", function (params) {
+        document.getElementById('eventSpan').innerHTML = '<h2>showPopup event: </h2>' + JSON.stringify(params, null, 4);
+    });
+    network.on("hidePopup", function () {
+        console.log('hidePopup Event');
+    });
+    network.on("select", function (params) {
+        console.log('select Event:', params);
+    });
+    network.on("selectNode", function (params) {
+        console.log('selectNode Event:', params);
+    });
+    network.on("selectEdge", function (params) {
+        console.log('selectEdge Event:', params);
+    });
+    network.on("deselectNode", function (params) {
+        console.log('deselectNode Event:', params);
+    });
+    network.on("deselectEdge", function (params) {
+        console.log('deselectEdge Event:', params);
+    });
+    network.on("hoverNode", function (params) {
+        console.log('hoverNode Event:', params);
+    });
+    network.on("hoverEdge", function (params) {
+        console.log('hoverEdge Event:', params);
+    });
+    network.on("blurNode", function (params) {
+        console.log('blurNode Event:', params);
+    });
+    network.on("blurEdge", function (params) {
+        console.log('blurEdge Event:', params);
+    });
+</script>
+</body>
+</html>

data/examples_for_vis/network/events/physicsEvents.html ADDED

@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+<p>
+  Create a simple network with some nodes and edges.
+</p>
+<div id="mynetwork"></div>
+<pre id="eventSpan"></pre>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {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 = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ]);
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+  network.on("startStabilizing", function (params) {
+    document.getElementById('eventSpan').innerHTML = '<h3>Starting Stabilization</h3>';
+    console.log("started")
+  });
+  network.on("stabilizationProgress", function (params) {
+    document.getElementById('eventSpan').innerHTML = '<h3>Stabilization progress</h3>' + JSON.stringify(params, null, 4);
+    console.log("progress:",params);
+  });
+  network.on("stabilizationIterationsDone", function (params) {
+    document.getElementById('eventSpan').innerHTML = '<h3>Stabilization iterations complete</h3>';
+    console.log("finished stabilization interations");
+  });
+  network.on("stabilized", function (params) {
+    document.getElementById('eventSpan').innerHTML = '<h3>Stabilized!</h3>' + JSON.stringify(params, null, 4);
+    console.log("stabilized!", params);
+  });
+</script>
+</body>
+</html>

data/examples_for_vis/network/events/renderEvents.html ADDED

@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css"/>
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    p {
+      max-width:600px;
+    }
+  </style>
+</head>
+<body>
+<p>
+  You can draw on the canvas using normal HTML5 canvas functions. The before drawing will be behind the network, the after drawing will be in front of the network.
+</p>
+<div id="mynetwork"></div>
+<pre id="eventSpan"></pre>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {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 = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ]);
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var network = new vis.Network(container, data, options);
+  network.on("initRedraw", function () {
+    // do something like move some custom elements?
+  });
+  network.on("beforeDrawing", function (ctx) {
+    var nodeId = 1;
+    var nodePosition = network.getPositions([nodeId]);
+    ctx.strokeStyle = '#A6D5F7';
+    ctx.fillStyle = '#294475';
+    ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,50);
+    ctx.fill();
+    ctx.stroke();
+  });
+  network.on("afterDrawing", function (ctx) {
+    var nodeId = 1;
+    var nodePosition = network.getPositions([nodeId]);
+    ctx.strokeStyle = '#294475';
+    ctx.lineWidth = 4;
+    ctx.fillStyle = '#A6D5F7';
+    ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,20);
+    ctx.fill();
+    ctx.stroke();
+  });
+</script>
+</body>
+</html>

data/examples_for_vis/network/exampleApplications/disassemblerExample.html ADDED

@@ -0,0 +1,24 @@
+<html>
+ <head>
+  <style type="text/css">
+   #mynetwork {
+    width: 900px;
+    height: 850px;
+    border: 1px solid lightgray;
+   }
+  </style>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <script src="disassemblerExample.js"></script>
+ </head>
+<body>
+<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
+a program you wish to analyze.</p>
+<p><div id="mynetwork"></div><br /></p>
+<script type="text/javascript">
+var container = document.getElementById('mynetwork');
+var data = {'nodes': nodes, 'edges': edges}
+var gph = new vis.Network(container, data, options);
+</script>
+</body>
+</html>

data/examples_for_vis/network/exampleApplications/disassemblerExample.js ADDED

@@ -0,0 +1,53 @@
+var options = {
+  manipulation: false,
+  height: '90%',
+  layout: {
+    hierarchical: {
+      enabled: true,
+      levelSeparation: 300
+    }
+  },
+  physics: {
+    hierarchicalRepulsion: {
+      nodeDistance: 300
+    }
+  }
+};
+var nodes = [
+ {'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov    DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov    DWORD PTR ss:[ebp + 0x00], esi\ntest   bl, 0x02\nje     0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest   bl, 0x01\nje     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov    ecx, DWORD PTR ss:[esp + 0x1c]\npush   ecx\ncall   0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov    eax, 0x00000002\nmov    ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov    DWORD PTR fs:[0x00000000], ecx\npop    ecx\npop    esi\npop    ebp\npop    ebx\nadd    esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov    edi, edi\npush   ebp\nmov    ebp, esp\npop    ebp\njmp    0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand    ebx, 0xfd<-0x03>\nlea    ecx, [esp + 0x34]\nmov    DWORD PTR ss:[esp + 0x10], ebx\ncall   0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush   0xff<-0x01>\npush   0x0042fa64\nmov    eax, DWORD PTR fs:[0x00000000]\npush   eax\npush   ecx\npush   ebx\npush   ebp\npush   esi\npush   edi\nmov    eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor    eax, esp\npush   eax\nlea    eax, [esp + 0x18]\nmov    DWORD PTR fs:[0x00000000], eax\nmov    esi, ecx\nmov    DWORD PTR ss:[esp + 0x14], esi\npush   esi\nmov    DWORD PTR ss:[esp + 0x24], 0x00000004\ncall   0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp    DWORD PTR ss:[esp + 0x30], 0x10\njb     0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+ {'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd    esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
+];
+//
+// Note: there are a couple of node id's present here which do not exist
+// - cfg_0x00417563
+// - cfg_0x00403489
+// - cfg_0x0042f03f
+//
+// The edges with these id's will not load into the Network instance.
+//
+var edges = [
+{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
+];

data/examples_for_vis/network/exampleApplications/lesMiserables.html ADDED

@@ -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="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.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: {
+                    forceAtlas2Based: {
+                        gravitationalConstant: -26,
+                        centralGravity: 0.005,
+                        springLength: 230,
+                        springConstant: 0.18
+                    },
+                    maxVelocity: 146,
+                    solver: 'forceAtlas2Based',
+                    timestep: 0.35,
+                    stabilization: {iterations: 150}
+                }
+            };
+            var network = new vis.Network(container, data, options);
+        }
+    </script>
+</head>
+<body onload="draw()">
+<p>
+    Relations between the characters of "Les miserables".
+</p>
+<div id="mynetwork"></div>
+</body>
+</html>