Force in a Box algorithm d3v4

forceInABox

forceInABox demo gif

Updated for d3.v4

A d3.js v4 force that implements the Group-in-a-box layout algorithm to distribute nodes in a network according to their clusters. The algorithm uses a treemap or a force diagram to compute focis that are later used to distribute each cluster into it's own box.

To use it just add the forceInABox as another force in your simulation and make sure your other forces don't overpower it

<!-- Include d3.v4 or forceSimulation -->
<script type="text/javascript" src="forceInABox.js">   </script>

// Create the simulation with a small forceX and Y towards the center
var simulation = d3.forceSimulation()
	  .force("charge", d3.forceManyBody())
	  .force("x", d3.forceX(width/2).strength(0.05))
	  .force("y", d3.forceY(height/2).strength(0.05));

// Instantiate the forceInABox force
var groupingForce = forceInABox()
	  .strength(0.1) // Strength to foci
	  .template(template) // Either treemap or force
	  .groupBy("group") // Node attribute to group
	  .links(graph.links) // The graph links. Must be called after setting the grouping attribute
	  .size([width, height]) // Size of the chart

// Add your forceInABox to the simulation
simulation
    .nodes(graph.nodes)
    .force("group", groupingForce)
    .force("link", d3.forceLink(graph.links)
      .distance(50)
      .strength(groupingForce.getLinkStrength) // default link force will try to join nodes in the same group stronger than if they are in different groups
    );

forceInABox repo

forked from john-guerra's block: Force in a Box algorithm

forked from john-guerra's block: Force in a Box algorithm d3v4

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font-family: Helvetica }
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

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

.cell {
  fill: none;
  stroke: grey;
}

input[type=checkbox]
{
  /* Triple-sized Checkboxes */
  -ms-transform: scale(2); /* IE */v
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

.checkboxtext
{
  /* Checkbox text */
  font-family: sans-serif;
  font-size: 110%;
  display: inline;
}

.options {
  margin-left: 20px;
}
</style>
<body>
<h1>Force in a Box (d3v4)</h1>
<input id="checkGroupInABox" type="checkbox">   Group in a Box  </input>
<input id="checkShowTreemap" type="checkbox">   Show Template  </input>
  <select id="selectTemplate" type="select">
    <option value="treemap">Treemap</option>
    <option value="force">Force</option>
  </select>

<div id="chart"></div>
<script src="//d3js.org/d3.v4.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/john-guerra/forceinabox/forceinabox.js"></script>
<script>
/* global d3, forceInABox */

var useGroupInABox = false,
  drawTemplate = false,
  template = "force";

d3.select("#checkGroupInABox").property("checked", useGroupInABox);
d3.select("#checkShowTreemap").property("checked", drawTemplate);
d3.select("#selectTemplate").property("value", template);

var width = 600,
    height = 400;

var color = d3.scaleOrdinal(d3.schemeCategory20);

var force = d3.forceSimulation()
    .force("charge", d3.forceManyBody())
    .force("x", d3.forceX(width/2).strength(0.05))
    .force("y", d3.forceY(height/2).strength(0.05));

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

d3.json("miserables.json", function(error, graph) {
  var groupingForce = forceInABox()
          .strength(0.2) // Strength to foci
          .template(template) // Either treemap or force
          .groupBy("group") // Node attribute to group
          .links(graph.links) // The graph links. Must be called after setting the grouping attribute
          .enableGrouping(useGroupInABox)
  			  .nodeSize(4)
          .linkStrengthIntraCluster(0.01)
          .size([width, height]) // Size of the chart
  force
      .nodes(graph.nodes)
      .force("group", groupingForce)
	    .force("charge", d3.forceManyBody())
      .force("link", d3.forceLink(graph.links)
        .distance(10)
        .strength(groupingForce.getLinkStrength)
      );

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)
      .style("fill", function(d) { return color(d.group); })
      .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));

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("#checkGroupInABox").on("change", onCheckGroupInABox);

d3.select("#selectTemplate").on("change", function () {
    template = d3.select("#selectTemplate").property("value");
    force.stop();
    force.force("group").template(template);
    force.alphaTarget(0.5).restart();
  });

d3.select("#checkShowTreemap").on("change", function () {
    drawTemplate = d3.select("#checkShowTreemap").property("checked");
    if (drawTemplate) {
      force.force("group").drawTemplate(svg);
    } else {
      force.force("group").deleteTemplate(svg);
    }
  });

setTimeout(function() {
    d3.select("#checkGroupInABox").property("checked", true);
    onCheckGroupInABox();
  }, 2000);
});

function dragstarted(d) {
  if (!d3.event.active) force.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) force.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

function onCheckGroupInABox() {
  force.stop();
  useGroupInABox = d3.select("#checkGroupInABox").property("checked");
  force
      // .force("link", d3.forceLink(graph.links).distance(50).strength(
      // function (l) { return !useGroupInABox? 0.7 :
      //     l.source.group!==l.target.group ? 0 : 0.1;
      // }))
      .force("group").enableGrouping(useGroupInABox)

force.alphaTarget(0.5).restart();
}

</script>

Updated missing url https://cdn.rawgit.com/john-guerra/forceInABox/master/forceInABox.js to https://cdn.jsdelivr.net/gh/john-guerra/forceinabox/forceinabox.js

https://d3js.org/d3.v4.js

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