D3 Examples - Communities in a graph

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Force Layout</title>
    <style type="text/css">
    .node{
        stroke: #fff;
        stroke-width: 1.5px;
    }
​
    .link{
        stroke: #999;
        stroke-opacity: .6;
    }
​
    .node text{
        pointer-events: none;
        font: 10px sans-serif;
    }
    .button{
        color: white;
        background: green;
        font: 25px aerial;
    }
    </style>
</head>
<body>
<button class="button" onclick="alpha()">Click for original graph</button>
<br>
<button class="button" onclick="communities()">Click to split into communities</button>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script type="text/javascript">
​
function alpha(){
    d3.select("svg")
    .remove();
​
    var width = 960;
    var height = 500;
    var color = d3.scale.category20();
​
    var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);
​
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
    d3.json("graph.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 gnodes = svg.selectAll("g.gnode")
            .data(graph.nodes)
        .enter().append("g")
            .classed("gnodes", true);
​
​
    var node = gnodes.append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", "steelblue")
            .call(force.drag);
​
​
    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; })
​
​
        gnodes.attr("transform", function(d){ return "translate(" + [d.x, d.y] + ")"; })
    });
​
});
}
​
​
alpha();
​
function communities(){
    d3.select("svg")
    .remove();
​
    var width = 960;
    var height = 500;
    var color = d3.scale.category20();
​
    var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);
​
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
    d3.json("community.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 gnodes = svg.selectAll("g.gnode")
            .data(graph.nodes)
        .enter().append("g")
            .classed("gnodes", true);
​
​
    var node = gnodes.append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", "steelblue")
            .call(force.drag);
​
​
    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; })
​
​
        gnodes.attr("transform", function(d){ return "translate(" + [d.x, d.y] + ")"; })
    });
​
});
}
​
​
</script>
</body>
</html>
    