I'm trying to make a Deneb Gantt chart, but I'd like to show the Projects grouped by Assignee ( quite the same way as if I had a Power BI table and I'd stack both Assignee and Project on rows, I could see all the Assignee's projects by clicking the +/- -sign and opening the row)
I now have the Assignees on the y-axis and tasks as ranged bars, but as you can see, it's really confusing (for Assignee 1) if the projects aren't listed on the y-axis as well. I've tried to make facets but I've had zero luck. Are facets even possible with Gantt charts, or how should I go around with this?
Example data:
| Project | Task | Assignee | StartDate | EndDate |
|---|---|---|---|---|
| Project1 | Task1 | Assignee1 | 01/05/2023 | 30/06/2023 |
| Project1 | Task1 | Assignee2 | 01/04/2023 | 31/05/2023 |
| Project1 | Task2 | Assignee3 | 01/07/2023 | 14/07/2023 |
| Project2 | Task1 | Assignee1 | 01/07/2023 | 31/07/2023 |
Example code:
{
"title": {
"text": "Title",
"fontSize": 16,
"color": "#34282C"
},
"data": {"name": "dataset"},
"layer": [
{
"transform": [
{
"calculate": "now()",
"as": "Today"
}
],
"mark": {
"type": "rule",
"color": "Sienna",
"strokeDash": [0, 0],
"size": 1,
"tooltip": true
},
"encoding": {
"x": {
"field": "Today",
"type": "temporal"
}
}
},
{
"layer": [
{
"params": [
{
"name": "grid",
"select": "interval",
"bind": "scales"
},
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
},
{
"name": "select",
"select": "point"
}
],
"mark": {
"type": "bar",
"opacity": 1,
"cornerRadius": 6,
"height": 25,
"tooltip": true,
"color": "#FFFFFF"
}
},
{
"mark": {
"type": "bar",
"opacity": 0.6,
"cornerRadius": 6,
"height": 20,
"tooltip": true,
"stroke": "black"
},
"encoding": {
"color": {
"field": "Assignee",
"legend": null
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"dx": 5,
"fontSize": 12
},
"encoding": {
"text": {
"field": "Task",
"type": "nominal"
}
}
}
],
"encoding": {
"y": {
"field": "Assignee",
"type": "ordinal",
"axis": {
"title": null,
"grid": true,
"gridWidth": 2,
"tickBand": "extent",
"labelFontSize": 15,
"labelColor": "#34282C",
"zindex": 1
}
},
"x": {
"field": "StartDate",
"type": "temporal",
"axis": {
"title": null,
"format": "%m/%y",
"labelExpr": "[timeFormat(datum.value, '%m/%y'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
"orient": "top",
"grid": true,
"gridWidth": 2,
"gridColor": "#ddd",
"gridDash": {
"condition": {
"test": {
"field": "value",
"timeUnit": "month",
"equal": 1
},
"value": []
},
"value": [2, 2]
},
"labelOffset": 15,
"labelAlign": "left",
"labelPadding": 0
}
},
"x2": {"field": "EndDate"},
"yOffset": {
"field": "Assignee"
},
"fillOpacity": {
"condition": {
"param": "select",
"value": 1
},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"param": "select",
"empty": false,
"value": 2
},
{
"param": "highlight",
"empty": false,
"value": 1
}
],
"value": 0
}
}
}
]
}
Example plot:
