Chart Compiler Gallery

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

Dashboard

Area Graph

Ordered values compile to a filled area path and a stronger trend edge.

Area Graph

Data Sources

Fields

Scales

Layers

Glyphs

line 6 / path 2 / text 17 / point 2

Data Flow Diagram

0/245 nodes

0/439 edges

245 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

3 tables

0 transforms

Monthly values

points

raw

7 columns

id	index	label	value	formatted	tooltip	sourceRows
month-1	0	M1	18	18k	Month 1: 18k visits	catalogue.area-graph.month-1
month-2	1	M2	30	30k	Month 2: 30k visits	catalogue.area-graph.month-2
month-3	2	M3	28	28k	Month 3: 28k visits	catalogue.area-graph.month-3
month-4	3	M4	44	44k	Month 4: 44k visits	catalogue.area-graph.month-4
month-5	4	M5	52	52k	Month 5: 52k visits	catalogue.area-graph.month-5
month-6	5	M6	61	61k	Month 6: 61k visits	catalogue.area-graph.month-6
month-7	6	M7	58	58k	Month 7: 58k visits	catalogue.area-graph.month-7
month-8	7	M8	72	72k	Month 8: 72k visits	catalogue.area-graph.month-8
month-9	8	M9	84	84k	Month 9: 84k visits	catalogue.area-graph.month-9
month-10	9	M10	91	91k	Month 10: 91k visits	catalogue.area-graph.month-10
month-11	10	M11	88	88k	Month 11: 88k visits	catalogue.area-graph.month-11
month-12	11	M12	104	104k	Month 12: 104k visits	catalogue.area-graph.month-12

ChartSpec

{
  "id": "catalogue.area-graph",
  "data": [
    {
      "id": "points",
      "rows": 12
    },
    {
      "id": "ticks",
      "rows": 5
    },
    {
      "id": "endpoints",
      "rows": 2
    }
  ],
  "transforms": [],
  "fields": [
    "index",
    "label",
    "value",
    "formatted",
    "tooltip"
  ],
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "points",
        "field": "index"
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          110
        ],
        "includeZero": true
      }
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "y-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "x-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "filled-area",
      "mark": "path",
      "role": "data",
      "path": {
        "directD": false,
        "areaBand": true,
        "closedToY": false,
        "curve": "linear",
        "sortBy": "index"
      }
    },
    {
      "id": "area-edge",
      "mark": "path",
      "role": "data",
      "path": {
        "directD": false,
        "areaBand": false,
        "closedToY": false,
        "curve": "linear",
        "sortBy": "index"
      }
    },
    {
      "id": "endpoints",
      "mark": "point",
      "role": "interaction"
    },
    {
      "id": "month-labels",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "catalogue.area-graph.scene",
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": [
        0,
        11
      ],
      "range": [
        66,
        692
      ],
      "ticks": [
        0,
        2.75,
        5.5,
        8.25,
        11
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        0,
        110
      ],
      "range": [
        278,
        24
      ],
      "ticks": [
        0,
        27.5,
        55,
        82.5,
        110
      ]
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 5
    },
    {
      "id": "x-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "filled-area",
      "role": "data",
      "zIndex": 10,
      "glyphs": 1
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 5
    },
    {
      "id": "area-edge",
      "role": "data",
      "zIndex": 20,
      "glyphs": 1
    },
    {
      "id": "endpoints",
      "role": "interaction",
      "zIndex": 30,
      "glyphs": 2
    },
    {
      "id": "month-labels",
      "role": "guide",
      "zIndex": 30,
      "glyphs": 12
    }
  ]
}

Glyph Data Tree

7 layers

Full parameter lineage for the active compiler surface.

y-grid

x-axis

filled-area

y-labels

area-edge

endpoints

month-labels

Glyph Inspector

none

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