Vega-responsive autoresize

3,520 views
Skip to first unread message

Philipp Kats

unread,
Jan 28, 2018, 6:58:55 PM1/28/18
to vega-js
I am trying to develop a mobile-friendly visualization with Vega.  In my case, it means it should fit window's size or max-size, defined with css.  I was able to achieve
this for the html wrap, including custom heading, paddings, etc. the dataviz container by default has no size.

When I add vega, the auto resize and "fit" properties seems not to work: I have to define the height (which is ok) and width (which is not ok) manually, and they won't update when the window size is smaller, no matter what. What am I doing wrong, and which direction to take?  

Here is a piece of vega file:

"autosize": {"type": "pad",
               "resize": true,
               "contains": "padding"},
  "width": 750,
  "height": 300,


 and corresponding css:

div.Container-Data {
  max-width: 746px;
  width: 100%;
  height: 100%;
  margin: 35px;
}

Dominik Moritz

unread,
Jan 29, 2018, 2:38:11 AM1/29/18
to Philipp Kats, vega-js

Autosize does not automatically resize the chart based in the container. You need to listen for size changes and set the width and height signals through the Vega view API.


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

Philipp Kats

unread,
Jan 29, 2018, 10:31:35 AM1/29/18
to vega-js
Do you mean adding explicit javascript listeners or I can somehow do that within the specification? 

Dominik Moritz

unread,
Jan 29, 2018, 11:25:29 AM1/29/18
to Philipp Kats, vega-js

Yes, you need to add JS listeners since the spec doesn't have access to the DOM around the visualization.

If you only want to support small changes of the scale, you can also use CSS and scale a Vega visualization like any image.

Philipp Kats

unread,
Jan 29, 2018, 12:29:36 PM1/29/18
to Dominik Moritz, vega-js
Well, actually it looks like it is possible within the spec, using `containerSize()` expression.
I was able to register a signal with up-to-date container width.  

I still can't bind width to this signal, however (and not sure why).




‌
Sent with Mailtrack

Philipp Kats

unread,
Feb 1, 2018, 9:57:02 AM2/1/18
to Dominik Moritz, vega-js
So, here is supposed-to-work example https://github.com/vega/vega/blob/master/test/specs-valid/panzoom.vg.json,
Resize indeed works this way,
Yet it does not allow me to `fit` legends and axes


‌
Sent with Mailtrack

Dominik Moritz

unread,
Feb 1, 2018, 12:52:50 PM2/1/18
to Philipp Kats, vega-js

The size in Vega usually determines the dimensions of the chart area without axes and legends. You can use autosize `fit` and no padding to change that.

Philipp Kats

unread,
Feb 6, 2018, 6:12:41 PM2/6/18
to vega-js
that does not work for me... 
also, I wonder if this can work for vega-lite (expressions + signals)?

Philipp Kats

unread,
Feb 6, 2018, 6:24:51 PM2/6/18
to vega-js
this below works perfectly, 
except when using grid (or maybe some interaction) -- in this case width of each plot skyrockets. Any ideas on how I can resolve that / ensure responsiveness works for all the charts, vega and vega-lite?

(I am using this example for the grid issue)

 

$(window).on('resize', function() {
//     // assume I have an element and viewInstance variables representing
//     // the container, and vega View instance, respectively.
    const element = $('div#Container-Data')
    const w = element.width();
    console.log(element, w);
    VIEW.width(w).run();
    console.log(VIEW.getState());

});



‌
Sent with Mailtrack

You received this message because you are subscribed to a topic in the Google Groups "vega-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/vega-js/YovF3RvlnRg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vega-js+u...@googlegroups.com.

Banu Prakash

unread,
Feb 7, 2018, 10:12:36 AM2/7/18
to vega-js
Here's a penI've created for you by making div responsive. This might help:



Also these could server as input to you:

PS: I was lost at keeping the encode definitions in enter. Took some time to realize that issue.
Remember resizing happens only if in update blocks.

Banu Prakash

unread,
Feb 7, 2018, 10:14:31 AM2/7/18
to vega-js
Also the spec:

{
  "width": 200,
  "height": 200,

  "data": [
    {
      "name": "table",
      "values": [12, 23, 47, 6, 52, 19],
      "transform": [{"type": "pie", "field": "data"}]
    }
  ],

  "signals": [
      {
      "name": "width",
      "value": "",
      "on": [
        {
          "events": {
            "source": "window",
            "type": "resize"
          },
          "update": "containerSize()[0]*0.95"
        }
      ]
    },
    {
      "name": "height",
      "value": "",
      "on": [
        {
          "events": {
            "source": "window",
            "type": "resize"
          },
          "update": "containerSize()[1]*0.95"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "r",
      "type": "sqrt",
      "domain": {"data": "table", "field": "data"},
      "zero": true,
      "range": [
        {
          "signal": "width*0.03"
        },
        {
          "signal": "width*0.50"
        }
      ]
    }
  ],

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "update": {
          "x": {"signal": "width / 2"},
          "y": { "signal": "height / 2"},
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "outerRadius": {"scale": "r", "field": "data"},
          "stroke": {"value": "#fff"},
          "fill": {"value": "#ccc"}
        },
       
        "hover": {
          "fill": {"value": "pink"}
        }
      }
    }
  ]
}
Reply all
Reply to author
Forward
0 new messages