How to read geojson with vega

Question

It sounds super simple, but I can't get how can I use geojson, not topojson, for my polygons.

that's my current attempt:

"data": [
    {
      "name": "nabs",
      "url": "both_boundaries.geojson",
      "format": {"type": "json"},
      "transform": [
      {
        "type": "geopath", "projection": "mercator",
        "scale": 74, "center": [-73.99,40.72]
      }
    ]
    }
  ]

Answer 1

You have to parse the features using property within your format:

   "format": {"type": "json", "property":"features"},

Full example spec:

{"$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",
      "size": {"signal": "[width, height]"},
      "fit": {"signal": "data('netherlands')"}
    }
  ],
  "data": [
    {
      "name": "netherlands",
      "url": "https://raw.githubusercontent.com/mattijn/datasets/master/NL_outline_geo.json",
      "format": {
        "type": "json",
        "property": "features"
      }
    }
  ],
  "marks": [
    {
      "type": "shape",
      "from": {
        "data": "netherlands"
      },
      "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"
        }
      ]
    }
  ]
}