Functionality in the vega-lite 2.0 roadmap for multiple attributes on one axis
380 views
Skip to first unread message
Richard Siebeling
Feb 16, 2017, 7:13:19 AM2/16/17
to vega-js
Hi,
will it be possible to have more than two axes in vega-lite 2.0?
Currently in vega-lite it is possible to create a x-axis and a column, sort of creating two axes.
It would be really nice if it will be possible to create more than one x-axis, something shown by Roy in the thread : https://groups.google.com/forum/#!searchin/vega-js/multiple%7Csort:relevance/vega-js/SVAnkzro7Bw/eIsNXrzjGgAJ
For example by specifying multiple x-axes attributes resulting in different layers of the x-axis.
Is something like this on the roadmap?
thanks,
Richard
Roy I
Feb 16, 2017, 1:18:23 PM2/16/17
to vega-js
It is very easy (once you know how) to show nested axis labels in grouped bar chart. Here is a modified version of the Vega 3 beta example grouped-bar.vg.json.
Vega 3.0.0 beta 22
----------------------------
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 300,
"height": 240,
"data": [
{
"name": "table",
"values": [
{"category":"A", "position":0, "value":0.1},
{"category":"A", "position":1, "value":0.6},
{"category":"A", "position":2, "value":0.9},
{"category":"A", "position":3, "value":0.4},
{"category":"B", "position":0, "value":0.7},
{"category":"B", "position":1, "value":0.2},
{"category":"B", "position":2, "value":1.1},
{"category":"B", "position":3, "value":0.8},
{"category":"C", "position":0, "value":0.6},
{"category":"C", "position":1, "value":0.1},
{"category":"C", "position":2, "value":0.2},
{"category":"C", "position":3, "value":0.7}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "height",
"padding": 0.2
},
{
"name": "xscale",
"type": "linear",
"domain": {"data": "table", "field": "value"},
"range": "width",
"round": true,
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "position"},
"range": {"scheme": "redblue"}
}
],
"axes": [
{ "orient": "left",
"scale": "yscale",
"tickSize": 0,
"labelPadding": 25,
"domain": false
},
{"orient": "bottom", "scale": "xscale"}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "facet",
"groupby": "category"
}
},
"encode": {
"enter": {
"y": {"scale": "yscale", "field": "category"}
}
},
"signals": [
{"name": "height", "update": "bandwidth('yscale')"}
],
"scales": [
{
"name": "pos",
"type": "band",
"range": "height",
"domain": {"data": "facet", "field": "position"}
}
],
"axes": [
{
"orient": "left",
"scale": "pos",
"tickSize": 3,
"labelPadding": 2,
"offset": 5
}
],
"marks": [
{
"name": "bars",
"from": {"data": "facet"},
"type": "rect",
"encode": {
"enter": {
"y": {"scale": "pos", "field": "position"},
"height": {"scale": "pos", "band": 1},
"x": {"scale": "xscale", "field": "value"},
"x2": {"scale": "xscale", "value": 0},
"fill": {"scale": "color", "field": "position"},
"fillOpacity": {"value": 0.8}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"encode": {
"enter": {
"x": {"field": "x2", "offset": -5},
"y": {"field": "y", "offset": {"field": "height", "mult": 0.5}},
"fill": {"value": "white"},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"field": "datum.value"}
}
}
}
]
}
]
Kanit Wongsuphasawat
Feb 16, 2017, 2:47:14 PM2/16/17
to Roy I, vega-js
There are many types of chart with multiple axes. We have these two issues in the roadmap.
https://github.com/vega/vega-lite/issues/586 -- This will be in 2.0
https://github.com/vega/vega-lite/issues/214 -- This might come later in 2.x
--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Richard Siebeling
Feb 17, 2017, 4:34:00 AM2/17/17
to Kanit Wongsuphasawat, Roy I, vega-js
thanks for the help, I'll try to use the Vega ones.
Can't wait for the vega-lite 2.0
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages