Chart Compiler Gallery

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

Dashboard
OverviewArc DiagramArea GraphBar ChartBox & Whisker PlotBubble ChartBullet GraphCalendarCandlestick ChartCircle PackingDensity PlotDonut ChartDot Matrix ChartError BarsFD Divorce: OccupationsFD Divorce: CategoriesFD EV Price/RangeFD ICE ArrestsGantt ChartHeatmapHistogramLine GraphMarimekko ChartMulti-set Bar ChartOpen-high-low-close ChartNightingale Rose ChartNYT Marriage ChoroplethParallel Coordinates PlotPie ChartPopulation PyramidProportional Area ChartRadar ChartRadial Bar ChartRadial Column ChartScatterplotSpan ChartStacked Area GraphStacked Bar GraphStream GraphSunburst DiagramTimelineTimetableTreemapTree DiagramViolin PlotKPIPointOverview BrushSmall MultiplesSymbol MapProduct Table

Compiled KPI

Single-row data drives text glyphs.

KPI

Data Sources

1

Fields

3

Scales

0

Layers

5

Glyphs

5

rect 2 / text 3

Compiler Coverage96%12 chart surfaces share one scene renderer12 chart surfaces share one scene renderer

Data Flow Diagram

0/65 nodes
0/73 edges
65 hidden

Select a glyph to highlight its complete source path.

Scope

Roles

source
transform
field
scale
layer
param
glyph

No matching flow nodes

Adjust search, scope, or role filters.

Available Data

1 tables
0 transforms

Compiled KPI row

kpi
raw
5 columns

ChartSpec

{
  "id": "gallery.kpi",
  "data": [
    {
      "id": "kpi",
      "rows": 1
    }
  ],
  "transforms": [],
  "fields": [
    "label",
    "value",
    "detail"
  ],
  "scales": [],
  "layers": [
    {
      "id": "panel",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "accent",
      "mark": "rect",
      "role": "guide"
    },
    {
      "id": "kpi-label",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "kpi-value",
      "mark": "text",
      "role": "data"
    },
    {
      "id": "kpi-detail",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.kpi.scene",
  "scales": [],
  "layers": [
    {
      "id": "panel",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "accent",
      "role": "guide",
      "zIndex": 1,
      "glyphs": 1
    },
    {
      "id": "kpi-label",
      "role": "guide",
      "zIndex": 10,
      "glyphs": 1
    },
    {
      "id": "kpi-value",
      "role": "data",
      "zIndex": 20,
      "glyphs": 1
    },
    {
      "id": "kpi-detail",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 1
    }
  ]
}

Glyph Data Tree

5 layers

Full parameter lineage for the active compiler surface.

panel

1

accent

1

kpi-label

1

kpi-value

1

kpi-detail

1

Glyph Inspector

none

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