Afternoon all,
I'm trying to learn Deneb at the moment and am really loving the freedom to build whatever i like, even if it does feel like a bit of a steep learning curve.
Right now, I'm constructing a visual that shows students at different stages of the university recruitment process, and what courses they are on. I've currently gotten this:
I'm pretty happy with it. The tick marks are targets.
What i now want to to simulate that classic thing in PBI where you press on one of the bars and that section becomes highlighted. I've ensured the cross filtering is on in the settings, as have tried methods of both parameters and simple conditions on opacity, but to no success. I can clearly see in the data pane that the row is selected, but colours don't shift.
I've read in the documentation that transforms can mess things up a little, so have also tried with using multiple layers that show or hide based on whether they are selected, but i get the same result. That seems to closest, so that's what I've pasted below. Any help would be greatly appreciated.
This is the code as it is right now:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "dataset"
},
"height": {
"step": 15
},
"encoding": {
"y": {
"field": "Course Name Concise",
"type": "nominal",
"title": "Course",
"sort": {
"field": "Count of Student ID",
"op": "max",
"order": "descending"
}
},
"x": {
"field": "Count of Student ID",
"type": "quantitative",
"aggregate": "sum",
"stack": "zero",
"title": "Students / Stage",
"scale": { //Staring coord for bars
"range": [
20,
{
"expr": "width"
}
]
}
},
"order": { // Order sorts the bar stacks
"field": "Stage Code Group 2 Order"
}
},
// These are the stacked bars.
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.3
},
"encoding": {
"x": {"field": "Count of Student ID"},
"color": {
"field": "Stage Code Group 2",
"title": null,
"legend": true,
"sort": {
"field": "Stage Code Group 2 Order",
"order": "ascending"
},
"scale": {
"domain": [
"UF",
"CLA",
"CL Ref & UCC",
"Pipeline",
"UF Target",
"UF Over-Rec Target"
],
"range": [
"#0D6ABF",
"#41A4FF",
"#E66C37",
"#F5C4AF",
"#E669B9",
"#00FB1D"
]
}
},
"tooltip": [
{
"field": "Course Name Concise",
"title": "Course Name"
},
{
"field": "Stage Code Group 2",
"title": "Stage Code"
},
{
"field": "Count of Student ID",
"title": "Count"
},
{
"field": "Fee Status Target",
"title": "UF Target",
"format": "d"
},
{
"field": "Fee Status Over-Rec Target",
"title": "UF Over-Rec Target",
"format": "d"
}
]
}
},
{
"mark": {
"type": "bar"
},
"encoding": {
"x": {"field": "Count of Student ID__highlight"},
"color": {
"field": "Stage Code Group 2",
"title": null,
"legend": true,
"sort": {
"field": "Stage Code Group 2 Order",
"order": "ascending"
},
"scale": {
"domain": [
"UF",
"CLA",
"CL Ref & UCC",
"Pipeline",
"UF Target",
"UF Over-Rec Target"
],
"range": [
"#0D6ABF",
"#41A4FF",
"#E66C37",
"#F5C4AF",
"#E669B9",
"#00FB1D"
]
}
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0
},
"value": 1
},
"tooltip": [
{
"field": "Course Name Concise",
"title": "Course Name"
},
{
"field": "Stage Code Group 2",
"title": "Stage Code"
},
{
"field": "Count of Student ID",
"title": "Count"
},
{
"field": "Fee Status Target",
"title": "UF Target",
"format": "d"
},
{
"field": "Fee Status Over-Rec Target",
"title": "UF Over-Rec Target",
"format": "d"
}
]
}
},
// These are for the target ticks. The transform creates grouped rows for use in all parts beneath this, in a nested layer
{
"transform": [
{
"filter": {
"not": {
"field": "Stage Code Group 2",
"oneOf": [
"Pipeline",
"CL Ref & UCC"
]
}
}
},
{
"aggregate": [
{
"op": "sum",
"field": "Count of Student ID",
"as": "rowTotal"
},
{
"op": "max",
"field": "Fee Status Target",
"as": "feeTarget"
},
{
"op": "max",
"field": "Fee Status Over-Rec Target",
"as": "feeOverTarget"
}
],
"groupby": [
"Course Name Concise"
]
}
],
"layer": [
{
"mark": {
"type": "tick",
"tooltip": true,
"style": "target"
},
"encoding": {
"x": {
"field": "feeTarget",
"stack": false
},
"tooltip": [
{
"field": "Course Name Concise",
"title": "Course Name"
},
{
"field": "rowTotal",
"title": "UF+CLA"
},
{
"field": "feeTarget",
"title": "UF Target",
"format": "d"
},
{
"field": "feeOverTarget",
"title": "UF Over-Rec Target",
"format": "d"
}
]
}
},
{
"mark": {
"type": "tick",
"tooltip": true,
"style": "overrec"
},
"encoding": {
"x": {
"field": "feeOverTarget",
"stack": false
},
"tooltip": [
{
"field": "Course Name Concise",
"title": "Course Name"
},
{
"field": "rowTotal",
"title": "UF+CLA"
},
{
"field": "feeTarget",
"title": "UF Target",
"format": "d"
},
{
"field": "feeOverTarget",
"title": "UF Over-Rec Target",
"format": "d"
}
]
}
},
//Data label
{
"mark": {
"type": "text",
"align": "right",
"dx": 15
},
"encoding": {
"text": {
"field": "rowTotal"
},
"x": {
"value": 0
}
}
}
]
}
]
}