Chart Compiler Gallery

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

Dashboard

Store Revenue Symbol Map

Symbol map glyphs expose location, size, and region-color sources.

Symbol Map

Data Sources

Fields

Scales

Layers

Glyphs

rect 1 / line 8 / point 6 / text 6

Data Flow Diagram

0/208 nodes

0/381 edges

208 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

Store locations

stores

raw

8 columns

id	store	region	lon	lat	revenue	tooltip	sourceRows
seattle	Seattle	West	-122.33	47.61	82	Seattle: $82,000 in West	demo.symbol-map.Seattle
los-angeles	Los Angeles	West	-118.24	34.05	96	Los Angeles: $96,000 in West	demo.symbol-map.Los Angeles
denver	Denver	Central	-104.99	39.74	68	Denver: $68,000 in Central	demo.symbol-map.Denver
chicago	Chicago	Central	-87.63	41.88	88	Chicago: $88,000 in Central	demo.symbol-map.Chicago
atlanta	Atlanta	South	-84.39	33.75	58	Atlanta: $58,000 in South	demo.symbol-map.Atlanta
new-york	New York	East	-74.01	40.71	104	New York: $104,000 in East	demo.symbol-map.New York

ChartSpec

{
  "id": "gallery.symbol-map",
  "data": [
    {
      "id": "stores",
      "rows": 6
    },
    {
      "id": "lon-grid",
      "rows": 4
    },
    {
      "id": "lat-grid",
      "rows": 4
    }
  ],
  "transforms": [],
  "fields": [
    "store",
    "region",
    "lon",
    "lat",
    "revenue",
    "tooltip"
  ],
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          -125,
          -70
        ]
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          30,
          48
        ]
      }
    },
    {
      "id": "r",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "stores",
        "field": "revenue"
      }
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "stores",
        "field": "region"
      }
    }
  ],
  "layers": [
    {
      "id": "map-panel",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "longitude-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "latitude-grid",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "store-symbols",
      "mark": "point",
      "role": "data"
    },
    {
      "id": "store-labels",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.symbol-map.scene",
  "scales": [
    {
      "id": "x",
      "type": "linear",
      "domain": [
        -125,
        -70
      ],
      "range": [
        44,
        684
      ],
      "ticks": [
        -125,
        -111.25,
        -97.5,
        -83.75,
        -70
      ]
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        30,
        48
      ],
      "range": [
        332,
        26
      ],
      "ticks": [
        30,
        34.5,
        39,
        43.5,
        48
      ]
    },
    {
      "id": "r",
      "type": "linear",
      "domain": [
        58,
        104
      ],
      "range": [
        9,
        28
      ],
      "ticks": [
        58,
        69.5,
        81,
        92.5,
        104
      ]
    },
    {
      "id": "color",
      "type": "ordinal",
      "domain": [
        "West",
        "Central",
        "South",
        "East"
      ],
      "range": [
        "var(--colors-blue-9)",
        "var(--colors-green-9)",
        "var(--colors-amber-9)",
        "var(--colors-purple-9)",
        "var(--colors-red-9)"
      ]
    }
  ],
  "layers": [
    {
      "id": "map-panel",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "longitude-grid",
      "role": "guide",
      "zIndex": 2,
      "glyphs": 4
    },
    {
      "id": "latitude-grid",
      "role": "guide",
      "zIndex": 2,
      "glyphs": 4
    },
    {
      "id": "store-symbols",
      "role": "data",
      "zIndex": 10,
      "glyphs": 6
    },
    {
      "id": "store-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    }
  ]
}

Glyph Data Tree

5 layers

Full parameter lineage for the active compiler surface.

map-panel

longitude-grid

latitude-grid

store-symbols

store-labels

Glyph Inspector

none

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