Chart Compiler Gallery

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

Docs Dashboard

KPI

Context, guide, and data text glyphs compiled from one row.

KPI

KPI Pipeline pipeline

Data Sources

Fields

Scales

Layers

Glyphs

rect 5 / text 3

Build Path

KPI Pipeline

This example is rebuilt from gallery data source kpi by recipe kpi: raw table rows -> TabularSource -> pipeline drafts -> analyzeAuthoringDrafts() -> materialized ChartSpec -> compileChart() -> SceneGraph -> SVG. The graph below shows the authored pipeline stage.

Pipeline recipe graph

9 pipelines

10 nodes

5 edges

Data Flow Diagram

0/127 nodes

0/166 edges

127 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

Imported table

source_gallery_kpi

raw

6 columns

id	sourceRows	__rowLabel	label	value	detail
compile-rate	gallery-kpi-row-1	Compiler Coverage 96%	Compiler Coverage	96%	12 chart surfaces share one scene renderer

ChartSpec

{
  "id": "gallery.kpi",
  "data": [
    {
      "id": "source_gallery_kpi",
      "rows": 1
    },
    {
      "id": "pipeline_panel_layer_constants_source",
      "rows": 1
    },
    {
      "id": "pipeline_accent_layer_constants_source",
      "rows": 1
    }
  ],
  "transforms": [],
  "axes": [],
  "grids": [],
  "legends": [],
  "fields": [
    "__rowLabel",
    "label",
    "value",
    "detail",
    "id",
    "height",
    "width",
    "x",
    "y"
  ],
  "scales": [],
  "layers": [
    {
      "id": "create_chart_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_view_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_plot_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_panel_layer",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_accent_layer",
      "mark": "rect",
      "role": "guide"
    },
    {
      "id": "pipeline_kpi_label_layer",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "pipeline_kpi_value_layer",
      "mark": "text",
      "role": "data"
    },
    {
      "id": "pipeline_kpi_detail_layer",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.kpi.scene",
  "scales": [],
  "layers": [
    {
      "id": "create_chart_surface",
      "role": "context",
      "zIndex": -10,
      "glyphs": 1
    },
    {
      "id": "pipeline_view_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_plot_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_panel_layer",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_accent_layer",
      "role": "guide",
      "zIndex": 1,
      "glyphs": 1
    },
    {
      "id": "pipeline_kpi_label_layer",
      "role": "guide",
      "zIndex": 10,
      "glyphs": 1
    },
    {
      "id": "pipeline_kpi_value_layer",
      "role": "data",
      "zIndex": 20,
      "glyphs": 1
    },
    {
      "id": "pipeline_kpi_detail_layer",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 1
    }
  ]
}

Glyph Data Tree

8 layers

Full parameter lineage for the active compiler surface.

create_chart_surface

pipeline_view_layout_surface

pipeline_plot_layout_surface

pipeline_panel_layer

pipeline_accent_layer

pipeline_kpi_label_layer

pipeline_kpi_value_layer

pipeline_kpi_detail_layer

Glyph Inspector

none

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