jsond3.jsflare

Replicating Mike Bostock's collapsible tree


I want to replicate Mike Bostock's collapsible tree graphic (http://bl.ocks.org/mbostock/4339083).

I have loaded a CSV by using the nest function in d3.js. Now, the data looks like this:

 [
  {
    "key": "Bayer HealthCare",
    "values": [
      {
        "key": "Animal Health",
        "values": [
          {
            "key": "Companion Animal",
            "values": [
              {
                "brand": "Drontal",
                "product": "Companion Animal",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              },
              {
                "brand": "Profender",
                "product": "Companion Animal",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              },
              {
                "brand": "Rompun",
                "product": "Companion Animal",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              }
            ]
          },
          {
            "key": "Companion Animal - Food Animal Product",
            "values": [
              {
                "brand": "Baytril",
                "product": "Companion Animal - Food Animal Product",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              }
            ]
          },
          {
            "key": "Companion animals",
            "values": [
              {
                "brand": "Advantage",
                "product": "Companion animals",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              },
              {
                "brand": "Advantix",
                "product": "Companion animals",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              },
              {
                "brand": "Advocate",
                "product": "Companion animals",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              }
            ]
          },
          {
            "key": "Food Animal Product",
            "values": [
              {
                "brand": "Baycox",
                "product": "Food Animal Product",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              },
              {
                "brand": "Catosal",
                "product": "Food Animal Product",
                "subgroup": "Bayer HealthCare",
                "division": "Animal Health"
              }
            ]
          }
        ]
      }
.....

(Full data and what I have done so far is available here: http://jsfiddle.net/L3phF/9/)

Unfortunately I don't know how to transform the data to the "FLARE JSON" format like this https://gist.github.com/mbostock/1093025. If am right I have to rename "key" to "name", "values" to "children" and I have to insert ""name:"" in front of every object on the lowest level.

I appreciate any help!


Solution

  • This will rename "key" to "name" and "values" to "children":

    var renameKeys=function(obj){
        /*Recursively renames "key" keys to "name" and
        renames "values" keys to "children" */
        obj.name=obj.key;
        delete obj['key'];
        if(obj.values){
            obj.children=obj.values;
            delete obj.values;
            obj.children.forEach(renameKeys);
        }
        return obj;
    };
    

    You also need to give the JSON a "root" node in order to work with the collapsible tree visualization you linked to. This should do it:

    var nest = d3.nest()
        .key(function(d) { return d.subgroup; })
        .key(function(d) { return d.division; })
        .key(function(d) { return d.product; })
        .entries(parsed);
    
    /*The visualization requires there to be a root node*/
    var flareData={key:'root',values:[]};
    flareData.values=nest;
    renameKeys(flareData);
    

    Here's a JSFiddle to get the JSON you want: http://jsfiddle.net/X2fxC/3/

    Here's a JSFiddle with the resulting visualization: http://jsfiddle.net/X2fxC/5/

    Your data looks like this when plotted using the expanding tree visualization:

    enter image description here