How to hide legend for the size and normalise size by area in VegaLite?

Question

The legend for sizes is shown on the right side, how to hide it completely?

Second question - it seems like the circle diameter are proportional to the given number. How can I scale it in another way, so that:

• The biggest circle would have the size of 10px
• All the smaller circles will be smaller proportionate to the area, not diameter. And not smaller than 1px.

The live playground.

Answer 1

To hide the legend completely, use "legend": null within the encoding in question (see the Legend docs).

To control the range of sizes, you can use the scale.range setting. For example, "scale": {"range":[0, 50]}, will make the size of points vary between 0 and 50 pixels (see the Scale.range docs).

Here is an example of both being used in your example chart (vega editor):

{
  "data": {
    "values": [
      {"a": "C", "b": 2},
      {"a": "C", "b": 7},
      {"a": "C", "b": 4},
      {"a": "D", "b": 1},
      {"a": "D", "b": 2},
      {"a": "D", "b": 2.1},
      {"a": "D", "b": 2.3},
      {"a": "D", "b": 6},
      {"a": "E", "b": 8.1},
      {"a": "E", "b": 4},
      {"a": "E", "b": 7}
    ]
  },
  "encoding": {
    "size": {
      "field": "b",
      "type": "quantitative",
      "scale": {"range": [0, 50]},
      "legend": null
    },
    "x": {"axis": {"title": null}, "field": "b", "type": "quantitative"},
    "y": {"axis": {"title": null}, "field": "a", "type": "nominal"}
  },
  "mark": "circle"
}

Answer 2

If you don't use a custom size you might need to put the empty legend definition inside of encoding / color to hide it:

"encoding": {
    ...
    "color": {
        ...
        "legend": null
    }
}