Vega-Lite Bind Select Dropdown Example for Parameters

The bind property connects a Vega-Lite parameter to a user interface control. The most common pattern is a dropdown made with bind: { input: "select", options: [...] }, but you can also bind sliders, legends, and scales. This guide starts with a practical select example and then covers the other binding types.

If you want the same pattern inside Kibana, see Kibana Vega-Lite Dropdown Filter Example with params and bind.

What Problems Can Parameter Binding Solve?

Interactivity: Allow users to interact with charts using sliders, dropdowns, and other input elements.
Dynamic Visualization: Enable panning and zooming on charts for better data exploration.
Synchronization: Keep multiple views in sync to show related data simultaneously.

Different Ways to Bind Parameters

Input Element Binding

If you want to add input elements like dropdown menus or sliders to your visualizations, bind is the property you need. The dropdown pattern below is usually the fastest way to filter a chart with a parameter.

Example 1: Select Dropdown Example

This example binds a parameter to a dropdown and filters the chart with the selected value:

{
  "params": [
    {
      "name": "origin",
      "value": "Europe",
      "bind": {
        "input": "select",
        "options": ["USA", "Europe", "Japan"]
      }
    }
  ],
  "transform": [{"filter": "datum.Origin == origin"}],
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"}
  }
}

This pattern maps cleanly to searches like vega-lite params bind input select example because the dropdown, options list, and filter logic are all in one place.

Example 2: Range Inputs

If you want users to control sizes or thresholds, bind the parameter to a slider:

{
  "params": [
    {
      "name": "width",
      "value": 20,
      "bind": {"input": "range", "min": 10, "max": 100, "step": 1}
    },
    {
      "name": "height",
      "value": 50,
      "bind": {"input": "range", "min": 10, "max": 100, "step": 1}
    }
  ],
  "mark": "rect",
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "size": {"field": "value", "type": "quantitative"}
  }
}

Legend Binding

When working with point selections, you can bind a legend to your data fields so users can interact with the chart via the legend.

Example: Interactive Legend

Suppose you have a scatter plot showing different car origins. Users can click on the legend to highlight points from a specific origin:

{
  "selection": {
    "originSelect": {
      "type": "point",
      "fields": ["origin"],
      "bind": "legend"
    }
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "horsepower", "type": "quantitative"},
    "y": {"field": "miles_per_gallon", "type": "quantitative"},
    "color": {"field": "origin", "type": "nominal"}
  }
}

Scale Binding

Scale binding is handy for interval selections, allowing users to pan and zoom within the chart.

Example: Panning and Zooming

Let’s say you have a scatterplot where you want users to zoom in and out and pan around:

{
  "selection": {
    "brush": {"type": "interval", "bind": "scales"}
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "horsepower", "type": "quantitative"},
    "y": {"field": "miles_per_gallon", "type": "quantitative"}
  }
}

Without scale binding

With scale binding

This makes your visualization more interactive and easier to explore.

FAQ

How do I create a Vega-Lite select dropdown example?

Define a parameter in params, give it a default value, and add bind: { input: "select", options: [...] }. Then reference that parameter in a transform filter or an expression.

How do I filter data with a selected dropdown value?

Use the bound parameter inside a filter expression such as {"filter": "datum.Origin == origin"}. The parameter name becomes available inside the expression after the dropdown value changes.

Can `bind` select options come from data?

bind.options is defined explicitly in the spec. If you need dropdown options generated from fetched data, preprocess the option list before rendering the chart, or move to a more advanced Vega or app-level control pattern.

What are the common types of bindings in Vega-Lite?

Input Elements: Sliders, dropdowns, checkboxes for direct user input.
Legends: Clickable legends for category selection.
Scales: Panning and zooming within interval selections.

How do I enable direct manipulation interactions when using bindings?

Direct manipulation (like clicking) is disabled by default when using bindings. You can enable it by specifying the on property and the clear property.

Can I bind multiple fields with different input elements?

Yes, you can specify customized bindings by mapping each projected field or encoding to its own binding definition. For example, you can use different sliders for various fields in a scatterplot.

By harnessing the power of parameter bindings in Vega-Lite, you can make your visualizations far more interactive and engaging for users. Start experimenting with different bindings and transform your data storytelling today!

Resolve Parameter