October 18 2022


  • reactive programming
  • signals and events in Vega
  • creating HTML input elements

Reactive Programming

Reactive Programming

  • if a variable changes all other variables that depend on it are automatically updated
  • Events: mouse moves, clicks, etc.

Specific to Vega:

  • signals: variables that change with events

The cost of interaction

Power and Cost

“Interactivity has both power and cost. The benefit of interaction is that people can explore a larger information space than can be understood in a single static image. However, a cost to interaction is that it requires human time and attention. If the user must exhaustively check every possibility, use of the vis system may degenerate into human-powered search.”

Munzner, Tamara. Visualization Analysis and Design (p. 140). CRC Press. Kindle Edition.

Case Study: Broadway Shows

Getting Started

We will be using our line plot for Broadway shows as starter code. We will be adding interaction to the visualization.

Download starter code


  • Signals are the base for interactive behavior.
  • They are reactive, meaning that when an event occurs, signals are re-evaluated – updated signal values are propagated to the rest of the specification (the visualization is re-rendered automatically)


signals: [
            name: "mouseX",
            on: [
                    events: "mousemove",
                    update: "event.x"

You can type view.signal("mouseX"); in your JavaScript console to get the value for the signal.


examples of events
Event What does it capture?
mousemove all mousemove events
*:mousemove events on marks only
rect:mousemove events on any rect marks
@foo:mousemove events on marks named ‘foo’

Using Signals

marks: [
            type: "text",
            encode: {
                enter: {
                    x: { value: 0 },
                    y: { value: 200 }
                update: {
                    x : { signal: "mouseX"},
                    text: { signal: "mouseX"}

Updating signal values

How would describe the event below? When does this signal update? What values does it take?

  name: "displayText",
  value: {},
  on: [
      events: "symbol:mouseover",
      update: "datum"
      events: "symbol:mouseout",
      update: "{}"

Using data-based signal values

You can use signalName.variableName as you would used datum.variableName

x: { signal: "displayText.week_number", scale: "xScale" },

Try creating a text mark that uses the following for the update encoding:

  • displayText.week_number for x
  • displayText.total for y
  • displayText.total for the actual text

Mark conditions

We can use the test property for each property in our marks. Treat the values below as the if and else of the test.

fillOpacity: [
  { test: "displayText.total > 0", value: 1 },
  { value: 0 }

Input Element Binding

The bind property can be used in signals to create an input element defined outside of the visualization.

signals: [
            name: "show",
            value: ['Jersey Boys'],
            bind: {
                input: "select",
                options: ['Jersey Boys', 'Wicked', 'Cats'],

Using signal in filter transform

  type: "filter",
  expr: "datum.show == show || datum.show == 'The Lion King'"

Case Study 2: Yarn Data

The data

You can access the data itself and information on these data on Alice Walsh’s GitHub.

Explore the data, and discuss with a classmate:

  • What questions can you answer about the data?
  • What visualizations can you build to answer these questions?
  • How could interaction help your audience make sense of the data?


  • What data?
  • Why (user intent)?
  • How (visual encoding)?