Vega Zoom Circle Packing Chart - vega

Question

I'm somewhat lost. I try to realize zoom in a circle packing chart but I don't know how to do it. There are two examples zoomable-scatter-plot zoomable-world-map but both approaches doesn't seem too fit for my chart type.
Any pointers/examples would be greatly appreciated.

Answer 1

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