Skip to content
A greedy algorithm for circle packing by best satisfying node horizontal contraints
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
example.html
example2.html
xpack.js

README.md

xpack

An algorithm conducts circle packing by best satisfying node horizontal constraints of input data items.

The algorithm was used in generating the conversational thread visualization in a journal paper: J. Zhao, N. Cao, Z. Wen, Y. Song, Y.-R. Lin, and C. Collins, #FluxFlow: Visual Analysis of Anomalous Information Spreading on Social Media, IEEE Transactions on Visualization and Computer Graphics (Proceedings of VAST 2014), 20(12), pp. 1773-1782, Dec 2014.

var pack = xpack();

Creates a new pack layout with the default settings.

pack.xpos([xpos])

If xpos is specified, sets the accessor to the specified function. If xpos is not specified, returns the current accessor, which assumes that the input data is an object with a numeric x attribute.

pack.radius([radius])

If radius is specified, sets the accessor to the specified function. If radius is not specified, returns the current accessor, which assumes that the input data is an object with a numeric r attribute.

pack.score([score])

If score is specified, sets the accessor to the specified function. If score is not specified, returns the current accessor, which assumes that the input data is an object with a numeric score attribute.

pack(data, [packscore])

Runs the pack layout that represents all the input data items above the packscore threshold as circles by best satisfying their horizontal constraints. If packscore is not specified, the default is 0. Assumes data is an arrary of objects with numeric attributes: x, r, and score. If score is not specified with the input objects, simply packs all the data items (so that packscore is redudant).

Returns an object with the following information.
nodes - the packed nodes with px and py as their positions;
rect - the bounding box of the layout: {xMin, xMax, yMin, yMax};
outline - the upper and lower border nodes of the packed layout: {up, down}.

How to use

Choice 1. Global

Adding this library via <script> tag is the simplest way. By doing this, xpack is available in the global scope.

<script src="xpack.js"></script>
Choice 2: AMD

If you use requirejs, xpack support AMD out of the box.

require(['path/to/xpack'], function(xpack) {
  // do something
});
Choice 3: CommonJS

xpack also supports usage in commonjs style.

var xpack = require('path/to/xpack');
You can’t perform that action at this time.