Snippet: D3.js – Pack Layout with transition and tooltips

A customized version of the D3 Circle Packing example that uses the D3 Pack Layout to show the population of some countries by regions.

I have added transitions, zoom/pan, mouse events, tooltips and other minor stuff.

Check out this Pen!

Comments (2)

  1. Pankaj Patel (reply)

    May 15, 2014 at 10:30 am

    This post exactly solved my problem and requirement. Thanks!
    I wanted to ask if we can create cluster view with fixed diameter circles?
    And can they be stacked on particular circumference?

    1. Fabio Biondi (reply)

      May 15, 2014 at 12:13 pm

      I never tried it but I made some quick test checking the Pack Layout documentation.

      Anyway, iIf you try to manually set a radius to a fixed values you will have some problems with the x,y coordinates and some of the circles might overlap:
      .attr(“r”, function (d) {return 20;})

      But the following solution should work fine.
      Set the radius when you define the pack layout and all circles will have a 20 pixels radius, as following:

      var pack = d3.layout.pack()
      .size([_r, _r])
      .radius(20) // <=== THIS .value(function (d) { return d.size; });

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 13 April 2014
Posted by:
Discussion: 2 Comments