Circular Packing | the D3 Graph Gallery

Step by step

Most basic circular packing

Most basic examples: just applying a few forces on 8 nodes

Add dragging feature

Dragging allows you to interactively modify a node position, updating other nodes automatically.

Add group features

How to use group information on circular packing: change color, attract to specific position...

Template

Here is the template I start with when needing to build a circular packing with one level of hierarchy. Input data is a .csv file giving features for each node. Circle size an color depends on these features. You can drag circles to reorganize, and hover them for more information.

See code

Selection of blocks

A selection of examples showing the application of the basic concept to real life dataset.

Circular packing with one level of hierarchy

An example showing one bubble by country in a clean layout.

Overview of force layout

A cool post by d3 in depth I highly recommend to get introduced to forces