Altair: Parallel coordinates with multiple y axes

[jackjackk]

I would like to plot sth like https://vega.github.io/vega/examples/parallel-coordinates/ with altair.
In issue #382 @jakevdp suggests to use layers for a similar request, but would it be possible to elaborate a bit more on that? Or be redirected to further examples/documentation on how I could reproduce the example above? Thanks.

[jakevdp]

Have you seen this example? https://altair-viz.github.io/gallery/parallel_coordinates.html

[jackjackk]

Yes, thanks. The main difference is that I would like to have a different scale for each x coordinate, as the variables I want to plot are not necessarily homogeneous (like in the vega example above). It would be great to have an example along these lines, or a hint on how I could change the code of your example.

[jakevdp]

Ah, I see. I'm not certain that's possible in Vega-Lite. Maybe @domoritz or @kanitw would have ideas?

[kanitw]

Yeah that’s not possible of Vega-Lite and we don’t have plan to support parallel coordinatine any time soon.

[jackjackk]

ok, thanks, I've learned vega != vega-lite! So, in matplotlib what I'm doing is normalizing each variable to be in [0,1], plot them like in the altair example, and then add x-labels below and above the plot (using also a secondary x-axis) to show the actual min and max range. How would this labelling work in altair? Thanks.

[kanitw]

I think you can use text marks to show min - max for each axis

[jackjackk]

Thanks. With a bit of normalizing I got a result close to what desired. (see https://github.com/jackjackk/altair-parallel-coordinates/blob/master/altair-parallel-coordinates.ipynb ) Could you point me where I could find help on 1) renaming the colorbar tick labels 2) hiding the default y-tick labels 3) attempting some interactive brushing of the lines (e.g. focusing on a certain range of values for a certain variables) ?

[sotte]

Nice solution @jackjackk!

The problem when normalizing the data is that the data is actually changed, and using the hover tool would show the wrong/normalized data. Is there really no other solution? It's quite common (the default case maybe?) to have variables with different scales. Could be build a transformer for this?

[domoritz]

@kanitw made a chart recently: (vega editor)

{
  "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"}
    }
  }, {
    "selection": {
      "hover":{ "type": "single", "field": "index", "on": "mouseover", "empty": "none"}
    },
    "mark": "line",
    "encoding": {
      "color": {
        "condition": {"selection": "hover", "type": "nominal", "field": "species"},
        "value": "grey"
      },
      "detail": {"type": "nominal", "field": "index"},
      "opacity": {
        "condition": {"selection": "hover", "value": 0.7}, 
        "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"
      }]
    }
  }],
  "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}
    }
  }
}

[kanitw]

This is the improved version of the plot: https://stackoverflow.com/a/54701776/866989.