Changes for v22.0.0.OS
This commit is contained in:
Thilina Hasantha
24
web/bower_components/vis/examples/network/exampleApplications/disassemblerExample.html
vendored
Normal file
24
web/bower_components/vis/examples/network/exampleApplications/disassemblerExample.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<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>
|
||||
<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>
|
||||
53
web/bower_components/vis/examples/network/exampleApplications/disassemblerExample.js
vendored
Normal file
53
web/bower_components/vis/examples/network/exampleApplications/disassemblerExample.js
vendored
Normal file
@@ -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'}},
|
||||
];
|
||||
396
web/bower_components/vis/examples/network/exampleApplications/lesMiserables.html
vendored
Normal file
396
web/bower_components/vis/examples/network/exampleApplications/lesMiserables.html
vendored
Normal 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-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>
|
||||
504
web/bower_components/vis/examples/network/exampleApplications/loadingBar.html
vendored
Normal file
504
web/bower_components/vis/examples/network/exampleApplications/loadingBar.html
vendored
Normal file
@@ -0,0 +1,504 @@
|
||||
<!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>
|
||||
|
||||
</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>
|
||||
162
web/bower_components/vis/examples/network/exampleApplications/neighbourhoodHighlight.html
vendored
Normal file
162
web/bower_components/vis/examples/network/exampleApplications/neighbourhoodHighlight.html
vendored
Normal file
@@ -0,0 +1,162 @@
|
||||
<!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>
|
||||
|
||||
</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>
|
||||
163
web/bower_components/vis/examples/network/exampleApplications/nodeLegend.html
vendored
Normal file
163
web/bower_components/vis/examples/network/exampleApplications/nodeLegend.html
vendored
Normal file
@@ -0,0 +1,163 @@
|
||||
<!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>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
98
web/bower_components/vis/examples/network/exampleApplications/worldCupPerformance.html
vendored
Normal file
98
web/bower_components/vis/examples/network/exampleApplications/worldCupPerformance.html
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
<!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>
|
||||
|
||||
</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>
|
||||
Reference in New Issue
Block a user