Vega-Lite 中的平行坐标？

Question

是否可以在Vega-Lite中创建平行坐标？我正在为 JavaScript 寻找一个简单但功能强大的绘图库，并且需要支持平行坐标。

我有googled it but only found how to do it in Vega.

Answer 1

是的，您可以通过组合 window 变换和折叠变换在 Vega-Lite 中创建平行坐标图。这是 Iris 数据集 (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
}

请注意，我们使用 window transform to construct an index, followed by a fold transform 重组数据以进行绘图。

Answer 2

在的基础上，这是一个改进版本，它标准化每个变量并手动绘制带有规则、文本和刻度线的轴。

请注意，当您具有交互性时，平行坐标通常很有用，因此这里还有更多工作要做。

{
  "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}
    }
  }
}

Vega-Lite 中的平行坐标？

Parallel coordinates in Vega-Lite?

javascript

plot

parallel-coordinates

vega-lite