D3 Bubble Chart

Question

I am new to D3 and I am having a really hard time with the Bubble Chart unless I use the exact example data :

• https://github.com/mbostock/d3/blob/master/examples/bubble/bubble.js
• https://github.com/mbostock/d3/blob/master/examples/data/flare.json

Specifically I am having trouble with

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

I am unable to run get this part of the code to work with other examples.

Here is a subset of the JSON data I am working with:

{
"name": 301,
"children": [
    {
        "resourceid": "11",
        "creator_uid": "301",
        "owner": "Tom",
        "name": "Omega",
        "created_time": "2012-03-07 20:07:11",
        "items": "4"
    },
    {
        "resourceid": "188",
        "creator_uid": "301",
        "owner": "Tom",
        "name": "Nexus",
        "created_time": "2012-03-31 00:04:56",
        "items": "14"
    }
  ]
}

I am able to set the radius to "items", but I expect

.data(bubble.nodes(json)

to distribute the nodes, but I am getting errors that d.x is NULL. Given the sample data for the bubbles example, I'm not sure how the bubbles example is creating d.x and d.y.

Could someone please explain this in detail?

Answer 1

When using the Bubble Chart, the data must be flattened. In the example you linked, there's a call to a function called "classes" which for every node, returns the class as a new object with the value property containing the size. (Your code above suggests you omitted this call).

Later, the call to the function bubble.nodes uses the value property of each object created by the classes function (which were pushed into a single array) to compute the x and y (which in turn is used within the transform function). See the d3 docs for more info about the pack function. This same nodes function also computes the radius (as r) which is used later.

It's that call to nodes that determines the complete layout of the Bubble chart. The remainder of the code in the sample is all about constructing the necessary SVG elements such as a circle and text in the positions specified by the results computed by the nodes function.

So you can't directly pass the json data to the bubble.nodes function unless it meets specific requirements (such as having a value property).

Here is a working example on jsfiddle.net.