CODEWITHSUNDEEP
javascriptvisualizationvega-litevega
Daniel Enriquez
Daniel Enriquez

Reputation: 3

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}
}

Upvotes: 0

Views: 33

Answers (1)

APB Reports
APB Reports

Reputation: 2451

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"}
    }
  ]
}

Upvotes: 0

Related Questions