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:
Related
I'm trying to create a similar dashboard using VegaLite:
My example is in this link
Is there a way to configure the ranges in the dashboard and show it in a similar way as in the screenshot?
In need to devide the pie chart to two ranges:
0<=x<1
X>=1
You could use a binned transform or if you want just two discrete categories then a calculated field works just fine and can also be used in the legend.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with embedded data.",
"data": {
"values": [
{"username": "client1", "value": 4},
{"username": "client2", "value": 0.6},
{"username": "client3", "value": 0},
{"username": "client4", "value": 3},
{"username": "client5", "value": 7},
{"username": "client6", "value": 8}
]
},
"transform": [
{"calculate": "datum.value>=3?'>=3':'<3'" ,"as": "binned"}
]
,
"mark": "arc",
"encoding": {
"theta": {"field": "value", "type": "quantitative", "aggregate": "count" },
"color": {"field": "binned", "type": "nominal"}
}
}
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"}}
}
}
how would i find out how many grouping will result from vega-lite? Sample use cases would be: say .. i want to derive that grouping information to maybe display a message that say "you have too many groupings" or figure out a better color scheme based on number of grouping.
sample vega-lite spec here:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4},
{"category": "b", "value": 6},
{"category": "c", "value": 10},
{"category": "d", "value": 3},
{"category": "e", "value": 7},
{"category": "f", "value": 8},{"category": "f", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal"}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
Assuming your question is "how can I calculate how many unique items are in the category field, you could use joinaggregate transform with the distinct operator to count.
// ... the rest of your spec
"transform": [
{
"joinaggregate": [{
"op": "distinct",
"field": "categories",
"as": "number_of_categories"
}]
}
In your example, the result would be to add a column number_of_categories with a value of 6 to every row in your table.
You can read more about joinaggregate here, and find all the available operators on the aggregate page.
I would like to have image marks surrounding my doughnut chart instead of texts. The example for image marks use x and y for its coordinate. How should I adjust that for a doughnut chart where we work with radius and theta?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "image": url},
{"category": "b", "value": 6, "image": url},
{"category": "c", "value": 10, "image": url},
{"category": "d", "value": 3, "image": url},
{"category": "e", "value": 7, "image": url},
{"category": "f", "value": 8, "image": url}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}],
"view": {"stroke": null}
}
New vega version:
Open the Chart in the Vega Editor
After some trials and reading through the doc, it seems Image Mark cannot be positioned by theta encoding, but the example shows that x and y encodings are supported.
Therefore, I worked out this positioning via simple trigonometry and an extra layer to place the images in the doughnut:
{
"transform": [
{"joinaggregate": [{"op":"sum", "field": "value", "as": "total"}]},
{
"window": [{"op": "sum", "field": "value", "as": "cum"}],
"frame": [null, 0]
},
{"calculate": "cos(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "y"},
{"calculate": "sin(2*PI*(datum.cum-datum.value/2)/datum.total)", "as": "x"}
],
"mark": {"type": "image", "width": 20, "height": 20},
"encoding": {
"url": {"field": "image"},
"x": {"field": "x", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null},
"y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}, "axis": null}
}
}
Yet another Vega Editor
As the order is messed up by the color encoding mentioned in comments below, a new window transform is added to generate an extra ordering field which is provided to color field
Renewed Vega Editor
3 changes were made: (2021-07-16)
Using cos in the calculate of y
Using sin in the calculate of x
Messing up the data value to check if working
Old & Wrong Vega Editor
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}
}
}