Disclaimer: I still haven’t had much time to get into Vega but I found a solution for this particular problem. I guess it is still not technical mature but it works.

The basic idea is to scale the circles and then move them into the middle of the graphic. To achieve this I added these signals:

"signals": [
    {
      "name": "scaleX",
      "value": 1,
      "on": [{"events": "click", "update": "(width/2)/datum.r"}]
    },
    {
      "name": "scaleY",
      "value": 1,
      "on": [{"events": "click", "update": "(height/2)/datum.r"}]
    },
    {
      "name": "xTranslation",
      "value": 0,
      "on": [{"events": "click", "update": "(width/2) - datum.x * scaleX"}]
    },
    {
      "name": "yTranslation",
      "value": 0,
      "on": [{"events": "click", "update": "(height/2) - datum.y * scaleY"}]
    }
  ]

and use them inside the mark encoding:

"update": {
          "x": {"signal": "datum.x * scaleX + xTranslation"},
          "y": {"signal": "datum.y * scaleY + yTranslation"},
          "size": {"signal": "4 * datum.r * datum.r * scaleX * scaleY"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 0.5}
        }

Full example in Vega-Editor