Not able to visualize percentage on pie with signals

[saumya1 (saumya)]

{
   "$schema":"https://vega.github.io/schema/vega/v5.json",
   "description":"A basic pie chart example.",
   "width":200,
   "height":200,
   "autosize":"none",
   "signals":[
      {
         "name":"startAngle",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":6.29,
            "step":0.01
         }
      },
      {
         "name":"endAngle",
         "value":6.29,
         "bind":{
            "input":"range",
            "min":0,
            "max":6.29,
            "step":0.01
         }
      },
      {
         "name":"padAngle",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":0.1
         }
      },
      {
         "name":"innerRadius",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":90,
            "step":1
         }
      },
      {
         "name":"cornerRadius",
         "value":0,
         "bind":{
            "input":"range",
            "min":0,
            "max":10,
            "step":0.5
         }
      },
      {
         "name":"sort",
         "value":false,
         "bind":{
            "input":"checkbox"
         }
      }
   ],
   "data":[
      {
         "name":"table",
         "values":[
            {
               "brand":"open",
               "mentions":"inc1"
            },
            {
               "brand":"close",
               "mentions":"inc2"
            },
            {
               "brand":"close",
               "mentions":"inc3"
            },
            {
               "brand":"resolved",
               "mentions":"inc4"
            },
            {
               "brand":"open",
               "mentions":"inc5"
            },
            {
               "brand":"open",
               "mentions":"inc6"
            }
         ],
         "transform":[
            {
               "type":"pie",
               "field":"mentions",
               "startAngle":{
                  "signal":"startAngle"
               },
               "endAngle":{
                  "signal":"endAngle"
               },
               "sort":{
                  "signal":"sort"
               }
            }
         ]
      }
   ],
   "encoding":{
      "theta":{
         "field":"mentions",
         "stack":true,
         "aggregate":"count"
      }
   },
   "transform":[
      {
         "window":[
            {
               "op":"count",
               "field":"mentions",
               "as":"TotalTime"
            }
         ],
         "frame":[
            null,
            null
         ]
      },
      {
         "joinaggregate":[
            {
               "op":"count",
               "as":"groupcount"
            }
         ],
         "groupby":[
            "brand"
         ]
      },
      {
         "calculate":"datum.groupcount/datum.TotalTime",
         "as":"PercentOfTotal"
      }
   ],
   "layer":[
      {
         "encoding":{
            "color":{
               "field":"brand",
               "type":"nominal",
               "legend":"true",
               "scale":{
                  "range":"category20"
               }
            }
         }
      },
      {
         "encoding":{
            "text":{
               "field":"PercentOfTotal",
               "type":"nominal",
               "format":".2%"
            }
         }
      }
   ],
   "scales":[
      {
         "name":"color",
         "type":"ordinal",
         "domain":{
            "data":"table",
            "field":"brand"
         },
         "range":{
            "scheme":"category20"
         }
      }
   ],
   "marks":[
      {
         "type":"arc",
         "from":{
            "data":"table"
         },
         "encode":{
            "enter":{
               "fill":{
                  "scale":"color",
                  "field":"brand"
               },
               "x":{
                  "signal":"width / 2"
               },
               "y":{
                  "signal":"height / 2"
               }
            },
            "update":{
               "startAngle":{
                  "field":"startAngle"
               },
               "endAngle":{
                  "field":"endAngle"
               },
               "padAngle":{
                  "signal":"padAngle"
               },
               "innerRadius":{
                  "signal":"innerRadius"
               },
               "outerRadius":{
                  "signal":"width / 2"
               },
               "cornerRadius":{
                  "signal":"cornerRadius"
               }
            }
         }
      }
   ]
}

Signals are working fine but m not getting the data on pie.

Screenshot of error and required result i have attached.
thanks in advance

[nickofthyme (Nick Partridge)]

Hey @saumya1

I'm not a vega expert to know how the top-level marks and encodings interact with each other. That said I found a solution to at least show the slices given the data.

The main thing I did was move your top-level transforms into the data transforms before the pie transform. This gives you the table I think you are expecting...

To render the arc marks, I just changed the field to point at the final transform row of PercentOfTotal and point the color scale to point at the mentions field. Doing this an a few minor other things gives me this result below...

You can see the full specification I used here. I am not sure how to link the text to the shapes but I think you can figure that out from here.

Best of luck!
Nick