Accepted answer

There are a few errors in your code that need to be fixed:

  1. You need to set the accessor functions for children and values on your pack layout:

    var pack = d3.layout.pack()
      .size([diameter - 4, diameter - 4])
      .children(function(d) {
        return d.values;  // accessor for children
      .value(function(d) {
        return d.values;  // accessor for values
  2. Your d3.nest() returns an array but d3.pack() requires you to supply a root object containing the hierarchy. You have to create a root object and put your nested array inside:

    var countryRoot = {
        key: "root",
        values: submissionsByCountry
  3. In your code you nest your data into submissionsByCountry but you are not using this variable anywhere else. So you obviously have to refer to it when binding data to your svg. This is accomplished by the above mentioned root object which is later on bound to the svg.

    var node = svg.datum(countryRoot).selectAll(".node")
  4. The attributes the pack layout is adding to your data nodes include values x and y, whereas you refered to them as cx and cy which are attributes to <svg:circle> but are not present in your data. Hence, you got your transform="translate(undefined,undefined)" error messages. You should use these attributes as such:

    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";

I put together a working plunk.


So, you want a parent circle (let's call it the world), with child circles representing each country sized with a count of entries in your JSON array?

d3.json("data/countriesNested.php", function(error, data) {

    var submissionsByCountry = d3.nest()
      .key(function(d) {
        return d.Country;
      .rollup(function(leaves) {
        return leaves.length;

    var root = {
      "key": "world",
      "children": submissionsByCountry


This will give you something closely resembling the flare.json.

Next, you need to give d3 the right accessor for your circle size.

var pack = d3.layout.pack()
  .size([diameter - 4, diameter - 4])
  .value(function(d) {
    return d.values; //<-- this comes from your roll-up and is the count.

Finally it looks like you changed the example code to access non-exist cx and cy attributes in the resulting nodes data:

var node = svg.datum(root).selectAll(".node")
  .attr("class", function(d) {
    return d.children ? "node" : "leaf node";
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")"; //<-- this is .x, .y

Here's an example.

Related Query

More Query from same tag