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!
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: