Is it possible to remove an item from the legend?
The number of categories in the legend is dynamic, so I can't use manually-entered list of entries for the legend.
If I use
"labelExpr": "datum.label == '_Support' ? null : datum.label",
it will remove the label, but keep its symbol.
Before suppresion
After suppression
I have hidden a symbol for x here:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category": "A", "group": "x", "value": 0.1},
{"category": "A", "group": "y", "value": 0.6},
{"category": "A", "group": "z", "value": 0.9},
{"category": "B", "group": "x", "value": 0.7},
{"category": "B", "group": "y", "value": 0.2},
{"category": "B", "group": "z", "value": 1.1},
{"category": "C", "group": "x", "value": 0.6},
{"category": "C", "group": "y", "value": 0.1},
{"category": "C", "group": "z", "value": 0.2}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "category"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group"},
"color": {
"field": "group",
"legend": {"symbolSize": {"expr": "datum.label=='x'?0:100"}}
}
}
}
Related
I am trying to customize below chart to add data lablel in bars. Can you please help?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/movies.json"
},
"repeat": {"layer": ["Worldwide Gross", "US Gross"]},
"spec": {
"mark": "bar",
"encoding": {
"x": {
"field": "Major Genre",
"type": "nominal"
},
"y": {
"aggregate": "sum",
"field": {"repeat": "layer"},
"type": "quantitative",
"title": "Total Gross"
},
"color": {"datum": {"repeat": "layer"}, "title": "Gross",
"scale": {"range": ["#2a9d8f", "#e76f51"]}},
"xOffset": {"datum": {"repeat": "layer"}}
}
},
"config": {
"mark": {"invalid": null}
}
}
Visualization
Link: https://vega.github.io/editor/#/examples/vega-lite/bar_grouped_repeated
I need to display data label to this grouped bar chart.
Add labels as follows:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"category": "A", "group": "x", "value": 0.1},
{"category": "A", "group": "y", "value": 0.6},
{"category": "A", "group": "z", "value": 0.9},
{"category": "B", "group": "x", "value": 0.7},
{"category": "B", "group": "y", "value": 0.2},
{"category": "B", "group": "z", "value": 1.1},
{"category": "C", "group": "x", "value": 0.6},
{"category": "C", "group": "y", "value": 0.1},
{"category": "C", "group": "z", "value": 0.2}
]
},
"encoding": {
"x": {"field": "category"},
"y": {"field": "value", "type": "quantitative"},
"xOffset": {"field": "group"},
"color": {"field": "group"}
},
"layer": [
{"mark": "bar"},
{
"mark": {"type": "text", "dy": -5},
"encoding": {"text": {"field": "value"}}
}
]
}
how do i change the title of the legend in vega lite?
See here:
https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AEEABBBoIcguIeVyGmQ7CTq7AdzoxDiJnGWrlVpJhUiioBKKigxEiCDGpoANqgUAHkbOoAnmgAjEqR0XBoACwAvgqJyWSpGagATDlRMWgAbCVlmCnpaADMdXlZAAwtIEltFR2oBT0NqJ2Dw+1VYpP5qADss+WVTUtoABxFALolIMjqANZooJhpOMsgjlDBNLKycOoASkjKNAwQaGIDSjgsigbC+sjIFxA9DggUhADMaHBBMo0CBcg0lFcbqiAI4MJCyHSBHSkEBHEGCVLwxHI1FzUYZTHXW6yNgIJ5RMlFIpAA
trying to change the title to "poop", but its just not rendering it.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple donut chart with embedded data.",
"data": {
"values": [
{"category": 1, "value": 4},
{"category": 2, "value": 6},
{"category": 3, "value": 10},
{"category": 4, "value": 3},
{"category": 5, "value": 7},
{"category": 6, "value": 8}
]
},
"mark": {"type": "arc", "innerRadius": 50},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal", "legend":{"title":"My Title"}}
}
}
I'm trying to create a pie chart where the arcs are ordered by size (clockwise), but can't figure out how.
It seems that the "sort" argument in "theta" points to the default order of "color", for example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal"},
"theta": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}
this is the result: arcs are ordered by reverse category name
I can sort the legend ("color") by "value", but no matter what I specify for "sort" of "theta", the arcs won't be sorted by "value" size.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal", "sort": {"field" :"value", "order": "ascending"}},
"theta": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}
this is the result: legend is ordered, arcs still have the same order
It sounds like you want the order encoding. For example (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A pie chart",
"data": {
"values": [
{"category": "Category 1", "value": 4},
{"category": "Category 2", "value": 8},
{"category": "Category 4", "value": 25},
{"category": "Category 0", "value": 12}
]
},
"encoding": {
"color": {"field": "category", "type": "nominal"},
"theta": {"field": "value", "type": "quantitative", "stack": true},
"order": {"field": "value", "type": "quantitative", "sort": "descending"}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 85}}
],
"view": {"stroke": null}
}
How can I "trim" the axis and get rid of that padding on both sides beyond [-101, 225] specifically in Vega-Lite v3 ?
You can use scale.domain along with scale.nice=false. This works both in Vega-Lite v3 and v4. For example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.4.0.json",
"data": {
"values": [
{"label": "A", "value": -101},
{"label": "B", "value": -50},
{"label": "C", "value": 10},
{"label": "D", "value": 116},
{"label": "E", "value": 225}
]
},
"mark": "bar",
"encoding": {
"color": {"field": "label", "type": "nominal"},
"x": {
"field": "value",
"scale": {"domain": [-101, 225], "nice": false},
"type": "quantitative"
},
"y": {"field": "label", "type": "nominal"}
}
}
I was wondering how I could have a sort of hconcat in vega lite, but with two separate datasets. I want to have the top 10 and lower 10 values displayed next to each other with different constraints but I am having issues with the filter.
Data and transforms can be specified at any level of the chart, and they are passed down to subcharts when applicable. Here is an example adapted from Filtering Top K Items in the example gallery, which applies a different filter to each concatenated chart (view in editor):
{
"data": {
"values": [
{"student": "A", "score": 100},
{"student": "B", "score": 56},
{"student": "C", "score": 88},
{"student": "D", "score": 65},
{"student": "E", "score": 45},
{"student": "F", "score": 23},
{"student": "G", "score": 66},
{"student": "H", "score": 67},
{"student": "I", "score": 13},
{"student": "J", "score": 12},
{"student": "K", "score": 50},
{"student": "L", "score": 78},
{"student": "M", "score": 66},
{"student": "N", "score": 30},
{"student": "O", "score": 97},
{"student": "P", "score": 75},
{"student": "Q", "score": 24},
{"student": "R", "score": 42},
{"student": "S", "score": 76},
{"student": "T", "score": 78},
{"student": "U", "score": 21},
{"student": "V", "score": 46}
]
},
"transform": [
{
"window": [{"op": "rank", "as": "rank"}],
"sort": [{"field": "score", "order": "descending"}]
}
],
"vconcat": [
{
"transform": [{"filter": "datum.rank <= 3"}],
"mark": "bar",
"encoding": {
"x": {"field": "score", "type": "quantitative"},
"y": {
"field": "student",
"type": "nominal",
"sort": {"field": "score", "op": "average", "order": "descending"}
}
}
},
{
"transform": [{"filter": "datum.rank > 19"}],
"mark": "bar",
"encoding": {
"x": {"field": "score", "type": "quantitative"},
"y": {
"field": "student",
"type": "nominal",
"sort": {"field": "score", "op": "average", "order": "descending"}
}
}
}
]
}
Similarly, if you wanted a different data source in each subchart, you could specify the "data" property in the subcharts.