Chart Compiler Gallery

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

Dashboard

Revenue Overview Brush

Raw weekly revenue and brush state derive bar intervals and selection geometry.

Overview Brush

Data Sources

Fields

Scales

Layers

Glyphs

rect 9 / text 8

Data Flow Diagram

0/166 nodes

0/308 edges

166 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

2 transforms

Weekly revenue

weekly-revenue

raw

5 columns

feeds overview-bar-intervals

id	week	label	value	sourceRows
week-1	1	W1	28	demo.overview.raw.week-1
week-2	2	W2	36	demo.overview.raw.week-2
week-3	3	W3	31	demo.overview.raw.week-3
week-4	4	W4	48	demo.overview.raw.week-4
week-5	5	W5	62	demo.overview.raw.week-5
week-6	6	W6	57	demo.overview.raw.week-6
week-7	7	W7	74	demo.overview.raw.week-7
week-8	8	W8	68	demo.overview.raw.week-8

ChartSpec

{
  "id": "gallery.overview",
  "data": [
    {
      "id": "weekly-revenue",
      "rows": 8
    },
    {
      "id": "overview-bars",
      "rows": 8
    },
    {
      "id": "brush-state",
      "rows": 1
    },
    {
      "id": "selection",
      "rows": 1
    }
  ],
  "transforms": [
    {
      "id": "overview-bar-intervals",
      "type": "layout",
      "input": "weekly-revenue",
      "output": "overview-bars"
    },
    {
      "id": "brush-window-layout",
      "type": "layout",
      "input": "brush-state",
      "output": "selection"
    }
  ],
  "fields": [
    "x0",
    "x1",
    "label",
    "value",
    "tooltip",
    "selectionX0",
    "selectionX1",
    "week",
    "startWeek",
    "endWeek"
  ],
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          8
        ]
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "overview-bars",
        "field": "value",
        "includeZero": true
      }
    }
  ],
  "layers": [
    {
      "id": "overview-bars",
      "mark": "rect",
      "role": "data"
    },
    {
      "id": "selection-window",
      "mark": "rect",
      "role": "interaction"
    },
    {
      "id": "overview-labels",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.overview.scene",
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": [
        0,
        8
      ],
      "range": [
        52,
        696
      ],
      "ticks": [
        0,
        2,
        4,
        6,
        8
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        0,
        74
      ],
      "range": [
        156,
        18
      ],
      "ticks": [
        0,
        18.5,
        37,
        55.5,
        74
      ]
    }
  ],
  "layers": [
    {
      "id": "overview-bars",
      "role": "data",
      "zIndex": 10,
      "glyphs": 8
    },
    {
      "id": "selection-window",
      "role": "interaction",
      "zIndex": 20,
      "glyphs": 1
    },
    {
      "id": "overview-labels",
      "role": "guide",
      "zIndex": 30,
      "glyphs": 8
    }
  ]
}

Glyph Data Tree

3 layers

Full parameter lineage for the active compiler surface.

overview-bars

selection-window

overview-labels

Glyph Inspector

none

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