This is a follow-up to my question on Rendering Mapped / Grouped Data.
EDIT : I originally thought this question about about recursive renaming of object keys and values, but re-considering it, my question is essentially this: How do I move from data organized by d3.group into a format that I can plug into a Zoomable Sunburst chart?
Following @mootari’s advice, I did some reading into Array, Set and Map methods. More specifically, I learned what a method really is, and got a crash course on JS fundamentals, which has been very helpful. Thanks Fabian!
However, while I am now more capable in manipulating data, I still haven’t managed to figure out how this would be done recursively - such as when trying to coax grouped data into a format that expected for the Zoomable Sunburst chart.
For example - I pulled some data on projects financed by the Asian Development Bank, and then used d3.group to organize these data first by ‘status’, then ‘country’, then ‘sector’. The code is this:
grouped_data = d3.group(sovereign_projects.slice(1), d => d["Status"], d => d["Country"], d => d["Sector"])
and the output looks like this:
If I am not mistaken about these terms (sorry, still learning), the map ‘key’ becomes the value for each of these elements (e.g. for ‘status’, one key is ‘active’), and then the value assigned to that key becomes the corresponding ‘map’, which is an array of objects.
Answering my question on Rendering Mapped / Grouped Data, @mootari showed me how to create a new array comprised of the key name and the size of the corresponding map:
grouped_data_array = Array.from(grouped_data, ([key, map]) => ({
name: key.toLowerCase(),
value: map.size,
}))
This works great for a normal pie chart, but what if I want to ‘drill down’ deeper into each level?
To plug this into Mike’s Zoomable Sunburst chart, I’d need to perform this re-working of keys and values recursively, so that it matches up with the way the chart is expecting data (or, i think i need to do this?):
From what I can gather, part of this is accomplished with d3.hierarchy, but beyond that I haven’t figured out how I to accomplish a proper transformation (although I’ve been reading and tinkering for a few weeks now).
Would you be willing to help me figure this out?
Alternatively, would you be willing to tell me this approach is folly?
For some additional context:
I’m really guessing that it’d be possible, or relatively easy, to re-work the data rather than to tinker with the visualization code based on the idea that a visualization can be ‘reusable’. In this case, I was hoping to do something like this:
import {chart}
with {grouped_data as data}
from "@d3/zoomable-sunburst"
But is this really the way to go? Or should I instead be editing the visualization code itself to match the grouped data (rather than trying to make the grouped data match the expected inputs for the visualization)?
I would really appreciate your help and insights! 
Here’s a notebook with the data I’ve been playing with:
Thanks in advance, community! You’re all swell folks, and I appreciate learning from you!
Related Readings:
- d3.group, d3.rollup
- d3.groups as a hierarchy // toying with this one, I’m beginning to expect it’s the tool I ought to be using…
