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 topojson file does not have a geometry collection named "states", but it does have one named "collection". Changing this makes the file load and display correctly:

{
 "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": "collection"}
 },
 "mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 2}
}

The result is obviously not what was intended, but this appears to be a data quality issue rather than a Vega-Lite issue: other topojson viewers also show it to include a geometry that covers the entire map.