Chart Compiler Gallery
ChartSpec data compiles into resolved scales, layer specs, glyph definitions, scene graph nodes, and a single SVG renderer.
Funnel Health Bullet Graph
Bullet layout transforms derive bands, measures, and target markers from raw thresholds.
Data Sources
6
Fields
19
Scales
2
Layers
8
Glyphs
37
line 16 / rect 12 / text 9
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
Raw bullet metrics
ChartSpec
{
"id": "gallery.bullet-graph",
"data": [
{
"id": "raw-bullets",
"rows": 3
},
{
"id": "bullet-ranges",
"rows": 9
},
{
"id": "bullet-measures",
"rows": 3
},
{
"id": "bullet-targets",
"rows": 3
},
{
"id": "__guide.x-grid",
"rows": 6
},
{
"id": "__guide.x",
"rows": 6
}
],
"transforms": [
{
"id": "bullet-range-layout",
"type": "layout",
"input": "raw-bullets",
"output": "bullet-ranges",
"options": {
"layout": "plot",
"layoutKind": "bulletRanges"
}
},
{
"id": "bullet-measure-layout",
"type": "layout",
"input": "raw-bullets",
"output": "bullet-measures",
"options": {
"layout": "plot",
"layoutKind": "bulletMeasure",
"labelField": "metric",
"value": "actual"
}
},
{
"id": "bullet-target-layout",
"type": "layout",
"input": "raw-bullets",
"output": "bullet-targets",
"options": {
"layout": "plot",
"layoutKind": "bulletTarget",
"labelField": "metric",
"value": "target"
}
}
],
"axes": [
{
"id": "x",
"scale": "x",
"orientation": "bottom",
"tickFormat": {
"style": "percent",
"maximumFractionDigits": 0
}
}
],
"grids": [
{
"id": "x-grid",
"scale": "x",
"orientation": "x"
}
],
"fields": [
"metric",
"start",
"end",
"centerY",
"rangeLabel",
"y",
"height",
"target",
"y1",
"y2",
"poor",
"satisfactory",
"good",
"actual",
"rangeIndex",
"tooltip",
"value",
"labelX",
"label"
],
"scales": [
{
"id": "x",
"type": "linear",
"domain": {
"source": "values",
"values": [
0,
1
]
}
},
{
"id": "rangeFill",
"type": "ordinal",
"domain": {
"source": "field",
"data": "bullet-ranges",
"field": "rangeLabel"
}
}
],
"layers": [
{
"id": "x-grid",
"mark": "line",
"role": "guide"
},
{
"id": "x-axis",
"mark": "line",
"role": "guide"
},
{
"id": "x-tick-marks",
"mark": "line",
"role": "guide"
},
{
"id": "x-labels",
"mark": "text",
"role": "guide"
},
{
"id": "qualitative-ranges",
"mark": "rect",
"role": "context"
},
{
"id": "actual-measures",
"mark": "rect",
"role": "data"
},
{
"id": "target-markers",
"mark": "line",
"role": "data"
},
{
"id": "metric-labels",
"mark": "text",
"role": "guide"
}
]
}Resolved SceneGraph
{
"scene": "gallery.bullet-graph.scene",
"scales": [
{
"id": "x",
"type": "linear",
"domain": [
0,
1
],
"range": [
152,
778
],
"ticks": [
0,
0.2,
0.4,
0.6000000000000001,
0.8,
1
]
},
{
"id": "rangeFill",
"type": "ordinal",
"domain": [
"Poor",
"Satisfactory",
"Good"
],
"range": [
"var(--colors-gray-3)",
"var(--colors-gray-5)",
"var(--colors-gray-7)"
]
}
],
"layers": [
{
"id": "x-grid",
"role": "guide",
"zIndex": 0,
"glyphs": 6
},
{
"id": "x-axis",
"role": "guide",
"zIndex": 0,
"glyphs": 1
},
{
"id": "x-tick-marks",
"role": "guide",
"zIndex": 5,
"glyphs": 6
},
{
"id": "qualitative-ranges",
"role": "context",
"zIndex": 5,
"glyphs": 9
},
{
"id": "x-labels",
"role": "guide",
"zIndex": 20,
"glyphs": 6
},
{
"id": "actual-measures",
"role": "data",
"zIndex": 20,
"glyphs": 3
},
{
"id": "target-markers",
"role": "data",
"zIndex": 30,
"glyphs": 3
},
{
"id": "metric-labels",
"role": "guide",
"zIndex": 40,
"glyphs": 3
}
]
}Glyph Data Tree
Full parameter lineage for the active compiler surface.
x-grid
x-axis
x-tick-marks
qualitative-ranges
x-labels
actual-measures
target-markers
metric-labels
Glyph Inspector
Select a glyph in the chart to inspect resolved params and lineage.