Chart Compiler Gallery

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

Dashboard

Line Graph

Ordered values compile to a trend path and optional inspected point markers.

Line Graph

Data Sources

Fields

Scales

Layers

Glyphs

line 6 / path 1 / text 17 / point 6

Data Flow Diagram

0/263 nodes

0/484 edges

263 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

1 transforms

Monthly compiler throughput

points

raw

6 columns

feeds sample-inspection-points

id	index	label	value	tooltip	sourceRows
m1	0	M1	18	Month 1: 18 compiled scenes	demo.line.1
m2	1	M2	28	Month 2: 28 compiled scenes	demo.line.2
m3	2	M3	24	Month 3: 24 compiled scenes	demo.line.3
m4	3	M4	42	Month 4: 42 compiled scenes	demo.line.4
m5	4	M5	48	Month 5: 48 compiled scenes	demo.line.5
m6	5	M6	57	Month 6: 57 compiled scenes	demo.line.6
m7	6	M7	52	Month 7: 52 compiled scenes	demo.line.7
m8	7	M8	69	Month 8: 69 compiled scenes	demo.line.8
m9	8	M9	73	Month 9: 73 compiled scenes	demo.line.9
m10	9	M10	86	Month 10: 86 compiled scenes	demo.line.10
m11	10	M11	84	Month 11: 84 compiled scenes	demo.line.11
m12	11	M12	97	Month 12: 97 compiled scenes	demo.line.12

ChartSpec

{
  "id": "gallery.line",
  "data": [
    {
      "id": "points",
      "rows": 12
    },
    {
      "id": "ticks",
      "rows": 5
    },
    {
      "id": "sampled",
      "rows": 6
    }
  ],
  "transforms": [
    {
      "id": "sample-inspection-points",
      "type": "sample",
      "input": "points",
      "output": "sampled"
    }
  ],
  "fields": [
    "index",
    "label",
    "value",
    "tooltip",
    "sampleIndex"
  ],
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "points",
        "field": "index"
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          100
        ],
        "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": "trend",
      "mark": "path",
      "role": "data",
      "path": {
        "directD": false,
        "areaBand": false,
        "closedToY": false,
        "curve": "linear",
        "sortBy": "index"
      }
    },
    {
      "id": "sample-points",
      "mark": "point",
      "role": "interaction"
    },
    {
      "id": "month-labels",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.line.scene",
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": [
        0,
        11
      ],
      "range": [
        64,
        692
      ],
      "ticks": [
        0,
        2.75,
        5.5,
        8.25,
        11
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        0,
        100
      ],
      "range": [
        262,
        20
      ],
      "ticks": [
        0,
        25,
        50,
        75,
        100
      ]
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 5
    },
    {
      "id": "x-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "trend",
      "role": "data",
      "zIndex": 10,
      "glyphs": 1
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 5
    },
    {
      "id": "sample-points",
      "role": "interaction",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "month-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 12
    }
  ]
}

Glyph Data Tree

6 layers

Full parameter lineage for the active compiler surface.

y-grid

x-axis

trend

y-labels

sample-points

month-labels

Glyph Inspector

none

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