Stacked Pie/Donut Chart

[jakiestfu]

I'm looking to show multiple datasets within my pie chart. I am able to iterate through my data and render child charts, but the problem I'm having is that they're not actually "stacked" like I'd expect, they're just separate rings independent of the arc prior.

Here is an image of what I'm trying to emulate:

Thoughts?

[hshoff]

Hi @jakiestfu,

You're looking for a sunburst chart. To do this you need to:

1. create a root using hierarchy() from either d3-hierarchy or @visx/hierarchy re-export alias
2. use <Partition root={root}>{(partition) => // stuff}</Partition> passing your root as a prop
3. in the <Partition> function as children, map over partition.descendants() nodes returning an <Arc /> for each node

more details/an example here: #1085

Hope this helps!

[jakiestfu]

Thank you so much!

[jakiestfu]

@hshoff I'm almost there with the sunburst chart, I'm just having one small issue. It doesn't seem that the subsequent rings are wrapping around fully, for reasons I'm unsure of.

For example, B folder size is 144kb and each file is 48kb, but those three files are not spanning the width of the folder size.

I have my sum defined correctly I think:

const root =
    hierarchy(folderInfo)
      .sum((data) => data.bytes)
      .sort((a, b) => b.data.bytes - a.data.bytes)

but when I look at the value property of the parent, it's way larger than 144kb, probably because it is summing all of the data prior. More D3 related than this, but I feel like I'm missing something.

I think it's possible to solve by fiddling with the parent start and end angles but wasn't sure if there was anything you knew of that I could do.

[jakiestfu]

Fixed my issue. In my case, I'm showing directory/file size and I was summing directory sizes which are already sums of file sizes.

Thanks again!