Radial Tree chart

TIP

For core principles, concept description, API and changelog, refer to the D3 chart.

Basic usage

tsx

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, i) => ({
      label: `Sheep ${i + 1}`,
      icon: LikeM,
    }));

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, i) => ({
      label: `Sheep ${i + 1}`,
      icon: LikeM,
    }));

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

Multicolor and accessibility

Pass color in data to specify radians color. You also can enable patterns property to show different symbols for different values.

tsx

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const movies = [
  'Action',
  'Comedy',
  'Drama',
  'Fantasy',
  'Mystery',
  'Romance',
  'Western',
  'Thriller',
  'Crime Thriller',
  'Disaster Thriller',
  'Psychological\nThriller',
  'Techno Thriller',
  'Horror',
  'Zombie Horror',
  'Folk Horror',
  'Body Horror',
  'Found\nFootage Horror',
].map((label, index) => ({
  label,
  color: `chart-palette-order-${index + 1}`,
}));

const Demo = () => {
  const width = 500;
  const height = 500;

  return (
    <Plot
      data={movies}
      scale={[scaleLinear(), scaleLinear()]}
      width={width}
      height={height}
      patterns
    >
      <RadialTree>
        <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>
  );
};

export default Demo;

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const movies = [
  'Action',
  'Comedy',
  'Drama',
  'Fantasy',
  'Mystery',
  'Romance',
  'Western',
  'Thriller',
  'Crime Thriller',
  'Disaster Thriller',
  'Psychological\nThriller',
  'Techno Thriller',
  'Horror',
  'Zombie Horror',
  'Folk Horror',
  'Body Horror',
  'Found\nFootage Horror',
].map((label, index) => ({
  label,
  color: `chart-palette-order-${index + 1}`,
}));

const Demo = () => {
  const width = 500;
  const height = 500;

  return (
    <Plot
      data={movies}
      scale={[scaleLinear(), scaleLinear()]}
      width={width}
      height={height}
      patterns
    >
      <RadialTree>
        <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>
  );
};

export default Demo;

Custom svg in center

Any svg elements may be used in the center of radial tree.

tsx

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, i) => ({
      label: `Sheep ${i + 1}`,
      icon: LikeM,
    }));

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree centralMargin={85} color='blue-400'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <circle r={60} cx={width / 2} cy={height / 2} fill='#008FF8' />
        <RadialTree.Title color='white'>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, i) => ({
      label: `Sheep ${i + 1}`,
      icon: LikeM,
    }));

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree centralMargin={85} color='blue-400'>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <circle r={60} cx={width / 2} cy={height / 2} fill='#008FF8' />
        <RadialTree.Title color='white'>Sleeping</RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

Multiline text

Multiline text implementation isn’t trivial in svg. Text on the leafs of tree is split into lines by \n symbol automatically. Text in the chart center should be split into lines manually.

tsx

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, index) => ({
      label: [
        'consectetur\nadipiscing',
        'elit, sed do\neiusmod tempor',
        'incididunt ut\nlabore et\ndolore',
        'magna aliqua',
        'Ut enim',
        'ad minim veniam',
        'quis nostrud\nexercitation',
        'ullamco\nlaboris\nnisi',
        'ut aliquip ex',
        'ea commodo',
        'consequat',
        'Duis aute',
        'irure dolor\nin',
        'reprehenderit',
      ][index],
      icon: LikeM,
    }));

  const textSize = 12;
  const lineHeight = textSize * 1.2;
  const textLines = ['Lorem ipsum', 'dolor', 'sit amet'];

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9' textSize={textSize}>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title textSize={lineHeight} color='chart-palette-order-9'>
          {textLines.map((line, lineIndex) => (
            <tspan
              key={line}
              x={width / 2}
              y={height / 2 + (-(textLines.length - 1) / 2 + lineIndex) * lineHeight}
            >
              {line}
            </tspan>
          ))}
        </RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

import React from 'react';
import { Plot, RadialTree } from 'intergalactic/d3-chart';
import { scaleLinear } from 'd3-scale';
import LikeM from 'intergalactic/icon/Like/m';

const Demo = () => {
  const width = 500;
  const height = 500;

  const data = Array(12)
    .fill({})
    .map((_, index) => ({
      label: [
        'consectetur\nadipiscing',
        'elit, sed do\neiusmod tempor',
        'incididunt ut\nlabore et\ndolore',
        'magna aliqua',
        'Ut enim',
        'ad minim veniam',
        'quis nostrud\nexercitation',
        'ullamco\nlaboris\nnisi',
        'ut aliquip ex',
        'ea commodo',
        'consequat',
        'Duis aute',
        'irure dolor\nin',
        'reprehenderit',
      ][index],
      icon: LikeM,
    }));

  const textSize = 12;
  const lineHeight = textSize * 1.2;
  const textLines = ['Lorem ipsum', 'dolor', 'sit amet'];

  return (
    <Plot data={data} scale={[scaleLinear(), scaleLinear()]} width={width} height={height}>
      <RadialTree color='chart-palette-order-9' textSize={textSize}>
        <RadialTree.Radian>
          <RadialTree.Radian.Label />
          <RadialTree.Radian.Line />
          <RadialTree.Radian.Cap />
          <RadialTree.Radian.Icon />
        </RadialTree.Radian>
        <RadialTree.Title textSize={lineHeight} color='chart-palette-order-9'>
          {textLines.map((line, lineIndex) => (
            <tspan
              key={line}
              x={width / 2}
              y={height / 2 + (-(textLines.length - 1) / 2 + lineIndex) * lineHeight}
            >
              {line}
            </tspan>
          ))}
        </RadialTree.Title>
      </RadialTree>
    </Plot>
  );
};

export default Demo;

Edge cases

If there is no data – show an empty gray chart.

tsx

import React from 'react';
import { RadialTreeChartSkeleton } from 'intergalactic/skeleton';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;

import React from 'react';
import { RadialTreeChartSkeleton } from 'intergalactic/skeleton';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;

If data isn’t ready yet – show chart skeleton.

tsx

import React from 'react';
import { RadialTreeChartSkeleton } from 'intergalactic/skeleton';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;

import React from 'react';
import { RadialTreeChartSkeleton } from 'intergalactic/skeleton';

const Demo = () => {
  return <RadialTreeChartSkeleton />;
};

export default Demo;

Accessibility

Writing code

CSS Injection

Basic usage

Multicolor and accessibility

Custom svg in center

Multiline text

Edge cases

Accessibility

CSS Injection

Radial Tree chart

Basic usage ​

Multicolor and accessibility ​

Custom svg in center ​

Multiline text ​

Edge cases ​

Basic usage

Multicolor and accessibility

Custom svg in center

Multiline text

Edge cases