Sunburst pie chart not working - what am I missing ?

[harvey56]

I'm trying to draw a sunburst pie chart (2, or more, concentric, donut charts, with each inner pie that encompasses each direct outer pie).

I tried to re-apply the logic used for @visx Treemap, its typescript definitions, together with this d3 tutorial how to draw a sunburst (https://gist.github.com/denjn5/e1cdbbe586ac31747b4a304f8f86efa5).

I came up with the following, but that does not work. What am I missing ?

const sunburstData = [
{
  "name": "TOPICS",
  "children": [{
    "name": "Topic A",
    "children": [{
      "name": "Sub A1",
      "size": 4
    }, {
      "name": "Sub A2",
      "size": 4
    }]
  }, {
    "name": "Topic B",
    "children": [{
      "name": "Sub B1",
      "size": 3
    }, {
      "name": "Sub B2",
      "size": 3
    }, {
      "name": "Sub B3",
      "size": 3
    }]
  }, {
    "name": "Topic C",
    "children": [{
      "name": "Sub A1",
      "size": 4
    }, {
      "name": "Sub A2",
      "size": 4
    }]
  }]
}
];

function Sunburst(props) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
      <ScaleSVG role="img" width={width} height={height}>
        <Partition top={margin.top} root={props.root} size={[2 * Math.PI, props.radius]} round>
          {(partition) => {
            return (
              <Group>
                {partition.descendants().map((node, i) => {
                  return (
                    <Group key={`node-${i}`}>
                      <path
                        fill={(d) => (d.children ? colorScale(d.data.name) : colorScale(d.parent.data.name))} 
                        stroke="#fff"
                        strokeWidth={1}
                        display={(d) => (d.depth ? null : 'none')}
                        d={<Arc key={`node-${i}`} innerRadius={node.y0} outerRadius={node.y1} startAngle={node.x0} endAngle={node.x1} data={node.value} />}
                      />
                    </Group>
                  );
                })}
              </Group>
            );
          }}
        </Partition>
      </ScaleSVG>
      <LegendOrdinal direction="row" scale={colorScale} shape="rect" fill={({ datum }) => colorScale(datum)} labelFormat={(label) => label} />
    </div>
  );
}

If I refer to the Typescript definition of the Arc component, I should have something as follows in Arc (but that generates error messages) :

{({ arc }) => {
    const d = arc(node) || '';
    return (
      <path
        fill={colorScale(node.value || 0)}
        stroke="#fff"
        strokeWidth={1}
        d={d}
        display={(d) => (d.depth ? null : 'none')} //{node.depth}
      />
    );
  }}

With @visx Treemap, the input data has the following format : (not sure how it applies to Partition component)

 {
    name: 'TOPICS',
    parent: null,
    size: 25,
  },
  {
    name: 'Topic A',
    parent: 'TOPICS',
    size: 8,
  },
  {
    name: 'Topic B',
    parent: 'TOPICS',
    size: 9,
  },
  {
    name: 'Topic C',
    parent: 'TOPICS',
    size: 8,
  },
  {
    name: 'Sub A1',
    parent: 'Topic A',
    size: 4,
  },
  {
    name: 'Sub A2',
    parent: 'Topic A',
    size: 4,
  },
  {
    name: 'Sub B1',
    parent: 'Topic B',
    size: 3,
  },
  {
    name: 'Sub B2',
    parent: 'Topic B',
    size: 3,
  },
  {
    name: 'Sub B3',
    parent: 'Topic B',
    size: 3,
  },
  {
    name: 'Sub C1',
    parent: 'Topic C',
    size: 4,
  },
  {
    name: 'Sub C2',
    parent: 'Topic C',
    size: 4,
  }