d3 force plugin that implements the GroupInABox algorithm that distributes nodes using a treemap to identify better clusters
Switch branches/tags
Nothing to show
Clone or download
john-guerra Merge pull request #7 from rogeraleite/patch-1
Selecting right div to plot chart
Latest commit 700580b Aug 14, 2018
Permalink
Failed to load latest commit information.
example Selecting right div to plot chart Aug 13, 2018
.eslintrc Reverting from the module because it breaks loading it from the browser Apr 15, 2018
.gitignore
LICENSE Initial commit Nov 7, 2014
README.md document link format Aug 12, 2017
forceInABox.js Reverting from the module because it breaks loading it from the browser Apr 15, 2018
forceInABoxv3.js Releasing forceInABox for d3 v4 May 8, 2017
package-lock.json
package.json Reverting from the module because it breaks loading it from the browser Apr 15, 2018

README.md

forceInABox.js

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.

a note on input data format: forceInABox expects a graph object, with a links array that contains link objects with source and target properties. the values of the source and target properties should refer to the index value of the source or target node. example of this node-index convention

<!-- 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
    );

Here is a forceInABox demo