Interaction Model

In most visualization libraries, interaction is established by binding an event to a DOM element and executing a set of functions on the dataset associated with that element. While this establishes event interaction but trying to achieve the same functionality dynamically (for instance, through an API or some other external event) is quite difficult and sometimes nearly unachievable.

Muze's follows a data driven interaction model . This means that any interaction in Muze occurs due to the data bound to it and not the element itself. Hence, any interaction can be triggered in Muze irrespective of the source of the trigger. Muze achieves this using Firebolt, which is responsible for handling these interactions.

Let's try and understand how this works with the simple cars.json data.

Simple interaction in Muze

Let us start with a simple bar chart, of Miles per Gallon v/s Number of Cylinders in a car:

main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');    
  const env = muze();    
  const canvas = env.canvas();    
  const DataModel = muze.DataModel;  	
  loadData('/static/cars-schema.json').then((schema) => {
    const dataModelInstance = new DataModel(res, schema);
          canvas
          	.width(600)
          	.height(400)
			.rows(['Miles_per_Gallon'])
			.columns(['Cylinders'])
    		.layers([{
              	mark: 'bar'
            }])
			.data(dataModelInstance)
    		.mount(node)
    });
})

Notice, that every time we hover on any of the bars, we get a tooltip displaying the information for that bar. :

Tooltip

It may seem that it is an event driven interaction but that is not what happens here. To understand this, we have to first understand the three aspects of Muze's Interaction Model

Aspects of the Interaction Model

Muze has three aspects. We will deal with them more comprehensively later:

  • Physical Actions: A physical action can trigger an interaction in Muze. Events like hover and click constitute Physical Actions. Additionally, you can define your own set of physical actions
  • Behaviours: Behaviours are how the canvas(es) acts/reacts to a particular interaction. For instance, hovering a bar creates a visual change(tooltip), this is a change from the normal behaviour of the chart.
  • Sideeffects: Sideeffects are the actual visual changes occuring whenever a behaviour changes due to an interaction. For instance, the tooltip that occurs on hover is the side effect.

So how do these aspects fit into the interaction of Muze?

Understanding how the interaction works

Step one: Determining the data set through the physical action

As mentioned earlier, when we hovered over the chart, we triggered an interaction. This is a type of physical action. Once the physical action is executed, it determines the dataset attached to the bar to affect the behaviour of the chart.

Physical Action

For instance, in the example above, we hovered over the bar, the physical action retrieves the dataset attached to it, i.e., the Cylinder value of 3.

Step two: Getting the set of affected rows in the DataModel

Interactions in Muze are data driven. Hence, any interaction affects a set of rows in the DataModel attached to the canvas.

When the physical action retrieves the dataset on interaction, it passes this information by triggering a change in the behaviour and causing a behavioural action.

A behaviour is how the canvas acts/reacts to an interaction. Thus, when it receives a set of data from the physical action(or by dynamic dispatching), it uses the DataModel of the canvas to retrieve the set of rows affected by this dataset.

Behaviours

For instance, in our example, when we hovered over the bar, it retrieves all the rows in the DataModel having the Cylinder value as 3. This way, no matter what appears on the chart, you have control over the dataset since it is bound to the DataModel.

Step three: Applying visual Sideeffects

A behavioural action only determines the set of affected rows. In order to produce a visual change in the chart based on that behaviour, a sideeffect is applied to it. Basically, everytime a behaviour changes, the corresponding side effects get applied based on the affected set of rows from the DataModel.

Sideeffect

Thus, in the example above, the tooltip is the sideeffect generated from the change in the behaviour.

Wrapping Up

This section introduced you to the interaction model for Muze. To summarize:

  • Muze follows a data driven Interaction Model
  • This model has three aspects: physical actions, behaviours and sideeffects
  • Physical actions are actual events which can trigger an interaction
  • Behaviours are how the chart would act/react to change during an interaction
  • Side effects are visual changes occurring due to any change in behaviour

Read up on Physical Actions, Behaviours and Side effects to get in-depth understanding on how they work