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

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

Related

How to remove an item from the legend in Vega-Lite

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

Arcs ordered by size in vega-lite pie chart

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

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

Text overlay in heatmap

Is it possible to overlay text in selectable heatmap
https://vega.github.io/editor/#/examples/vega-lite/selection_heatmap
If I plot a heatmap of actual vs predicted for binary in the selectable heatmap, can I overlay text as True Positives, FP, TN, FN with corresponding values
and turn off legend
Here full code
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"data": {
"values": [
{"actual": "Good", "predicted": "Bad", "count": 6386},
{"actual": "Bad", "predicted": "Good", "count": 1261},
{"actual": "Bad", "predicted": "Bad", "count": 6386},
{"actual": "Good", "predicted": "Good", "count": 24030}
]
},
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"y": {
"field": "actual",
"type": "nominal"
},
"x": {
"field": "predicted",
"type": "nominal"
},
"fill": {
"field": "count",
"type": "quantitative"
},
"config": {
"scale": {
"bandPaddingInner": 0,
"bandPaddingOuter": 0
}
}
}
Output like
Is it possible to extract values from index and feed to count values
"url" : {
"%context%": true,
"index": "index",
"body": {
"size":1000,
"_source": ["modelMetrics"],
}
}
"format": {"property": "hits.hits"}
},
where index has
"_source" : {
"modelMetrics" : {
"TN" : 110868,
"FP" : 6386,
"FN" : 1261,
"TP" : 24030,
}
}
You can do this using a Layered chart construct. For example (view in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"data": {
"values": [
{"actual": "Good", "predicted": "Bad", "label": "FP", "count": 6386},
{"actual": "Bad", "predicted": "Good", "label": "FN", "count": 1261},
{"actual": "Bad", "predicted": "Bad", "label": "TN", "count": 6386},
{"actual": "Good", "predicted": "Good", "label": "TP", "count": 24030}
]
},
"encoding": {
"y": {"field": "actual", "type": "nominal"},
"x": {"field": "predicted", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "rect", "strokeWidth": 2},
"encoding": {
"fill": {"field": "count", "type": "quantitative", "legend": null}
}
},
{
"mark": {"type": "text", "dy": -5},
"encoding": {
"text": {"field": "label", "type": "nominal"},
"color": {
"condition": {"test": "datum.count < 10000", "value": "black"},
"value": "white"
}
}
},
{
"mark": {"type": "text", "dy": 5},
"encoding": {
"text": {"field": "count", "type": "nominal"},
"color": {
"condition": {"test": "datum.count < 10000", "value": "black"},
"value": "white"
}
}
}
],
"width": 100,
"height": 100
}

trim unused outer parts of the axis in vega-lite v3

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