Hey @dkernen2. Because your concatenated charts are all the same with only the underlying x-axis encoding changing, as a first step I would suggest switching from a concatenated layout composition to a faceted layout composition. This will allow you to specify encodings once. This will require a fold transform to unpivot the $ columns. You can then facet on the "key" column that results from the fold.
I have created a spec (version with coments can be found in the code block below) that will hopefully be helpful and can act as a guide. I added checkboxes to act like slicers to show how the bar heights update dynamically. For the labels, I implemented a strategy to include them either inside its bar or outside its bar depending upon how large the bar is. Because creating the ability to only show labels only if they fit requires a lot of workarounds in vega-lite, I instead utilized the limit property to fit as much of the label text as possible before truncation. Hope this suffices.
Here is documentation on setting up drillthrough with Deneb
Here is documentation on formatting values in Deneb
I hope this helps.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"transform": [
{
//ignore - used to simulate slicer selections
"filter": "indexof(selectedDepartments, datum['Department']) >=0"
},
{
//unpivots the specified columns and return key/value pairs
"fold": ["Budgeted $", "Paid $"]
},
{
//get min and max values grouped by key
"joinaggregate": [
{"op": "min", "field": "value", "as": "min"},
{"op": "max", "field": "value", "as": "max"}
],
"groupby": ["key"]
},
{
//use the min/max values to determine if the current bar is > or < 50% of the faceted width
//if < 50% align right, otherwise align left
"calculate": "(datum['max']-datum['value'])/(datum['max']-datum['min']) < 0.5 ? 'right' : 'left'",
"as": "align"
},
{
"calculate": "1",
"as": "labelOpacity"
},
{
//ignore - used to add text to the labels for demonstration purposes only
"calculate": "datum['label'] + (datum['align']==='left'? ' that is OUTSIDE its bar' : ' that is INSIDE its bar')",
"as": "label"
}
],
"facet": {
//each key is given its own column
"column": {
"field": "key",
"sort": "ascending",
"title": null,
"header": {"labelFontSize": 14}
}
},
"spec": {
//width and height of each facet
"width": 400,
"height": 200,
"view": {"stroke": "transparent"},
"encoding": {
"x": {"type": "quantitative", "field": "value"},
"y": {
"type": "nominal",
"field": "Department",
"sort": {"field": "id"},
"axis": {"labelFont": "Helvetica", "labelFontSize": 14}
}
},
"layer": [
{"mark": {"type": "bar", "color": "green"}}, //bar color just entered once; applied to all facets
{
"mark": {
"type": "text",
"limit": {"expr": "datum['align'] === 'right' ? (scale('x', datum['value'])-10) : child_width-(scale('x', datum['value'])-10)"},
"text": {"expr": "datum['label']"},
"align": {"expr": "datum['align']"},
"xOffset": {"expr": "datum['align'] === 'left' ? 5 : -5"}, //spacing for each label from bar
"fill": {
"expr": "luminance('green') < 0.5 && datum['align'] === 'right' ? 'white' : 'black'" //if the label is to be pklaced inside, calculate the luminance of the bar to determine if the label fill should be white or black
}
}
}
]
},
"config": {
"axis": {"grid": false, "ticks": false, "domain": false, "title": null},
"axisQuantitative": {"labels": false}
},
"data": {
"name": "dataset",
"values": [
{
"id": 1,
"Department": "A",
"label": "This is a long label",
"Budgeted $": 15,
"Paid $": 17
},
{
"id": 2,
"Department": "B",
"label": "This is a long label",
"Budgeted $": 5,
"Paid $": 14
},
{
"id": 3,
"Department": "C",
"label": "This is a long label",
"Budgeted $": 6,
"Paid $": 2
},
{
"id": 4,
"Department": "D",
"label": "This is a long label",
"Budgeted $": 4,
"Paid $": 7
},
{
"id": 5,
"Department": "E",
"label": "This is a long label",
"Budgeted $": 3,
"Paid $": 15
},
{
"id": 6,
"Department": "F",
"label": "This is a long label",
"Budgeted $": 6,
"Paid $": 8
},
{
"id": 7,
"Department": "G",
"label": "This is a long label",
"Budgeted $": 7,
"Paid $": 7
}
]
},
//ignore - params set up to simulate external slicer selections
"params": [
{
"name": "DepartmentA",
"value": true,
"bind": {"input": "checkbox", "name": "A"}
},
{
"name": "DepartmentB",
"value": true,
"bind": {"input": "checkbox", "name": "B"}
},
{
"name": "DepartmentC",
"value": true,
"bind": {"input": "checkbox", "name": "C"}
},
{
"name": "DepartmentD",
"value": true,
"bind": {"input": "checkbox", "name": "D"}
},
{
"name": "DepartmentE",
"value": true,
"bind": {"input": "checkbox", "name": "E"}
},
{
"name": "DepartmentF",
"value": true,
"bind": {"input": "checkbox", "name": "F"}
},
{
"name": "DepartmentG",
"value": true,
"bind": {"input": "checkbox", "name": "G"}
},
{
"name": "selectedDepartments",
"expr": "[DepartmentA?'A':'',DepartmentB?'B':'',DepartmentC?'C':'',DepartmentD?'D':'',DepartmentE?'E':'',DepartmentF?'F':'',DepartmentG?'G':'']"
},
{"name": "test", "expr": "[DepartmentE]"}
]
}
Madison GiammariaProud to be a Super User
😄LinkedInDo you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!
