Not possible to independently resolve latitude / longitude in concatenated geoshape chart with same projection

[kgoodrick-uu]

Bug Description

When concatenating two geoshape charts it is not possible to independently resolve the latitude and longitude when the same projection is used. As an example, consider a chart showing two US states side by side.

If we plot them separately, we get results exactly as we would expect, with the chart automatically adjusting the extent to the size of the data.

State A: Open the Chart in the Vega Editor

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
  "hconcat": [
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 49)"}],
      "projection": {"type": "albersUsa"}
    }
  ],
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json",
    "format": {"feature": "states", "type": "topojson"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"
}

State B: Open the Chart in the Vega Editor

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
  "hconcat": [
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 20)"}],
      "projection": {"type": "albersUsa"}
    }
  ],
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json",
    "format": {"feature": "states", "type": "topojson"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"
}

However, if we concatenate them the extent in each changes as if it were showing both states. I have attempted to set all of the resolve settings to independent, but none of them had any affect.

Open the Chart in the Vega Editor

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
  "hconcat": [
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 49)"}],
      "projection": {"type": "albersUsa"}
    },
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 20)"}],
      "projection": {"type": "albersUsa"}
    }
  ],
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json",
    "format": {"feature": "states", "type": "topojson"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"
}

If we additionally change the projection of each chart to something different, we get the expected behavior where each chart's extent is only for its data.

Open the Chart in the Vega Editor

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
  "hconcat": [
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 49)"}],
      "projection": {"type": "albersUsa"}
    },
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 20)"}],
      "projection": {"type": "albers"}
    }
  ],
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json",
    "format": {"feature": "states", "type": "topojson"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"
}

As users will generally want all maps in the same projection it would be desirable for each chart to independently resolve the extent without changing the projection.

I previously posted this on stack overflow as an Altair question and was asked to repost this here as an issue by @joelostblom.

Thanks!

Checklist

• [x] I checked for duplicate issues.

[kgoodrick-uu]

I've identified a generic workaround that works for any projection and has minimal/no side effects. If one changes the precision of one of the projections it will treat them as separate projections and plot as desired

Open the Chart in the Vega Editor

{
  "config": {"view": {"continuousWidth": 300, "continuousHeight": 300}},
  "hconcat": [
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 49)"}],
      "projection": {"type": "mercator", "precision": 0.707}
    },
    {
      "mark": {"type": "geoshape"},
      "transform": [{"filter": "(datum.id === 20)"}],
      "projection": {"type": "mercator"}
    }
  ],
  "data": {
    "url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json",
    "format": {"feature": "states", "type": "topojson"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.17.0.json"
}

I still think this is a bug, but this is a pretty good workaround until it's fixed.

[joelostblom]

Thanks for filing this and for sharing your workaround @kgoodrick-uu !