diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/network/exampleApplications | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/network/exampleApplications')
6 files changed, 0 insertions, 1390 deletions
diff --git a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html b/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html deleted file mode 100644 index 8ecd8e39..00000000 --- a/www/lib/vis/examples/network/exampleApplications/disassemblerExample.html +++ /dev/null @@ -1,67 +0,0 @@ -<html> - <head> - <style type="text/css"> - #mynetwork { - width: 900px; - height: 850px; - border: 1px solid lightgray; - } - </style> - <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> - <script src="../../../dist/vis.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 opts = { - manipulation: false, - height: '90%', - layout: { - hierarchical: { - enabled: true, - levelSeparation: 300 - } - }, - physics: { - hierarchicalRepulsion: { - nodeDistance: 300 - } - } -}; - -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'}}, -] -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'}}, -] - -var container = document.getElementById('mynetwork'); -var data = {'nodes': nodes, 'edges': edges} -var gph = new vis.Network(container, data, opts); -</script> -</body> -</html> diff --git a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html b/www/lib/vis/examples/network/exampleApplications/lesMiserables.html deleted file mode 100644 index b97c32b0..00000000 --- a/www/lib/vis/examples/network/exampleApplications/lesMiserables.html +++ /dev/null @@ -1,396 +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-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> - <script src="../../googleAnalytics.js"></script> -</head> - -<body onload="draw()"> -<p> - Relations between the characters of "Les miserables". -</p> - -<div id="mynetwork"></div> -</body> -</html> diff --git a/www/lib/vis/examples/network/exampleApplications/loadingBar.html b/www/lib/vis/examples/network/exampleApplications/loadingBar.html deleted file mode 100644 index 519289e4..00000000 --- a/www/lib/vis/examples/network/exampleApplications/loadingBar.html +++ /dev/null @@ -1,504 +0,0 @@ -<!doctype html> -<html> -<head> - <title>Network | Les miserables</title> - - <style type="text/css"> - #mynetwork { - width: 900px; - height: 900px; - border: 1px solid lightgray; - } - #loadingBar { - position:absolute; - top:0px; - left:0px; - width: 902px; - height: 902px; - background-color:rgba(200,200,200,0.8); - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -ms-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; - opacity:1; - } - #wrapper { - position:relative; - width:900px; - height:900px; - } - - #text { - position:absolute; - top:8px; - left:530px; - width:30px; - height:50px; - margin:auto auto auto auto; - font-size:22px; - color: #000000; - } - - - div.outerBorder { - position:relative; - top:400px; - width:600px; - height:44px; - margin:auto auto auto auto; - border:8px solid rgba(0,0,0,0.1); - background: rgb(252,252,252); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */ - background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ - border-radius:72px; - box-shadow: 0px 0px 10px rgba(0,0,0,0.2); - } - - #border { - position:absolute; - top:10px; - left:10px; - width:500px; - height:23px; - margin:auto auto auto auto; - box-shadow: 0px 0px 4px rgba(0,0,0,0.2); - border-radius:10px; - } - - #bar { - position:absolute; - top:0px; - left:0px; - width:20px; - height:20px; - margin:auto auto auto auto; - border-radius:11px; - border:2px solid rgba(30,30,30,0.05); - background: rgb(0, 173, 246); /* Old browsers */ - box-shadow: 2px 0px 4px rgba(0,0,0,0.4); - } - </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"> - 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 - }, - layout:{ - randomSeed:34 - }, - physics: { - forceAtlas2Based: { - gravitationalConstant: -26, - centralGravity: 0.005, - springLength: 230, - springConstant: 0.18 - }, - maxVelocity: 146, - solver: 'forceAtlas2Based', - timestep: 0.35, - stabilization: { - enabled:true, - iterations:2000, - updateInterval:25 - } - } - }; - var network = new vis.Network(container, data, options); - - network.on("stabilizationProgress", function(params) { - var maxWidth = 496; - var minWidth = 20; - var widthFactor = params.iterations/params.total; - var width = Math.max(minWidth,maxWidth * widthFactor); - - document.getElementById('bar').style.width = width + 'px'; - document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%'; - }); - network.once("stabilizationIterationsDone", function() { - document.getElementById('text').innerHTML = '100%'; - document.getElementById('bar').style.width = '496px'; - document.getElementById('loadingBar').style.opacity = 0; - // really clean the dom element - setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500); - }); - - } - </script> - <script src="../../googleAnalytics.js"></script> -</head> - -<body onload="draw()"> -<p> - With the new stabilization events you can implement your own custom loading bar for all those long loading times! -</p> - -<div id="wrapper"> - <div id="mynetwork"></div> - <div id="loadingBar"> - <div class="outerBorder"> - <div id="text">0%</div> - <div id="border"> - <div id="bar"></div> - </div> - </div> - </div> -</div> -</body> -</html> diff --git a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html b/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html deleted file mode 100644 index 8e05d482..00000000 --- a/www/lib/vis/examples/network/exampleApplications/neighbourhoodHighlight.html +++ /dev/null @@ -1,162 +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-network.min.css"> - - <script src="../datasources/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 1ms, 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 allNodes; - var highlightActive = false; - - var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js - var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js - - function redrawAll() { - var container = document.getElementById('mynetwork'); - var options = { - nodes: { - shape: 'dot', - scaling: { - min: 10, - max: 30, - label: { - min: 8, - max: 30, - drawThreshold: 12, - maxVisible: 20 - } - }, - font: { - size: 12, - face: 'Tahoma' - } - }, - edges: { - width: 0.15, - color: {inherit: 'from'}, - smooth: { - type: 'continuous' - } - }, - physics: false, - interaction: { - tooltipDelay: 200, - hideEdgesOnDrag: true - } - }; - var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js - - - network = new vis.Network(container, data, options); - - // get a JSON object - allNodes = nodesDataset.get({returnType:"Object"}); - - network.on("click",neighbourhoodHighlight); - } - - function neighbourhoodHighlight(params) { - // if something is selected: - if (params.nodes.length > 0) { - highlightActive = true; - var i,j; - var selectedNode = params.nodes[0]; - var degrees = 2; - - // mark all nodes as hard to read. - for (var nodeId in allNodes) { - allNodes[nodeId].color = 'rgba(200,200,200,0.5)'; - if (allNodes[nodeId].hiddenLabel === undefined) { - allNodes[nodeId].hiddenLabel = allNodes[nodeId].label; - allNodes[nodeId].label = undefined; - } - } - var connectedNodes = network.getConnectedNodes(selectedNode); - var allConnectedNodes = []; - - // get the second degree nodes - for (i = 1; i < degrees; i++) { - for (j = 0; j < connectedNodes.length; j++) { - allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j])); - } - } - - // all second degree nodes get a different color and their label back - for (i = 0; i < allConnectedNodes.length; i++) { - allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)'; - if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) { - allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel; - allNodes[allConnectedNodes[i]].hiddenLabel = undefined; - } - } - - // all first degree nodes get their own color and their label back - for (i = 0; i < connectedNodes.length; i++) { - allNodes[connectedNodes[i]].color = undefined; - if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) { - allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel; - allNodes[connectedNodes[i]].hiddenLabel = undefined; - } - } - - // the main node gets its own color and its label back. - allNodes[selectedNode].color = undefined; - if (allNodes[selectedNode].hiddenLabel !== undefined) { - allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel; - allNodes[selectedNode].hiddenLabel = undefined; - } - } - else if (highlightActive === true) { - // reset all nodes - for (var nodeId in allNodes) { - allNodes[nodeId].color = undefined; - if (allNodes[nodeId].hiddenLabel !== undefined) { - allNodes[nodeId].label = allNodes[nodeId].hiddenLabel; - allNodes[nodeId].hiddenLabel = undefined; - } - } - highlightActive = false - } - - // transform the object into an array - var updateArray = []; - for (nodeId in allNodes) { - if (allNodes.hasOwnProperty(nodeId)) { - updateArray.push(allNodes[nodeId]); - } - } - nodesDataset.update(updateArray); - } - - redrawAll() - -</script> - -</body></html> diff --git a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html b/www/lib/vis/examples/network/exampleApplications/nodeLegend.html deleted file mode 100644 index 69769d9b..00000000 --- a/www/lib/vis/examples/network/exampleApplications/nodeLegend.html +++ /dev/null @@ -1,163 +0,0 @@ -<!DOCTYPE html> -<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html --> -<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> - <title>Network | Images</title> - - <style type="text/css"> - html, body { - font: 10pt arial; - padding: 0; - margin: 0; - width: 100%; - height: 100%; - } - - #mynetwork { - width: 100%; - height: 100%; - } - </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; - - var LENGTH_MAIN = 350, - LENGTH_SERVER = 150, - LENGTH_SUB = 50, - WIDTH_SCALE = 2, - GREEN = 'green', - RED = '#C5000B', - ORANGE = 'orange', - //GRAY = '#666666', - GRAY = 'gray', - BLACK = '#2B1B17'; - - // Called when the Visualization API is loaded. - function draw() { - // Create a data table with nodes. - nodes = []; - - // Create a data table with links. - edges = []; - - nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10}); - nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8}); - nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6}); - edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'}); - edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'}); - - // group around 2 - for (var i = 100; i <= 104; i++) { - var value = 1; - var width = WIDTH_SCALE * 2; - var color = GRAY; - var label = null; - - if (i === 103) { - value = 5; - width = 3; - } - if (i === 102) { - color = RED; - label = 'error'; - } - - nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value}); - edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label}); - } - nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1}); - edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE}); - - // group around 3 - nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4}); - edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2}); - for (var i = 230; i <= 231; i++ ) { - nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2}); - edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE}); - } - - // group around 1 - nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10}); - edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'}); - nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7}); - edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'}); - nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3}); - edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'}); - - nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10}); - edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'}); - - - // legend - var mynetwork = document.getElementById('mynetwork'); - var x = - mynetwork.clientWidth / 2 + 50; - var y = - mynetwork.clientHeight / 2 + 50; - var step = 70; - nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed: true, physics:false}); - nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed: true, physics:false}); - nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed: true, physics:false}); - nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true, physics:false}); - nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true, physics:false}); - - // create a network - var container = document.getElementById('mynetwork'); - var data = { - nodes: nodes, - edges: edges - }; - var options = { - nodes: { - scaling: { - min: 16, - max: 32 - } - }, - edges: { - color: GRAY, - smooth: false - }, - physics:{ - barnesHut:{gravitationalConstant:-30000}, - stabilization: {iterations:2500} - }, - groups: { - 'switch': { - shape: 'triangle', - color: '#FF9900' // orange - }, - desktop: { - shape: 'dot', - color: "#2B7CE9" // blue - }, - mobile: { - shape: 'dot', - color: "#5A1E5C" // purple - }, - server: { - shape: 'square', - color: "#C5000B" // red - }, - internet: { - shape: 'square', - color: "#109618" // green - } - } - }; - network = new vis.Network(container, data, options); - } - </script> - <script src="../../googleAnalytics.js"></script> -</head> - -<body onload="draw()"> - -<div id="mynetwork"></div> - - - -</body></html>
\ No newline at end of file diff --git a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html b/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html deleted file mode 100644 index 7de0667b..00000000 --- a/www/lib/vis/examples/network/exampleApplications/worldCupPerformance.html +++ /dev/null @@ -1,98 +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-network.min.css"> - - <script src="../datasources/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>Performance - World Cup Network</h2> - -<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"> - var network; - - - function redrawAll() { - // 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'); - var data = { - nodes: nodes, - edges: edges - }; - var options = { - nodes: { - shape: 'dot', - scaling: { - min: 10, - max: 30 - }, - font: { - size: 12, - face: 'Tahoma' - } - }, - edges: { - width: 0.15, - color: {inherit: 'from'}, - smooth: { - type: 'continuous' - } - }, - physics: { - stabilization: false, - barnesHut: { - gravitationalConstant: -80000, - springConstant: 0.001, - springLength: 200 - } - }, - interaction: { - tooltipDelay: 200, - hideEdgesOnDrag: true - } - }; - - // Note: data is coming from ./datasources/WorldCup2014.js - network = new vis.Network(container, data, options); - } - - redrawAll() -</script> -</body> -</html> |