Vega-Lite 如何获取嵌套条形图? [英] Vega-Lite how to get nested bar chart?

问题描述

我对 vega-lite 还很陌生.我真的很想让下面的嵌套条形图工作.此嵌套条形图描绘了跨多个类别的聚合值.输入数据根据两个字段进行细分(类别成员不均匀).然后汇总每个子组以显示第三个定量字段的平均值.vega 示例:

解决方案

我已经转换了 vega 上的示例:嵌套条形图 vega-lite 示例.所以我希望它可以帮助您理解或解决您的案例.如果您需要有关图表的帮助，那么我需要您提供一些适当的输入.请参阅下或在代码编辑

<代码>{$schema":https://vega.github.io/schema/vega-lite/v5.json"，数据":{值":[{a":0，b":a"，c":6.3}，{a":0，b":a"，c":4.2}，{a":0，b":b"，c":6.8}，{a":0，b":c"，c":5.1}，{a":1，b":b"，c":4.4}，{a":2，b":b"，c":3.5}，{a":2，b":c"，c":6.2}]},变换":[{aggregate":[{field":c"，as":avg_c"，op":average"}]，groupby":[a"，b"]}],vconcat":[{facet":{row":{field":a"，title":null，header":null}}，规格":{宽度":300，编码":{y":{field":b"，type":nominal"，axis":null}，x":{field":avg_c"，type":quantitative"}},层":[{mark":{type":bar"，cornerRadius":10}，编码":{颜色":{字段":a"}}},{标记":{类型":文本"，对齐":右"，dx":-5}，编码":{文本":{字段":b"}，x":{数据":0"，类型":定量"}}}]}}]}

I'm fairly new to vega-lite. I'd really like to get the following nested bar chart working. This nested bar chart depicts aggregated values across multiple categories. The input data is subdivided according to two fields (with uneven category membership). Each sub-group is then aggregated to show the average value of a third, quantitative field. Example on vega:Nested Bar Chart Example

How not to use the row function?

{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": [
        {"a0": 0,"a": 0, "b": "a", "c": 6.3},
        {"a0": 0,"a": 0, "b": "a", "c": 4.2},
        {"a0": 0,"a": 0, "b": "b", "c": 6.8},
        {"a0": 0,"a": 0, "b": "c", "c": 5.1},
        {"a0": 0,"a": 1, "b": "b", "c": 4.4},
        {"a0": 0,"a": 2, "b": "b", "c": 3.5},
        {"a0": 0,"a": 2, "b": "c", "c": 6.2}
        ]
    },
    "transform": [
        {"window": [{"op": "count",  "as": "room2"}]}
    ],

"vconcat": [
    {
    "facet": {"column": {"field": "a0"},"row": {"field": "a"}},
    "spec": {
            "width": 100,
        "encoding": {
        "y": {"field": "room2", "type": "nominal","axis": null},
        "x": {"value": 100, "type": "quantitative"}
        },
        
        "layer": [
        {
            "mark": {"type": "bar", "cornerRadius": 10},
            "encoding": {
            "color": {
                "field": "room2"
            }
            }
        }
        ]
    }
}
]
}

解决方案

I have converted the Example on vega: Nested Bar Chart Example to vega-lite. So I hope it helps you understand or resolve your case. If you need help with your chart then I would need some proper inputs from your end. Refer the code below or in Editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"a": 0, "b": "a", "c": 6.3},
      {"a": 0, "b": "a", "c": 4.2},
      {"a": 0, "b": "b", "c": 6.8},
      {"a": 0, "b": "c", "c": 5.1},
      {"a": 1, "b": "b", "c": 4.4},
      {"a": 2, "b": "b", "c": 3.5},
      {"a": 2, "b": "c", "c": 6.2}
    ]
  },
  "transform": [
    {
      "aggregate": [{"field": "c", "as": "avg_c", "op": "average"}],
      "groupby": ["a", "b"]
    }
  ],
  "vconcat": [
    {
      "facet": {"row": {"field": "a", "title": null, "header": null}},
      "spec": {
        "width": 300,
        "encoding": {
          "y": {"field": "b", "type": "nominal", "axis": null},
          "x": {"field": "avg_c", "type": "quantitative"}
        },
        "layer": [
          {
            "mark": {"type": "bar", "cornerRadius": 10},
            "encoding": {"color": {"field": "a"}}
          },
          {
            "mark": {"type": "text", "align": "right", "dx": -5},
            "encoding": {
              "text": {"field": "b"},
              "x": {"datum": "0", "type": "quantitative"}
            }
          }
        ]
      }
    }
  ]
}

这篇关于Vega-Lite 如何获取嵌套条形图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！