Chart Compiler Gallery

ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.

Dashboard

Bar Chart

Discrete categories compile to rect bars, text labels, and a quantitative value scale.

Bar Chart

Data Sources

Fields

Scales

Layers

Glyphs

105

line 38 / rect 31 / text 36

Data Flow Diagram

0/939 nodes

0/1885 edges

939 hidden

Select a glyph to highlight its complete source path.

Find nodes

Scope

Roles

source

transform

field

scale

layer

param

glyph

No matching flow nodes

Adjust search, scope, or role filters.

Available Data

4 tables

0 transforms

Category values

bars

raw

6 columns

id	label	value	formatted	tooltip	sourceRows
category-1	1	5	5	Category 1: 5	catalogue.bar.1
category-2	2	10	10	Category 2: 10	catalogue.bar.2
category-3	3	8	8	Category 3: 8	catalogue.bar.3
category-4	4	3	3	Category 4: 3	catalogue.bar.4
category-5	5	15	15	Category 5: 15	catalogue.bar.5
category-6	6	13	13	Category 6: 13	catalogue.bar.6
category-7	7	16	16	Category 7: 16	catalogue.bar.7
category-8	8	6	6	Category 8: 6	catalogue.bar.8
category-9	9	20	20	Category 9: 20	catalogue.bar.9
category-10	10	7	7	Category 10: 7	catalogue.bar.10
category-11	11	11	11	Category 11: 11	catalogue.bar.11
category-12	12	18	18	Category 12: 18	catalogue.bar.12
category-13	13	17	17	Category 13: 17	catalogue.bar.13
category-14	14	9	9	Category 14: 9	catalogue.bar.14
category-15	15	16	16	Category 15: 16	catalogue.bar.15
category-16	16	14	14	Category 16: 14	catalogue.bar.16
category-17	17	4	4	Category 17: 4	catalogue.bar.17
category-18	18	19	19	Category 18: 19	catalogue.bar.18
category-19	19	12.5	12.5	Category 19: 12.5	catalogue.bar.19
category-20	20	8	8	Category 20: 8	catalogue.bar.20
category-21	21	15	15	Category 21: 15	catalogue.bar.21
category-22	22	14.5	14.5	Category 22: 14.5	catalogue.bar.22
category-23	23	16	16	Category 23: 16	catalogue.bar.23
category-24	24	2	2	Category 24: 2	catalogue.bar.24
category-25	25	5	5	Category 25: 5	catalogue.bar.25
category-26	26	2	2	Category 26: 2	catalogue.bar.26
category-27	27	10.5	10.5	Category 27: 10.5	catalogue.bar.27
category-28	28	8	8	Category 28: 8	catalogue.bar.28
category-29	29	17	17	Category 29: 17	catalogue.bar.29
category-30	30	12	12	Category 30: 12	catalogue.bar.30
category-31	31	6	6	Category 31: 6	catalogue.bar.31

ChartSpec

{
  "id": "gallery.bar",
  "data": [
    {
      "id": "bars",
      "rows": 31
    },
    {
      "id": "__guide.y-grid",
      "rows": 5
    },
    {
      "id": "__guide.x",
      "rows": 31
    },
    {
      "id": "__guide.y",
      "rows": 5
    }
  ],
  "transforms": [],
  "axes": [
    {
      "id": "x",
      "scale": "x",
      "orientation": "bottom"
    },
    {
      "id": "y",
      "scale": "y",
      "orientation": "left"
    }
  ],
  "grids": [
    {
      "id": "y-grid",
      "scale": "y",
      "orientation": "y"
    }
  ],
  "fields": [
    "label",
    "value",
    "formatted",
    "tooltip"
  ],
  "scales": [
    {
      "id": "x",
      "type": "band",
      "domain": {
        "source": "field",
        "data": "bars",
        "field": "label"
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          20
        ],
        "includeZero": true
      }
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-tick-marks",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "x-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "y-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "y-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "bars",
      "mark": "rect",
      "role": "data"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.bar.scene",
  "scales": [
    {
      "id": "x",
      "type": "band",
      "domain": [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31"
      ],
      "range": [
        58,
        696
      ],
      "bandwidth": 15.7020725388601
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        0,
        20
      ],
      "range": [
        286,
        22
      ],
      "ticks": [
        0,
        5,
        10,
        15,
        20
      ]
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 5
    },
    {
      "id": "x-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "y-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "x-tick-marks",
      "role": "guide",
      "zIndex": 5,
      "glyphs": 31
    },
    {
      "id": "bars",
      "role": "data",
      "zIndex": 10,
      "glyphs": 31
    },
    {
      "id": "x-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 31
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 5
    }
  ]
}

Glyph Data Tree

7 layers

Full parameter lineage for the active compiler surface.

y-grid

x-axis

y-axis

x-tick-marks

bars

x-labels

y-labels

Glyph Inspector

none

Select a glyph in the chart to inspect resolved params and lineage.