Vega-Lite: Adding "All" option in select which doesn't filter the chart - vega-lite

Question

I am trying to implement a drop-down select where if the user selects "All" it would simply not filter and show all data. So far, I have added the select options and the labels.
Here is my code (simplified for visibility)
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
null,
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"filter": {"field": "Industry", "equal": {"expr": "industry_sel"}}
}
]
}
So far, when the user selects "All" it will simply show nothing (because there is no Industry with null as a value. Furthermore, I wish to only add and change things in this code rather than add other files or hacks (This is an assignment. The criteria is quite strict)

Answer 1

Do it with a ternary operator and make sure you enclose null in quotes.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
"null",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"filter": "industry_sel=='null'?industry_sel:datum.Industry == industry_sel"
}
]
}

Answer 2

After looking at David's solution and discovering a set back on a functionality that after choosing a specific industry and going back to "All" would not change back, I have come up with a similar solution to David's.
Code is as follows:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"bar": {
"height": 30,
"tooltip":true
}
},
"width": 1000,
"height": 600,
"background":"#dddddd",
"title":"Top 10 Richest by Industry",
"data": {
"url": "https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/data/Billionaires_October_13_2022.csv"
},
"params": [
{
"name": "industry_sel",
"value": "Technology",
"bind": {
"input": "select",
"options": [
"null",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"
],
"labels": [
"All",
"Technology",
"Industrial",
"Diversified",
"Finance",
"Consumer",
"Retail",
"Food & Beverage",
"Energy",
"Real Estate",
"Health Care",
"Commodities",
"Media & Telecom",
"Entertainment",
"Services"],
"name": "Industry: "
}
}
],
"layer": [
{
"mark": "bar"
}
],
"encoding": {
"y": {"field": "Name", "type": "nominal","sort": {"op": "sum", "field": "Net Worth", "order":"descending"}},
"x": {"field": "Net Worth", "type": "quantitative", "title": "Net Worth in Billions"}
},
"transform": [
{
"window": [{"op": "rank", "as" : "rank"}]
},
{
"filter": "industry_sel=='null'?datum.rank <= 10:datum.Industry == industry_sel"
}
]
}
From my understanding on how it works is that it will show the top 10 of the (sorted) data no matter the industry choice. This code now works. For the full code and context you can check it out here:
https://raw.githubusercontent.com/edenfrey/FIT3179_Visualisation2_Globe500/main/js/Top_10_Billionaires.vg.json