Change a vertical bar chart to a horizontal bar chart using vega lite in Deneb

[Walter_W2022]

Hi All, 

just starting learning vega lite and using Deneb to customize vituals, there is tutorial "Let's Make A Bar Chart Tutorial" to change bar chart from vertical to horizontal , tried a few hours and could not get it work, please help.

Tutorial and json code link is as below

https://vega.github.io/vega/tutorials/bar-chart/

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale" },
    { "orient": "left", "scale": "yscale" }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "isNaN(tooltip.amount)", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ]
}

[giammariam · Accepted solution]

Hey @Walter_W2022 this is actually Vega, which is lower level and has a steeper learning curve than Vega-Lite. I can certainly help with this, but since you mentioned Vega-Lite in your original post, maybe you'd prefer to follow this tutorial where they actually do what you're after in part of it, but just in Vega-Lite.

EDIT

Just in case you did want to stick with Vega, here is a diff showing one way to update the spec to achieve the change that you are trying to accomplish. The left side is the original and the right side is the updated version.

To be able to see the spec in the editor, I've also included a gist here.

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

[Walter_W2022 · Accepted solution]

Thank you Madison for your great help, I think I made  a few mistakes

1. I did not realise this is vega instead of vega lite

2. when I changed from x and xscale to y, I forgot to change from width to height

also, need your help to have a look above the link you provided cannot be accessed due to security reason, would you please share within the post? thanks again @giammariam 

https://www.diffchecker.com/o5IoQcLq/

[giammariam · Accepted solution]

Sorry the diff link isn't working. Here's screenshots of the diffs (apologies for the screenshot quality):

Here is the spec, let me know if this helps.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout", "update": "{}"}
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "height",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "xscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "width"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "amount"},
          "x2": {"scale": "xscale", "value": 0},
          "y": {"scale": "yscale", "field": "category"},
          "height": {"scale": "yscale", "band": 1}
        },
        "update": {"fill": {"value": "steelblue"}},
        "hover": {"fill": {"value": "red"}}
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "left"},
          "baseline": {"value": "middle"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.amount", "offset": 2},
          "y": {"scale": "yscale", "signal": "tooltip.category", "band": 0.5},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "isNaN(tooltip.amount)", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ],
  "config": {}
}

[Walter_W2022]

Thank you Madison, appreciated you help. 😀

[giammariam · Accepted solution]

Hey @Walter_W2022 this is actually Vega, which is lower level and has a steeper learning curve than Vega-Lite. I can certainly help with this, but since you mentioned Vega-Lite in your original post, maybe you'd prefer to follow this tutorial where they actually do what you're after in part of it, but just in Vega-Lite.

EDIT

Just in case you did want to stick with Vega, here is a diff showing one way to update the spec to achieve the change that you are trying to accomplish. The left side is the original and the right side is the updated version.

To be able to see the spec in the editor, I've also included a gist here.

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

[Walter_W2022 · Accepted solution]

Thank you Madison for your great help, I think I made  a few mistakes

1. I did not realise this is vega instead of vega lite

2. when I changed from x and xscale to y, I forgot to change from width to height

also, need your help to have a look above the link you provided cannot be accessed due to security reason, would you please share within the post? thanks again @giammariam 

https://www.diffchecker.com/o5IoQcLq/