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"}}
}
}
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"}}
}
]
}
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"}}
}
}
}
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}
}
Currently, the donut chart assumed that the max value is 100%. What I would like is for the category Chinese to have a percentage of 50% with gray arc indicating the missing 50%. The two other donut charts will behave similarly in their respective column.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple donut chart with embedded data.",
"data": {
"values": [
{"category": "English", "value": 4},
{"category": "Malay", "value": 6},
{"category": "Chinese", "value": 10}
]
},
"mark": {"type": "arc", "innerRadius": 80},
"encoding": {
"column": {"field": "category"},
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal"}
},
"view": {"stroke": null}
}
It's a bit more complex, but one way to do this is to use a transform to calculate the total, and then a layer chart to plot that total in the background.
Here is an example (open in editor):
{
"data": {
"values": [
{"category": "English", "value": 4},
{"category": "Malay", "value": 6},
{"category": "Chinese", "value": 10}
]
},
"transform": [
{"joinaggregate": [{"op": "sum", "field": "value", "as": "total"}]}
],
"facet": {"column": {"field": "category"}},
"spec": {
"layer": [
{
"mark": {"type": "arc", "innerRadius": 80, "color": "lightgray"},
"encoding": {"theta": {"field": "total", "type": "quantitative"}}
},
{
"mark": {"type": "arc", "innerRadius": 80},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category"}
}
}
],
"view": {"stroke": null}
}
}
Is it possible to create gauge charts or pointers over pie/donuts in vega lite. Can you guide me to suitable documentation of the same or help with some hints on how to achieve the same
You are probably looking for the documentation on circular/donut plots. In particular, you can do something like:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Proportion of donuts eaten.",
"data": {
"values": [
{"category": "Glazed", "value": 4},
{"category": "Cruller", "value": 6},
{"category": "Boston Creme", "value": 10},
{"category": "Sprinkles", "value": 3},
{"category": "Cronut", "value": 7}
]
},
"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 80},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal", "title": "Type of donut"}
}
}
If you try that in the online editor, you'll get: