Vega-Lite: Map from Amsterdam not show

Question

Hi guys I'm trying to create a map from Amsterdam using a very basic code, but the map didn't show up:

{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
 "width": 700,
 "height": 500,
 "config": {"view": {"stroke": "transparent"}},
 "data": {
   "url": "https://raw.githubusercontent.com/minhquan9408/gdv_1/main/data/map.topojson",
   "format": {"type": "topojson", "feature": "states"}
 },
 "mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 2},
 "encoding": {"color": {"value": "#eee"}}
}

But when I use data from Berlin it worked as expected

{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
 "width": 700,
 "height": 500,
 "config": {"view": {"stroke": "transparent"}},
 "data": {
   "url": "https://raw.githubusercontent.com/funkeinteraktiv/Berlin-Geodaten/master/berlin_bezirke.topojson",
   "format": {"type": "topojson", "feature": "states"}
 },
 "mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 2},
 "encoding": {"color": {"value": "#eee"}}
}

here is the online Vega-Lite Editor

Anyone knows the anwser for this problem? I think it's probably because of the data. I really appreciate your help.

Answer 1

Your data is registered in a cartesian projection (meters) and not in a geographic projection (degrees).

The following Vega-lite spec provide the proper way to visualise this type of data. Note the identity projection and reflectY parameter setting.

{
  "data": {
    "url": "https://raw.githubusercontent.com/minhquan9408/gdv_1/quan-new/data/map.topojson",
    "format": {"type": "topojson", "feature": "collection"}
  },
  "mark": {"type": "geoshape"},
  "projection": {"type": "identity", "reflectY": true}
}

Open the Chart in the Vega Editor

I've to admit, you probably never could have guessed this..