My sample source code is following
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28000}, {"a": "B", "b": 55000},
{"a": "C", "b": 43000}, {"a": "D", "b": 91000},
{"a": "E", "b": 81000}, {"a": "F", "b": 53000},
{"a": "G", "b": 19000}, {"a": "H", "b": 87000},
{"a": "I", "b": 52000}
]
},
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
},
"layer": [{
"mark": "bar"
},
{
"mark":{
"type":"text",
"align":"center",
"baseline":"middle",
"dx":0,
"dy":-5
} ,
"encoding":{
"text":{"field":"b","type":"quantitative"}
}
}
]
}
I want the text marks to be dynamically displayed in SI units. So in my example, 28k, 55k, 43k so an so forth.
How can I do that in Vega-lite?
Add formatter in your text as done below or in editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28000},
{"a": "B", "b": 55000},
{"a": "C", "b": 43000},
{"a": "D", "b": 91000},
{"a": "E", "b": 81000},
{"a": "F", "b": 53000},
{"a": "G", "b": 19000},
{"a": "H", "b": 87000}
]
},
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
},
"layer": [
{"mark": "bar"},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": 0,
"dy": -5
},
"encoding": {
"text": {"field": "b", "type": "quantitative", "format": ".2s"}
}
}
]
}
Edits
To provide different formats on different value ranges you can simply perform calculate transform and create the formatted values based on conditions. Then, simply use the value field as your text as done below or refer editor.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28000},
{"a": "B", "b": 55000},
{"a": "C", "b": 43000},
{"a": "D", "b": 91000},
{"a": "E", "b": 81000},
{"a": "F", "b": 53000},
{"a": "G", "b": 19000},
{"a": "H", "b": 87000},
{"a": "I", "b": 523399}
]
},
"transform": [
{
"calculate": "datum.b > 99999 ? format(datum.b,'.3s') : format(datum.b,'.2s')",
"as": "textValue"
}
],
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
},
"layer": [
{"mark": "bar"},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": 0,
"dy": -5
},
"encoding": {"text": {"field": "textValue"}}
}
]
}
You can refer the documentation to know more about number format or check the tests file on github
Related
The vega-lite code at the end considers every instance of the column "c" as a unique value and adds a corresponding separate entry to the legend like so:
I need to have only 3 colors in this case: red, blue and yellow - no combinations such as "blue, red". The decision logic would be 50-50, for example: if "blue" has a value of 3 and "blue, red" has a value of 4, the latter would be split into 2 for blue and 2 for red, totalling 5 (3+2) "blue" and 2 "red". If "blue, red" were 5 it would have 2.5 and 2.5 etc.
Here is the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"a": "A", "b": 2, "c": "red, blue"},
{"a": "A", "b": 7, "c": "yellow, blue"},
{"a": "A", "b": 4, "c": "blue, red"},
{"a": "B", "b": 1, "c": "blue"},
{"a": "B", "b": 2, "c": "red"}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"},
"color": {"field": "c", "type": "nominal"}
}
}
After performing some transformations like fold, calculate and filter, you will be able to achieve the desired result, below in the snippet or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 200,
"data": {
"values": [
{"a": "A", "b": 2, "c": "red, blue"},
{"a": "A", "b": 7, "c": "yellow, blue"},
{"a": "A", "b": 4, "c": "blue, red"},
{"a": "B", "b": 1, "c": "blue"},
{"a": "B", "b": 2, "c": "red"}
]
},
"transform": [
{"fold": ["red", "blue", "yellow"]},
{
"calculate": "indexof(datum.c,datum.key) ? datum.b/2 : datum.b",
"as": "value"
},
{"filter": "indexof(datum.c,datum.key) > -1"},
{
"joinaggregate": [{"field": "value", "op": "sum", "as": "value_sum"}],
"groupby": ["key", "a"]
}
],
"mark": "bar",
"encoding": {
"tooltip": [{"field": "value_sum"}],
"x": {"field": "a", "type": "nominal"},
"y": {"field": "value", "type": "quantitative"},
"color": {
"field": "key",
"type": "nominal",
"scale": {"range": ["blue", "red", "yellow"]}
}
}
}
Let me know if this works
How can I filter values with multiple conditions based on other columns? In this post, the answer shows how to filter with a single condition using filter transform:
{
"data": {
"values": [
{"a": "A", "b": 2, "c": "red"},
{"a": "A", "b": 7, "c": "yellow"},
{"a": "A", "b": 4, "c": "blue"},
{"a": "B", "b": 1, "c": "blue"},
{"a": "B", "b": 2, "c": "red"}
]
},
"transform": [{"filter": "datum.c == 'red'"}],
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"}
}
}
I want to filter all values with "red" and "blue" in the column c, so no "yellow". I believe the OneOf logical operator needs to be used as shown in the vega documentation, but I can't figure out how. I changed the transform part to:
"transform": [{"field": "c", "oneOf": ["red", "blue"]}],
but that doesn't work in the online vega editor.
The filter transform can be used as string as well as object. While using string type you can give your condition as:
"transform": [{"filter": "datum.c == 'red' || datum.c == 'blue'"}],
And while using object it can be:
"transform": [{"filter": {"field": "c", "oneOf": ["red", "blue"]}}],
Depending on the complexity you can use any of the two types. To answer your question refer the below code or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"a": "A", "b": 2, "c": "red"},
{"a": "A", "b": 7, "c": "yellow"},
{"a": "A", "b": 4, "c": "blue"},
{"a": "B", "b": 1, "c": "blue"},
{"a": "B", "b": 2, "c": "red"}
]
},
"transform": [{"filter": {"field": "c", "oneOf": ["red", "blue"]}}],
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"}
}
}
I'm playing with vega-lite v5 and the new parameters and wanted to change the order of marks using an input element:
Open the Chart in the Vega Editor
Is that possible?
I looked into the examples in the documentation but neither on x's order property or with an order encoding I was able to use the param.
Yes you can do this by sorting the data with a window transform. Although undocumented as of VL 5.1.0, window properties can be parameterised with signal values (and should take expr values with the next update). Here's a working example that separates your input element into the field to sort by and the direction to sort.
Open below example in Vega Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"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": "sortChoice", "value":"x",
"bind": {"input": "select", "options": ["x", "y","-x","-y"]}},
{"name": "sortBy",
"expr":"sortChoice==='x'|| sortChoice==='-x' ? 'a':'b'"},
{"name": "sortOrder",
"expr":"sortChoice==='x'|| sortChoice==='y' ? 'ascending':'descending'"}
],
"transform": [
{
"sort": [
{"field": {"signal": "sortBy"}, "order": {"signal": "sortOrder"}}
],
"window": [{"op": "rank", "as": "sorted"}]
}
],
"mark": "bar",
"encoding": {
"x": {"field": "a", "sort": {"field": "sorted"}},
"y": {"field": "b", "type": "quantitative"}
}
}
The parameter expressions could also be written as
{"name": "sortBy", "expr":"test(/x/, sortChoice) ? 'a':'b'"},
{"name": "sortOrder", "expr":"test(/-/, sortChoice) ? 'descending' : 'ascending'"}
I am wondering how Vega-lite works with respect to tying Marks to associated Encodings.
In the below example, both the encoding and the mark are at the "top-level" of the spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"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}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
And with the simplest layer example, both the bar mark and the text mark are nested in the Layer property
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43}
]
},
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}}
},
"layer": [{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3
},
"encoding": {
"text": {"field": "b", "type": "quantitative"}
}
}]
}
In this case, am I correct to assume that any Mark in the Layer property automatically inherits the encodings at the top-level?
Further, I notice that I cannot move the bar Mark outside of the Layer property (Vega Editor prompts that this is not an allowed property and bars fail to render if placed in top-level).
Finally, in more complicated example still (see: https://vega.github.io/vega-lite/examples/layer_line_mean_point_raw.html), the encodings are repeated in the layer (despite having a redundant x encoding) -> so in this case, when is it appropriate to place encoding at the top level versus in the layer?
The Vega-lite docs go into a fair bit of detail about the configuration of these properties but I have not been able to find a conceptual answer to these 3 questions.
Thank you
Vega-Lite provides a hierarchical chart model, where each level in the hierarchy can override various properties declared in the parent level. In terms of layer specifications, the relevant concepts are this:
a UnitSpec is what you think of as a single chart: it it, you can specify data, mark, encodings, transforms, and other properties.
a LayerSpec, is a container that can hold a number of UnitSpec or LayerSpec specifications in the layers property. Additionally, you can specify data, encodings transforms, and other properties (but not mark).
A UnitSpec that is within a LayerSpec or other top-level object will inherit any properties specified there (such as data, encodings, transforms, etc.), and is also able to override them by specifying its own data, encodings, or transforms.
Similar hierarchical concepts apply to other compound chart types, such as ConcatSpec, VConcatSpec, HConcatSpec, FacetSpec, etc.
More concretely, in your example, the data and some encodings are defined in the top-level layer:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43}
]
},
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}}
},
"layer": [{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3
},
"encoding": {
"text": {"field": "b", "type": "quantitative"}
}
}]
}
In terms of the inheritance from parent, this is functionally equivalent to the following, where I have moved data and encodings from the top-level into each contained UnitSpec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"layer": [{
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43}
]
},
"mark": "bar"
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}}
},
}, {
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43}
]
},
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3
},
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}}
"text": {"field": "b", "type": "quantitative"}
}
}]
}
Specifying shared properties at the top level is a way to make chart specifications more concise and understandable.
I know how to control the spacing of elements within a visualization, and I know how to control the width and height of the visualization. However, is it possible to control the spacing between the visualization and other elements, such as the title or legend?
To customize titles, you can use an object instead of a string. You can learn more about the available options in the docs at https://vega.github.io/vega-lite/docs/title.html.
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "A simple bar chart with embedded data.",
"title": {
"text": "This is an awesome Chart!",
"offset": 20
},
"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}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
If you want to make your chart more compact, you can also use a negative offset.
You can customize legends similarly.
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"data": {
"url": "data/cars.json"
},
"mark": "point",
"encoding": {
"x": {
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon",
"type": "quantitative"
},
"color": {
"field": "Origin",
"type": "nominal",
"legend": {
"labelOffset": 30,
"titleAnchor": "end",
"offset": 30
}
}
}
}