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

Glyph Density Map

Scatter-style point marks exercise interaction identity.

Point

Data Sources

5

Fields

7

Scales

4

Layers

9

Glyphs

47

line 17 / point 10 / text 20

Bars: 18 spec nodes, 24 rendered glyphsLines: 42 spec nodes, 36 rendered glyphsHeatmaps: 64 spec nodes, 48 rendered glyphsScatter: 74 spec nodes, 42 rendered glyphsHistograms: 58 spec nodes, 62 rendered glyphsMaps: 68 spec nodes, 54 rendered glyphsTables: 78 spec nodes, 34 rendered glyphsKPI: 28 spec nodes, 16 rendered glyphsInspector: 86 spec nodes, 68 rendered glyphsScenes: 92 spec nodes, 58 rendered glyphs0255075100020406080BarsLinesHeatmapsScatterHistogramsMapsTablesKPIInspectorScenes

Data Flow Diagram

0/435 nodes
0/840 edges
435 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

5 tables
0 transforms

Compiler stress points

points
raw
8 columns

ChartSpec

{
  "id": "gallery.point",
  "data": [
    {
      "id": "points",
      "rows": 10
    },
    {
      "id": "__guide.x-grid",
      "rows": 5
    },
    {
      "id": "__guide.y-grid",
      "rows": 5
    },
    {
      "id": "__guide.x",
      "rows": 5
    },
    {
      "id": "__guide.y",
      "rows": 5
    }
  ],
  "transforms": [],
  "axes": [
    {
      "id": "x",
      "scale": "x",
      "orientation": "bottom"
    },
    {
      "id": "y",
      "scale": "y",
      "orientation": "left"
    }
  ],
  "grids": [
    {
      "id": "x-grid",
      "scale": "x",
      "orientation": "x"
    },
    {
      "id": "y-grid",
      "scale": "y",
      "orientation": "y"
    }
  ],
  "fields": [
    "label",
    "x",
    "y",
    "size",
    "family",
    "tooltip",
    "value"
  ],
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          100
        ],
        "includeZero": true
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          0,
          80
        ],
        "includeZero": true
      }
    },
    {
      "id": "r",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "points",
        "field": "size",
        "includeZero": true
      }
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "points",
        "field": "family"
      }
    }
  ],
  "layers": [
    {
      "id": "x-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "y-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": "y-axis",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "y-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "points",
      "mark": "point",
      "role": "data"
    },
    {
      "id": "point-labels",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.point.scene",
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": [
        0,
        100
      ],
      "range": [
        58,
        690
      ],
      "ticks": [
        0,
        25,
        50,
        75,
        100
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        0,
        80
      ],
      "range": [
        286,
        22
      ],
      "ticks": [
        0,
        20,
        40,
        60,
        80
      ]
    },
    {
      "id": "r",
      "type": "linear",
      "domain": [
        0,
        15
      ],
      "range": [
        4,
        18
      ],
      "ticks": [
        0,
        3.75,
        7.5,
        11.25,
        15
      ]
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": [
        "Rect",
        "Path",
        "Point",
        "Text"
      ],
      "range": [
        "var(--colors-blue-9)",
        "var(--colors-green-9)",
        "var(--colors-amber-9)",
        "var(--colors-purple-9)",
        "var(--colors-red-9)"
      ]
    }
  ],
  "layers": [
    {
      "id": "x-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 5
    },
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 5
    },
    {
      "id": "x-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "y-axis",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "x-tick-marks",
      "role": "guide",
      "zIndex": 5,
      "glyphs": 5
    },
    {
      "id": "points",
      "role": "data",
      "zIndex": 10,
      "glyphs": 10
    },
    {
      "id": "x-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 5
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 5
    },
    {
      "id": "point-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 10
    }
  ]
}

Glyph Data Tree

9 layers

Full parameter lineage for the active compiler surface.

x-grid

5

y-grid

5

x-axis

1

y-axis

1

x-tick-marks

5

points

10

x-labels

5

y-labels

5

point-labels

10

Glyph Inspector

none

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