Plotting multiple pie charts at different geolocations with vega-lite

[pvanheus]

Hi everyone

I have data organised essentially like this:

Lat,Long,ST
XXX,YYY,5
XXX,YYY,7
XXX,ZZZ,5

In other words, multiple different STs found at XXX,YYY and only 1 ST at XXX,ZZZ.

Using Microreact I have been able to create this map:

but would like to customize it further and have looked to vega-lite for that. I am struggling to get the multiple pie charts: segments of my pie chart gets distributed across the different points that I am plotting. Is there a way to achieve something like this map in vega-lite?

What I have thus far - the positions are also wrong, probably a projection issue:

[kgoodrick-uu]

Hi @pvanheus, can you provide a spec to reproduce the graphic that you've included at the end of your post? It will be easier for others to help with a fully reproduceable example with data.

[pvanheus]

Apologies, I've lost the exact spec, but this is close:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 600,
  "layer": [
    {
      "data": {
        "url": "https://gist.githubusercontent.com/pvanheus/d56520e547a330ab39ed98ca0e9d11aa/raw/37b5a0002a0bcc13b6f694472364a7e60206cd45/states.geojson",
        "format": {
          "type": "topojson"
        }
      },
      "mark": {
        "type": "geoshape",
        "fill": "lightgray",
        "stroke": "white"
      }
    },
    {
      "data": {
        "url": "https://gist.githubusercontent.com/pvanheus/df1cff246ca84bda7621d337ed4b7b70/raw/0b1ab10df4effdfe932903895a560743428ef1e9/metadata.tsv",
        "format": {
          "type": "tsv"        
          }
      },
      "transform": [
        {
          "aggregate": [
            {
              "op": "count",
              "as": "count"
            }
          ],
          "groupby": ["latitude", "longitude", "ST"]
        },
        {
          "joinaggregate": [
            {
              "op": "sum",
              "field": "count",
              "as": "total_count"
            }
          ],
          "groupby": ["latitude", "longitude"]
        },
        {
          "calculate": "datum.count / datum.total_count",
          "as": "proportion"
        }
      ],
      "mark": {
        "type": "arc",
        "outerRadius": {"expr": "sqrt(datum.total_count) * 4"}
      },
      "projection": {
        "type": "mercator"
      },
      "encoding": {
        "theta": {
          "field": "proportion", 
          "stack": true
          },
        "color": {
          "field": "count",
          "type": "nominal"
        },
        "latitude" : {
          "field": "longitude",
          "type": "quantitative"
        },
        "longitude": {
          "field": "latitude",
          "type": "quantitative"
        }
      }
    }
  ]
}

[pvanheus]

I think that the solution here is to do some kind of layers? One per pie chart?

[pvanheus]

I eventually turned to Altair to create the map I wanted. This was after realising that what I needed was a collection of layers: one layer for the map and one layer for each pie chart, located at the correct position on the map. The Python code to create this is here: https://gist.github.com/pvanheus/ab93556b4316f84129b9b83a66613246

and the final vega-lite json is here: https://gist.github.com/pvanheus/5e41bd0931a69c25ce4056b0f94ee523

Any comments on how to do this better are welcome!