Support pan and zoom for geoshape mark

[kanitw]

We need to create examples and comprehensively test different options for geo especially trying selection like interval on x/y positions.

[kanitw]

Look like projection cannot be bind yet -- vega/altair#632 (comment)

[arvind]

@allenjlee: Here's the geo selection issue we discussed. I believe we support single/multi selections with geo projections already but a good first test would be to build out a few examples of each. The flight links example provides a nice base case that you can start adding some interesting interactivity to for both selection types. I'll let you ideate a little here yourself :)

Interval selections are the more trickier ones. As we discussed, these selection generate signals in visual space (vnames that record the x/y coordinates of the region dragged) which are converted to data coordinates (dnames) via scale inversion individually (i.e., visual_x -> scale_x.invert -> data_x; visual_y -> scale_y.invert -> data_y). This approach won't work with geo projections because they are bivariate (i.e., they manipulate both x/y together). In fact, there are some really weird projections out there.

Instead, we added a new intersect expression function in Vega v5 (see the changelog for documentation on its signature) to do bounding box hit testing for us (the function is implemented in the vega-functions package). For now, don't worry about what changes need to be made to the compiler. Instead, start by adding a simple 2D interval selection (i.e., {"type": "interval", "translate": false, "zoom": false}) and to highlight points selected in this example and update the generated Vega spec by modifying signals to use the intersect function instead of scale inversions and removing any unnecessary signals. Once you get that working, try reintroducing the translate and/or zoom properties to see how that changes your spec design. Try and get a good sense of how you think the output Vega spec should change for our next meeting :)

[mattijn]

A while ago I saw this notebook https://observablehq.com/@jake-low/web-mercator-tile-visibility. It might be useful to get a feeling with these geo projected intervals. If not, just ignore.

I think it is really a big achievement if you can make these interval selections work with geo projections in Vega(-Lite).

[ObservedObserver]

In 2022, is there a recommended way to make zoomable vega-lite geo visualization?

[kaushiksrini]

@kanitw Are there any updates to this? I can see it's available in vega. I would be interested in giving it a shot to get it working in vega-lite.

[domoritz]

Actually, it's available now. We can probably close this @kanitw?

[kaushiksrini]

@domoritz great! are there vega-lite examples with panning and zooming in maps/geo data?

[arvind]

Hi @kaushiksrini, #6953 contains a couple of examples (interactive_1d_geo_brush and interactive_airport_crossfilter). We're working one writing up this functionality in the documentation, and creating more examples.

For now, with PR #6953, intervals on maps are limited to brushing. Panning and zooming will be forthcoming in a future release.

[kaushiksrini]

Thanks @arvind, that sounds good! Is panning and zooming actively being worked on? I use altair and vega-lite for viz and this feature would be beneficial - would be happy to work on it and submit a PR.

[arvind]

Thanks @kaushiksrini. Panning & zooming isn't something we're actively working on yet—so it would be something we'd very much welcome a PR on.

#6953 walks through the changes made to support intervals on geo—we'd need to extend these changes to src/compile/selection/translate.ts and src/compile/selection/zoom.ts. I imagine we'd be able to use most if not all of the existing signal infrastructure these two files generate, but then we'd need to feed the resultant output to the center0, center, and scale properties of Vega projections.

I'd be happy to find time to jump on a Zoom call if this is something you'd be interested in contributing to!

[kaushiksrini]

@arvind Thanks, I would be interested in submitting a PR for this feature.

I will look through the resources you provided and get a grasp of the repo and the functionalities. I shall reach out to schedule a Zoom call to learn more after that. Thanks again!

[joelostblom]

Thanks for you interest in helping out with this feature @kaushiksrini! I think it would be highly valuable to be able to pan and zoom maps in VL, especially as support for tile-based maps is also being explored in #8885. Since this is a feature I'm excited about, I just wanted to check in if you were able to get started on it with the tips above from Arvind?

[kaushiksrini]

