Wordcloud cursor pointer on hover

Owen Sotomayor

unread,

Mar 20, 2018, 10:40:51 AM3/20/18

to vega-js

It may be a more general issue, but we ran into this on the Vega wordcloud.

1. How can we remove the style "cursor default" from the body tag generated by Vega.

2. How can we assign the style "cursor pointer" on hover for each term.

Thanks in advance for your help.

-Owen

Roy I

unread,

Mar 20, 2018, 5:17:42 PM3/20/18

to vega-js

Here is an example that works the way you described. See "The cursor Signal" at:

https://vega.github.io/vega/docs/signals/

Note: In this example, the cursor value is set to "not-allowed" when not hovering over any text. If the value is set to "none", the cursor will not appear at all but users may find it confusing without some visible cursor.

Vega (v3.2.1) spec

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

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",

  "width": 300,
  "height": 200,
  "padding": 0,
  "autosize": "none",

  "signals": [
    {
      "name": "cursor",
      "value": "not-allowed",
      "on": [
        {
            "events": "@wordcloud_text:mouseover",
            "update": "'pointer'"
        },
        {   "events": "@wordcloud_text:mouseout",
            "update": "'not-allowed'"
        }
      ]
    }
  ],
  
  "data": [
    {
      "name": "table",
      "values": ["Orange","Banana","Apple","Pear","Apple","Banana","Orange","Apple","Orange","Orange","Grape","Dog","Mango","Cat","Papaya"],
      "transform": [
        {
          "type": "countpattern",
          "field": "data",
          "case": "upper",
          "pattern": "[\\w']{3,}",
          "stopwords": "(Cat|Dog)"
        },
        {
          "type": "formula",
          "as": "angle",
          "expr": "[-45, 0, 45][~~(random() * 3)]"
        },
        {
          "type": "formula",
          "as": "weight",
          "expr": "if(datum.text=='VEGA', 600, 300)"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "range": [
        "#d5a928",
        "#652c90",
        "#939597"
      ]
    }
  ],
  "marks": [
    {
      "type": "text",
  
      "name": "wordcloud_text",
      
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "text": {
            "field": "text"
          },
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "alphabetic"
          },
          "fill": {
            "scale": "color",
            "field": "text"
          }
        },
        "update": {
          "fillOpacity": {
            "value": 1
          }
        },
        "hover": {
          "fillOpacity": {
            "value": 0.5
          }
        }
      },
      "transform": [
        {
          "type": "wordcloud",
          "size": [{"signal": "width"}, {"signal": "height"}],
          "text": {
            "field": "text"
          },
          "rotate": {
            "field": "datum.angle"
          },
          "font": "Helvetica",
          "fontSize": {
            "field": "datum.count"
          },
          "fontWeight": {
            "field": "datum.weight"
          },
          "fontSizeRange": [12, 56],
          "padding": 2
        }
      ]
    }
  ]
}

Owen Sotomayor

unread,

Mar 23, 2018, 3:34:53 PM3/23/18

to vega-js

Thanks for your reply, Roy.

Owen Sotomayor

unread,

Mar 23, 2018, 4:22:09 PM3/23/18

to vega-js

Thanks for your suggestion, roy.

it works, but in in unusual and off-standard way: it applies an inline cursor style to the body tag, and it switches it to ‘pointer’ when hovering a wordcloud term.

Thee wordcloud graph is embedded in an html page with other elements and graphs, so we tried to change the "not-allowed” as the default to an empty value, and it worked, but still switching the cursor style for the whole page - which we believe is not a good practice.

mostly, we would like to remove any inline style added by vega to the body tag, so that vega acts on its graphs only - we could control the mouse over with a plain (and standard) css declaration as we are doing now.

Roy I

unread,

Mar 23, 2018, 4:54:12 PM3/23/18

to vega-js

The "not-allowed" cursor style was just an example. You can set the cursor to "default":

  "signals": [
    {
      "name": "cursor",
      "value": "default",

      "on": [
        {
            "events": "@wordcloud_text:mouseover",
            "update": "'pointer'"
        },
        {   "events": "@wordcloud_text:mouseout",

            "update": "'default'"
        }
      ]
    }
  ],

On Tuesday, March 20, 2018 at 10:40:51 AM UTC-4, Owen Sotomayor wrote:

giovanni...@agile-innovations.net

unread,

Mar 24, 2018, 6:03:27 AM3/24/18

to vega-js

thanks for your reply, Roy

we did in fact use an empty value - so the 'default' cursor was being set.

but the point is: Vega apparently adds and manages cursors through an inline style assigned to the body tag - affecting the whole page instead of just its own graph elements.

since we prefer using a generic style for hovered elements (from your example: .wordcloud_text { cursor: pointer; }) we would like to know if there's a way to prevent Vega from adding 'style="cursor: default;"' to the body tag on page load (and subsequent mouseover and mouseout events)

Reply all

Reply to author

Forward