Recursive circle packing?

Question

I have a JSON object that I want to be able to visualize as a hierarchy of circles like this (you can zoom in and out of the hierarchy using mouse clicks).

I'm just trying to figure out how to use the d3.layout.pack to generate the hierarchy for the JSON object below and access the data that sits under Franchise. Any pointers would be much appreciated. Thanks.

{    
    "Consultant": 
    [
        {
            "ConsultantID": 1, 
            "ConsultantName": "Test Consultant", 
            "Account": 
            [
                {
                    "AccountID": 1, 
                    "AccountName": "Test Account", 
                    "Site": 
                    [
                        {
                            "SiteID": 1, 
                            "SiteName": "Test Site", 
                            "Franchise": 
                            [
                                {
                                    "FranchiseID": 1, 
                                    "FranchiseName": "Test Franchise", 
                                    "Data": 
                                    {
                                    // Data goes here
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Answer 1

For the layout, you can use the built in circle packing layout as you suggest.

For formating the data to use it in this layout, you can use the d3.nest() function. If you want some more insight on how nest works, then I suggest you to have a look at the following question: D3 JSON data conversion