Arcs ordered by size in vega-lite pie chart - vega-lite

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

Related

Vega-lite display data label in grouped bar chart with multiple measures

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

Vega Lite - change title of legend

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 to show selection / calculated data in vega-lite tooltip?

I'm trying to calculate price difference of a selection in a chart provided in Vega Editor.
The goal is to display a price difference in tooltip calculated as end value of selection - start value of selection. I calculate it as price_diff in my code, however the tooltip is displaying NaN, instead of the actual value.
What do I do wrong? Is it possible to set tooltip fields based on selection? I.e. display hover price when not selected and price difference when range is selected?
Thank you for your help
Try this.
Editor
One issue with your original code is that the selection doesn't snap to the nearest point. If you want to solve that too, you can read more about how to do so here.
{
"width": "container",
"data": {
"values": [
{"date": "2021-04-05T00:00", "price": 163.45},
{"date": "2021-04-06T00:00", "price": 161.75},
{"date": "2021-04-07T00:00", "price": 159.42},
{"date": "2021-04-08T00:00", "price": 162.22},
{"date": "2021-04-09T00:00", "price": 161.175},
{"date": "2021-04-12T00:00", "price": 159.77},
{"date": "2021-04-13T00:00", "price": 159.14},
{"date": "2021-04-14T00:00", "price": 158.495},
{"date": "2021-04-15T00:00", "price": 160.775},
{"date": "2021-04-16T00:00", "price": 159.56},
{"date": "2021-04-19T00:00", "price": 156.965},
{"date": "2021-04-20T00:00", "price": 154.525},
{"date": "2021-04-21T00:00", "price": 158.235},
{"date": "2021-04-22T00:00", "price": 155.33},
{"date": "2021-04-23T00:00", "price": 158.985},
{"date": "2021-04-26T00:00", "price": 160.655},
{"date": "2021-04-27T00:00", "price": 159.51},
{"date": "2021-04-28T00:00", "price": 156.11},
{"date": "2021-04-29T00:00", "price": 158.03},
{"date": "2021-04-30T00:00", "price": 153.155},
{"date": "2021-05-03T00:00", "price": 151.3},
{"date": "2021-05-04T00:00", "price": 151.955}
]
},
"encoding": {
"x": {
"field": "date",
"type": "ordinal",
"timeUnit": "yearmonthdatehoursminutes",
"title": "",
"scale": {"paddingInner": 1, "paddingOuter": 0}
},
"y": {
"field": "price",
"type": "quantitative",
"title": "",
"axis": {"formatType": "number"}
}
},
"layer": [
{
"mark": {
"type": "area",
"line": {"color": "red"},
"color": {
"x1": 1,
"y1": 1,
"x2": 1,
"y2": 0,
"gradient": "linear",
"stops": [
{"offset": 0, "color": "white"},
{"offset": 1, "color": "red"}
]
}
}
},
{
"mark": "point",
"encoding": {
"opacity": {
"condition": {"value": 0.8, "param": "hover", "empty": false},
"value": 0
}
}
},
{
"mark": "rule",
"transform": [
{"filter": {"param": "diff"}},
{
"window": [
{"op": "first_value", "field": "price", "as": "first_price"},
{"op": "last_value", "field": "price", "as": "last_price"}
]
},
{
"calculate": "datum.last_price - datum.first_price",
"as": "price_diff"
}
],
"encoding": {
"opacity": {
"condition": {"value": 0.2, "param": "hover", "empty": false},
"value": 0
},
"tooltip": [
{
"field": "date",
"type": "nominal",
"formatType": "time",
"title": "Date"
},
{
"field": "price",
"type": "quantitative",
"format": "$.2f",
"title": "Price"
},
{
"field": "price_diff",
"type": "quantitative",
"title": "Price difference"
}
]
},
"params": [
{
"name": "hover",
"select": {
"type": "point",
"fields": ["price"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout",
"encodings": ["x"]
}
},
{
"name": "diff",
"select": {"type": "interval", "encodings": ["x"]}
}
]
}
]
}

Is it possible to have columns of donut chart with gray arc indicating the missing part?

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

Filter by selection from referenced table

I have a single data source within datasets that I use in two concatenated charts. Now when I click on a bar in the left chart I would like to filter the right chart. See animated gif:
But is doesn't.
Click here to open in the vega-editor.
Or check the spec here::
{
"config": {"view": {"width": 400, "height": 300}},
"hconcat": [
{
"width": 100,
"selection": {"SELECT": {"type": "single", "resolve": "global"}},
"data": {"name": "table_data"},
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Major_Genre"},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {"type": "nominal", "field": "Major_Genre"},
"fillOpacity": {
"condition": {"selection": "SELECT", "value": 1},
"value": 0.3
}
}
},
{
"width": 100,
"data": {"name": "table_data"},
"transform": [{"filter": {"selection": "SELECT"}}],
"mark": "bar",
"encoding": {
"x": {"type": "nominal", "field": "Major_Genre"},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {"type": "nominal", "field": "Major_Genre"}
}
}
],
"datasets": {
"table_data": [
{
"Title": "Cidade de Deus",
"Major_Genre": "Drama",
"Country_Origin": "Brazil"
},
{
"Title": "Chocolate: Deep Dark Secrets",
"Major_Genre": "Thriller/Suspense",
"Country_Origin": "India"
},
{"Title": "Fiza", "Major_Genre": "Drama", "Country_Origin": "India"},
{
"Title": "First Love, Last Rites",
"Major_Genre": "Drama",
"Country_Origin": "United States"
},
{
"Title": "Foolish",
"Major_Genre": "Comedy",
"Country_Origin": "United States"
},
{
"Title": "I Married a Strange Person",
"Major_Genre": "Comedy",
"Country_Origin": "United States"
}
]
}
}
When your selections refer to groups of points rather than single points, you need to provide an explicit fields or encodings argument to specify what points are included in the selection.
In this case, the chart will behave as expected if you specify your selection in one of the following ways:
"selection": {"SELECT": {"type": "single", "fields": ["Major_Genre"], "resolve": "global"}}
"selection": {"SELECT": {"type": "single", "encodings": ["color"], "resolve": "global"}}
"selection": {"SELECT": {"type": "single", "encodings": ["x"], "resolve": "global"}}
Here's the working chart in action: (vega editor link).