Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
Layout Primitives
Frame, margins, grid, stack, and inset primitives compose named chart regions that data, guides, and interaction layers can address.
Data Sources
33
Fields
21
Scales
10
Layers
51
Glyphs
103
rect 46 / line 23 / text 30 / point 4
Build Path
This example is rebuilt from gallery data source layout-bars by recipe layoutPrimitives: raw table rows -> TabularSource -> pipeline drafts -> analyzeAuthoringDrafts() -> materialized ChartSpec -> compileChart() -> SceneGraph -> SVG. The graph below shows the authored pipeline stage.
Pipeline recipe graph
Data Flow Diagram
Select a glyph to highlight its complete source path.
Scope
Roles
No matching flow nodes
Adjust search, scope, or role filters.
Available Data
Imported table
ChartSpec
{
"id": "gallery.layoutPrimitives",
"data": [
{
"id": "source_gallery_layoutprimitives",
"rows": 4
},
{
"id": "pipeline_layout_use_cases_source",
"rows": 4
},
{
"id": "pipeline_overview_allocation_source",
"rows": 6
},
{
"id": "pipeline_primitive_legend_source",
"rows": 5
},
{
"id": "pipeline_layout_notes_source",
"rows": 3
},
{
"id": "pipeline_canvas_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_plot_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_title_band_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_rail_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_overview_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_axis_rail_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_bars_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_points_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_detail_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_spotlight_frame_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_title_band_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_axis_rail_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_overview_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_bars_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_points_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_panel_detail_label_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_inset_callout_layer_constants_source",
"rows": 1
},
{
"id": "pipeline_title_band_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_axis_rail_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_overview_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_panel_bars_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_panel_points_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_panel_detail_label_layer_literal_text",
"rows": 1
},
{
"id": "pipeline_inset_callout_layer_literal_text",
"rows": 1
},
{
"id": "__guide.pipeline_bar_x_grid_guide",
"rows": 6
},
{
"id": "__guide.pipeline_point_y_grid_guide",
"rows": 6
},
{
"id": "__guide.pipeline_bar_x_axis_guide",
"rows": 6
},
{
"id": "__guide.pipeline_point_x_axis_guide",
"rows": 5
}
],
"transforms": [],
"axes": [
{
"id": "pipeline_bar_x_axis_guide",
"scale": "pipeline_barx_x_scale",
"orientation": "bottom"
},
{
"id": "pipeline_point_x_axis_guide",
"scale": "pipeline_pointx_x_scale",
"orientation": "bottom"
}
],
"grids": [
{
"id": "pipeline_bar_x_grid_guide",
"scale": "pipeline_barx_x_scale",
"orientation": "x"
},
{
"id": "pipeline_point_y_grid_guide",
"scale": "pipeline_pointy_y_scale",
"orientation": "y"
}
],
"legends": [],
"fields": [
"__rowLabel",
"metric",
"barvalue",
"tooltip",
"id",
"certainty",
"effort",
"impact",
"kind",
"overviewValue",
"stepEnd",
"stepStart",
"label",
"description",
"note",
"height",
"width",
"x",
"y",
"text",
"value"
],
"scales": [
{
"id": "pipeline_barx_x_scale",
"type": "linear",
"domain": {
"source": "field",
"data": "source_gallery_layoutprimitives",
"field": "barvalue",
"fields": [],
"includeZero": true,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_bary_y_scale",
"type": "band",
"domain": {
"source": "field",
"data": "source_gallery_layoutprimitives",
"field": "metric",
"fields": [],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_pointx_x_scale",
"type": "linear",
"domain": {
"source": "field",
"data": "pipeline_layout_use_cases_source",
"field": "effort",
"fields": [],
"includeZero": true,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_pointy_y_scale",
"type": "linear",
"domain": {
"source": "field",
"data": "pipeline_layout_use_cases_source",
"field": "impact",
"fields": [],
"includeZero": true,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_pointr_size_scale",
"type": "sqrt",
"domain": {
"source": "field",
"data": "pipeline_layout_use_cases_source",
"field": "certainty",
"fields": [],
"includeZero": true,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_overviewx_x_scale",
"type": "linear",
"domain": {
"source": "values",
"values": [
0,
6
],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_overviewy_y_scale",
"type": "linear",
"domain": {
"source": "field",
"data": "pipeline_overview_allocation_source",
"field": "overviewValue",
"fields": [],
"includeZero": true,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_primitivecolor_color_scale",
"type": "ordinal",
"domain": {
"source": "field",
"data": "pipeline_primitive_legend_source",
"field": "kind",
"fields": [],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_swatchy_y_scale",
"type": "band",
"domain": {
"source": "field",
"data": "pipeline_primitive_legend_source",
"field": "kind",
"fields": [],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
},
{
"id": "pipeline_notey_y_scale",
"type": "band",
"domain": {
"source": "field",
"data": "pipeline_layout_notes_source",
"field": "note",
"fields": [],
"includeZero": false,
"order": "input",
"reverse": false,
"symmetric": false
}
}
],
"layers": [
{
"id": "pipeline_bar_x_grid_guide",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_point_y_grid_guide",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_bar_x_axis_guide-tick-marks",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_bar_x_axis_guide-labels",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_point_x_axis_guide-tick-marks",
"mark": "line",
"role": "guide"
},
{
"id": "pipeline_point_x_axis_guide-labels",
"mark": "text",
"role": "guide"
},
{
"id": "create_chart_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_view_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_canvas_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_dashboard_shell_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_plot_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_title_band_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_control_rail_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_overview_band_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_axis_rail_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_main_grid_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_bars_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_points_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_detail_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_legend_stack_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_legend_title_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_legend_swatches_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_legend_notes_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_overview_stack_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_overview_chart_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_overview_stats_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_spotlight_inset_layout_surface",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_canvas_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_plot_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_title_band_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_rail_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_overview_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_axis_rail_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_bars_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_points_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_panel_detail_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_spotlight_frame_layer",
"mark": "rect",
"role": "context"
},
{
"id": "pipeline_title_band_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_axis_rail_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_overview_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_panel_bars_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_panel_points_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_panel_detail_label_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_bar_baselines_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_primitive_bars_layer",
"mark": "rect",
"role": "data"
},
{
"id": "pipeline_layout_points_layer",
"mark": "point",
"role": "data"
},
{
"id": "pipeline_overview_bars_layer",
"mark": "rect",
"role": "data"
},
{
"id": "pipeline_primitive_swatches_layer",
"mark": "rect",
"role": "guide"
},
{
"id": "pipeline_primitive_labels_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_layout_notes_layer",
"mark": "text",
"role": "guide"
},
{
"id": "pipeline_inset_callout_layer",
"mark": "text",
"role": "interaction"
}
]
}Resolved SceneGraph
{
"scene": "gallery.layoutPrimitives.scene",
"scales": [
{
"id": "pipeline_barx_x_scale",
"type": "linear",
"domain": [
0,
100
],
"range": [
120,
430
],
"ticks": [
0,
20,
40,
60,
80,
100
]
},
{
"id": "pipeline_bary_y_scale",
"type": "band",
"domain": [
"Frame",
"Margins",
"Grid",
"Stack"
],
"range": [
258,
74
],
"bandwidth": 38.48979591836735
},
{
"id": "pipeline_pointx_x_scale",
"type": "linear",
"domain": [
0,
80
],
"range": [
444,
754
],
"ticks": [
0,
20,
40,
60,
80
]
},
{
"id": "pipeline_pointy_y_scale",
"type": "linear",
"domain": [
0,
100
],
"range": [
258,
74
],
"ticks": [
0,
20,
40,
60,
80,
100
]
},
{
"id": "pipeline_pointr_size_scale",
"type": "sqrt",
"domain": [
0,
100
],
"range": [
4,
12
],
"ticks": [
0,
20,
40,
60,
80,
100
]
},
{
"id": "pipeline_overviewx_x_scale",
"type": "linear",
"domain": [
0,
6
],
"range": [
120,
596
],
"ticks": [
0,
2,
4,
6
]
},
{
"id": "pipeline_overviewy_y_scale",
"type": "linear",
"domain": [
0,
80
],
"range": [
544,
456
],
"ticks": [
0,
20,
40,
60,
80
]
},
{
"id": "pipeline_primitivecolor_color_scale",
"type": "ordinal",
"domain": [
"frame",
"margins",
"grid",
"stack",
"inset"
],
"range": [
"var(--colors-blue-9)",
"var(--colors-green-9)",
"var(--colors-amber-9)",
"var(--colors-orange-9)",
"var(--colors-red-9)"
]
},
{
"id": "pipeline_swatchy_y_scale",
"type": "band",
"domain": [
"frame",
"margins",
"grid",
"stack",
"inset"
],
"range": [
244,
116
],
"bandwidth": 20.459016393442624
},
{
"id": "pipeline_notey_y_scale",
"type": "band",
"domain": [
"Compose",
"Address",
"Interact"
],
"range": [
456,
256
],
"bandwidth": 56.16438356164384
}
],
"layers": [
{
"id": "create_chart_surface",
"role": "context",
"zIndex": -10,
"glyphs": 1
},
{
"id": "pipeline_bar_x_grid_guide",
"role": "guide",
"zIndex": 0,
"glyphs": 6
},
{
"id": "pipeline_point_y_grid_guide",
"role": "guide",
"zIndex": 0,
"glyphs": 6
},
{
"id": "pipeline_view_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_canvas_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_dashboard_shell_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_plot_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_title_band_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_control_rail_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_overview_band_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_axis_rail_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_main_grid_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_bars_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_points_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_detail_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_legend_stack_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_legend_title_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_legend_swatches_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_legend_notes_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_overview_stack_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_overview_chart_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_overview_stats_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_spotlight_inset_layout_surface",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_canvas_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_plot_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_title_band_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_rail_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_overview_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_axis_rail_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_bars_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_points_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_panel_detail_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_spotlight_frame_layer",
"role": "context",
"zIndex": 0,
"glyphs": 1
},
{
"id": "pipeline_bar_x_axis_guide-tick-marks",
"role": "guide",
"zIndex": 5,
"glyphs": 6
},
{
"id": "pipeline_point_x_axis_guide-tick-marks",
"role": "guide",
"zIndex": 5,
"glyphs": 5
},
{
"id": "pipeline_bar_x_axis_guide-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 6
},
{
"id": "pipeline_point_x_axis_guide-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 5
},
{
"id": "pipeline_bar_baselines_layer",
"role": "guide",
"zIndex": 20,
"glyphs": 4
},
{
"id": "pipeline_primitive_bars_layer",
"role": "data",
"zIndex": 20,
"glyphs": 4
},
{
"id": "pipeline_overview_bars_layer",
"role": "data",
"zIndex": 20,
"glyphs": 6
},
{
"id": "pipeline_layout_points_layer",
"role": "data",
"zIndex": 25,
"glyphs": 4
},
{
"id": "pipeline_title_band_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_axis_rail_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_overview_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_panel_bars_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_panel_points_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_panel_detail_label_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 1
},
{
"id": "pipeline_primitive_swatches_layer",
"role": "guide",
"zIndex": 30,
"glyphs": 5
},
{
"id": "pipeline_primitive_labels_layer",
"role": "guide",
"zIndex": 35,
"glyphs": 5
},
{
"id": "pipeline_layout_notes_layer",
"role": "guide",
"zIndex": 35,
"glyphs": 3
},
{
"id": "pipeline_inset_callout_layer",
"role": "interaction",
"zIndex": 40,
"glyphs": 1
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
create_chart_surface
pipeline_bar_x_grid_guide
pipeline_point_y_grid_guide
pipeline_view_layout_surface
pipeline_canvas_layout_surface
pipeline_dashboard_shell_layout_surface
pipeline_plot_layout_surface
pipeline_title_band_layout_surface
pipeline_control_rail_layout_surface
pipeline_overview_band_layout_surface
pipeline_axis_rail_layout_surface
pipeline_main_grid_layout_surface
pipeline_panel_bars_layout_surface
pipeline_panel_points_layout_surface
pipeline_panel_detail_layout_surface
pipeline_legend_stack_layout_surface
pipeline_legend_title_layout_surface
pipeline_legend_swatches_layout_surface
pipeline_legend_notes_layout_surface
pipeline_overview_stack_layout_surface
pipeline_overview_chart_layout_surface
pipeline_overview_stats_layout_surface
pipeline_spotlight_inset_layout_surface
pipeline_canvas_frame_layer
pipeline_plot_frame_layer
pipeline_title_band_frame_layer
pipeline_rail_frame_layer
pipeline_overview_frame_layer
pipeline_axis_rail_frame_layer
pipeline_panel_bars_frame_layer
pipeline_panel_points_frame_layer
pipeline_panel_detail_frame_layer
pipeline_spotlight_frame_layer
pipeline_bar_x_axis_guide-tick-marks
pipeline_point_x_axis_guide-tick-marks
pipeline_bar_x_axis_guide-labels
pipeline_point_x_axis_guide-labels
pipeline_bar_baselines_layer
pipeline_primitive_bars_layer
pipeline_overview_bars_layer
pipeline_layout_points_layer
pipeline_title_band_label_layer
pipeline_axis_rail_label_layer
pipeline_overview_label_layer
pipeline_panel_bars_label_layer
pipeline_panel_points_label_layer
pipeline_panel_detail_label_layer
pipeline_primitive_swatches_layer
pipeline_primitive_labels_layer
pipeline_layout_notes_layer
pipeline_inset_callout_layer
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.