Binding bin step size to interactive widget doesn't work in Vega-Lite

[jonfroehlich]

I spoke with @jheer about this, and he suggested I file a bug. He thinks it's a VL issue rather than a VL JavaScript API issue based...

Here's a fully reproducible example in Observable.

seattleWeather = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType)

{
  const barColorParam = vl.param("bar_color")
    .value('lightblue') // initial value
    .bind(vl.menu(['lightblue', 'violet', 'peachpuff']).name('Bar Color: ')); // add dynamic menu with CSS color names
  
  const cornerRadiusParam = vl.param("bar_corner_radius")
    .value(10) // initial value
    .bind(vl.slider(0, 20, 1).name('Corner radius: ')) // add slider with min, max, step

  const binStepSizeParam = vl.param("bin_step_size")
    .value(5) // initial value
    .bind(vl.slider(1, 20, 1).name('Bin step size: ')) // add slider with min, max, step

  return vl.markBar({color: {expr: 'bar_color'}, 
                     cornerRadius: {expr: 'bar_corner_radius'}})
    .data(seattleWeather)
    .title("Histogram of Daily Max Temperatures in Seattle (2012-2015)")
    .params(barColorParam, cornerRadiusParam, binStepSizeParam)
    .encode(
      vl.x().fieldQ('temp_max').bin({'step' : {expr: 'bin_step_size'}}),
      vl.y().aggregate("count"),
    )
    .render()
}

But perhaps I made a silly error...

[domoritz]

Can you export a minimal Vega-Lite json example? It'll make it easier for us to debug.

[jonfroehlich]

I updated the notebook to include a pure JSON example. Copying below. Note that I've only ever used VL in Observable, so my brain approaches it more from JS than JSON.

{
  "mark": {
    "type": "bar"
  },
  "title": "Histogram of Daily Max Temperatures in Seattle (2012-2015)",
  "data": {
    "values": [
      {
        "date": "2012-01-01T00:00:00.000Z",
        "precipitation": 0,
        "temp_max": 12.8,
        "temp_min": 5,
        "wind": 4.7,
        "weather": "drizzle"
      },
      {
        "date": "2012-01-02T00:00:00.000Z",
        "precipitation": 10.9,
        "temp_max": 10.6,
        "temp_min": 2.8,
        "wind": 4.5,
        "weather": "rain"
      },
      {
        "date": "2012-01-03T00:00:00.000Z",
        "precipitation": 0.8,
        "temp_max": 11.7,
        "temp_min": 7.2,
        "wind": 2.3,
        "weather": "rain"
      },
      {
        "date": "2012-01-04T00:00:00.000Z",
        "precipitation": 20.3,
        "temp_max": 12.2,
        "temp_min": 5.6,
        "wind": 4.7,
        "weather": "rain"
      },
      {
        "date": "2012-01-05T00:00:00.000Z",
        "precipitation": 1.3,
        "temp_max": 8.9,
        "temp_min": 2.8,
        "wind": 6.1,
        "weather": "rain"
      }
    ]
  },
  "params": [
    {
      "name": "bin_step_size",
      "value": 5,
      "bind": {
        "input": "range",
        "min": 1,
        "max": 20,
        "step": 1,
        "name": "Bin step size: "
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "temp_max",
      "type": "quantitative",
      "bin": {
        "step": {
          "expr": "bin_step_size"
        }
      }
    },
    "y": {
      "aggregate": "count"
    }
  }
}

Also, from the VL slack: