Custom text for label axes

[Chung Wu]

Hi all,

On the Axes documentation (https://github.com/trifacta/vega/wiki/Axes), there's a blurb at the bottom of the page:

Custom text can be defined using the "text" property for labels. For example, one could define an ordinal scale that serves as a lookup table from axis values to axis label text.

Can anyone give me an example of how this works? 

Thanks!

Chung

[Marc Prud'hommeaux]

Chung-

Try this example in http://trifacta.github.io/vega/editor/ and you should see how you might use a custom scale for labeling:

{
"width": 400,
"height": 200,
"padding": {"top": 10, "left": 30, "bottom": 100, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
{"x": 7, "y": 19}, {"x": 8, "y": 87},
{"x": 9, "y": 52}, {"x": 10, "y": 48},
{"x": 11, "y": 24}, {"x": 12, "y": 49},
{"x": 13, "y": 87}, {"x": 14, "y": 66},
{"x": 15, "y": 17}, {"x": 16, "y": 27},
{"x": 17, "y": 68}, {"x": 18, "y": 16},
{"x": 19, "y": 49}, {"x": 20, "y": 15}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "data.x"}
},
{
"name": "xlabels",
"type": "ordinal",
"domain": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
"range": ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty"]
},
{
"name": "y",
"range": "height",
"nice": true,
"domain": {"data": "table", "field": "data.y"}
}
],
"axes": [
{
"type": "x",
"scale": "x",
"properties": {
"ticks": {
"stroke": {"value": "steelblue"}
},
"majorTicks": {
"strokeWidth": {"value": 2}
},
"labels": {
"text": {"scale": "xlabels"},
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"axis": {
"stroke": {"value": "#333"},
"strokeWidth": {"value": 1.5}
}
}
},
{"type": "y", "scale": "y"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "data.x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "data.y"},
"y2": {"scale": "y", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
}
]

> --
> 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/groups/opt_out.
>
>

[Chung Wu]

Thanks, that did the trick!

[Chung Wu]

Is it possible to dynamically change the axes label depending on data is being displayed?  

I am creating a vertical bar chart with rotated, vertical labels on each bar.  The method above works, but requires me to know all the labels before hand.

I have also tried creating a "text" mark with the labels instead, but as far as I can tell, there is no way for me to reliably center the text marks on the rect marks (I wish I could say, "x": "data.x" + 0.5 * "band" for the text marks!).  Am I missing something obvious?

Thanks!

Chung

[Marc Prud'hommeaux]

Chung-

On Jun 12, 2013, at 7:39 PM, Chung Wu <chu...@gmail.com> wrote:

Is it possible to dynamically change the axes label depending on data is being displayed?  

I am creating a vertical bar chart with rotated, vertical labels on each bar.  The method above works, but requires me to know all the labels before hand.

I can't think of any way to do this. If the "range" parameter could take a data reference, then you could set up you own data array with a transformed range value for each domain value. But alas, it doesn't appear to be possible. It might be good to file an issue with that request.

I have also tried creating a "text" mark with the labels instead, but as far as I can tell, there is no way for me to reliably center the text marks on the rect marks (I wish I could say, "x": "data.x" + 0.5 * "band" for the text marks!).  Am I missing something obvious?

I also believe that that is a shortcoming, related to an issue I filed: https://github.com/trifacta/vega/issues/64