Parallel coordinates in Vega-Lite?

Question

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 .

Answer 1

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
}

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

Answer 2

Building on @jakevdp's answer , here is an improved version that normalizes each variables and manually draw axes with rule, text and tick marks.

Note that parallel coordinates are often useful when you have interactivity though, so there is more work to be done here.

{
  "data": {
    "url": "data/iris.json"
  },
  "width": 600,
  "height": 300,
  "transform": [
    {"window": [{"op": "count", "as": "index"}]},
    {"fold": ["petalLength", "petalWidth", "sepalLength", "sepalWidth"]},
    {
      "window": [
        {"op": "min", "field": "value", "as": "min"},
        {"op": "max", "field": "value", "as": "max"}
      ],
      "frame": [null, null],
      "groupby": ["key"]
    },
    {
      "calculate": "(datum.value - datum.min) / (datum.max-datum.min)",
      "as": "norm_val"
    },
    {
      "calculate": "(datum.min + datum.max) / 2",
      "as": "mid"
    }
  ],
  "layer": [{
    "mark": {"type": "rule", "color": "#ccc", "tooltip": null},
    "encoding": {
      "detail": {"aggregate": "count", "type": "quantitative"},
      "x": {"type": "nominal", "field": "key"}
    }
  }, {
    "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": "norm_val", "axis": null},
      "tooltip": [{
        "field": "petalLength"
      }, {
        "field": "petalWidth"
      }, {
        "field": "sepalLength"
      }, {
        "field": "sepalWidth"
      }]
    }
  },{
    "encoding": {
      "x": {"type": "nominal", "field": "key"}, 
      "y": {"value": 0}
    },
    "layer": [{
      "mark": {"type": "text", "style": "label"},
      "encoding": {
        "text": {"aggregate": "max", "field": "max", "type": "quantitative"}
      }
    }, {
      "mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
    }]
  },{

    "encoding": {
      "x": {"type": "nominal", "field": "key"}, 
      "y": {"value": 150}
    },
    "layer": [{
      "mark": {"type": "text", "style": "label"},
      "encoding": {
        "text": {"aggregate": "min", "field": "mid", "type": "quantitative"}
      }
    }, {
      "mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
    }]
  },{
    "encoding": {
      "x": {"type": "nominal", "field": "key"}, 
      "y": {"value": 300}
    },
    "layer": [{
      "mark": {"type": "text", "style": "label"},
      "encoding": {
        "text": {"aggregate": "min", "field": "min", "type": "quantitative"}
      }
    }, {
      "mark": {"type": "tick", "style": "tick", "size": 8, "color": "#ccc"}
    }]
  }],
  "config": {
    "axisX": {"domain": false, "labelAngle": 0, "tickColor": "#ccc", "title": false},
    "view": {"stroke": null},
    "style": {
      "label": {"baseline": "middle", "align": "right", "dx": -5, "tooltip": null},
      "tick": {"orient": "horizontal", "tooltip": null}
    }
  }
}