jsonchartsvisualizationvega-litevega
Create Vertical Violin Plot in Vega
i am desperately trying to switch the axis on this Vega Lite violin plot example, but i can not figure it out. Any help is highly appreciated!
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A violin plot example showing distributions for pengiun body mass.",
"width": 500,
"padding": 5,
"config": {
"axisBand": {
"bandPosition": 1,
"tickExtra": true,
"tickOffset": 0
}
},
"signals": [
{ "name": "plotWidth", "value": 60 },
{ "name": "height", "update": "(plotWidth + 10) * 3"},
{ "name": "trim", "value": true,
"bind": {"input": "checkbox"} },
{ "name": "bandwidth", "value": 0,
"bind": {"input": "range", "min": 0, "max": 200, "step": 1} }
],
"data": [
{
"name": "penguins",
"url": "data/penguins.json",
"transform": [
{
"type": "filter",
"expr": "datum.Species != null && datum['Body Mass (g)'] != null"
}
]
},
{
"name": "density",
"source": "penguins",
"transform": [
{
"type": "kde",
"field": "Body Mass (g)",
"groupby": ["Species"],
"bandwidth": {"signal": "bandwidth"},
"extent": {"signal": "trim ? null : [2000, 6500]"}
}
]
},
{
"name": "stats",
"source": "penguins",
"transform": [
{
"type": "aggregate",
"groupby": ["Species"],
"fields": ["Body Mass (g)", "Body Mass (g)", "Body Mass (g)"],
"ops": ["q1", "median", "q3"],
"as": ["q1", "median", "q3"]
}
]
}
],
"scales": [
{
"name": "layout",
"type": "band",
"range": "height",
"domain": {"data": "penguins", "field": "Species"}
},
{
"name": "xscale",
"type": "linear",
"range": "width", "round": true,
"domain": {"data": "penguins", "field": "Body Mass (g)"},
"domainMin": 2000,
"zero": false, "nice": true
},
{
"name": "hscale",
"type": "linear",
"range": [0, {"signal": "plotWidth"}],
"domain": {"data": "density", "field": "density"}
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "penguins", "field": "Species"},
"range": "category"
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "zindex": 1},
{"orient": "left", "scale": "layout", "tickCount": 5, "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "density",
"name": "violin",
"groupby": "Species"
}
},
"encode": {
"enter": {
"yc": {"scale": "layout", "field": "Species", "band": 0.5},
"height": {"signal": "plotWidth"},
"width": {"signal": "width"}
}
},
"data": [
{
"name": "summary",
"source": "stats",
"transform": [
{
"type": "filter",
"expr": "datum.Species === parent.Species"
}
]
}
],
"marks": [
{
"type": "area",
"from": {"data": "violin"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": {"parent": "Species"}}
},
"update": {
"x": {"scale": "xscale", "field": "value"},
"yc": {"signal": "plotWidth / 2"},
"height": {"scale": "hscale", "field": "density"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {
"fill": {"value": "black"},
"height": {"value": 2}
},
"update": {
"x": {"scale": "xscale", "field": "q1"},
"x2": {"scale": "xscale", "field": "q3"},
"yc": {"signal": "plotWidth / 2"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {
"fill": {"value": "black"},
"width": {"value": 2},
"height": {"value": 8}
},
"update": {
"x": {"scale": "xscale", "field": "median"},
"yc": {"signal": "plotWidth / 2"}
}
}
}
]
}
]
}
I already tried switching the axis by swapping xcale and hscale but that always resulted in the violins not showing up or in an empty canvas in general. Can i maybe find a comprehensive guide to defining and managing axis?
Solution
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A violin plot example showing distributions for pengiun body mass.",
"width": 400,
"padding": 5,
"config": {
"axisBand": {"bandPosition": 1, "tickExtra": true, "tickOffset": 0}
},
"signals": [
{"name": "plotWidth", "value": 60},
{"name": "height", "update": "(plotWidth + 10) * 6"}
],
"data": [
{
"name": "penguins",
"url": "data/penguins.json",
"transform": [
{
"type": "filter",
"expr": "datum.Species != null && datum['Body Mass (g)'] != null"
}
]
},
{
"name": "density",
"source": "penguins",
"transform": [
{
"type": "kde",
"field": "Body Mass (g)",
"groupby": ["Species"],
"extent": {"signal": "[2000, 6500]"}
}
]
},
{
"name": "stats",
"source": "penguins",
"transform": [
{
"type": "aggregate",
"groupby": ["Species"],
"fields": ["Body Mass (g)", "Body Mass (g)", "Body Mass (g)"],
"ops": ["q1", "median", "q3"],
"as": ["q1", "median", "q3"]
}
]
}
],
"scales": [
{
"name": "layout",
"type": "band",
"range": "width",
"domain": {"data": "penguins", "field": "Species"}
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"round": true,
"domain": {"data": "penguins", "field": "Body Mass (g)"},
"domainMin": 2000,
"zero": false,
"nice": true
},
{
"name": "hscale",
"type": "linear",
"range": [0, {"signal": "plotWidth"}],
"domain": {"data": "density", "field": "density"}
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "penguins", "field": "Species"},
"range": "category"
}
],
"axes": [
{"orient": "bottom", "scale": "layout", "zindex": 1},
{"orient": "left", "scale": "yscale", "tickCount": 5, "zindex": 1}
],
"marks": [
{
"type": "group",
"from": {
"facet": {"data": "density", "name": "violin", "groupby": "Species"}
},
"encode": {
"enter": {
"xc": {"scale": "layout", "field": "Species", "band": 0.5},
"width": {"signal": "plotWidth"},
"height": {"signal": "width"}
}
},
"data": [
{
"name": "summary",
"source": "stats",
"transform": [
{"type": "filter", "expr": "datum.Species === parent.Species"}
]
}
],
"marks": [
{
"type": "area",
"from": {"data": "violin"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": {"parent": "Species"}},
"orient": {"value": "horizontal"}
},
"update": {
"y": {"scale": "yscale", "field": "value"},
"xc": {"signal": "plotWidth / 2"},
"width": {"scale": "hscale", "field": "density"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {"fill": {"value": "black"}, "width": {"value": 2}},
"update": {
"y": {"scale": "yscale", "field": "q1"},
"y2": {"scale": "yscale", "field": "q3"},
"xc": {"signal": "plotWidth / 2"}
}
}
},
{
"type": "rect",
"from": {"data": "summary"},
"encode": {
"enter": {
"fill": {"value": "black"},
"height": {"value": 2},
"width": {"value": 8}
},
"update": {
"y": {"scale": "yscale", "field": "median"},
"xc": {"signal": "plotWidth / 2"}
}
}
}
]
}
]
}
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices