Forum Discussion

Salle's avatar
Salle
Advocate I
3 years ago
Solved

Deneb: Combine vconcat and hconcat

I do not seem to get a combination of vconcat and hconcat working. Each one works separately on its own but when I want to mix them together something is wrong in my approach. So if I have a layo...
  • giammariam's avatar
    3 years ago

    Hey Salle, it's tough to determine a proper solution without example data. Nevertheless, below is a spec that includes horizontal and vertical concatenation that is hopefully close to what you're after. If this is enough to get you going, please consider liking and kudoing this message.

     

    If you need more assistance, could provide what you've tried in your spec and a sanitized dataset? (here's how)

    I'd be happy to try and help more. 

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "A simple bar chart with embedded data.",
      "data": {
        "values": [
          {"a": "A", "b": 28},
          {"a": "B", "b": 55},
          {"a": "C", "b": 43},
          {"a": "D", "b": 91},
          {"a": "E", "b": 81},
          {"a": "F", "b": 53},
          {"a": "G", "b": 19},
          {"a": "H", "b": 87},
          {"a": "I", "b": 52},
          {"a": "J", "b": 19},
          {"a": "K", "b": 87},
          {"a": "L", "b": 52}
        ]
      },
      "title": "Frequency By Letter",
      "hconcat": [
        {
          "vconcat": [
            {
              "transform": [{"filter": {"field": "a", "oneOf": ["A", "B", "C"]}}],
              "mark": "bar",
              "encoding": {
                "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
                "y": {"field": "b", "type": "quantitative"}
              }
            },
            {
              "transform": [{"filter": {"field": "a", "oneOf": ["G", "H", "I"]}}],
              "mark": "bar",
              "encoding": {
                "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
                "y": {"field": "b", "type": "quantitative"}
              }
            }
          ]
        },
        {
          "vconcat": [
            {
              "transform": [{"filter": {"field": "a", "oneOf": ["D", "E", "F"]}}],
              "mark": "bar",
              "encoding": {
                "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
                "y": {"field": "b", "type": "quantitative"}
              }
            },
             {
              "transform": [{"filter": {"field": "a", "oneOf": ["J", "K", "L"]}}],
              "mark": "bar",
              "encoding": {
                "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0, "title": null}},
                "y": {"field": "b", "type": "quantitative"}
              }
            }
          ]
        }
      ]
    }