How do I cause VEGA to resize in response to input changes in a VEGA Visualization

Question

I am creating a VEGA visualization with an input bound to a signal. As I change the input, the height of the graph on the web page on the webpage may get larger, but VEGA does not resize the canvas so the rows beyond the original height do not display.

Here is a paired down example showing the issue. Increase the director_count to see the issue. We are using Vega-embed to embed this into a web page, and in our real example we are showing a lot more data and a much more complicated visualization so the ability to scroll down to the bottom even when the input has changed is very important

Answer 1

Try setting a height signal. Something like:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Sample chart showing Vega does not resize canvas in response to height changes",
  "width": 500,
  "padding": 5,
  "signals": [
    {"name": "height", "update": "director_count*20"},
    {
      "name": "director_count",
      "value": 20,
      "bind": {"input": "range", "min": 10, "max": 100, "step": 1}
    },
    {
      "name": "op",
      "value": "average",
      "bind": {"input": "select", "options": ["average", "median", "sum"]}
    },
    {
      "name": "label",
      "value": {"average": "Average", "median": "Median", "sum": "Total"}
    }
  ],
  "title": {
    "text": {"signal": "'Top Directors by ' + label[op] + ' Worldwide Gross'"},
    "anchor": "start",
    "frame": "group"
  },
  "data": [
    {
      "name": "source",
      "url": "data/movies.json",
      "transform": [
        {
          "type": "filter",
          "expr": "datum.Director != null && datum['Worldwide Gross'] != null"
        }
      ]
    },
    {
      "name": "ranks",
      "source": "source",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["Director"],
          "ops": [{"signal": "op"}],
          "fields": ["Worldwide Gross"],
          "as": ["Gross"]
        },
        {
          "type": "window",
          "sort": {"field": "Gross", "order": "descending"},
          "ops": ["row_number"],
          "as": ["rank"]
        }
      ]
    },
    {
      "name": "directors",
      "source": "source",
      "transform": [
        {
          "type": "lookup",
          "from": "ranks",
          "key": "Director",
          "values": ["rank"],
          "fields": ["Director"]
        },
        {
          "type": "formula",
          "as": "Category",
          "expr": "datum.rank < director_count ? datum.Director : 'All Others'"
        },
        {
          "type": "joinaggregate",
          "groupby": ["Category"],
          "ops": [{"signal": "op"}],
          "fields": ["Worldwide Gross"],
          "as": ["Gross"]
        }
      ]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "directors"},
      "encode": {
        "update": {
          "x": {"scale": "x", "value": 0},
          "x2": {"scale": "x", "field": "Gross"},
          "y": {"scale": "y", "field": "Category"},
          "height": [{"scale": "y", "band": 1}]
        }
      }
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "directors", "field": "Gross"},
      "range": "width",
      "nice": true
    },
    {
      "name": "y",
      "type": "band",
      "domain": {
        "data": "directors",
        "field": "Category",
        "sort": {"op": "max", "field": "Gross", "order": "descending"}
      },
      "range": {"step": 20},
      "padding": 0.1
    }
  ],
  "axes": [
    {"scale": "x", "orient": "bottom", "format": "$,d", "tickCount": 5},
    {"scale": "y", "orient": "left"}
  ]
}