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,
  }

[hshoff]

problem is on <path> svg element. d attribute needs to be a string and won't work with an <Arc /> react component.

{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>
  );
})}

Another problem is while in d3 you can do something like

.fill((d) => (d.children ? colorScale(d.data.name) : colorScale(d.parent.data.name)))

this won't work in visx. instead you use the node from the .map() iteration:

fill={node.children ? colorScale(node.data.name) : colorScale(node.parent.data.name))}

Something like the below should work, but I haven't tested:

{partition.descendants().map((node, i) => {
  return (
    <Arc
      key={`node-${i}`}
      innerRadius={node.y0}
      outerRadius={node.y1}
      startAngle={node.x0}
      endAngle={node.x1}
      fill={node.children ? colorScale(node.data.name) : colorScale(node.parent.data.name))} 
      stroke="#fff"
      strokeWidth={1}
      display={node.depth ? null : 'none')}
    />
  );
})}

[EricSoroos]

I think this is a minimal fix with a few things that weren't clear from above.

// Note -- Sunburst data is an object, not an array.
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
    }]
  }]
};

// you have to .sum or .count, and pass in a hierarchy of that data.
root = hierarchy(sunburstData)
          .sort((a, b) => (b.size || 0) - (a.size || 0))
          .count();
// or .sum((d)=> d.size)

return (       
 <svg width={width} height={height}>                                                                                                                                     
          <Group top={height/2 + margin.top} left = {width/2 + margin.bottom}>                                                                                                  
            <Partition
              top={margin.top}
              left={margin.left}
              root={root}
              size={[2 * Math.PI, radius]}
            >                                                                                                                                                                   
              {( data ) => (
                <Group>                                                                                                                                                         
                  {data.descendants().map((node, i) => {(
                        <Arc
                          key={`node-${i}`}
                          innerRadius={node.y0}
                          outerRadius={node.y1}
                          startAngle={node.x0}
                          endAngle={node.x1}
                          fill="#aaa"// {node.children ? color(node.data.name) : color(node.parent.data.name)}                                                                  
                          stroke="#fff"
                          strokeWidth={1}
                        />     
                      )}
              </Group>
           </Partition>                                                                                                                                          
       </Group>
    </svg>
 );