@joelostblom Hey! I look forward to making my first altair contribution. I was looking at it and trying to understand it, but didn't reach out to Arvind yet. Have some time and am planning to pick this up again. @arvind would you be available to hop on a Zoom call in the coming couple of weeks?

[apb-reports]

Here is a vega-lite example for any people interested. Here I apply params/signals to control zooming and panning. Use your mouse wheel to scroll in/out. Click and hold to pan. Dynamic colors per state and dynamic size of airports as we zoom in and out. We must use the mercator projection type for panning it seems? If you only want a specific country then we could easily add a filter to limit based on long/lat etc

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 600,
  "padding": 15,
  "autosize": "fit",
  "params": [
    {"name": "tx", "update": "width / 2"},
    {"name": "ty", "update": "height / 2"},
    {
      "name": "scale",
      "value": 300,
      "on": [
        {
          "events": {"type": "wheel", "consume": true},
          "update": "clamp(scale * pow(1.003, -event.deltaY * pow(16, event.deltaMode)), 150, 50000)"
        }
      ]
    },
    {
      "name": "angles",
      "value": [0, 0],
      "on": [{"events": "pointerdown", "update": "[rotateX, centerY]"}]
    },
    {
      "name": "cloned",
      "value": null,
      "on": [{"events": "pointerdown", "update": "copy('projection')"}]
    },
    {
      "name": "start",
      "value": null,
      "on": [{"events": "pointerdown", "update": "invert(cloned, xy())"}]
    },
    {
      "name": "drag",
      "value": null,
      "on": [
        {
          "events": "[pointerdown, window:pointerup] > window:pointermove",
          "update": "invert(cloned, xy())"
        }
      ]
    },
    {
      "name": "delta",
      "value": null,
      "on": [
        {
          "events": {"signal": "drag"},
          "update": "[drag[0] - start[0], start[1] - drag[1]]"
        }
      ]
    },
    {
      "name": "rotateX",
      "value": -240,
      "on": [{"events": {"signal": "delta"}, "update": "angles[0] + delta[0]"}]
    },
    {
      "name": "centerY",
      "value": 40,
      "on": [
        {
          "events": {"signal": "delta"},
          "update": "clamp(angles[1] + delta[1], -60, 60)"
        }
      ]
    }
  ],
  "layer": [
    {
      "data": {
        "url": "data/us-10m.json",
        "format": {"type": "topojson", "feature": "states"}
      },
      "projection": {
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      },
      "mark": {"type": "geoshape", "fill": "lightgray", "stroke": "white"}
    },
    {
      "transform": [
        {"calculate": "scale", "as": "scale"},
        {"calculate": "round(scale/25)", "as": "size"}
      ],
      "data": {"url": "data/airports.csv"},
      "projection": {
        "type": "mercator",
        "scale": {"signal": "scale"},
        "rotate": [{"signal": "rotateX"}, 0, 0],
        "center": [0, {"signal": "centerY"}],
        "translate": [{"signal": "tx"}, {"signal": "ty"}]
      },
      "mark": {"type": "circle", "size": {"expr": "datum.size"}},
      "encoding": {
        "longitude": {"field": "longitude", "type": "quantitative"},
        "latitude": {"field": "latitude", "type": "quantitative"},
        "color": {"field": "state", "legend": false},
        "tooltip": [
          {"field": "name", "type": "nominal"},
          {"field": "city", "type": "nominal"},
          {"field": "state", "type": "nominal"}
        ]
      }
    }
  ],
  "config": {}
}

You can play with the colors by adding a transform for sort then adjust the color setup with a theme and sort etc.

"transform": [
        {"calculate": "scale", "as": "scale"},
        {"calculate": "round(scale/25)", "as": "size"},
        {"calculate": "(datum.longitude * datum.latitude)* -1", "as": "sort"}
      ],
    ....


        "color": {"field": "state", "type": "ordinal","legend": false, "sort":{"field": "sort","order": "descending"},"scale": {"scheme": "blueorange"}},

Happy charting!

Adam (APB Reports)