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

• 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

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

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.

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

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: "{}"
    }
    
  ]
}

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

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 }
]

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'],
            }
        }
]

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

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?

Consider:

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