Upside down GeoJSON (in-line dataset) maps in Vega-Lite

Question

I am attempting to plot the pointy bit of Australia in Vega-Lite, using the geoshape mark. My GeoJSON file is valid as per geojson.io and presents correctly: [Cairns area]

However, Vega-Lite cannot produce anything like this image, When inspected by mapshaper.org, the CRS is set to WGS-84 with EPGS-4326.

The code is described here, in the Vega Editor

Any ideas?

I've tried in-lining as TopoJSON, adding a CRS field to the GeoJSON, and re-projecting the map to another CRS, such as 3587, using {sf} in R (as some posts have mentioned that Mapshaper inverts the axis). I have also tried Vega instead of Vega-Lite with no success.

As a workaround, removing the sign (-) from each latitude and selecting the identity projection gives a good-enough visual, but it still seems like something is missing.

Edit to add: Just found the reflectY property for projection, which removes the need to remove signs. It still feels like a workaround, so hoping someone can see the real problem.

Answer 1

Projections have lots of options to get your map to show the right way. I have used scale and center here but there are other approaches too.

https://vega.github.io/vega/docs/projections/

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A choropleth map depicting U.S. unemployment rates by county in 2009.",
  "width": 960,
  "height": 500,
  "autosize": "none",
  "data": [
    {
      "name": "counties",
      "values": {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [
                [
                  [141.29457654244217, -16.394971044334035],
                  [142.39113112209878, -16.550994658371685],
                  [142.52950790799136, -17.174916330896544],
                  [142.20337079923343, -17.44324930166118],
                  [141.42163626777844, -17.443767652538384],
                  [141.1390526951007, -18.11866049465472],
                  [141.76166249630998, -19.191819594087534],
                  [142.12672343455688, -18.993463991745095],
                  [142.60066821300427, -19.635527944972008],
                  [144.22723846204613, -19.615139477135415],
                  [144.79446325477548, -19.162273594087047],
                  [144.83664502593976, -18.49325539524566],
                  [146.19074846855875, -18.52331974612335],
                  [146.14856669739447, -17.6471339800271],
                  [145.41227187877905, -16.467021816265046],
                  [145.2984153907584, -14.963631488754993],
                  [144.45889526222066, -14.23569407353837],
                  [143.75620868404508, -14.363035605704201],
                  [143.43675892925222, -12.622931710938804],
                  [142.85598795797824, -11.845750962388042],
                  [142.7856850060378, -11.074963207989427],
                  [142.1236369634961, -11.455778319106788],
                  [141.59139217612247, -12.564185278189303],
                  [141.68312895487406, -13.302835278201425],
                  [141.46364656832824, -13.877513617392141],
                  [141.66615336403964, -15.03343607355146],
                  [141.29457654244217, -16.394971044334035]
                ]
              ]
            },
            "properties": {"Area": "Cairns", "Residents": "an_interesting_mob"}
          }
        ]
      },
      "format": {"type": "json", "property": "features"}
    }
  ],
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "scale": {"signal": "867"},
      "center": [{"signal": "144"}, {"signal": "-14"}]
    }
  ],
  "marks": [
    {
      "type": "shape",
      "from": {"data": "counties"},
      "encode": {"update": {"fill": {"value": "gray"}}},
      "transform": [{"type": "geoshape", "projection": "projection"}]
    }
  ]
}