Search code examples
powerbipowerbi-desktopvega-litevegadeneb

How to add a title to a concat in Vega-Lite

How do I add a title to each concat in a spec?

  • I'd like to insert titles on top of every concat.

Here's what I did so far (preview/code here)

enter image description here

Here's an example of the result I'd like to achieve: enter image description here

Thank you in advance!!

Solution

  • To get titles, just add a title to each concat spec.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Micro classificazione - Denom_": "Sholay",
        "Num class Detrattori": 209,
        "Num class Passivi": 115,
        "Num class Promotori": 370,
        "Average of DES_SENTIMENT": -0.1
      },
      {
        "Micro classificazione - Denom_": "Comedy of Terrors, The",
        "Num class Detrattori": 124,
        "Num class Passivi": 707,
        "Num class Promotori": 433,
        "Average of DES_SENTIMENT": 3.6
      },
      {
        "Micro classificazione - Denom_": "To Be or Not to Be",
        "Num class Detrattori": 521,
        "Num class Passivi": 463,
        "Num class Promotori": 470,
        "Average of DES_SENTIMENT": 1.6
      },
      {
        "Micro classificazione - Denom_": "Captivity",
        "Num class Detrattori": 146,
        "Num class Passivi": 332,
        "Num class Promotori": 309,
        "Average of DES_SENTIMENT": 3.7
      },
      {
        "Micro classificazione - Denom_": "Our Vines Have Tender Grapes",
        "Num class Detrattori": 205,
        "Num class Passivi": 672,
        "Num class Promotori": 653,
        "Average of DES_SENTIMENT": -3.7
      },
      {
        "Micro classificazione - Denom_": "Rahtree: Flower of the Night (Buppha Rahtree)",
        "Num class Detrattori": 405,
        "Num class Passivi": 117,
        "Num class Promotori": 156,
        "Average of DES_SENTIMENT": 2.8
      },
      {
        "Micro classificazione - Denom_": "Kon-Tiki",
        "Num class Detrattori": 920,
        "Num class Passivi": 903,
        "Num class Promotori": 211,
        "Average of DES_SENTIMENT": -4.5
      },
      {
        "Micro classificazione - Denom_": "Taken",
        "Num class Detrattori": 779,
        "Num class Passivi": 738,
        "Num class Promotori": 674,
        "Average of DES_SENTIMENT": 3.1
      },
      {
        "Micro classificazione - Denom_": "Bring on the Night",
        "Num class Detrattori": 765,
        "Num class Passivi": 461,
        "Num class Promotori": 490,
        "Average of DES_SENTIMENT": 4.6
      },
      {
        "Micro classificazione - Denom_": "Magnificent Obsession",
        "Num class Detrattori": 861,
        "Num class Passivi": 639,
        "Num class Promotori": 859,
        "Average of DES_SENTIMENT": 3
      },
      {
        "Micro classificazione - Denom_": "Skin Game",
        "Num class Detrattori": 541,
        "Num class Passivi": 988,
        "Num class Promotori": 176,
        "Average of DES_SENTIMENT": -3.9
      },
      {
        "Micro classificazione - Denom_": "Bill & Ted's Excellent Adventure",
        "Num class Detrattori": 280,
        "Num class Passivi": 399,
        "Num class Promotori": 935,
        "Average of DES_SENTIMENT": -0.9
      },
      {
        "Micro classificazione - Denom_": "Sharky's Machine",
        "Num class Detrattori": 879,
        "Num class Passivi": 285,
        "Num class Promotori": 169,
        "Average of DES_SENTIMENT": 3.8
      },
      {
        "Micro classificazione - Denom_": "Some Days Are Better Than Others",
        "Num class Detrattori": 402,
        "Num class Passivi": 644,
        "Num class Promotori": 179,
        "Average of DES_SENTIMENT": -2.4
      },
      {
        "Micro classificazione - Denom_": "Dinosaurus!",
        "Num class Detrattori": 476,
        "Num class Passivi": 701,
        "Num class Promotori": 525,
        "Average of DES_SENTIMENT": 1.7
      },
      {
        "Micro classificazione - Denom_": "Married to the Mob",
        "Num class Detrattori": 853,
        "Num class Passivi": 951,
        "Num class Promotori": 155,
        "Average of DES_SENTIMENT": -3.3
      },
      {
        "Micro classificazione - Denom_": "Badman's Country",
        "Num class Detrattori": 259,
        "Num class Passivi": 895,
        "Num class Promotori": 660,
        "Average of DES_SENTIMENT": 1
      },
      {
        "Micro classificazione - Denom_": "Chillers",
        "Num class Detrattori": 417,
        "Num class Passivi": 905,
        "Num class Promotori": 662,
        "Average of DES_SENTIMENT": 1.5
      },
      {
        "Micro classificazione - Denom_": "Alien Hunter",
        "Num class Detrattori": 359,
        "Num class Passivi": 377,
        "Num class Promotori": 400,
        "Average of DES_SENTIMENT": -3.8
      },
      {
        "Micro classificazione - Denom_": "Tormento",
        "Num class Detrattori": 867,
        "Num class Passivi": 484,
        "Num class Promotori": 984,
        "Average of DES_SENTIMENT": -4.7
      }
    ]
  },
  "transform": [
    {
      "calculate": "datum['Num class Detrattori']+datum['Num class Passivi']+datum['Num class Promotori']",
      "as": "Totalclass"
    },
    {
      "calculate": "datum['Num class Detrattori']/datum['Totalclass']",
      "as": "PercDetrattori"
    },
    {
      "calculate": "datum['Num class Passivi']/datum['Totalclass']",
      "as": "PercPassivi"
    },
    {
      "calculate": "datum['Num class Promotori']/datum['Totalclass']",
      "as": "PercPromotori"
    },
    {
      "calculate": "(datum['PercPromotori']-datum['PercDetrattori'])*100",
      "as": "Score"
    },
    {
      "window": [{"op": "rank", "as": "rank"}],
      "sort": [{"field": "Totalclass", "order": "descending"}]
    },
    {"filter": "datum.rank < 11"}
  ],
  "concat": [
    {
      "width": 260,
      "height": 300,
      "title":"My Title",
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {
              "field": "PercDetrattori",
              "type": "quantitative",
              "scale": {"reverse": true},
              "axis": null
            },
            "y": {
              "field": "Micro classificazione - Denom_",
              "sort": {"field": "Totalclass", "order": "descending"},
              "title": null
            },
            "color": {"value": "red"}
          }
        },
        {
          "mark": {"type": "text", "style": "label"},
          "encoding": {
            "y": {
              "field": "Micro classificazione - Denom_",
              "sort": {"field": "Totalclass", "order": "descending"}
            },
            "x": {
              "field": "PercDetrattori",
              "type": "quantitative",
              "title": "Insoddisfatti"
            },
            "text": {
              "field": "PercDetrattori",
              "type": "quantitative",
              "format": ".0%"
            }
          }
        }
      ]
    },
    {
      "width": 260,
      "height": 300,
      "title":"My Title",
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {
              "field": "PercPromotori",
              "type": "quantitative",
              "title": "Soddisfatti",
              "axis": null
            },
            "y": {
              "field": "Micro classificazione - Denom_",
              "axis": {"labels": false},
              "sort": {"field": "Totalclass", "order": "descending"},
              "title": null
            },
            "color": {"value": "green"}
          }
        },
        {
          "mark": {"type": "text", "style": "label"},
          "encoding": {
            "y": {
              "field": "Micro classificazione - Denom_",
              "sort": {"field": "Totalclass", "order": "descending"},
              "title": null
            },
            "x": {"field": "PercPromotori", "type": "quantitative"},
            "text": {
              "field": "PercPromotori",
              "type": "quantitative",
              "format": ".0%"
            }
          }
        }
      ]
    },
    {
      "width": 260,
      "height": 300,
      "title":"My Title",
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {
              "field": "PercPassivi",
              "type": "quantitative",
              "title": "Neutrali",
              "axis": null
            },
            "y": {
              "field": "Micro classificazione - Denom_",
              "axis": {"labels": false},
              "sort": {"field": "Totalclass", "order": "descending"},
              "title": null
            },
            "color": {"value": "yellow"}
          }
        },
        {
          "mark": {"type": "text", "style": "label"},
          "encoding": {
            "y": {
              "field": "Micro classificazione - Denom_",
              "sort": {"field": "Totalclass", "order": "descending"},
              "title": null
            },
            "x": {
              "field": "PercPassivi",
              "type": "quantitative",
              "axis": null,
              "title": null
            },
            "text": {
              "field": "PercPassivi",
              "type": "quantitative",
              "format": ".0%"
            }
          }
        }
      ]
    },
    {
      "title":"My Title",
      "mark": {"type": "text"},
      "encoding": {
        "y": {
          "field": "Micro classificazione - Denom_",
          "sort": {"field": "Totalclass", "order": "descending"},
          "title": null,
          "axis": null
        },
        "x": {
          "field": "Score",
          "type": "quantitative",
          "title": null,
          "axis": null,
          "scale": {"domain": [1, 1]}
        },
        "text": {"field": "Score", "type": "quantitative", "format": ".0f"}
      },
      "width": 30,
      "height": 300
    },
    {
      "title":"My Title",
      "mark": {"type": "text"},
      "encoding": {
        "y": {
          "field": "Micro classificazione - Denom_",
          "sort": {"field": "Totalclass", "order": "descending"},
          "title": null,
          "axis": null
        },
        "x": {
          "field": "Average of DES_SENTIMENT",
          "type": "quantitative",
          "title": null,
          "axis": null,
          "scale": {"domain": [1, 1]}
        },
        "text": {
          "field": "Average of DES_SENTIMENT",
          "type": "quantitative",
          "format": ".0f"
        }
      },
      "width": 30,
      "height": 300
    },
    {
      "title":"My Title",
      "mark": {"type": "text"},
      "encoding": {
        "y": {
          "field": "Micro classificazione - Denom_",
          "sort": {"field": "Totalclass", "order": "descending"},
          "title": null,
          "axis": null
        },
        "x": {
          "field": "Totalclass",
          "type": "quantitative",
          "title": null,
          "axis": null,
          "scale": {"domain": [1, 1]}
        },
        "text": {"field": "Totalclass", "type": "quantitative", "format": ".0f"}
      },
      "width": 30,
      "height": 300
    }
  ]
}