<!doctype html> <html> <head> <title>Network | Clustering</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: 600px; height: 600px; border: 1px solid lightgray; } p { max-width:600px; } h4 { margin-bottom:3px; } </style> <script src="../../googleAnalytics.js"></script> </head> <body> <p> Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it. </p> <input type="button" onclick="clusterByCid()" value="Cluster all nodes with CID = 1"> <br /> <input type="button" onclick="clusterByColor()" value="Cluster by color"> <br /> <input type="button" onclick="clusterByConnection()" value="Cluster 'node 1' by connections"> <br /> <input type="button" onclick="clusterOutliers()" value="Cluster outliers"> <br /> <input type="button" onclick="clusterByHubsize()" value="Cluster by hubsize"> <br /> <div id="mynetwork"></div> <script type="text/javascript"> // create an array with nodes var nodes = [ {id: 1, label: 'Node 1', color:'orange'}, {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}}, {id: 3, label: 'Node 3', color:'orange'}, {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}}, {id: 5, label: 'Node 5', color:'orange'}, {id: 6, label: 'cid = 1', cid:1, color:'orange'}, {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}}, {id: 8, label: 'cid = 1', cid:1, color:'lime'}, {id: 9, label: 'cid = 1', cid:1, color:'orange'}, {id: 10, label: 'cid = 1', cid:1, color:'lime'} ]; // create an array with edges var edges = [ {from: 1, to: 2}, {from: 1, to: 3}, {from: 10, to: 4}, {from: 2, to: 5}, {from: 6, to: 2}, {from: 7, to: 5}, {from: 8, to: 6}, {from: 9, to: 7}, {from: 10, to: 9} ]; // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = {layout:{randomSeed:8}}; var network = new vis.Network(container, data, options); network.on("selectNode", function(params) { if (params.nodes.length == 1) { if (network.isCluster(params.nodes[0]) == true) { network.openCluster(params.nodes[0]); } } }) function clusterByCid() { network.setData(data); var clusterOptionsByData = { joinCondition:function(childOptions) { return childOptions.cid == 1; }, clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'} } network.cluster(clusterOptionsByData); } function clusterByColor() { network.setData(data); var colors = ['orange','lime','DarkViolet']; var clusterOptionsByData; for (var i = 0; i < colors.length; i++) { var color = colors[i]; clusterOptionsByData = { joinCondition: function (childOptions) { return childOptions.color.background == color; // the color is fully defined in the node. }, processProperties: function (clusterOptions, childNodes, childEdges) { var totalMass = 0; for (var i = 0; i < childNodes.length; i++) { totalMass += childNodes[i].mass; } clusterOptions.mass = totalMass; return clusterOptions; }, clusterNodeProperties: {id: 'cluster:' + color, borderWidth: 3, shape: 'database', color:color, label:'color:' + color} } network.cluster(clusterOptionsByData); } } function clusterByConnection() { network.setData(data); network.clusterByConnection(1) } function clusterOutliers() { network.setData(data); network.clusterOutliers(); } function clusterByHubsize() { network.setData(data); var clusterOptionsByData = { processProperties: function(clusterOptions, childNodes) { clusterOptions.label = "[" + childNodes.length + "]"; return clusterOptions; }, clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}} } network.clusterByHubsize(undefined, clusterOptionsByData); } </script> </body> </html>