Vegalite: pie chart not aggregating together - vega-lite

Question

I have a json date values that I'm adding to the vega-lite for visualization in pie chart. The legends seem to render properly (there's 2 distinct legends for 2020 q3 and 2020 q4). But the pie chart itself doesn't seem to aggregate together. How would I make sure that all the 2020Q4 are grouping together? How do I fix my spec??
pie chart with no aggregation for same data
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 880,
"height": 376,
"config": {
"range": {
"category": {
"scheme": "tableau20"
}
},
"legend": {
"labelColor": "#333",
"labelFontSize": 11,
"symbolSize": 30,
"symbolType": "circle",
"symbolStrokeWidth": 0,
"titleColor": "#333",
"titleFontSize": 14,
"titlePadding": 10,
"titleFontWeight": 500
},
"autosize": {
"type": "fit",
"contains": "padding"
},
"font": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
"axisLeft": {
"labelFontSize": 14,
"labelColor": "#333",
"labelLimit": 180,
"titleFontSize": 16,
"titleLimit": 180
},
"style": {
"label": {
"align": "left",
"baseline": "middle",
"dx": 4
},
"cell": {
"stroke": "transparent"
}
}
},
"layer": [
{
"mark": {
"type": "arc",
"innerRadius": {
"expr": "min(width,height)/5"
},
"outerRadius": {
"expr": "min(width,height)/4"
},
"tooltip": true,
"padAngle": 0.01
},
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
},
{
"name": "select",
"select": "point"
}
]
},
{
"mark": {
"type": "text",
"radius": {
"expr": "min(width,height)/4+min(width,height)/5/2"
},
"stroke": "#666666",
"limit": {
"expr": "min(width,height)/5"
}
},
"encoding": {
"text": {
"field": "color",
"title": "Due date",
"type": "nominal",
"timeUnit": "yearquarter"
}
}
}
],
"encoding": {
"color": {
"field": "color",
"title": "Due date",
"type": "nominal",
"timeUnit": "yearquarter"
},
"theta": {
"field": "thetaAggregated",
"type": "quantitative",
"title": "Values",
"stack": true
},
"fillOpacity": {
"condition": [
{
"param": "select",
"value": 1
}
],
"value": 0.3
}
},
"transform": [
{
"calculate": "datetime(datum.color.year, datum.color.month, datum.color.date)",
"as": "color"
},
{
"joinaggregate": [
{
"op": "count",
"field": "theta",
"as": "thetaAggregated"
}
],
"groupby": [
"color"
]
}
],
"data": {
"values": [
{
"color": {
"year": 2020,
"month": 9,
"date": 30,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "rec79Wjae6P45XNpl"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 20,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recrQaNcIH4wueWrT"
},
{
"color": {
"year": 2020,
"month": 8,
"date": 29,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recwVzB5CNu0E6x9J"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 25,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recp8FrOTOgSqQlxV"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 5,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recpgd5QYGyHPz6oC"
},
{
"color": {
"year": 2020,
"month": 10,
"date": 7,
"hours": 16,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recerFXuq7ply21Ba"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 18,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recNfz0B2qasVXfwS"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 12,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recriiVtRVuueAwTP"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 19,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recbGumPg7L28cUrh"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 26,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recrhgU6BXOBYY8F4"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 31,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recJzAP0NPlzck0aa"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 32,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "rec2spYZGJTOnq32F"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 17,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recldmzqvJhcZ9oqy"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 25,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recegvuNEeNoSyyMT"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 4,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recDwkAeTWQ9KzDXS"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 9,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recKTwDYDpXsKAiAC"
}
]
}
}

Answer 1

Instead of joinaggregate, you can use aggregate transform as it will help you to generate new data set which you can utilize for the values pie chart. Simply convert the color values using calculate and expressions and then perform aggregation.
Below is the code snippet or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 880,
"height": 376,
"config": {
"range": {"category": {"scheme": "tableau20"}},
"legend": {
"labelColor": "#333",
"labelFontSize": 11,
"symbolSize": 30,
"symbolType": "circle",
"symbolStrokeWidth": 0,
"titleColor": "#333",
"titleFontSize": 14,
"titlePadding": 10,
"titleFontWeight": 500
},
"autosize": {"type": "fit", "contains": "padding"},
"font": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
"axisLeft": {
"labelFontSize": 14,
"labelColor": "#333",
"labelLimit": 180,
"titleFontSize": 16,
"titleLimit": 180
},
"style": {
"label": {"align": "left", "baseline": "middle", "dx": 4},
"cell": {"stroke": "transparent"}
}
},
"layer": [
{
"mark": {
"type": "arc",
"innerRadius": {"expr": "min(width,height)/5"},
"outerRadius": {"expr": "min(width,height)/4"},
"tooltip": true,
"padAngle": 0.01
},
"params": [
{"name": "highlight", "select": {"type": "point", "on": "mouseover"}},
{"name": "select", "select": "point"}
]
},
{
"mark": {
"type": "text",
"stroke": "#666666",
"radius": {"expr": "min(width,height)/4+min(width,height)/5/2"},
"limit": {"expr": "min(width,height)/5"}
},
"encoding": {
"text": {"field": "quarterTime", "title": "Due date", "type": "nominal"}
}
}
],
"encoding": {
"color": {"field": "quarterTime", "title": "Due date", "type": "nominal"},
"theta": {
"field": "thetaAggregated",
"type": "quantitative",
"title": "Values",
"stack": true
},
"fillOpacity": {
"condition": [{"param": "select", "value": 1}],
"value": 0.3
}
},
"transform": [
{
"calculate": "datetime(datum.color.year, datum.color.month, datum.color.date)",
"as": "color"
},
{"calculate": "timeFormat(datum.color,'%Y Q%q')", "as": "quarterTime"},
{
"aggregate": [{"op": "count", "field": "theta", "as": "thetaAggregated"}],
"groupby": ["quarterTime"]
}
],
"data": {
"values": [
{
"color": {
"year": 2020,
"month": 9,
"date": 30,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "rec79Wjae6P45XNpl"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 20,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recrQaNcIH4wueWrT"
},
{
"color": {
"year": 2020,
"month": 8,
"date": 29,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recwVzB5CNu0E6x9J"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 25,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recp8FrOTOgSqQlxV"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 5,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recpgd5QYGyHPz6oC"
},
{
"color": {
"year": 2020,
"month": 10,
"date": 7,
"hours": 16,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recerFXuq7ply21Ba"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 18,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recNfz0B2qasVXfwS"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 12,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recriiVtRVuueAwTP"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 19,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recbGumPg7L28cUrh"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 26,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recrhgU6BXOBYY8F4"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 31,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recJzAP0NPlzck0aa"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 32,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "rec2spYZGJTOnq32F"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 17,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recldmzqvJhcZ9oqy"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 25,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recegvuNEeNoSyyMT"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 4,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recDwkAeTWQ9KzDXS"
},
{
"color": {
"year": 2020,
"month": 9,
"date": 9,
"hours": 17,
"minutes": 0,
"seconds": 0,
"milliseconds": 0
},
"theta": "recKTwDYDpXsKAiAC"
}
]
}
}