graphchartsvisualizationlegendvega-lite
Removing an unnecessary legend from a visualisation in VegaLite
I've created this visualization in VegaLite but I'm having an issue with the legends of my graphs. The visualization is a scatterplot, bar chart, and 2 strip plots, of which the scatterplot and bar chart have their own unique legend.
The graphs are joined together(i.e. concat)and by default in VegaLite the legends are automatically combined into one. I've separated both legends using the resolve channel as follows "resolve": {"scale": {"color": "independent"}} but when I implement this operator it creates a copy of the scatterplot's legend that is nothing more than a text legend and not interactive like the original.
I've tried tweaking the resolve channel as well as the color channel of the scatterplot in order to fix this but nothing seems to be working. How can I go about removing this text legend?
CODE
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2018/2018-10-16/recent-grads.csv"
},
"title": "2018 Graduation Explorer",
"config": {
"title": {
"fontSize": 20,
"fontWeight": "bold",
"offset": 15,
"anchor": "middle"
},
"axis": {
"titleFontSize": 12,
"titleFontWeight": "bold",
"labelFontSize": 10
},
"view": {
"stroke": "#e8e8e8"
}
},
"spacing": 8,
"bounds": "full",
"vconcat": [{
"hconcat": [
{
"height": 450,
"width": 500,
"mark": "circle",
"params": [{
"name": "Legend_Select",
"select": {"type": "point", "fields": ["Major_category"]},
"bind": "legend"
},
{"name": "brush", "select": {"type": "interval"}}
],
"transform": [
{"filter": {"param": "Legend_Select"}}
],
"encoding": {
"x": {
"field": "Median",
"type": "quantitative",
"axis": {"gridOpacity": 0.2},
"scale": {"domain":[0,120000]},
"title": "Median Salary ($)"
},
"y": {
"field": "Unemployment_rate",
"type": "quantitative",
"axis": {"format": ".0%", "gridOpacity": 0.2},
"scale": {"domain":[0,0.18]},
"title": "Unemployment Rate (%)"
},
"color": {
"condition":{
"legend": {
"orient": "left",
"symbolSize": 60,
"titleFontSize": 10,
"labelFontSize": 8,
"title": "Major Category",
"titleAnchor": "middle"
},
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "lightgrey"
},
"tooltip": [
{"field": "Major_category", "type": "nominal", "title": "Major Category"},
{"field": "Major", "type": "nominal"},
{"field": "Median", "type": "quantitative", "title": "Salary"},
{"field": "Unemployment_rate", "type": "quantitative", "format": ".2%", "title": "Unemployment Rate"}
]
}
},
{
"width": 300,
"height": 450,
"mark": "bar",
"params": [{
"name": "Gender_Select",
"select": {"type": "point", "fields": ["Gender"]},
"bind": "legend"
}],
"transform": [
{"fold": ["Men", "Women"], "as": ["Gender", "Total"]},
{"filter": {"param": "Legend_Select"}},
{"filter": {"param": "brush"}},
{"filter": {"param": "Gender_Select"}}
],
"encoding": {
"y": {
"field": "Major_category",
"type": "nominal",
"title": null,
"sort": {"op": "sum", "field": "Total", "order": "descending"}
},
"x": {
"field": "Total",
"type": "quantitative",
"axis": {"gridOpacity": 0.5},
"title": "Total No. of Graduates"
},
"color": {
"legend": {
"symbolSize": 60,
"titleFontSize": 10,
"labelFontSize": 8,
"title": "Gender",
"titleAnchor": "middle"
},
"field": "Gender",
"type": "nominal",
"scale": {
"domain": ["Men", "Women"],
"range": ["#1f77b4", "#ff7f0e"]
}
},
"tooltip": [
{"field": "Major"},
{"field": "Men", "type": "quantitative", "title": "Men"},
{"field": "Women", "type": "quantitative", "title": "Women"}
]
}
}
],
"resolve": {"scale": {"color": "independent"}}
},
{
"mark": {
"type": "tick",
"opacity": 0.9,
"thickness": 1.2
},
"width":991,
"height":50,
"params": [{
"name": "brush",
"select": {"type": "interval"}
}],
"transform": [
{"filter": {"param": "Legend_Select"}}
],
"encoding": {
"x":{
"field": "ShareWomen",
"type": "quantitative",
"title": "Share of Women",
"axis": {"gridOpacity": 0.5, "format": ".0%"},
"scale": {"domain":[0,1]}
},
"color": {
"condition":{
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "#d3d3d3"
},
"tooltip": [
{"field": "Major", "type": "nominal"},
{"field": "ShareWomen", "type": "quantitative", "format": ".2%", "title": "Share of Women"}
]
}
},
{
"mark": {
"type": "tick",
"opacity": 0.9,
"thickness": 1.2
},
"width":991,
"height":50,
"transform": [
{"filter": {"param": "Legend_Select"}},
{"calculate": "1 - datum.ShareWomen", "as": "ShareMen"}
],
"encoding": {
"x":{
"field": "ShareMen",
"type": "quantitative",
"title": "Share of Men",
"axis": {"gridOpacity": 0.5, "format": ".0%"},
"scale": {"domain":[0,1]}
},
"color": {
"condition":{
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "#d3d3d3"
},
"tooltip": [
{"field": "Major", "type": "nominal"},
{"field": "ShareMen", "type": "quantitative", "format": ".2%", "title": "Share of Men"}
]
}
}
]
}
Solution
Do you mean like this?
You could use the fill property instead of colour.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2018/2018-10-16/recent-grads.csv"
},
"title": "2018 Graduation Explorer",
"config": {
"title": {
"fontSize": 20,
"fontWeight": "bold",
"offset": 15,
"anchor": "middle"
},
"axis": {
"titleFontSize": 12,
"titleFontWeight": "bold",
"labelFontSize": 10
},
"view": {
"stroke": "#e8e8e8"
}
},
"spacing": 8,
"bounds": "full",
"vconcat": [{
"hconcat": [
{
"height": 450,
"width": 500,
"mark": "circle",
"params": [{
"name": "Legend_Select",
"select": {"type": "point", "fields": ["Major_category"]},
"bind": "legend"
},
{"name": "brush", "select": {"type": "interval"}}
],
"transform": [
{"filter": {"param": "Legend_Select"}}
],
"encoding": {
"x": {
"field": "Median",
"type": "quantitative",
"axis": {"gridOpacity": 0.2},
"scale": {"domain":[0,120000]},
"title": "Median Salary ($)"
},
"y": {
"field": "Unemployment_rate",
"type": "quantitative",
"axis": {"format": ".0%", "gridOpacity": 0.2},
"scale": {"domain":[0,0.18]},
"title": "Unemployment Rate (%)"
},
"fill": {
"condition":{
"legend": {
"orient": "left",
"symbolSize": 60,
"titleFontSize": 10,
"labelFontSize": 8,
"title": "Major Category",
"titleAnchor": "middle"
},
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "lightgrey"
},
"tooltip": [
{"field": "Major_category", "type": "nominal", "title": "Major Category"},
{"field": "Major", "type": "nominal"},
{"field": "Median", "type": "quantitative", "title": "Salary"},
{"field": "Unemployment_rate", "type": "quantitative", "format": ".2%", "title": "Unemployment Rate"}
]
}
},
{
"width": 300,
"height": 450,
"mark": "bar",
"params": [{
"name": "Gender_Select",
"select": {"type": "point", "fields": ["Gender"]},
"bind": "legend"
}],
"transform": [
{"fold": ["Men", "Women"], "as": ["Gender", "Total"]},
{"filter": {"param": "Legend_Select"}},
{"filter": {"param": "brush"}},
{"filter": {"param": "Gender_Select"}}
],
"encoding": {
"y": {
"field": "Major_category",
"type": "nominal",
"title": null,
"sort": {"op": "sum", "field": "Total", "order": "descending"}
},
"x": {
"field": "Total",
"type": "quantitative",
"axis": {"gridOpacity": 0.5},
"title": "Total No. of Graduates"
},
"color": {
"legend": {
"symbolSize": 60,
"titleFontSize": 10,
"labelFontSize": 8,
"title": "Gender",
"titleAnchor": "middle"
},
"field": "Gender",
"type": "nominal",
"scale": {
"domain": ["Men", "Women"],
"range": ["#1f77b4", "#ff7f0e"]
}
},
"tooltip": [
{"field": "Major"},
{"field": "Men", "type": "quantitative", "title": "Men"},
{"field": "Women", "type": "quantitative", "title": "Women"}
]
}
}
],
"resolve": {"scale": {"color": "independent"}}
},
{
"mark": {
"type": "tick",
"opacity": 0.9,
"thickness": 1.2
},
"width":991,
"height":50,
"params": [{
"name": "brush",
"select": {"type": "interval"}
}],
"transform": [
{"filter": {"param": "Legend_Select"}}
],
"encoding": {
"x":{
"field": "ShareWomen",
"type": "quantitative",
"title": "Share of Women",
"axis": {"gridOpacity": 0.5, "format": ".0%"},
"scale": {"domain":[0,1]}
},
"color": {
"condition":{
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "#d3d3d3"
},
"tooltip": [
{"field": "Major", "type": "nominal"},
{"field": "ShareWomen", "type": "quantitative", "format": ".2%", "title": "Share of Women"}
]
}
},
{
"mark": {
"type": "tick",
"opacity": 0.9,
"thickness": 1.2
},
"width":991,
"height":50,
"transform": [
{"filter": {"param": "Legend_Select"}},
{"calculate": "1 - datum.ShareWomen", "as": "ShareMen"}
],
"encoding": {
"x":{
"field": "ShareMen",
"type": "quantitative",
"title": "Share of Men",
"axis": {"gridOpacity": 0.5, "format": ".0%"},
"scale": {"domain":[0,1]}
},
"fill": {
"condition":{
"param": "brush",
"field": "Major_category",
"type": "nominal",
"scale": {
"domain": ["Engineering", "Physical Sciences", "Computers & Mathematics", "Agriculture & Natural Resources", "Industrial Arts & Consumer Services", "Health", "Business", "Communications & Journalism", "Law & Public Policy", "Arts", "Social Science", "Biology & Life Science", "Education", "Humanities & Liberal Arts", "Psychology & Social Work", "Interdisciplinary"],
"range": ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#ff9896", "#9edae5", "#aec7e8", "#f7b6d2", "#ffbb78", "#98df8a"]
}
},
"value": "#d3d3d3"
},
"tooltip": [
{"field": "Major", "type": "nominal"},
{"field": "ShareMen", "type": "quantitative", "format": ".2%", "title": "Share of Men"}
]
}
}
]
}
- gnuplot: back arrow-style inconsistent with multiplot
- Specifying Color of Columns in MS Access Histogram Chart
- Using BFS for Weighted Graphs
- Removing a node in an undirected graph that destroys a path between two other nodes
- Interactive Graphviz graphs in a web application
- How to get red/green solid candlestick in eCharts graph
- NetworkX: how to add weights to an existing G.edges()?
- "add_transition() argument after ** must be a mapping, not str" : transitions python library
- Breadth First Search time complexity analysis
- Horn SAT algorithm using graphs
- Is there a way to build an interactive node graph in JavaScript?
- how to use gnuplot with one x and several y
- ggpplot2 join all points in a graph with a line
- ChartJS Bar chart - Modify legend
- How to draw a custom inclined line on Chartjs
- Microsoft Graph API, Add SharePoint List Item suddenly throws exception for null strings
- JpGraph: How to control x/y offset, margins and color in v3.5.0b1 when using AccBarPlot?
- matplotlib graphs: how to connect with lines points if there are emply values in a column
- How to calculate the maximum concurrency of nodes in a DAG?
- Matplotlib and Networkx - drawing a self loop node
- Visualization of Graphs Data
- Visualize a clickable graph in an HTML page
- Flutter fl_chart LineChart erroring out with more than a 4 day data differential
- Relationship between dpi and figure size
- Why is graph in Networkx pointing arrows in the wrong direction?
- Prevent recursive CTE visiting nodes multiple times
- How can I write a SQLAlchemy query that will return all descendants of a node in a graph?
- One way to construct graph adjacency list based on adjacency pairs similar to `fold` in MIT Scheme
- Distance between two nodes in a tree weighted
- What algorithm to use to determine minimum number of actions required to get the system to "Zero" state?