Geojson gets distorted when trying to render in vega - geojson

Question

I try to render a geojson in vega.
I found this example which work fine:
How to read geojson with vega
however, when trying to replace the geojson with one of mine, the features get completely distorted.
{"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 500,
"height": 600,
"autosize": "none",
"signals": [
{
"name": "translate0",
"update": "width / 2"
},
{
"name": "translate1",
"update": "height / 2"
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 1000,
"rotate": [
0,
0,
0
],
"center": [
17,
-3
],
"translate": [
{
"signal": "translate0"
},
{
"signal": "translate1"
}
]
}
],
"data": [
{
"name": "drc",
"url": "https://gist.githubusercontent.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e/raw/47f3632d2135b9a783eeb76d0091762b70677c0d/drc.geojson",
"format": {
"type": "json",
"property": "features"
}
}
],
"marks": [
{
"type": "shape",
"from": {
"data": "drc"
},
"encode": {
"update": {
"strokeWidth": {
"value": 0.5
},
"stroke": {
"value": "darkblue"
},
"fill": {
"value": "lightblue"
},
"fillOpacity": {
"value": 0.5
}
},
"hover": {
"fill": {
"value": "#66C2A5"
},
"strokeWidth": {
"value": 2
},
"stroke": {
"value": "#FC8D62"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
}
]
}
Here is what they are suppose to look like
https://gist.github.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e
What am I getting wrong?
Thanks,
Thomas

Answer 1

Not sure what happened. It seems your geojson was corrupt, but not really as I eventually could parse it in www.mapshaper.org. I reduced the file to 35% and then it parsed normally:
Vega-lite spec below (compile to Vega code in the editor if needed):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 700,
"height": 500,
"config": {"view": {"stroke": "transparent"}},
"layer": [
{
"data": {
"url": "https://gist.githubusercontent.com/mattijn/2ce897c2020a6e5b7ae6baf03dffe179/raw/564b6d484657864dcb77d0bb18db00fc7dc7668d/drc.geojson",
"format": {"type": "json", "property": "features"}
},
"mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 1},
"encoding": {"color": {"value": "#bcbcbc"}}
}
]
}