Search code examples
javascriptplotvega-liteparallel-coordinates

Parallel coordinates in Vega-Lite?

Is it possible to create parallel coordinates in Vega-Lite? I'm looking for a simple yet powerful plotting library for JavaScript and support for parallel coordinates is a requirement.

I have googled it but only found how to do it in Vega.

Solution

  • Yes, you can create a parallel coordinates plot in Vega-Lite by combining a window transform and a fold transform. Here is an example with the Iris dataset (vega editor link):

    {
  "data": {
    "url": "data/iris.json"
  },
  "transform": [
    {"window": [{"op": "count", "as": "index"}]},
    {"fold": ["petalLength", "petalWidth", "sepalLength", "sepalWidth"]}
  ],
  "mark": "line",
  "encoding": {
    "color": {"type": "nominal", "field": "species"},
    "detail": {"type": "nominal", "field": "index"},
    "opacity": {"value": 0.3},
    "x": {"type": "nominal", "field": "key"},
    "y": {"type": "quantitative", "field": "value"}
  },
  "width": 600,
  "height": 300
}

    enter image description here

    Notice we use a window transform to construct an index, followed by a fold transform to restructure the data for plotting.