Skip to content

Radial Tree chart

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.

Movie of what genre to pick today?

Movies
Press "Tab" to enable graphical charts accessibility module.
tsx
import React from 'react';
import { Plot, RadialTree } from '@semcore/ui/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from '@semcore/ui/icon/Like/m';
import { Flex } from '@semcore/ui/flex-box';
import Select from '@semcore/ui/select';

const movies = [
  { label: 'Action', key: 'action', color: '#008ff8' },
  { label: 'Comedy', key: 'comedy', color: '#008ff8' },
  { label: 'Drama', key: 'drama', color: '#008ff8' },
  { label: 'Fantasy', key: 'fantasy', color: '#008ff8' },
  { label: 'Mystery', key: 'mystery', color: '#008ff8' },
  { label: 'Romance', key: 'romance', color: '#008ff8' },
  { label: 'Western', key: 'western', color: '#008ff8' },
  { label: 'Thriller', key: 'thriller', color: '#007C65' },
  { label: 'Crime Thriller', key: 'crime_thriller', color: '#007C65' },
  { label: 'Disaster Thriller', key: 'disaster_thriller', color: '#007C65' },
  { label: 'Psychological\nThriller', key: 'psychological_hriller', color: '#007C65' },
  { label: 'Techno Thriller', key: 'techo_thriller', color: '#007C65' },
  { label: 'Horror', key: 'horror', color: '#ff4953' },
  { label: 'Zombie Horror', key: 'zoombie_orror', color: '#ff4953' },
  { label: 'Folk Horror', key: 'folk_orror', color: '#ff4953' },
  { label: 'Body Horror', key: 'body_horror', color: '#ff4953' },
  { label: 'Found\nFootage Horror', key: '\nFootage Horror', color: '#ff4953' },
];

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

  return (
    <Flex direction='column'>
      <p>Movie of what genre to pick today?</p>
      <Select
        options={movies.map(({ label, key }) => ({ value: key, children: label }))}
        value={genre}
        onChange={setGenre}
      />
      <Plot data={movies} 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>
  );
};

export default Demo;

Last updated:

Released under the MIT License.

Released under the MIT License.