# Radial Tree

> A radial tree lays out hierarchical data as a node-link diagram radiating from a central root, built from a few hierarchy level columns.

A radial tree draws hierarchical data as a node-link diagram fanning out from a central root, with depth shown by distance from the center. 

Use it for category taxonomies (subcategory under category under department), org structures, or any nested grouping you want to see as a branching shape rather than nested rings.

![](https://media.holistics.io/460cce26-radial-tree-chart.png)

```aml
CustomChartDef radial_tree {
  label: 'Radial Tree'
  description: 'To draw a hierarchy of level columns as a radial node-link tree.'

  fields {
    field level_1 {
      label: 'Level 1'
      type: 'dimension'
      sort {
        apply_order: 1
        direction: 'asc'
      }
    }

    field level_2 {
      label: 'Level 2'
      type: 'dimension'
      sort {
        apply_order: 2
        direction: 'asc'
      }
    }

    field level_3 {
      label: 'Level 3'
      type: 'dimension'
      sort {
        apply_order: 3
        direction: 'asc'
      }
    }
  }

  options {
    option root_label {
      label: 'Root label'
      type: 'input'
      default_value: 'All'
    }

    option layout {
      label: 'Layout'
      type: 'select'
      options: ['tidy', 'cluster']
      default_value: 'tidy'
    }

    option link_shape {
      label: 'Link style'
      type: 'select'
      options: ['line', 'curve', 'diagonal', 'orthogonal']
      default_value: 'curve'
    }

    option spread {
      label: 'Angular spread (degrees)'
      type: 'select'
      options: [180, 270, 360]
      default_value: 360
    }

    option show_labels {
      label: 'Show labels'
      type: 'toggle'
      default_value: true
    }

    option color_scheme {
      label: 'Color scheme (by depth)'
      type: 'select'
      options: ['blues', 'teals', 'greens', 'purples', 'viridis', 'magma']
      default_value: 'blues'
    }
  }

  template: @vg {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "signals": [
      {
        "name": "width",
        "init": "containerSize()[0] - 10",
        "on": [{ "events": "window:resize", "update": "containerSize()[0] - 10" }]
      },
      {
        "name": "height",
        "init": "containerSize()[1] - 10",
        "on": [{ "events": "window:resize", "update": "containerSize()[1] - 10" }]
      },
      {"name": "originX", "update": "width / 2"},
      {"name": "originY", "update": "height / 2"},
      {"name": "radius", "update": "max(20, min(width, height) / 2 - 70)"},
      {"name": "extent", "update": "@{options.spread.value}"},
      {"name": "rotate", "value": 0},
      {"name": "labels", "update": "@{options.show_labels.value}"},
      {"name": "layout", "update": "'@{options.layout.value}'"},
      {"name": "links", "update": "'@{options.link_shape.value}'"},
      {
        "name": "hovered",
        "value": null,
        "on": [
          {"events": "@nodes:mouseover", "update": "datum.node_id"},
          {"events": "@nodes:mouseout", "update": "null"}
        ]
      }
    ],
    "data": [
      {
        "name": "tree",
        "values": @{values},
        "transform": [
          {"type": "formula", "expr": "datum['@{fields.level_1.name}'] == null ? '' : '' + datum['@{fields.level_1.name}']", "as": "l1"},
          {"type": "formula", "expr": "datum['@{fields.level_2.name}'] == null ? '' : '' + datum['@{fields.level_2.name}']", "as": "l2"},
          {"type": "formula", "expr": "datum['@{fields.level_3.name}'] == null ? '' : '' + datum['@{fields.level_3.name}']", "as": "l3"},
          {"type": "filter", "expr": "datum.l1 !== ''"},
          {
            "type": "formula",
            "as": "node_arr",
            "expr": "[{id: '__root__', parent: null, label: '@{options.root_label.value}'}, {id: '1§' + datum.l1, parent: '__root__', label: datum.l1}, (datum.l2 !== '' ? {id: '2§' + datum.l1 + '§' + datum.l2, parent: '1§' + datum.l1, label: datum.l2} : null), (datum.l2 !== '' && datum.l3 !== '' ? {id: '3§' + datum.l1 + '§' + datum.l2 + '§' + datum.l3, parent: '2§' + datum.l1 + '§' + datum.l2, label: datum.l3} : null)]"
          },
          {"type": "flatten", "fields": ["node_arr"], "as": ["node"]},
          {"type": "filter", "expr": "datum.node != null"},
          {"type": "formula", "expr": "datum.node.id", "as": "node_id"},
          {"type": "formula", "expr": "datum.node.parent", "as": "parent_id"},
          {"type": "formula", "expr": "datum.node.label", "as": "label"},
          {"type": "aggregate", "groupby": ["node_id", "parent_id", "label"]},
          {"type": "stratify", "key": "node_id", "parentKey": "parent_id"},
          {
            "type": "tree",
            "method": {"signal": "layout"},
            "size": [1, {"signal": "radius"}],
            "as": ["alpha", "radius", "depth", "children"]
          },
          {"type": "formula", "expr": "(rotate + extent * datum.alpha + 270) % 360", "as": "angle"},
          {"type": "formula", "expr": "PI * datum.angle / 180", "as": "radians"},
          {"type": "formula", "expr": "inrange(datum.angle, [90, 270])", "as": "leftside"},
          {"type": "formula", "expr": "originX + datum.radius * cos(datum.radians)", "as": "x"},
          {"type": "formula", "expr": "originY + datum.radius * sin(datum.radians)", "as": "y"}
        ]
      },
      {
        "name": "links",
        "source": "tree",
        "transform": [
          {"type": "treelinks"},
          {
            "type": "linkpath",
            "shape": {"signal": "links"},
            "orient": "radial",
            "sourceX": "source.radians",
            "sourceY": "source.radius",
            "targetX": "target.radians",
            "targetY": "target.radius"
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "color",
        "type": "linear",
        "range": {"scheme": @{options.color_scheme.value}},
        "domain": {"data": "tree", "field": "depth"},
        "zero": true
      }
    ],
    "marks": [
      {
        "type": "path",
        "from": {"data": "links"},
        "encode": {
          "update": {
            "x": {"signal": "originX"},
            "y": {"signal": "originY"},
            "path": {"field": "path"},
            "stroke": {"value": "#d0d5dd"},
            "strokeWidth": {"value": 1}
          }
        }
      },
      {
        "name": "nodes",
        "type": "symbol",
        "from": {"data": "tree"},
        "encode": {
          "enter": {
            "size": {"value": 90},
            "stroke": {"value": "white"},
            "strokeWidth": {"value": 1}
          },
          "update": {
            "x": {"field": "x"},
            "y": {"field": "y"},
            "fill": {"scale": "color", "field": "depth"},
            "size": {"signal": "datum.node_id === hovered ? 200 : 90"},
            "tooltip": {
              "signal": "{'Label': datum.label, 'Depth': datum.depth, 'Children': length(datum.children || [])}"
            }
          }
        }
      },
      {
        "type": "text",
        "from": {"data": "tree"},
        "interactive": false,
        "encode": {
          "enter": {
            "text": {"field": "label"},
            "fontSize": {"value": 10},
            "baseline": {"value": "middle"},
            "fill": {"value": "#374151"}
          },
          "update": {
            "x": {"field": "x"},
            "y": {"field": "y"},
            "dx": {"signal": "(datum.leftside ? -1 : 1) * 7"},
            "angle": {"signal": "datum.leftside ? datum.angle - 180 : datum.angle"},
            "align": {"signal": "datum.leftside ? 'right' : 'left'"},
            "opacity": {"signal": "labels ? 1 : 0"}
          }
        }
      }
    ]
  };;
}
```

<!-- TODO: add the View on GitHub footer link once the template lands in
     https://github.com/holistics/custom-chart-library -->