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

Error Bars

Raw observations are grouped into means and uncertainty intervals before line caps and point marks render the comparison.

Error Bars

Data Sources

5

Fields

11

Scales

2

Layers

10

Glyphs

38

line 24 / text 10 / point 4

ControlVariantRetainedExpansion4049.258.467.676.886Control: mean 58.17, ci95 1.99Variant: mean 69.17, ci95 2.88Retained: mean 51.5, ci95 1.94Expansion: mean 75.83, ci95 2.65

Data Flow Diagram

0/362 nodes
0/677 edges
362 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
1 transforms

Raw grouped observations

observations
raw
4 columns
feeds segment-error-intervals

ChartSpec

{
  "id": "catalogue.error-bars",
  "data": [
    {
      "id": "observations",
      "rows": 24
    },
    {
      "id": "error-intervals",
      "rows": 4
    },
    {
      "id": "__guide.y-grid",
      "rows": 6
    },
    {
      "id": "__guide.x",
      "rows": 4
    },
    {
      "id": "__guide.y",
      "rows": 6
    }
  ],
  "transforms": [
    {
      "id": "segment-error-intervals",
      "type": "errorInterval",
      "input": "observations",
      "output": "error-intervals",
      "options": {
        "errorMethod": "ci95"
      }
    }
  ],
  "axes": [
    {
      "id": "x",
      "scale": "x",
      "orientation": "bottom"
    },
    {
      "id": "y",
      "scale": "y",
      "orientation": "left"
    }
  ],
  "grids": [
    {
      "id": "y-grid",
      "scale": "y",
      "orientation": "y"
    }
  ],
  "fields": [
    "value",
    "segment",
    "mean",
    "lower",
    "upper",
    "error",
    "tooltip",
    "count",
    "standardDeviation",
    "standardError",
    "label"
  ],
  "scales": [
    {
      "id": "x",
      "type": "band",
      "domain": {
        "source": "field",
        "data": "error-intervals",
        "field": "segment"
      }
    },
    {
      "id": "y",
      "type": "linear",
      "domain": {
        "source": "field",
        "data": "observations",
        "field": "value",
        "min": 40,
        "max": 86,
        "padding": 0.04
      }
    }
  ],
  "layers": [
    {
      "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": "error-stems",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "lower-caps",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "upper-caps",
      "mark": "line",
      "role": "data"
    },
    {
      "id": "means",
      "mark": "point",
      "role": "data"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "catalogue.error-bars.scene",
  "scales": [
    {
      "id": "x",
      "type": "band",
      "domain": [
        "Control",
        "Variant",
        "Retained",
        "Expansion"
      ],
      "range": [
        62,
        686
      ],
      "bandwidth": 73.6
    },
    {
      "id": "y",
      "type": "linear",
      "domain": [
        40,
        86
      ],
      "range": [
        282,
        26
      ],
      "ticks": [
        40,
        49.2,
        58.4,
        67.6,
        76.8,
        86
      ]
    }
  ],
  "layers": [
    {
      "id": "y-grid",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 6
    },
    {
      "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": 4
    },
    {
      "id": "error-stems",
      "role": "data",
      "zIndex": 10,
      "glyphs": 4
    },
    {
      "id": "lower-caps",
      "role": "data",
      "zIndex": 12,
      "glyphs": 4
    },
    {
      "id": "upper-caps",
      "role": "data",
      "zIndex": 12,
      "glyphs": 4
    },
    {
      "id": "x-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 4
    },
    {
      "id": "y-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 6
    },
    {
      "id": "means",
      "role": "data",
      "zIndex": 20,
      "glyphs": 4
    }
  ]
}

Glyph Data Tree

10 layers

Full parameter lineage for the active compiler surface.

y-grid

6

x-axis

1

y-axis

1

x-tick-marks

4

error-stems

4

lower-caps

4

upper-caps

4

x-labels

4

y-labels

6

means

4

Glyph Inspector

none

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