Let say I have some JSON data returned from an API to D3 using the d3-fetch command and the data is a a couple of nested objects like this:
{
"researcher": {
"deployment": 3.55974264705882,
"collaboration": 2.33547794117647,
"supportlevel": 3.19944852941176
},
"data": {
"deployment": 3.34428879310345,
"collaboration": 2.08836206896552,
"supportlevel": 2.953125
}
}
For the parent groups, I do this to get them into a variable for graphing on X-axis:
var groups = d3.map(data, function(d) {return(d)}).keys()
My question is how do I get the child values (deployment, collaboration, suppportlevel) into a variable called subgroups so I can plot on a multibar chart?
The final format to show the bars (3 per category) will be like this:
// Show the bars
svg.append("g")
.selectAll("g")
// Enter in data = loop group per group
.data(data)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + x(d.group) + ",0)"; })
.selectAll("rect")
.data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect")
.attr("x", function(d) { return xSubgroup(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", xSubgroup.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return color(d.key); });
})
I'm still not sure what format. Is one of the following 2 is the right format?
var api_results = [{
"researcher": {
"deployment": 3.55974264705882,
"collaboration": 2.33547794117647,
"supportlevel": 3.19944852941176
},
"data": {
"deployment": 3.34428879310345,
"collaboration": 2.08836206896552,
"supportlevel": 2.953125
}
}, {
"researcher": {
"deployment": 3.0,
"collaboration": 4.0,
"supportlevel": 5.0
},
"data": {
"deployment": 6.0,
"collaboration": 7.0,
"supportlevel": 8.0
}
}];
// into
var subgroups2 = {
"deployment": {
researcher: [3.55974264705882, 3.0],
data: [3.34428879310345, 6.0]
},
"collaboration": {
researcher: [2.33547794117647, 4.0],
data: [2.08836206896552, 7.0]
},
"supportLevel": {
researcher: [3.19944852941176, 5.0],
data: [2.953125, 8.0]
}
}
// let's go
var result = {};
for (var i = 0; i < api_results.length; i++) {
var api_result = api_results[i];
for (var key_outer in api_result) {
var values = api_result[key_outer];
for (var key_inner in values) {
var value = values[key_inner];
if (!result[key_inner]) {
result[key_inner] = {}
}
if (!result[key_inner][key_outer]) {
result[key_inner][key_outer] = []
}
result[key_inner][key_outer].push(value)
}
}
}
console.log(result).as-console-wrapper {
max-height: 100% !important;
}