Violin Plot

Grouped raw observations compile into mirrored density silhouettes with median and IQR guides.

Violin Plot
Violin Plot Pipeline pipeline

Data Sources

4

Fields

25

Scales

2

Layers

9

Glyphs

29

rect 3 / line 13 / path 3 / text 10

Baseline: median 62, IQR 11Variant: median 72, IQR 13Control: median 57, IQR 11405060708090100Baseline: median 62, IQR 11Variant: median 72, IQR 13Control: median 57, IQR 11Baseline: median 62, IQR 11Variant: median 72, IQR 13Control: median 57, IQR 11BaselineBaselineVariantVariantControlControl

Build Path

Violin Plot Pipeline

This example is rebuilt from gallery data source observations by recipe violinPlot: raw table rows -> TabularSource -> pipeline drafts -> analyzeAuthoringDrafts() -> materialized ChartSpec -> compileChart() -> SceneGraph -> SVG. The graph below shows the authored pipeline stage.

Pipeline recipe graph

11 pipelines
12 nodes
12 edges

Data Flow Diagram

0/323 nodes
0/538 edges
323 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

4 tables
1 transforms

Imported table

source_gallery_violinplot
raw
5 columns
feeds pipeline_violin_density_layout_transform

ChartSpec

{
  "id": "gallery.violinPlot",
  "data": [
    {
      "id": "source_gallery_violinplot",
      "rows": 45
    },
    {
      "id": "source_violins",
      "rows": 3
    },
    {
      "id": "__guide.pipeline_y_grid_guide",
      "rows": 7
    },
    {
      "id": "__guide.pipeline_y_guide",
      "rows": 7
    }
  ],
  "transforms": [
    {
      "id": "pipeline_violin_density_layout_transform",
      "type": "layout",
      "input": "source_gallery_violinplot",
      "output": "source_violins",
      "options": {
        "count": 52,
        "end": 100,
        "errorMethod": "standardError",
        "field": "category",
        "fit": "contain",
        "geometryField": "category",
        "groupBy": [
          "category"
        ],
        "idField": "category",
        "includeMax": false,
        "labelField": "category",
        "layout": "pipeline_plot_layout",
        "layoutKind": "violin",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": [
          "Baseline",
          "Variant",
          "Control"
        ],
        "orderField": "category",
        "parentField": "score",
        "seriesBy": "score",
        "sourceField": "category",
        "start": 40,
        "startField": "score",
        "targetField": "score",
        "value": "score",
        "xField": "score"
      }
    }
  ],
  "axes": [
    {
      "id": "pipeline_y_guide",
      "scale": "pipeline_y_y_scale",
      "orientation": "left"
    }
  ],
  "grids": [
    {
      "id": "pipeline_y_grid_guide",
      "scale": "pipeline_y_y_scale",
      "orientation": "y"
    }
  ],
  "legends": [],
  "fields": [
    "__rowLabel",
    "id",
    "category",
    "score",
    "bandwidth",
    "centerX",
    "count",
    "labelX",
    "labelY",
    "maxDensity",
    "maxValue",
    "median",
    "medianX1",
    "medianX2",
    "medianY",
    "minValue",
    "pathD",
    "q1",
    "q1Y",
    "q3",
    "q3Y",
    "sampleCount",
    "tooltip",
    "value",
    "label"
  ],
  "scales": [
    {
      "id": "pipeline_y_y_scale",
      "type": "linear",
      "domain": {
        "source": "values",
        "values": [
          40,
          100
        ],
        "includeZero": false,
        "order": "input",
        "reverse": false,
        "symmetric": false
      }
    },
    {
      "id": "pipeline_color_color_scale",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "source_violins",
        "field": "category",
        "fields": [],
        "includeZero": false,
        "order": "input",
        "reverse": false,
        "symmetric": false
      }
    }
  ],
  "layers": [
    {
      "id": "pipeline_y_grid_guide",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_y_guide-labels",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "create_chart_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_view_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_plot_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_violins_layer",
      "mark": "path",
      "role": "data",
      "path": {
        "directD": true,
        "areaBand": false,
        "closedToY": false,
        "curve": "smooth",
        "sortBy": ""
      }
    },
    {
      "id": "pipeline_iqr_lines_layer",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_median_lines_layer",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_category_labels_layer",
      "mark": "text",
      "role": "guide"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.violinPlot.scene",
  "scales": [
    {
      "id": "pipeline_y_y_scale",
      "type": "linear",
      "domain": [
        40,
        100
      ],
      "range": [
        284,
        28
      ],
      "ticks": [
        40,
        50,
        60,
        70,
        80,
        90,
        100
      ]
    },
    {
      "id": "pipeline_color_color_scale",
      "type": "ordinal",
      "domain": [
        "Baseline",
        "Variant",
        "Control"
      ],
      "range": [
        "var(--colors-blue-9)",
        "var(--colors-green-9)",
        "var(--colors-amber-9)",
        "var(--colors-purple-9)",
        "var(--colors-red-9)"
      ]
    }
  ],
  "layers": [
    {
      "id": "create_chart_surface",
      "role": "context",
      "zIndex": -10,
      "glyphs": 1
    },
    {
      "id": "pipeline_y_grid_guide",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 7
    },
    {
      "id": "pipeline_view_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_plot_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_violins_layer",
      "role": "data",
      "zIndex": 10,
      "glyphs": 3
    },
    {
      "id": "pipeline_y_guide-labels",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 7
    },
    {
      "id": "pipeline_iqr_lines_layer",
      "role": "guide",
      "zIndex": 20,
      "glyphs": 3
    },
    {
      "id": "pipeline_median_lines_layer",
      "role": "guide",
      "zIndex": 25,
      "glyphs": 3
    },
    {
      "id": "pipeline_category_labels_layer",
      "role": "guide",
      "zIndex": 30,
      "glyphs": 3
    }
  ]
}

Glyph Data Tree

9 layers

Full parameter lineage for the active compiler surface.

create_chart_surface

1

pipeline_y_grid_guide

7

pipeline_view_layout_surface

1

pipeline_plot_layout_surface

1

pipeline_violins_layer

3

pipeline_y_guide-labels

7

pipeline_iqr_lines_layer

3

pipeline_median_lines_layer

3

pipeline_category_labels_layer

3

Glyph Inspector

none

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