How to add symbols like "%" in labels in Vega?

Question

I have this code following :

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 700,
  "height": 100,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "MOYENNE","position": 0,"value": 91},
        {"category": "MOYENNE","position": 1,"value": 9}
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table","field": "category"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "table","field": "value"},
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table","field": "position"},
      "range": ["#C8E6C9", "#FF8A65"]
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "category"
        }
      },
      "encode": {
        "enter": {"y": {"scale": "yscale","field": "category"}}
      },
      "signals": [{"name": "height","update": "bandwidth('yscale')"}],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {"data": "facet","field": "position"}
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "y": {"scale": "pos","field": "position"},
              "height": {"scale": "pos","band": 1},
              "x": {"scale": "xscale","field": "value"},
              "x2": {"scale": "xscale","value": 0},
              "fill": {"scale": "color","field": "position"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "x": {"field": "x2","offset": 15},
              "y": {
                "field": "y",
                "offset": {"field": "height","mult": 0.5}
              },
              "fill": {"value": "black"},
              "align": {"value": "right"},
              "baseline": {"value": "middle"},
              "text": {"field": "datum.value"}
            }
          }
        }
      ]
    }
  ]
}

I just want to put % in my labels to have 91% and 9%.

I think that is in the last line : "text": {"field": "datum.value"}, but i can't just do the following : "text": {"field": "datum.value" + "%"} or something like this...

Anyone can help me please?? Thank you very much in advance :)

Answer 1

    var vlSpec3 = {
        "$schema": "https://vega.github.io/schema/vega/v4.json",
        "width": 700,
        "height": 100,
        "padding": 5,
        "autosize": "pad",
        "title": {
            "text": { "value": "Treatment option considered" },
            "fontWeight": "bolder",
            "orient": "top"
        },
        "signals": [
            { "name": "rangeStep", "value": 41 },
            { "name": "innerPadding", "value": 0.29 },
            { "name": "outerPadding", "value": 0 }
        ],
        "data": [
            {
                "name": "dataval",
                "values": [
                    { "a": "0", "b": "other alk", "c": "520" },
                    { "a": "0", "b": "chemotherapy", "c": 300 },
                    { "a": "0", "b": "radiotherapy", "c": 120 },
                    { "a": "0", "b": "surgery", "c": 90 }
                ],
                **"transform": [
                    {
                        "type": "formula",
                        "expr": "format(datum.c/100,'0.0p')",
                        "as": "percentval"
                    }
                ]**
            },
            {
                "name": "datatrns",
                "source": "dataval",
                "transform": [
                    {
                        "type": "aggregate"
                    }
                ]
            }
        ],
        "scales": [
            {
                "name": "xscale",
                "domain": { "data": "dataval", "field": "c" },
                "nice": true,
                "range": "width"
            }
        ],
        "marks": [
            {
                "type": "group",
                "from": {
                    "data": "datatrns",
                    "facet": { "name": "faceted_tuples", "data": "dataval", "groupby": "a" }
                },
                "scales": [
                    {
                        "name": "yscale",
                        "type": "band",
                        "paddingInner": { "signal": "innerPadding" },
                        "paddingOuter": { "signal": "outerPadding" },
                        "round": true,
                        "domain": { "data": "faceted_tuples", "field": "b" },
                        "range": { "step": { "signal": "rangeStep" } }
                    }
                ],
                "axes": [
                    {
                        "orient": "left",
                        "scale": "yscale",
                        "ticks": false,
                        "domain": false,
                        "labelPadding": 7,
                        "labels": true
                    },
                    {
                        "scale": "xscale",
                        "orient": "left",
                        "ticks": false,
                        "domain": false,
                        "labels": false
                    }
                ],
                "marks": [
                    {
                        "type": "rect",
                        "name": "bars",
                        "from": { "data": "dataval" },
                        "encode": {
                            "enter": {
                                "x": { "value": 0 },
                                "x2": { "scale": "xscale", "field": "c" }
                            },
                            "update": {
                                "y": { "scale": "yscale", "field": "b" },
                                "height": { "scale": "yscale", "band": 1 },
                                "fill": { "value": "#bd8069" }
                            }
                        }
                    },
                    {
                        "type": "text",
                        "from": { "data": "bars" },
                        "encode": {
                            "enter": {
                                "x": { "field": "x2", "offset": 35 },
                                "y": { "field": "y", "offset": { "field": "height", "mult": 0.5 } },
                                "fill": { "value": "black" },
                                "align": { "value": "right" },
                                "baseline": { "value": "middle" },
                                **"text": { "field": "datum.percentval" }**
                            }
                        }
                    }
                ]
            }
        ],
        "config": {}
    };

    // Embed the visualization in the container with id `vis`
    vegaEmbed("#vis3", vlSpec3);

enter image description here

Answer 2

I am not entirely sure this is best practice, but it does work and is based off the Vega expressions documentation of format.

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 700,
  "height": 100,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "MOYENNE","position": 0,"value": 91},
        {"category": "MOYENNE","position": 1,"value": 9}
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "format(datum.value/100,'0.0p')",
          "as": "percentvalue"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "band",
      "domain": {"data": "table","field": "category"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "table","field": "value"},
      "range": "width",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table","field": "position"},
      "range": ["#C8E6C9", "#FF8A65"]
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1
    }
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "table",
          "name": "facet",
          "groupby": "category"
        }
      },
      "encode": {
        "enter": {"y": {"scale": "yscale","field": "category"}}
      },
      "signals": [{"name": "height","update": "bandwidth('yscale')"}],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "height",
          "domain": {"data": "facet","field": "position"}
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "y": {"scale": "pos","field": "position"},
              "height": {"scale": "pos","band": 1},
              "x": {"scale": "xscale","field": "value"},
              "x2": {"scale": "xscale","value": 0},
              "fill": {"scale": "color","field": "position"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "x": {"field": "x2","offset": 15},
              "y": {
                "field": "y",
                "offset": {"field": "height","mult": 0.5}
              },
              "fill": {"value": "black"},
              "align": {"value": "right"},
              "baseline": {"value": "middle"},
              "text": {"field": "datum.percentvalue"}
            }
          }
        }
      ]
    }
  ]
}