Dispatching Behavioral Actions

logo

Note

Please be well-versed with the Physical Behavioural Model before you try to understand what dispatching behaviours mean.

A behaviour of a visualization is how it reacts to a change when interacted. When a physical action dispatches a behaviour, a change is brought upon the visualization causing it undergo a visual change. This change is the side effect. However, in order to create such side effects, no physical actions are needed.

You can dispatch a side effect just by changing the behaviour of the visualization and that can be done by dispatching a behaviour

So what do we mean by "dispatching" behaviours?

Dispatching is the creation of the selection and rejection sets when the criteria is passed to a behaviour. Pre defined physical actions dispatch these behaviours by creating a criteria and initiating the behaviour change. Thus, in order to dispatch a behaviour, only the criteria has to be initiated. We'll look once again at how criteria is made:

payload: {
   criteria: {
    Origin: ['Japan'],
        Horsepower: [300, 400] /* Serves as the range for a measure */
     }
}

That's all that has to be created to dispatch a behaviour. In order to do so, we use the canvas' firebolt.

Let's consider we have a chart having a distribution of Horsepower and Acceleration.

We know that everytime we click on a point on the chart, it gets selected. This selection causes the rest of the points to fade out and any point that is selected gets focussed on.

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(['Horsepower'])
			.columns(['Cylinders'])
			.data(dataModelInstance)
    		.mount(node)
    });
})

Let's achieve this by dispatching a behaviour from the API. The name of the behaviour is select:

canvas
   .firebolt()
   .dispatchBehaviour('select', {
                    
   })

Now we need to provide the criteria for the same. Let's consider we need to select all the cars with cylinders 5 or 6:

All we need to do is create the payload:

main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  node.innerHTML = `
    <div id='node1' style='width:70%; height:370px; float:left'></div>
    <button id='btn1' class = 'result-section-btn'>Select</button>
  `;
  
  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(['Horsepower'])
			.columns(['Cylinders'])
			.data(dataModelInstance)
    		.mount('#node1');
     document.getElementById('btn1').addEventListener('click',function(){
     	canvas
			.firebolt()
			.dispatchBehaviour('select', {
                criteria: {
                  Cylinders: [5, 6]
                }
			})
     });  
    });
})

The above code dispatches the behaviour select with the required criteria which causes a change in the chart.

The points with Cylinders 5 and 6 have been highlighted while the others have faded out caused the behaviour. This (surrogate) side effect is caused as a reaction to the change in behaviour.

You can even dispatch a behaviour that can cause a spawnable side effect:

Let's consider the following chart. If we need a tooltip over the bar on the year 1972:

main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  node.innerHTML = `
    <div id='node2' style='width:70%; height:370px; float:left'></div>
    <button id='btn2' class = 'result-section-btn'>Select</button>
  `;
  
  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)
      .layers([{
        mark:'bar'
      }])
      .rows(['Horsepower'])
      .columns(['Cylinders'])
      .data(dataModelInstance)
      .mount('#node2');
     document.getElementById('btn2').addEventListener('click',function(){
       canvas
         .firebolt()
         .dispatchBehaviour('select', {
         criteria: {
           Cylinders: ['8']
         },
         sideEffects: ['crossline']
       })
     });  
    });
})

We can see the spawnable side effect on the bar as the tooltip. Hence, adding interactions to the chart can be done just by dispatching the required behaviour with the respective side effect.

Wrapping Up

We now understand what dispatching a behaviour looks like. We can now go deeper into the nuances of interactions, specially how to register custom actions and mapping them to behaviours and side effects. Also, we'll develop a clear understanding of what DataModel Propagation works.