vega-lite dougnut chart with a dropdown is not working as expected. What am I doing wrong? - vega-lite

Question

I have a vega-lite chart that I need a dropdown for and am having trouble getting it to work as expected. It looks to me like by default it is selecting data for the last element in the data [agent 'Tommy'] and the colors are fine for the data that's there. When another agent is selected the colors do not update correctly. null is in the list and that seems to reset the chart back to the correct colors for the last agent again. This is my json in the editor. Any help would be appreciated.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"agent": "Mabel", "type": "answered less than 20", "value": 9},
{"agent": "Mabel", "type": "answered less than 15", "value": 15},
{"agent": "Mabel", "type": "answered less than 10", "value": 24},
{"agent": "Mabel", "type": "answered less than 5", "value": 11},
{"agent": "Mabel", "type": "answered greater than 20", "value": 4},
{"agent": "Mabel", "type": "abandon system", "value": 0},
{"agent": "Mabel", "type": "abandon agent", "value": 9},
{"agent": "Bart", "type": "answered less than 20", "value": 3},
{"agent": "Bart", "type": "answered less than 15", "value": 1},
{"agent": "Bart", "type": "answered less than 10", "value": 6},
{"agent": "Bart", "type": "answered less than 5", "value": 14},
{"agent": "Bart", "type": "answered greater than 20", "value": 11},
{"agent": "Bart", "type": "abandon system", "value": 0},
{"agent": "Bart", "type": "abandon agent", "value": 8},
{"agent": "Tommy", "type": "answered less than 20", "value": 48},
{"agent": "Tommy", "type": "answered less than 15", "value": 18},
{"agent": "Tommy", "type": "answered less than 10", "value": 11},
{"agent": "Tommy", "type": "answered less than 5", "value": 15},
{"agent": "Tommy", "type": "answered greater than 20", "value": 2},
{"agent": "Tommy", "type": "abandon system", "value": 0},
{"agent": "Tommy", "type": "abandon agent", "value": 11}
]
},
"description": "test",
"height": 200,
"layer": [
{
"encoding": {
"color": {
"condition": {"param": "Agents", "field": "type", "scale": {"scheme": "spectral"}, "type": "nominal"},
"value": "grey"
},
"theta": {"field": "value", "type": "quantitative"},
"tooltip": [
{"field": "type", "type": "nominal"},
{"field": "value", "type": "quantitative"}
]
},
"mark": {"innerRadius": 50, "outerRadius": 100, "type": "arc"},
"params": [
{
"bind": {
"input": "select",
"options": [null, "Mabel", "Bart", "Tommy"]
},
"name": "Agents",
"select": {"fields": ["agent"], "type": "point"}
}
]
},
{
"encoding": {"text": {"field": "total", "type": "nominal"}},
"mark": {
"fontSize": 23,
"fontWeight": "bold",
"tooltip": "Calls answered within 20 seconds",
"type": "text"
}
}
],
"title": "Agent Service Levels",
"width": 200
}

Answer 1

this json worked:
the keys were:
the color condition
the transform
the auto size with the resize set to true to fix the legend after the filter update.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"agent": "Mabel",
"type": "answered less than 20",
"value": 5
},
{
"agent": "Mabel",
"type": "answered less than 15",
"value": 15
},
{
"agent": "Mabel",
"type": "answered less than 10",
"value": 16
},
{
"agent": "Mabel",
"type": "answered less than 5",
"value": 13
},
{
"agent": "Mabel",
"type": "answered greater than 20",
"value": 2
},
{
"agent": "Mabel",
"type": "abandon system",
"value": 0
},
{
"agent": "Mabel",
"type": "abandon agent",
"value": 8
},
{
"agent": "Bart",
"type": "answered less than 20",
"value": 8
},
{
"agent": "Bart",
"type": "answered less than 15",
"value": 28
},
{
"agent": "Bart",
"type": "answered less than 10",
"value": 21
},
{
"agent": "Bart",
"type": "answered less than 5",
"value": 7
},
{
"agent": "Bart",
"type": "answered greater than 20",
"value": 1
},
{
"agent": "Bart",
"type": "abandon system",
"value": 0
},
{
"agent": "Bart",
"type": "abandon agent",
"value": 3
},
{
"agent": "Tommy",
"type": "answered less than 20",
"value": 15
},
{
"agent": "Tommy",
"type": "answered less than 15",
"value": 9
},
{
"agent": "Tommy",
"type": "answered less than 10",
"value": 14
},
{
"agent": "Tommy",
"type": "answered less than 5",
"value": 5
},
{
"agent": "Tommy",
"type": "answered greater than 20",
"value": 12
},
{
"agent": "Tommy",
"type": "abandon system",
"value": 0
},
{
"agent": "Tommy",
"type": "abandon agent",
"value": 10
}
]
},
"description": "test",
"height": 200,
"layer": [
{
"encoding": {
"color": {
"condition": {
"param": "Agents",
"field": "type",
"type": "nominal",
"scale": {
"scheme": "spectral"
}
},
"value": null
},
"opacity": {
"condition": {
"param": "industry",
"value": 1
},
"value": 0.2
},
"theta": {
"field": "value",
"type": "quantitative"
},
"tooltip": [
{
"field": "type",
"type": "nominal"
},
{
"field": "value",
"type": "quantitative"
}
]
},
"mark": {
"innerRadius": 50,
"outerRadius": 100,
"type": "arc"
},
"params": [
{
"bind": {
"input": "select",
"options": [
"{none}",
"Mabel",
"Bart",
"Tommy"
]
},
"name": "Agents",
"select": {
"fields": [
"agent"
],
"type": "point"
}
},
{
"bind": "legend",
"name": "industry",
"select": {
"fields": [
"type"
],
"type": "point"
}
}
],
"transform": [
{
"filter": {
"field": "agent",
"equal": {
"expr": "Agents_agent"
}
}
}
]
},
{
"encoding": {
"text": {
"value": "100%"
}
},
"mark": {
"fontSize": 23,
"fontWeight": "bold",
"tooltip": "Calls answered within 20 seconds",
"type": "text"
}
}
],
"title": "Agent Service Levels",
"width": 300,
"autosize": {
"type": "pad",
"contains": "padding",
"resize": true
}
}