vega lite grouping for pie chart - vega-lite

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.

Related

VegaLite Split Slices and aggregate by ranges

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"}
}
}

Vega-Lite: How do I include image marks in a doughnut chart?

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

Is it possible to turn the clear property of select to "false" for bar graphs?

I have a concatenated graph with two sets of data being displayed. By selecting bars on the left graph you can change the data shown on the right graph. I would like to prevent the user from being able to clear the selection and am trying to set {"select": {"clear": false}} to achieve this, however it is not working. Whenever I click outside of the graph or if I double click on the bars, the selection clears.
I have tried this using an example bar graph in the vega-lite examples page and that is also not working. So I am just wondering if this is not possible for certain types of graphs or if there is a specific way of doing it. I have attached the code for the bar graph that does not work with the clear: false property and for a heatmap that does work.
Not working bar graph:
Vega-lite link to graph: https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AEEABEyTrDsU5kMB3OjEMwaZGMOc7ZZQ3IdtSZpLLKhhBwgnBQ7p7eUMJQANaUhgAUAJKyEDg06nBBTACehgAqSExhSAwA5BCGNLKYcOpIEbrBmHlhlACUiipImCiooMRIggxqaADaoAMg+j1MaABMABwAvgrTaCAAQvNoYmLrm+gAwnuoACwAzEcgMwAi5wCcAIy3MwCi58tvG3dbADFzmIbn8ZgBxc4vJ7vLYACW+AHZYegUsDFqsALrrEA4UxIBAQSagWQEuBbRzOVxYHohMIRNCgNo4cnoHBsWqYHoxOCmLYAMxGIRAq1upIQrJAdPCXKU0oZbI5dRFmKUyHUcUZIGZkpM6h6-JogkEWwAxBcTojlvplrTMOo2HFdYImpqlFAGOoZPrFZyGiKlHBZFA2MpamQtQAPLWG0LKLYoJQ6rZsdRh0kmnF5GM0ONbBZJvIsrYARwYAR0-R0pADIENxoA8nioHRs4MQCHAnRdFq8Y0EFt5bKQMNRqzfiORmM0AAGSigqX2x1wADqNGU9C1nbDOjkxNx+IH6EpLicNKUo+nqAxfz7BIpZ+pw8v46xF6nrJnovdckNEfb0AjKyoAmIEAAKSDKOmZBpLI-qoHOGKikAA
Code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"params": [
{
"name": "highlight",
"select": {"type": "point", "clear": "false"}
},
{"name": "select", "select": "point"}
],
"mark": {
"type": "bar",
"fill": "#4C78A8",
"stroke": "black",
"cursor": "pointer"
},
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"fillOpacity": {
"condition": {"param": "select", "value": 1},
"value": 0.3
},
"strokeWidth": {
"condition": [
{
"param": "highlight",
"value": 2
},
{
"param": "highlight",
"value": 1
}
],
"value": 0
}
},
"config": {
"scale": {
"bandPaddingInner": 0.2
}
}
}
Working heatmap graph:
Vega-lite link:https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEySYUqUMSSCGcCGgDaoJFEwMdaEAEFFIHACc4ymmedXbSqGwazMaAEYAZgBfBRMzC0EPO0dnV0x3dAAhO29ff1QABjCI80t0T3snFzdlKwBhNJ8-NBzwkFN86JTYkoSkm2qMutzGyIKQVKU40sTy1q8azID6vKirYeL4ssru2tQANj6mhfQqkfbVwvXMuf7mtcOV8cXT3obdwYPlsc6X9I2AThCAXTD7EgHEgEAZUMYQLIQXArDAaGQYMIEf4lBA4II4GY0KBMABPHAw9A4Ng0WpeDFAtAAMx0aJCfyUyAcAGtsSA8QSrE4sajMA42My4AB1GjKehoABMALgsm8LlkZDZuLZVJo6ImFwWSg5hMhbAQpMsAIAHiq1YINaMOuVtfjdbJ9YbogDVYIWqBVeqrJ8Uey7VYAI4WPx0NQ0UggAEQPkCwmgbyyFyYdjyTSA4EIWHwxHZ32IHB46m0uBKbS6XVMQSmVkAst6NCyBhugFsHCmOjKtMJpMptltjNZhFIrB2OuEgK1nT17KUMQthzKOAONndui9tP9kGDnPI0dT8eT8u9AEJ1WKtPQHRxkBMJCJgAKSGU8rIAElZLIl3UlLeH0+XwA8gwiTLtktZqgA7my0ZwDgaAACz1CAwIKteGZwResCILquLooIbAQWQTgypW9b0koSDGjQYKgMo+pIKSRaCHS9JAA
Code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"actual": "A", "predicted": "A", "count": 13},
{"actual": "A", "predicted": "B", "count": 0},
{"actual": "A", "predicted": "C", "count": 0},
{"actual": "B", "predicted": "A", "count": 0},
{"actual": "B", "predicted": "B", "count": 10},
{"actual": "B", "predicted": "C", "count": 6},
{"actual": "C", "predicted": "A", "count": 0},
{"actual": "C", "predicted": "B", "count": 0},
{"actual": "C", "predicted": "C", "count": 9}
]
},
"params": [
{"name": "highlight", "select": {"type": "point", "clear": false}}
],
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"y": {"field": "actual", "type": "nominal"},
"x": {"field": "predicted", "type": "nominal"},
"fill": {"field": "count", "type": "quantitative"},
"stroke": {
"condition": {"param": "highlight", "empty": false, "value": "black"},
"value": null
},
"opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
"order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
},
"config": {
"scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
"view": {"step": 40},
"range": {"ramp": {"scheme": "yellowgreenblue"}},
"axis": {"domain": false}
}
}
The difference between heatmap and bar chart seems a bit different from your understanding:
heatmap rects fill up all area on the grid
bar chart leaves some area on the grid outside the bars
As a result, upon clicks outside the grid, both won't clear the selection as you desire. However, clicks on the empty area inside the grid of bar chart emit an event with nothing selected, thus clearing the original selection.
I'm not sure if you know there is a toggle property for select. When it is true, any newly clicked point is inserted to the selection, thus clicking on the empty area adds nothing and preserves your previous selection. BUT, a side effect is that multi selection will be allowed...
"params": [
{"name": "highlight", "select": {"type": "point", "toggle": "true"}},
{"name": "select", "select": {"type": "point", "toggle": "true"}}
],
Last but not least, according to the Doc, clear property specifies an event to clear the selection. Yet, I'm not sure what happens when it is set as false.
clear property identifies which events must fire to empty a selection of all selected value

How to create relative mark positions in Vega LIte

I have a pie chart with width & height set to "container". I would like to label each slice of the pie. Therefore I included a layer and it creates the correct text. However, I don't know how to implement a relative radius size. How would you go about it?
With an absolute radius (e.g. 30) it works, but I need a relative position.
`"layer": [{"mark": {"type": "arc"}},
{"mark": {"type": "text", "radius":30},
"encoding": {"text": {"field": "*", "type": "nominal"}}
}]`
You can create relative radii using an Expression Reference for the radius value.
For example, here is a chart where the radius of the pie chart is set to 40% of the chart size, and the text is set at 45% of the chart size (here I chose to measure the chart size as the minimum of the width and height, which seems reasonable for a circular chart):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.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}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true}
},
"layer": [
{
"mark": {"type": "arc", "radius": {"expr": "0.4 * min(width, height)"}},
"encoding": {"color": {"field": "category", "type": "nominal", "legend": null}}
},
{
"mark": {"type": "text", "radius": {"expr": "0.45 * min(width, height)"}},
"encoding": {"text": {"field": "category", "type": "nominal"}}
}
],
"view": {"stroke": null}
}
(open in editor)

Gauge Charts/ Pointers - Vega lite

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: