javascriptvisualizationvega-litevega

Vega Lite Geography Plot


I'm new to Vega Lite. Been trying for hours with no luck on how to plot polygons. I know there is a code example in Vega Lite website, however, they always use within the "data" parameter a url. The problem I'm facing is that the software I use has Vega Support but the "data" parameter is read-only therefore I can't use the already coded solution.

The "data" parameter is now looking like this, read only so I can't edit it.

  "data": {"values": [{"ISO_3": "USA"}]}

This is what I currently have, but unfortunately not plotting. My idea is to make a join on ISO_3. In the Vega Editor I can actually look that the join is done correctly and even I have geometry, but the plotting is not working but don't know what I'm missing here.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "height": 500,
  "transform": [
    {
      "lookup": "ISO_3",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com/datasets/geo-countries/main/data/countries.geojson",
          "format": {"property": "features"}
        },
        "key": "properties.ISO_A3",
        "fields": ["properties.ADMIN","geometry"]
      }
    }
  ],
  "mark": {"type": "geoshape","stroke": "black","strokeWidth": 0.5}
}

Solution

  • Try this:

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "width": 800,
      "height": 800,
      "projection": {"type": "mercator"},
      "data": {"values": [{"ISO_3": "USA"}]},
      "transform": [
        {
          "lookup": "ISO_3",
          "from": {
            "data": {
              "url": "https://raw.githubusercontent.com/datasets/geo-countries/main/data/countries.geojson",
              "format": {"property": "features"}
            },
            "key": "properties.ISO_A3",
            "fields": ["properties.ADMIN", "geometry"]
          }
        }
      ],
      "layer": [
        {
          "data": {
            "url": "data/us-10m.json",
            "format": {"type": "topojson", "feature": "states"}
          },
          "mark": {"type": "geoshape", "fill": "lightgray", "stroke": "red"}
        }
      ]
    }