I would like to align to the bottom all the header titles of my facet columns.
This is my code
And I get the below result, the titles are not aligned downwards, each one has a different distance from the graphic bottom.
How to align these titles to the bottom?
Thank you
Looks like a bug. Can you raise it on GitHub? Here is a workaround.
{
"data": {"name": "data-eb2eb4918524c908955f7797d7245a00"},
"facet": {
"column": {
"field": "f",
"header": {"labelOrient": "bottom", "labelFontSize": 20, "title": ""}
}
},
"spec": {
"layer": [
{
"mark": {"type": "arc", "outerRadius": 100},
"encoding": {
"color": {
"field": "k",
"legend": {"title": ""},
"sort": {"field": "n"},
"type": "nominal"
},
"theta": {"field": "v", "stack": true, "type": "quantitative"}
}
},
{
"mark": {"type": "text", "fill": "black", "radius": 115},
"encoding": {
"color": {
"field": "k",
"legend": {"title": ""},
"sort": {"field": "n"},
"type": "nominal"
},
"text": {"field": "v", "format": ",.1f", "type": "quantitative"},
"theta": {"field": "v", "stack": true, "type": "quantitative"}
}
}
]
},
"resolve": {"scale": {"theta": "independent"}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
"datasets": {
"data-eb2eb4918524c908955f7797d7245a00": [
{"n": 1, "f": "Non Forest", "k": "N", "v": 32.20114689016321},
{"n": 2, "f": "Non Forest", "k": "E", "v": 22.30554330245552},
{"n": 3, "f": "Non Forest", "k": "S", "v": 14.350830760182326},
{"n": 4, "f": "Non Forest", "k": "W", "v": 31.14247904719894},
{"n": 5, "f": "Forest", "k": "N", "v": 24.525745257452574},
{"n": 6, "f": "Forest", "k": "E", "v": 20.460704607046072},
{"n": 7, "f": "Forest", "k": "S", "v": 21.00271002710027},
{"n": 8, "f": "Forest", "k": "W", "v": 34.010840108401084},
{"n": 9, "f": "Unclassified", "k": "N", "v": 29.437706725468576},
{"n": 10, "f": "Unclassified", "k": "E", "v": 32.08379272326351},
{"n": 11, "f": "Unclassified", "k": "S", "v": 16.427783902976845},
{"n": 12, "f": "Unclassified", "k": "W", "v": 22.05071664829107}
]
}
}
Related
What would a Deneb (Vega Lite) specification look like to draw a line chart like this + horizontal and vertical line with a custom label where those horizontal and vertical lines meet the axis?
Okay, so this was my attempt. I need help - do not know how to add labels where the horizontal and vertical lines meet the y and x axis?
{
"data": {
"values": [
{"date": "2010-01-01", "price": "300", "source": "A"},
{"date": "2011-01-01", "price": "315", "source": "A"},
{"date": "2012-01-01", "price": "285", "source": "A"},
{"date": "2013-01-01", "price": "345", "source": "A"},
{"date": "2014-01-01", "price": "365", "source": "A"},
{"date": "2015-01-01", "price": "385", "source": "A"},
{"date": "2016-01-01", "price": "415", "source": "A"},
{"date": "2017-01-01", "price": "400", "source": "A"},
{"date": "2018-01-01", "price": "380", "source": "A"},
{"date": "2019-01-01", "price": "270", "source": "A"},
{"date": "2020-01-01", "price": "325", "source": "A"},
{"date": "2021-01-01", "price": "345", "source": "A"},
{"date": "2022-01-01", "price": "360", "source": "A"},
{"date": "2015-01-01", "price": "385", "source": "B"},
{"date": "2010-01-01", "price": "385", "source": "B"},
{"date": "2015-01-01", "price": "385", "source": "C"},
{"date": "2015-01-01", "price": "0", "source": "C"}
]
},
"layer" : [
{
"width": 500,
"height": 250,
"mark": "line",
"transform": [{"filter": "datum.source==='A'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"mark": {"type":"line", "strokeDash": [3,1]},
"transform": [{"filter": "datum.source==='B'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"mark": {"type":"line", "strokeDash": [3,1]},
"transform": [{"filter": "datum.source==='C'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
}
]
}
Try this.
{
"data": {
"values": [
{"date": "2010-01-01", "price": "300", "source": "A"},
{"date": "2011-01-01", "price": "315", "source": "A"},
{"date": "2012-01-01", "price": "285", "source": "A"},
{"date": "2013-01-01", "price": "345", "source": "A"},
{"date": "2014-01-01", "price": "365", "source": "A"},
{"date": "2015-01-01", "price": "385", "source": "A"},
{"date": "2016-01-01", "price": "415", "source": "A"},
{"date": "2017-01-01", "price": "400", "source": "A"},
{"date": "2018-01-01", "price": "380", "source": "A"},
{"date": "2019-01-01", "price": "270", "source": "A"},
{"date": "2020-01-01", "price": "325", "source": "A"},
{"date": "2021-01-01", "price": "345", "source": "A"},
{"date": "2022-01-01", "price": "360", "source": "A"},
{"date": "2015-01-01", "price": "385", "source": "B"},
{"date": "2010-01-01", "price": "385", "source": "B"},
{"date": "2015-01-01", "price": "385", "source": "C"},
{"date": "2015-01-01", "price": "0", "source": "C"}
]
},
"width": 500,
"height": 250,
"layer": [
{
"mark": "line",
"transform": [{"filter": "datum.source==='A'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"mark": {"type": "line", "strokeDash": [3, 1]},
"transform": [{"filter": "datum.source==='B'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"mark": {"type": "line", "strokeDash": [3, 1]},
"transform": [{"filter": "datum.source==='C'"}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"}
}
},
{
"data": {"values": [{}]},
"mark": {
"type": "text",
"text": "Label A",
"dx": -50,
"dy": 0,
"color": "red"
},
"encoding": {"x": {"datum": {"year": 2010}}, "y": {"datum": 385}}
},
{
"data": {"values": [{}]},
"mark": {
"type": "text",
"text": "Label B",
"dx": 0,
"dy": 30,
"color": "red"
},
"encoding": {"x": {"datum": {"year": 2015}}, "y": {"datum": 0}}
}
]
}
I am trying to create a histogram of a binomial distribution PMF using a vega js specification.
How is this usually done? The vega expressions does not include functions for choose, or factorial, nor does it include a binomial distribution under the statistical functions.
I also cannot seem to reference other functions within the vega specification (i.e. for yval below).
"data":[
{"name": "dataset",
"transform": [
{"type":"sequence", "start": 1, "stop": 50, "step": 1, "as": "seq" },
{"type": "formula", "as": "xval", "expr": "if(datum.seq<nval,datum.seq,NaN)"},
{"type": "formula", "as": "yval", "expr": "math.factorial(datum.xval)
" }
]}],
Thanks.
There is no factorial operation available, but one suitable option might be to approximate it with Stirling's approximation, or perhaps a Stirling series if more accuracy is required.
For example, in Vega-Lite (view in editor):
{
"data": {
"values": [
{"n": 0, "factorial": 1},
{"n": 1, "factorial": 1},
{"n": 2, "factorial": 2},
{"n": 3, "factorial": 6},
{"n": 4, "factorial": 24},
{"n": 5, "factorial": 120},
{"n": 6, "factorial": 720},
{"n": 7, "factorial": 5040},
{"n": 8, "factorial": 40320},
{"n": 9, "factorial": 362880},
{"n": 10, "factorial": 3628800}
]
},
"transform": [
{
"calculate": "datum.n == 0 ? 1 : sqrt(2 * PI * datum.n) * pow(datum.n / E, datum.n)",
"as": "stirling"
},
{"fold": ["factorial", "stirling"]}
],
"mark": "point",
"encoding": {
"x": {"field": "n", "type": "quantitative"},
"y": {"field": "value", "type": "quantitative", "scale": {"type": "log"}},
"color": {"field": "key", "type": "nominal"}
}
}
I've been trying for the last few days to rename the legend labels on my vega-lite chart.
Normally these labels match their respective data field names. I have a case where I'd like to give them a more descriptive name, but without renaming the original data names.
A simplified example:
vl.markLine()
.data([
{ t:1, v:5, c:'a' }, { t:2, v:3, c:'a' }, { t:3, v:7, c:'a' },
{ t:1, v:6, c:'b' }, { t:2, v:8, c:'b' }, { t:3, v:2, c:'b' }
])
.encode(
vl.x().fieldQ('t'),
vl.y().fieldQ('v'),
vl.color().fieldN('c')
)
.render()
How can I rename 'a' and 'b' in the legend, without changing the original data?
(I'm using the javascript API but will be happy with a JSON solution too).
I'd like to find a way that doesn't involve just copying and mapping all the data to another variable name just for the sake of the legend labels.
I've yet to find a way of manually entering the legend labels as something like "labels": ['long name for a', 'long name for b'].
There are two possible approaches to this. You can either use a calculate transform to modify the values within the data stream (open in editor):
{
"data": {
"values": [
{"t": 1, "v": 5, "c": "a"},
{"t": 2, "v": 3, "c": "a"},
{"t": 3, "v": 7, "c": "a"},
{"t": 1, "v": 6, "c": "b"},
{"t": 2, "v": 8, "c": "b"},
{"t": 3, "v": 2, "c": "b"}
]
},
"transform": [
{"calculate": "{'a': 'Label A', 'b': 'Label B'}[datum.c]", "as": "c"}
],
"mark": "line",
"encoding": {
"x": {"field": "t", "type": "quantitative"},
"y": {"field": "v", "type": "quantitative"},
"color": {"field": "c", "type": "nominal"}
}
}
or you can use a labelExpr to define new labels, referencing the original label as datum.label (open in editor):
{
"data": {
"values": [
{"t": 1, "v": 5, "c": "a"},
{"t": 2, "v": 3, "c": "a"},
{"t": 3, "v": 7, "c": "a"},
{"t": 1, "v": 6, "c": "b"},
{"t": 2, "v": 8, "c": "b"},
{"t": 3, "v": 2, "c": "b"}
]
},
"mark": "line",
"encoding": {
"x": {"field": "t", "type": "quantitative"},
"y": {"field": "v", "type": "quantitative"},
"color": {
"field": "c",
"type": "nominal",
"legend": {"labelExpr": "{'a': 'Label A', 'b': 'Label B'}[datum.label]"}
}
}
}
The benefit of the former approach is that it changes the values everywhere (including in, e.g. tooltips). The benefit of the latter approach is that it's more efficient, because it only does the transform once per unique label.
I was wondering how I could have a sort of hconcat in vega lite, but with two separate datasets. I want to have the top 10 and lower 10 values displayed next to each other with different constraints but I am having issues with the filter.
Data and transforms can be specified at any level of the chart, and they are passed down to subcharts when applicable. Here is an example adapted from Filtering Top K Items in the example gallery, which applies a different filter to each concatenated chart (view in editor):
{
"data": {
"values": [
{"student": "A", "score": 100},
{"student": "B", "score": 56},
{"student": "C", "score": 88},
{"student": "D", "score": 65},
{"student": "E", "score": 45},
{"student": "F", "score": 23},
{"student": "G", "score": 66},
{"student": "H", "score": 67},
{"student": "I", "score": 13},
{"student": "J", "score": 12},
{"student": "K", "score": 50},
{"student": "L", "score": 78},
{"student": "M", "score": 66},
{"student": "N", "score": 30},
{"student": "O", "score": 97},
{"student": "P", "score": 75},
{"student": "Q", "score": 24},
{"student": "R", "score": 42},
{"student": "S", "score": 76},
{"student": "T", "score": 78},
{"student": "U", "score": 21},
{"student": "V", "score": 46}
]
},
"transform": [
{
"window": [{"op": "rank", "as": "rank"}],
"sort": [{"field": "score", "order": "descending"}]
}
],
"vconcat": [
{
"transform": [{"filter": "datum.rank <= 3"}],
"mark": "bar",
"encoding": {
"x": {"field": "score", "type": "quantitative"},
"y": {
"field": "student",
"type": "nominal",
"sort": {"field": "score", "op": "average", "order": "descending"}
}
}
},
{
"transform": [{"filter": "datum.rank > 19"}],
"mark": "bar",
"encoding": {
"x": {"field": "score", "type": "quantitative"},
"y": {
"field": "student",
"type": "nominal",
"sort": {"field": "score", "op": "average", "order": "descending"}
}
}
}
]
}
Similarly, if you wanted a different data source in each subchart, you could specify the "data" property in the subcharts.
For some reason my tooltips are rounded to the nearest integer?
Any help is appreciated.
Here is the link to chart in the VL editor (version 3.0.0-rc14).
(vega editor link)
{
"width": 300,
"height": 300,
"config": {
"title": {"fontSize": 15},
"numberFormat": ".0f",
"style": {
"bar": {"size": 20},
"guide-title": {"value": "asdf", "fontSize": 15},
"guide-label": {"fontSize": 15}
},
"scale": {"bandPaddingInner": 0.5, "bandPaddingOuter": 0.5},
"legend": {"symbolSize": 100, "titleFontSize": 15, "labelFontSize": 15},
"axis": {"titleFontSize": 15, "labelFontSize": 15, "labelLimit": 1000}
},
"data": {"name": "data-dba50c8bae540866b10e6763560b8ec9"},
"mark": "circle",
"encoding": {
"tooltip": [
{"type": "quantitative", "field": "expressiveness"},
{"type": "quantitative", "field": "customization"}
],
"x": {"type": "quantitative", "field": "expressiveness"},
"y": {"type": "quantitative", "field": "customization"}
},
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"datasets": {
"data-dba50c8bae540866b10e6763560b8ec9": [
{"library": "A", "expressiveness": 0, "customization": 1},
{"library": "B", "expressiveness": 0.4, "customization": 0.7},
{"library": "C", "expressiveness": 1, "customization": 0.7},
{"library": "D", "expressiveness": 0.6, "customization": 0.7},
{"library": "E", "expressiveness": 0, "customization": 1}
]
}
}
Because you set "numberFormat": ".0f" in the config, and that's applied to the tooltip too.