Radial tree chart is accessible for screen readers. Refer to Accessibility section in D3 chart documentation to know more. If you are making your radial tree interactive, make sure that chart isn’t the only way to accomplish user scenario. For example, provide <Select /> to allow user to pick the radians.

import { Flex } from '@semcore/ui/base-components';
import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import LikeM from '@semcore/ui/icon/Like/m';
import Select from '@semcore/ui/select';
import { scaleLinear } from 'd3-scale';
import React from 'react';

import RadialMockData from './mock';

const Demo = () => {
  const width = 500;
  const height = 500;
  const [genre, setGenre] = React.useState<string | null>(data[0].key);

  return (
    <Flex direction='column' gap={2}>
      <label htmlFor='genre-select'>Movie of what genre to pick today?</label>
      <Select
        id='genre-select'
        options={data.map(({ label, key }) => ({ value: key, children: label }))}
        value={genre}
        onChange={setGenre}
      />
      <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
        <RadialTree activeKey={genre} onActiveKeyChange={setGenre}>
          <RadialTree.Radian>
            <RadialTree.Radian.Label />
            <RadialTree.Radian.Line />
            <RadialTree.Radian.Cap />
            <RadialTree.Radian.Icon tag={LikeM} />
          </RadialTree.Radian>
          <RadialTree.Title>Movies</RadialTree.Title>
        </RadialTree>
      </Plot>
    </Flex>
  );
};

const data = RadialMockData.Movies;

export default Demo;