Hierarchy

Organization chart

Organization chart uses runnable data and options to demonstrate breadcrumbs and search.

StatusLoading

org
breadcrumbs and search

Graflume.org() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Organization chart · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Organization chart uses runnable data and options to demonstrate breadcrumbs and search.

Browser API · Portable schema

Browser API

Graflume.org()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Organization chart uses runnable data and options to demonstrate breadcrumbs and search.",
    "text": "Hierarchy"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.org('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Organization chart uses runnable data and options to demonstrate breadcrumbs and search.",
    "text": "Hierarchy"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Tree map

Tree map uses runnable data and options to demonstrate nested icicle.

StatusLoading

treemap
nested icicle

Graflume.treemap() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Tree map · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Tree map uses runnable data and options to demonstrate nested icicle.

Browser API · Portable schema

Browser API

Graflume.treemap()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree map uses runnable data and options to demonstrate nested icicle.",
    "text": "Hierarchy · Tree map"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.treemap('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree map example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree map",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree map uses runnable data and options to demonstrate nested icicle.",
    "text": "Hierarchy · Tree map"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Icicle chart

Icicle chart uses runnable data and options to demonstrate tree and organization.

StatusLoading

icicle
tree and organization

Graflume.icicle() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Icicle chart · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Icicle chart uses runnable data and options to demonstrate tree and organization.

Browser API · Portable schema

Browser API

Graflume.icicle()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Icicle chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Icicle chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    },
    "options": {
      "mode": "icicle"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Icicle chart uses runnable data and options to demonstrate tree and organization.",
    "text": "Hierarchy · Icicle chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.icicle('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Icicle chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Icicle chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    },
    "options": {
      "mode": "icicle"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Icicle chart uses runnable data and options to demonstrate tree and organization.",
    "text": "Hierarchy · Icicle chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Tree chart

Tree chart uses runnable data and options to demonstrate tree.

StatusLoading

tree

Graflume.tree() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Tree chart · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Tree chart uses runnable data and options to demonstrate tree.

Browser API · Portable schema

Browser API

Graflume.tree()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree chart uses runnable data and options to demonstrate tree.",
    "text": "Hierarchy · Tree chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.tree('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree chart uses runnable data and options to demonstrate tree.",
    "text": "Hierarchy · Tree chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Sunburst chart

Sunburst chart uses runnable data and options to demonstrate circle pack.

StatusLoading

sunburst
circle pack

Graflume.sunburst() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Sunburst chart · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Sunburst chart uses runnable data and options to demonstrate circle pack.

Browser API · Portable schema

Browser API

Graflume.sunburst()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Sunburst chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Sunburst chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Sunburst chart uses runnable data and options to demonstrate circle pack.",
    "text": "Hierarchy · Sunburst chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.sunburst('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Sunburst chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Sunburst chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Sunburst chart uses runnable data and options to demonstrate circle pack.",
    "text": "Hierarchy · Sunburst chart"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Organization network

Organization network uses runnable data and options to demonstrate dendrogram and radial tree.

StatusLoading

organization-network
dendrogram and radial tree

Graflume.organizationNetwork() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Organization network · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Organization network uses runnable data and options to demonstrate dendrogram and radial tree.

Browser API · Portable schema

Browser API

Graflume.organizationNetwork()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Organization network example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Organization network",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Organization network uses runnable data and options to demonstrate dendrogram and radial tree.",
    "text": "Hierarchy · Organization network"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.organizationNetwork('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Organization network example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Organization network",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Organization network uses runnable data and options to demonstrate dendrogram and radial tree.",
    "text": "Hierarchy · Organization network"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Tree graph

Tree graph uses runnable data and options to demonstrate collapse/re-root/zoom.

StatusLoading

tree-graph
collapse/re-root/zoom

Graflume.treeGraph() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Tree graph · Row data
`id`ordinal	`value`quantitative	`parent`ordinal
Statground	100	—
Visualization	46	Statground
Data products	34	Statground
Documentation	20	Statground
Canvas charts	28	Visualization
Spatial charts	18	Visualization
Catalog	14	Data products
Workbench	12	Data products
Pipelines	8	Data products
Guides	12	Documentation
Examples	8	Documentation

Tree graph uses runnable data and options to demonstrate collapse/re-root/zoom.

Browser API · Portable schema

Browser API

Graflume.treeGraph()

const data = [
  {
    "id": "Statground",
    "parent": "",
    "value": 100
  },
  {
    "id": "Visualization",
    "parent": "Statground",
    "value": 46
  },
  {
    "id": "Data products",
    "parent": "Statground",
    "value": 34
  },
  {
    "id": "Documentation",
    "parent": "Statground",
    "value": 20
  },
  {
    "id": "Canvas charts",
    "parent": "Visualization",
    "value": 28
  },
  {
    "id": "Spatial charts",
    "parent": "Visualization",
    "value": 18
  },
  {
    "id": "Catalog",
    "parent": "Data products",
    "value": 14
  },
  {
    "id": "Workbench",
    "parent": "Data products",
    "value": 12
  },
  {
    "id": "Pipelines",
    "parent": "Data products",
    "value": 8
  },
  {
    "id": "Guides",
    "parent": "Documentation",
    "value": 12
  },
  {
    "id": "Examples",
    "parent": "Documentation",
    "value": 8
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree graph example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree graph",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree graph uses runnable data and options to demonstrate collapse/re-root/zoom.",
    "text": "Hierarchy · Tree graph"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
};

Graflume.treeGraph('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Hierarchy · Tree graph example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "id",
          "format": "auto",
          "label": "Id"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "parent",
          "format": "auto",
          "label": "Parent"
        }
      ],
      "title": "Hierarchy · Tree graph",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "parent": "parent"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Tree graph uses runnable data and options to demonstrate collapse/re-root/zoom.",
    "text": "Hierarchy · Tree graph"
  },
  "width": "container",
  "x": {
    "field": "id",
    "title": "Portfolio node",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Relative investment",
    "type": "quantitative"
  }
}

Hierarchy · Chart-specific features

Every executable mode in this family

Organization chart

Organization chart · Row data

Graflume.org()

ChartSpec 0.1 · options

Tree map

Tree map · Row data

Graflume.treemap()

ChartSpec 0.1 · options

Icicle chart

Icicle chart · Row data

Graflume.icicle()

ChartSpec 0.1 · options

Tree chart

Tree chart · Row data

Graflume.tree()

ChartSpec 0.1 · options

Sunburst chart

Sunburst chart · Row data

Graflume.sunburst()

ChartSpec 0.1 · options

Organization network

Organization network · Row data

Graflume.organizationNetwork()

ChartSpec 0.1 · options

Tree graph

Tree graph · Row data

Graflume.treeGraph()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance

ID	Name	Quick API	mode	mark	renderer
`org`	Organization chart	`org()`	`organization`	`org`	`canvas`
`treemap`	Tree map	`treemap()`	`treemap`	`treemap`	`canvas`
`icicle`	Icicle chart	`icicle()`	`icicle`	`treemap`	`canvas`
`tree`	Tree chart	`tree()`	`tree`	`tree`	`canvas`
`sunburst`	Sunburst chart	`sunburst()`	`sunburst`	`sunburst`	`canvas`
`organization-network`	Organization network	`organizationNetwork()`	`organization-network`	`org`	`canvas`
`tree-graph`	Tree graph	`treeGraph()`	`tree-graph`	`tree`	`canvas`