Vega-Lite中的平行坐标？

作者: 易米烊光
发布时间: 2024-03-15 11:47:36 (4月前)
转自：

3 条回复

0#
回复此人
如果 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 建立在 <a href="https://stackoverflow.com/a/54674391/866989"> @jakevdp的回答 </A> ，这是一个改进的版本，规范化每个变量并手动绘制带有规则，文本和刻度线的轴。 </p> <P> 请注意，当您具有交互性时，并行坐标通常很有用，因此这里还有更多工作要做。 </p> <pre> <code> { "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} } } } </code> </pre> <P> <a href="https://i.stack.imgur.com/UhKn2.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/UhKn2.png”alt =“在此处输入图片说明”/> </A> </p> </DIV>

编辑
1#
回复此人
12345 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 是的，您可以通过组合窗口变换和折叠变换在Vega-Lite中创建平行坐标图。以下是Iris数据集的示例（ <a href="https://vega.github.io/editor/#/url/vega-lite/N4KABGBEAmCGAutIC4yghSBXATgGxSjkQHoBLHMgZwDoArKgewDtJwwBfAGncnh1jMqAM0Y4AtoQDa7CMEgB3Ms2iMF0+YwAOhSAGNGWZvEhcosKruXQApgA9IHALrdZaSKLzRpkLTcR4ADI2zADm8AAWplB+AQDqZNCR0ZBUNlqwQSHhUWap6ZkJSVEu7E48mOKwOADWunjKNqa8IQbQyqGE6Bj6jHhiXXwAnn66zIziypkpwmQ2XrpUfnpzlq4YRP6wZASo8vAjTaiQ45PM03mz897H1vaOFT3asCsHgwBumVhHYAAMNABmdY9Bx7YajY6nKYES5zBbHGo2IYPNyQZFgg4QqAARywgngZEQBPeTVh110nzw30c7GBikSyVQADZfr9HpAIjYyKEIiZUADWSAOEA" rel="nofollow noreferrer"> 维加编辑链接 </A> ）： </p> <pre> <code> { "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 } </code> </pre> <P> <a href="https://i.stack.imgur.com/ltKN2.png" rel="nofollow noreferrer"> <img src =“https://i.stack.imgur.com/ltKN2.png”alt =“在此处输入图片说明”/> </A> </p> <P> 请注意我们使用了 <a href="https://vega.github.io/vega-lite/docs/window.html" rel="nofollow noreferrer"> 窗口变换 </A> 构建一个索引，然后是一个 <a href="https://vega.github.io/vega-lite/docs/fold.html" rel="nofollow noreferrer"> 折叠变换 </A> 重建数据以进行绘图。 </p> </DIV>

编辑

登录后才能参与评论