Parallel Coordinates

Rebuilds the parallel-coordinates chart with field-repeat axis layout, axis/tick rows, grouped profile paths, and profile points.

Parallel Coordinates
Gallery Parallel Coordinates Pipeline pipeline

Data Sources

4

Fields

24

Scales

1

Layers

8

Glyphs

52

rect 2 / line 15 / text 15 / path 5 / point 15

Axis linesAxis linesAxis lines496377913245.358.772445872864949636377779191323245.345.358.758.772724444585872728686ReachReachCostCostLoyaltyLoyaltyAlpha / Reach: 84Beta / Reach: 62Gamma / Reach: 71Delta / Reach: 49Epsilon / Reach: 91Alpha / Reach: 84Alpha / Cost: 38Alpha / Loyalty: 68Beta / Reach: 62Beta / Cost: 54Beta / Loyalty: 79Gamma / Reach: 71Gamma / Cost: 32Gamma / Loyalty: 57Delta / Reach: 49Delta / Cost: 72Delta / Loyalty: 44Epsilon / Reach: 91Epsilon / Cost: 48Epsilon / Loyalty: 86

Build Path

Gallery Parallel Coordinates Pipeline

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

Pipeline recipe graph

12 pipelines
19 nodes
22 edges

Data Flow Diagram

0/538 nodes
0/966 edges
538 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
3 transforms

Imported table

source_gallery_parallelcoordinates
raw
8 columns
feeds pipeline_parallel_axis_layout_transform
feeds pipeline_parallel_tick_layout_transform
feeds pipeline_parallel_point_layout_transform

ChartSpec

{
  "id": "gallery.parallelCoordinates",
  "data": [
    {
      "id": "source_gallery_parallelcoordinates",
      "rows": 5
    },
    {
      "id": "source_parallel_axes",
      "rows": 3
    },
    {
      "id": "source_parallel_ticks",
      "rows": 12
    },
    {
      "id": "source_axis_points",
      "rows": 15
    }
  ],
  "transforms": [
    {
      "id": "pipeline_parallel_axis_layout_transform",
      "type": "layout",
      "input": "source_gallery_parallelcoordinates",
      "output": "source_parallel_axes",
      "options": {
        "count": 1,
        "errorMethod": "standardError",
        "fit": "contain",
        "groupBy": [
          "reach",
          "cost",
          "loyalty"
        ],
        "includeMax": true,
        "layout": "pipeline_plot_layout",
        "layoutKind": "parallelAxes",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": []
      }
    },
    {
      "id": "pipeline_parallel_tick_layout_transform",
      "type": "layout",
      "input": "source_gallery_parallelcoordinates",
      "output": "source_parallel_ticks",
      "options": {
        "count": 4,
        "errorMethod": "standardError",
        "fit": "contain",
        "groupBy": [
          "reach",
          "cost",
          "loyalty"
        ],
        "includeMax": true,
        "layout": "pipeline_plot_layout",
        "layoutKind": "parallelAxisTicks",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": []
      }
    },
    {
      "id": "pipeline_parallel_point_layout_transform",
      "type": "layout",
      "input": "source_gallery_parallelcoordinates",
      "output": "source_axis_points",
      "options": {
        "count": 1,
        "errorMethod": "standardError",
        "fit": "contain",
        "groupBy": [
          "reach",
          "cost",
          "loyalty"
        ],
        "includeMax": true,
        "labelField": "segment",
        "layout": "pipeline_plot_layout",
        "layoutKind": "parallelCoordinates",
        "layoutMode": "proportionalAngle",
        "mode": "normal",
        "order": []
      }
    }
  ],
  "axes": [],
  "grids": [],
  "legends": [],
  "fields": [
    "__rowLabel",
    "id",
    "segment",
    "reach",
    "cost",
    "quality",
    "loyalty",
    "axis",
    "axisIndex",
    "axisLabel",
    "labelY",
    "max",
    "min",
    "x",
    "y0",
    "y1",
    "label",
    "labelX",
    "value",
    "x1",
    "x2",
    "y",
    "observation",
    "tooltip"
  ],
  "scales": [
    {
      "id": "pipeline_segment_color_color_scale",
      "type": "ordinal",
      "domain": {
        "source": "field",
        "data": "source_axis_points",
        "field": "observation",
        "fields": [],
        "includeZero": false,
        "order": "input",
        "reverse": false,
        "symmetric": false
      }
    }
  ],
  "layers": [
    {
      "id": "create_chart_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_plot_layout_surface",
      "mark": "rect",
      "role": "context"
    },
    {
      "id": "pipeline_axis_lines_layer",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_axis_ticks_layer",
      "mark": "line",
      "role": "guide"
    },
    {
      "id": "pipeline_tick_labels_layer",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "pipeline_axis_labels_layer",
      "mark": "text",
      "role": "guide"
    },
    {
      "id": "pipeline_profile_lines_layer",
      "mark": "path",
      "role": "data",
      "path": {
        "directD": false,
        "areaBand": false,
        "closedToY": false,
        "curve": "linear",
        "groupBy": [
          "observation"
        ],
        "sortBy": "axisIndex"
      }
    },
    {
      "id": "pipeline_profile_points_layer",
      "mark": "point",
      "role": "interaction"
    }
  ]
}

Resolved SceneGraph

{
  "scene": "gallery.parallelCoordinates.scene",
  "scales": [
    {
      "id": "pipeline_segment_color_color_scale",
      "type": "ordinal",
      "domain": [
        "Alpha",
        "Beta",
        "Gamma",
        "Delta",
        "Epsilon"
      ],
      "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_plot_layout_surface",
      "role": "context",
      "zIndex": 0,
      "glyphs": 1
    },
    {
      "id": "pipeline_axis_lines_layer",
      "role": "guide",
      "zIndex": 0,
      "glyphs": 3
    },
    {
      "id": "pipeline_axis_ticks_layer",
      "role": "guide",
      "zIndex": 4,
      "glyphs": 12
    },
    {
      "id": "pipeline_tick_labels_layer",
      "role": "guide",
      "zIndex": 6,
      "glyphs": 12
    },
    {
      "id": "pipeline_axis_labels_layer",
      "role": "guide",
      "zIndex": 10,
      "glyphs": 3
    },
    {
      "id": "pipeline_profile_lines_layer",
      "role": "data",
      "zIndex": 20,
      "glyphs": 5
    },
    {
      "id": "pipeline_profile_points_layer",
      "role": "interaction",
      "zIndex": 30,
      "glyphs": 15
    }
  ]
}

Glyph Data Tree

8 layers

Full parameter lineage for the active compiler surface.

create_chart_surface

1

pipeline_plot_layout_surface

1

pipeline_axis_lines_layer

3

pipeline_axis_ticks_layer

12

pipeline_tick_labels_layer

12

pipeline_axis_labels_layer

3

pipeline_profile_lines_layer

5

pipeline_profile_points_layer

15

Glyph Inspector

none

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