vis.js

by hansenmc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<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" id="clusterByCid" value="Cluster all nodes with CID = 1">

<input type="button" id="clusterByColor" value="Cluster by color">

<input type="button" id="clusterByConnection" value="Cluster 'node 1' by connections">

<input type="button" id="clusterOutliers" value="Cluster outliers">

<input type="button" id="clusterByHubsize" value="Cluster by hubsize">
<br />
<div id="mynetwork"></div>
<div id="details"></div>

CSS

#mynetwork {
   width: 600px;
   height: 600px;
   border: 1px solid lightgray;
 }
 
 p {
   max-width: 600px;
 }
 
 h4 {
   margin-bottom: 3px;
 }

JavaScript

// create an array with nodes
 var nodes = [{
   id: 1,
   label: 'Node 1',
   group: 0,
   color: 'orange'
 }, {
   id: 2,
   label: 'Node 2',
   group: 'encounter'
 }, {
   id: 3,
   label: 'Node 3',
   group: 0,
   color: 'orange'
 }, {
   id: 4,
   label: 'Node 4',
   color: 'DarkViolet',
   font: {
     color: 'white'
   }
 }, {
   id: 5,
   label: 'Node 5',
   color: 'orange'
 }, {
   id: 6,
   label: 'cid = 1',
   group: 'encounter',
   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
   },
   groups: {
     encounter: {
       label: "Encounter",
      
       color: 'blue',
       font: {
         color: 'black'
       }
     }
   }
 };
 
 var network = new vis.Network(container, data, options);
 network.on("selectNode", function(params) {
   if (params.nodes.length === 1 && 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);
 }

...