Binding data to axis labels

[Harton Wong]

I am trying to bind data to each of the axis labels, so when I hover onto the axis labels and return datum, I get my specific data information

From the Vega Documentation, it stated this 

Each element can be styled using standard Vega Value References, as described in the Marks documentation.

So I was trying this for Axes declaration

    {

      "format": "-s",

      "type": "y",

      "scale": "y-scale",

      "properties": {

        "axis": {"strokeWidth": {"value": 0}},

        "ticks": {"strokeWidth": {"value": 0}},

        "labels": {

          "from": {"data": "yAxisLabelData"},

          "fill": {"value": "#999999"},

          "font": {"value": "Open Sans"},

          "fontSize": {"value": 11},

          "fontWeight": {"value": "normal"}

        }

      }

    }

Along with this Signal

    {

      "name": "LabelTooltip",

      "init": {"data": {}},

      "streams": [

        {

          "type": "text:mouseover",

          "expr": "{data:datum}"

        },

        {

          "type": "text:mouseout",

          "expr": "{data:{}}"

        }

      ]

    },

And yet I did not get the data bind to the axis labels. I believe Vega hard-coded to have axis label bind to scale it uses. Is there a way to get around with this?

Thanks!

Harton 

[Roy I]

Vega 3 beta has new features for axes and legends, including options for "interactive" and "tooltip":

      https://github.com/vega/vega/releases

      https://github.com/vega/vega/blob/master/PORTING_GUIDE.md#axes-and-legends

    

Example:

Vega 3.0.0 beta 22 spec

-----------------------------------

...

  "axes": [

      {

 "orient": "bottom",

"scale": "xscale",

"tickCount": 5, 

"title": {"signal": "'My X-Axis Title'"},

"encode": {

"labels":{

"interactive": true,

"update": {

"fill": {"value": "grey"},

"fillOpacity": {"value": 0.5},

"fontWeight": {"value": "bold"},

"fontSize": {"value": 16},

"angle": {"value": -30},

"tooltip": {"signal": "datum.value < 0.5 ? 'Less than half' : 'More than half' "}

},

"hover": {

"fill": {"value": "red"},

"fillOpacity": {"value": 1.0},

}

}

}

},

...

[Roy I]

Found an easy way to convert axis tick labels in Vega 3 (v3.0.0 beta 22):

1. Create a scale defintion (e.g. "scale_convert") with the axis tick values as "domain" and the desired custom values as "range".

2. In the axes encode.labels.update (shown above), include (e.g.):

"text": {"scale": "scale_convert", "field": "value"}

or:

"text": {"scale": "scale_convert", "signal": "datum.value"}

Example:

On Tuesday, February 21, 2017 at 2:50:28 PM UTC-5, Harton Wong wrote:

[Thomas Sibley]

On Feb 28, 2017, at 07:47 , Roy I <in...@glowingspirit.com> wrote:
> Found an easy way to convert axis tick labels in Vega 3 (v3.0.0 beta 22):
>
> 1. Create a scale defintion (e.g. "scale_convert") with the axis tick values as "domain" and the desired custom values as "range".
>
> 2. In the axes encode.labels.update (shown above), include (e.g.):
> "text": {"scale": "scale_convert", "field": "value"}
> or:

> "text": {"scale": "scale_convert", "signal": "datum.value”}

I’ve used this successfully in the past. One limitation worth pointing out is you have to know the precise tick values that Vega/D3 is going to generate. If the data to be plotted may change, or the viz width/height may change, etc. you may not always get the same ticks, meaning you can’t put the appropriate values in the “scale_convert” domain.

Thomas

[Roy I]

Hi Thomas, Thanks for sharing.

There are many scale types in D3(v4):

      https://github.com/d3/d3/blob/master/API.md#scales-d3-scale

      http://d3indepth.com/scales/

Vega v3 includes most (if not all) of these scale types.

The "scale_convert" domain is not restricted to exact ordinal values that correspond to tick labels. Here is the above example using scale type "threshold":

Vega v3.0.0 beta 22

--------------------

...

"scales": [

  {    "name": "scale_convert",

        "type": "threshold",

         "domain": [0.05, 0.15, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 0.85, 0.95, 1.05],

          "range": ["zero", "10%", "20 percent", "30 pct", "four-tenths", "half", "0.6", "7/10", "8/10", "9/10", "one", ">1"]

   }

...

The original axis with "tickCount" of 2,5 and 10:

The same axis rendered with "scale_convert":

On Tuesday, February 21, 2017 at 2:50:28 PM UTC-5, Harton Wong wrote:

[Thomas Sibley]

You know what, I totally missed that your original message was about Vega 3!  I look forward to using it and the other scale types available.  :-)  All of my work is still with Vega 2 right now.

Thanks for sharing the threshold scale example.

Thomas

--
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.

[Harton Wong]

Thank you so much Roy, for your help!

Unfortunately, same as Thomas, my work is mainly based off Vega 2, and tooltip is exactly the thing I needed. I will try to figure another way in accomplish this in Vega 2 :)