Search code examples
powerbidashboardvega-litevegadeneb

Is it possible to put a label inside every circle in a scatter plot in vega-lite?

Is there a way to put a label inside the circle of a bubble chart, I have the following chart developed in Vega-lite. I am uploading my script too, inside the circle I want to show to the value of “Label” inside the circle. I am using the following code

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"A": 16506,
"B": "",
"C": "Estimate Line Type 1",
"D": 30347707.14,
"E": null,
"Label": "",
"F": null
}

]
},
"width": 600,
"height": 400,
"layer": [
{
"transform": [
{
"filter": {
"field": "C",
"oneOf": ["Amount (inflation adjusted NEW)"]
}
}
],
"mark": {
"type": "circle",
"opacity": 0.8,
"stroke": "black",
"strokeWidth": 1
},
"encoding": {
"x": {
"field": "A",
"type": "quantitative",
"axis": {"grid": false}
},
"y": {
"field": "F",
"type": "quantitative",
"axis": {"title": "F"}
},
"size": {
"field": "E",
"type": "quantitative",
"title": "E",
"legend": {"clipHeight": 30},
"scale": {"rangeMax": 5000}
},
"color": {"field": "B", "type": "nominal"}
}
},
{
"transform": [
{
"filter": {
"field": "C",
"oneOf": ["Estimate Line Type 1", "Estimate Line Type 2"]
}
}
],
"mark": {"type": "line"},
"encoding": {
"x": {"field": "A", "type": "quantitative"},
"y": {"field": "D", "type": "quantitative"},
"color": {"field": "C", "type": "nominal"}
}
}
],
"config": {}
}

I was trying the text field but as I am new to it I am not sure how to label it out. dashboard in which I need the text in circle

Solution

  • Yes, the design you are suggesting is possible. The key idea is to use the "layer" property to create individual layers for your "circle" and "text" marks, with a shared encoding for the position. A good starting place is the "Heatmap with Labels" example; you can simply change the "rect" mark to a "circle" mark and the "color" encoding to a "size" encoding to get the intended result, as so.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    }
  ],
  "encoding": {
    "y": {"field": "Origin", "type": "ordinal"},
    "x": {"field": "Cylinders", "type": "ordinal"}
  },
  "layer": [
    {
      "mark": "circle",
      "encoding": {
        "size": {
          "field": "num_cars",
          "type": "quantitative",
          "title": "Count of Records",
          "scale": {"range": [100,1000]}
        }
      }
    },
    {
      "mark": "text",
      "encoding": {
        "text": {"field": "num_cars", "type": "quantitative"},
        "color": {"value": "white"},
      }
    }
  ],
  "config": {
    "axis": {"grid": true, "tickBand": "extent"}
  }
}

    Note that depending on the number of bubbles you have and the relative size of the bubbles and labels, you may need to adjust to ensure that everything remains legible and to account for any occlusion.