|
|
- <!doctype html>
- <html>
- <head>
- <title>Network | Basic usage</title>
-
- <script type="text/javascript" src="../dist/vis.js"></script>
- <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
-
- <style type="text/css">
- #mynetwork {
- width: 1400px;
- height: 1000px;
- border: 1px solid lightgray;
- }
- </style>
- <script type="text/javascript">
- </script>
- </head>
-
- <body>
-
- <p>
- Create a simple network with some nodes and edges.
- </p>
-
- <div id="mynetwork"></div>
-
- <script type="text/javascript">
- var jsonnodedata = '[{"id":1,"label":"vuz.co.uk","shape":"box"},{"cid":"nta-vman","group":"ports","id":2,"value":2,"label":"ettitwe.gov"},{"cid":"nta-vman","id":3,"value":5,"label":"156.226.202.125","shape":"box"},{"cid":"nta-vman","group":"ports","id":4,"value":2,"label":"palje.com"},{"cid":"nta-vman","id":5,"value":5,"label":"231.64.214.204","shape":"box"},{"group":"switch","fontColor":"white","id":6,"value":1,"shape":"image","image":"blob:https%3A//83.167.160.227%3A12326/d2f09d36-04f9-496a-9c95-9736c27d54d4","physics":false},{"group":"switch","fontColor":"white","id":7,"value":1,"shape":"image","image":"blob:https%3A//83.167.160.227%3A12326/ab3203fc-f137-4519-9c2e-d17096124aaa","physics":false},{"id":8,"label":"awhasom.io","shape":"box"},{"cid":"awell-belf-sw1","group":"ports","id":9,"value":2,"label":"mun.co.uk"},{"cid":"awell-belf-sw1","id":10,"value":5,"label":"255.94.184.92","shape":"box"},{"cid":"awell-belf-sw1","group":"ports","id":11,"value":2,"label":"rad.org"},{"cid":"awell-belf-sw1","id":12,"value":5,"label":"168.51.55.93","shape":"box"},{"id":13,"label":"ezfuf.com","shape":"box"},{"cid":"awell-waln-sw1","group":"ports","id":14,"value":2,"label":"ke.co.uk"},{"cid":"awell-waln-sw1","id":15,"value":5,"label":"212.211.27.21","shape":"box"},{"id":16,"label":"sebu.io","shape":"box"},{"cid":"DOWWATTS","group":"ports","id":17,"value":2,"label":"iku.co.uk"},{"cid":"DOWWATTS","id":18,"value":5,"label":"16.83.99.72","shape":"box"},{"cid":"DOWWATTS","group":"ports","id":19,"value":2,"label":"peir.net"},{"cid":"DOWWATTS","id":20,"value":5,"label":"169.133.137.167","shape":"box"},{"group":"switch","fontColor":"white","id":21,"value":1,"shape":"image","image":"blob:https%3A//83.167.160.227%3A12326/0462c068-d726-4ed2-adb8-32bafa5911dd","physics":false},{"id":22,"label":"ceamo.edu","shape":"box"},{"cid":"awell-rank-sw1","group":"ports","id":23,"value":2,"label":"figce.edu"},{"cid":"awell-rank-sw1","id":24,"value":5,"label":"138.60.105.235","shape":"box"},{"group":"switch","fontColor":"white","id":25,"value":1,"shape":"image","image":"blob:https%3A//83.167.160.227%3A12326/7ed2170d-596b-47bb-be0b-3abd0a9eb22a","physics":false},{"id":26,"label":"rekla.edu","shape":"box"},{"cid":"awell-leis-sw1","group":"ports","id":27,"value":2,"label":"osme.io"},{"cid":"awell-leis-sw1","id":28,"value":5,"label":"116.132.55.9","shape":"box"},{"cid":"awell-leis-sw1","group":"ports","id":29,"value":2,"label":"ugtoil.org"},{"cid":"awell-leis-sw1","id":30,"value":5,"label":"213.69.71.107","shape":"box"},{"id":31,"label":"po.com","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":32,"value":2,"label":"wabcuznal.co.uk"},{"cid":"zayo-dark-THE","id":33,"value":5,"label":"1C:07:FA:12:89:B3","shape":"box"},{"cid":"zayo-dark-THE","id":34,"value":5,"label":"254.100.193.40","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":35,"value":2,"label":"ja.org"},{"cid":"zayo-dark-THE","id":36,"value":5,"label":"5B:97:79:5C:3A:23","shape":"box"},{"cid":"zayo-dark-THE","id":37,"value":5,"label":"252.134.7.219","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":38,"value":2,"label":"oc.io"},{"cid":"zayo-dark-THE","id":39,"value":5,"label":"4D:BE:B4:51:1A:8A","shape":"box"},{"cid":"zayo-dark-THE","id":40,"value":5,"label":"11.132.180.39","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":41,"value":2,"label":"kezvuguj.io"},{"cid":"zayo-dark-THE","id":42,"value":5,"label":"188.135.150.38","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":43,"value":2,"label":"zocfat.org"},{"cid":"zayo-dark-THE","id":44,"value":5,"label":"1B:A8:AA:F3:49:0B","shape":"box"},{"cid":"zayo-dark-THE","id":45,"value":5,"label":"230.71.126.37","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":46,"value":2,"label":"kohrashep.net"},{"cid":"zayo-dark-THE","id":47,"value":5,"label":"144.235.80.22","shape":"box"},{"cid":"zayo-dark-THE","group":"ports","id":48,"value":2,"label":"suhi.io"},{"cid":"zayo-dark-THE","id":49,"value":5,"label":"81:6B:86:F1:AC:54","shape":"box"},{"cid":"zayo-dark-THE","id":50,"value":5,"label":"199.178.1.218","shape":"bo
-
- var jsonedgedata = '[{"from":3,"to":2,"value":0.9,"length":500,"color":"green"},{"from":5,"to":4,"value":0.9,"length":500,"color":"green"},{"from":10,"to":9,"value":0.9,"length":500,"color":"green"},{"from":12,"to":11,"value":0.9,"length":500,"color":"green"},{"from":15,"to":14,"value":0.9,"length":500,"color":"green"},{"from":18,"to":17,"value":0.9,"length":500,"color":"green"},{"from":20,"to":19,"value":0.9,"length":500,"color":"green"},{"from":24,"to":23,"value":0.9,"length":500,"color":"green"},{"from":28,"to":27,"value":0.9,"length":500,"color":"green"},{"from":30,"to":29,"value":0.9,"length":500,"color":"green"},{"from":33,"to":32,"value":1,"length":500,"color":"white"},{"from":34,"to":33,"value":0.9,"length":500,"color":"green"},{"from":36,"to":35,"value":1,"length":500,"color":"white"},{"from":37,"to":36,"value":0.9,"length":500,"color":"green"},{"from":39,"to":38,"value":1,"length":500,"color":"white"},{"from":40,"to":39,"value":0.9,"length":500,"color":"green"},{"from":42,"to":41,"value":0.9,"length":500,"color":"green"},{"from":44,"to":43,"value":1,"length":500,"color":"white"},{"from":45,"to":44,"value":0.9,"length":500,"color":"green"},{"from":47,"to":46,"value":0.9,"length":500,"color":"green"},{"from":49,"to":48,"value":1,"length":500,"color":"white"},{"from":50,"to":49,"value":0.9,"length":500,"color":"green"},{"from":52,"to":51,"value":1,"length":500,"color":"white"},{"from":53,"to":52,"value":0.9,"length":500,"color":"green"},{"from":55,"to":54,"value":1,"length":500,"color":"white"},{"from":56,"to":55,"value":0.9,"length":500,"color":"green"},{"from":58,"to":57,"value":1,"length":500,"color":"white"},{"from":59,"to":58,"value":0.9,"length":500,"color":"green"},{"from":61,"to":60,"value":1,"length":500,"color":"white"},{"from":62,"to":61,"value":0.9,"length":500,"color":"green"},{"from":64,"to":63,"value":1,"length":500,"color":"white"},{"from":65,"to":64,"value":0.9,"length":500,"color":"green"},{"from":71,"to":70,"value":0.9,"length":500,"color":"green"},{"from":74,"to":73,"value":0.9,"length":500,"color":"green"},{"from":77,"to":76,"value":0.9,"length":500,"color":"green"},{"from":80,"to":79,"value":0.9,"length":500,"color":"green"},{"from":82,"to":81,"value":0.9,"length":500,"color":"green"},{"from":84,"to":83,"value":0.9,"length":500,"color":"green"},{"from":86,"to":85,"value":0.9,"length":500,"color":"green"},{"from":88,"to":87,"value":1,"length":500,"color":"white"},{"from":89,"to":88,"value":0.9,"length":500,"color":"green"},{"from":91,"to":90,"value":0.9,"length":500,"color":"green"},{"from":93,"to":92,"value":0.9,"length":500,"color":"green"},{"from":95,"to":94,"value":0.9,"length":500,"color":"green"},{"from":97,"to":96,"value":0.9,"length":500,"color":"green"},{"from":99,"to":98,"value":1,"length":500,"color":"white"},{"from":100,"to":99,"value":0.9,"length":500,"color":"green"},{"from":102,"to":101,"value":0.9,"length":500,"color":"green"},{"from":104,"to":103,"value":0.9,"length":500,"color":"green"},{"from":106,"to":105,"value":0.9,"length":500,"color":"green"},{"from":108,"to":107,"value":0.9,"length":500,"color":"green"},{"from":110,"to":109,"value":0.9,"length":500,"color":"green"},{"from":112,"to":111,"value":0.9,"length":500,"color":"green"},{"from":114,"to":113,"value":0.9,"length":500,"color":"green"},{"from":116,"to":115,"value":0.9,"length":500,"color":"green"},{"from":118,"to":117,"value":0.9,"length":500,"color":"green"},{"from":120,"to":119,"value":0.9,"length":500,"color":"green"},{"from":122,"to":121,"value":0.9,"length":500,"color":"green"},{"from":124,"to":123,"value":0.9,"length":500,"color":"green"},{"from":126,"to":125,"value":0.9,"length":500,"color":"green"},{"from":128,"to":127,"value":0.9,"length":500,"color":"green"},{"from":130,"to":129,"value":0.9,"length":500,"color":"green"},{"from":132,"to":131,"value":0.9,"length":500,"color":"green"},{"from":134,"to":133,"value":0.9,"length":500,"color":"green"},{"from":136,"to":135,"value":0.9,"length":500,"color":"green"},{"from":138,"to":137,"value":0.9,"length":500,"color":"green"},{"from":140,"to":139,"value":0.9,"
-
- var json_nodeData = JSON.parse(jsonnodedata);
- var json_edgeData = JSON.parse(jsonedgedata);
- for (var i = 0; i < json_nodeData.length; i++) {
- delete json_nodeData[i].image;
- json_nodeData[i].shape = 'dot';
- json_nodeData[i].physics = true;
- }
-
- for (var i = 0; i < json_edgeData.length; i++) {
- delete json_edgeData[i].length;
- json_edgeData[i].color = undefined;
- delete json_edgeData[i].color;
- }
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: json_nodeData,
- edges: json_edgeData
- };
-
- var options = {
- layout: {randomSeed: 8},
- edges: {smooth: false},
- "physics": {
- stabilization: false,
- "forceAtlas2Based": {
- "gravitationalConstant": -97,
- "springLength": 40,
- "springConstant": 0.13,
- "avoidOverlap": 1
- },
- "solver": "forceAtlas2Based"
- }
- };
- var network = new vis.Network(container, data, options);
- </script>
- </body>
- </html>
|
