Vega Spec: Pan and Zoom map with the mouse

world-panzoom.json

{
  "parameters": [
  ],
  "spec": {
    "width": 740,
    "height": 500,
    "padding": 0,
    "signals" : [
      {
      "name": "point",
      "init": 0,
      "streams": [{
        "type": "mousedown",
        "expr": "{x: eventX(), y: eventY()}"
      }]
    },
    {
      "name": "delta",
      "init": 0,
      "streams": [{
        "type": "[mousedown, window:mouseup] > window:mousemove",
        "expr": "{x: point.x - eventX(), y: eventY() - point.y}"
      }]
    },
    {
      "name": "xAnchor",
      "init": 0,
      "streams": [{
        "type": "mousemove",
        "expr": "eventX()",
        "scale": {"name":"x", "invert":true}
      }]
    },
    {
      "name": "yAnchor",
      "init": 0,
      "streams": [{
        "type": "mousemove",
        "expr": "eventY()",
        "scale": {"name":"y", "invert":true}
      }]
    },
    {
      "name": "zoom",
      "init": 1.0,
      "verbose": true,
      "streams": [
        {"type": "wheel", "expr": "pow(1.001, event.deltaY*pow(16, event.deltaMode))"}
      ]
    },
    {
      "name": "zs",
      "streams": [{
        "type": "mousedown, mouseup, wheel",
        "expr": "zval"}
      ]
    },
    {
      "name": "zval",
      "init": 1850,
      "streams": [
        {"type": "zoom", "expr": "zs*zoom" }
      ]
    },
    {
      "name": "xs",
      "streams": [{
        "type": "mousedown, mouseup, wheel",
        "expr": "xval"}
      ]
    },
    {
      "name": "ys",
      "streams": [{
        "type": "mousedown, mouseup, wheel",
        "expr": "yval"
      }]
    },
    {
      "name": "xval",
      "init": 100,
      "streams": [
        {"type": "delta", "expr": "xval - delta.x"},
        {"type": "zoom", "expr": "xval*zoom"}
      ]
    },
    {
      "name": "yval",
      "init": 1900,
      "streams": [
        {"type": "delta", "expr": "yval + delta.y"},
        {"type": "zoom", "expr": "yval*zoom"}
      ]
    }
  ],
    "data": [
      {
        "name": "world",
        "url": "data/world-110m.json",
        "format": {"type": "topojson","feature": "countries"},
        "transform": [
          {
            "type": "geopath",
            "projection": "winkel3",
            "scale": {"signal": "zval"},
            "translate": [{"signal": "xval"},{"signal": "yval"}]
          }
        ]
      }
    ],
    "marks": [
      {
        "type": "path",
        "from": {"data": "world"},
        "properties": {
          "update": {
            "stroke": {"value": "#fff"},
            "path": {"field": "layout_path"},
            "fill": {"value": "#ccc"}
          },
          "enter": {"fill": {"value": "#ccc"}}
        }
      }
    ]
  }
}