Keywords: layout algorithm, circle-packing

Background:

The circle-pack layout represents nodes in a hierarchal model as circles and positions each child node’s circle inside its parent’s circle. It was implemented in D3.js library and the effect is shown in the following figure:

    I need an improved algorithm that can stack circles at a fixed angle in my reseach project. That is, stack circles in a fan-shaped ring. Therefore I improved the stacking method based on circle-packing algorithm and implemented it using also Javascript so that it can be used in conjunction with D3. Circles in it can be filtered and selected besides two adjacent fan-shaped rings can be compared in height and density by observation.

The main idea is to set the placement order and arrangement relationship of several circles. Based on this, I started to try the following experiments:

The first experiment idea is to calculate the center points of each voronoi polygons, and get its Maximum Inscribed Circle, just like this:

then remove the voronoi border:         

It is maybe an elegant layout form, but not fit my reqiurement. Therefore, at last, I rewrite the circle-packing algorithm of D3.js, and change it into a new layout library. The figure below shows an example of the application of my new circle-packing algorithm, it reflects research development of the Computer Science, each circle represents an article taken from top 5 ranking journals (ranking by impact factors). The radius of each circle represents the cited number (non-linear).

welcome to visit: http://works.fujiazhiyu.cn/csrings

to get more examples.