Javascript Network Clustering Library

netClustering allows you to detect clusters in networks using the Clauset, Newman and Moore community detection algorithm directly from the browser, as simple as:

netClustering.cluster(nodes, edges);

and the clusters will be stored in the .cluster attribute of the nodes.

This demo shows how to use the library applying to the standard D3 Force directed layout demo. Click on the cluster button to detect the communities on the sample dataset.

Download the library at the netClustering gitHub repository

forked from john-guerra's block: Javascript Network Clustering Library

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

button#clusterButton  {
  margin-left:50px;
  margin-top:50px;
  font-size: 10pt:
}
</style>
<body>
<button id="clusterButton" type="button">Cluster</button>
<div id="graph"></div>
<script src="//d3js.org/d3.v3.min.js"></script>

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("#graph").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("miserables.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .call(force.drag);

node.append("title")
      .text(function(d) { return d.name; });

force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });

d3.select("#clusterButton").on("click", function () {

/******************/
    /*  Clustering    */
    /******************/
    netClustering.cluster(graph.nodes, graph.links);

svg.selectAll(".node").transition().duration(2000).style("fill", function(d) { return color(d.cluster); });
  });
});

</script>

Updated missing url https://cdn.rawgit.com/john-guerra/netClusteringJs/master/netClustering.js to https://cdn.jsdelivr.net/gh/john-guerra/netclusteringjs/netclustering.js

https://d3js.org/d3.v3.min.js

https://cdn.rawgit.com/john-guerra/netClusteringJs/master/netClustering.js