Side Effects

In this section, we will get an understanding of side effects and how they function.

Side Effects are any visual alterations made to the chart such as adding/removing elements or modifying their visual properties. Each side effect has a corresponding set of behaviours attached to it. Whenever any of the behaviours attached to the side effect is dispatched, Muze's Firebolt calls the side effect with the respective selection and rejection sets.

We will be using the simple cars.json data.

Understanding Sideeffects

Whenever Firebolt triggers a sideeffect, it also provides the details of all the selection and rejection sets. Along with that, it also provides a strategy based on which the they have to act. The side effect decides what to do with the selection and rejection sets based on the strategy.

What is a strategy?

A strategy helps in deciding which of the rows of the new entry, old entry, new exit, old exit and complete sets should the strategy be applied to and in what way.

For example, you could provide a strategy to fade out the items present in the rejection set for a particular side effect or you can choose to instead change the colors for the items present in the selection set. You can even choose different side effects for different subtypes of selection and rejection sets(new and old sets).

You can also map multiple strategies with the same set of side effects or create your own side effect(which you can read about here).

Types of Side Effects

There are two types of side effects:

Surrogate Side effect

A surrogate side effect is an effect which modifies elements present in the visualization but doesn't add/remove DOM elements. Any changes in styles and/or animations are types of surrogate side effects. Let us understand this with this example, where we have a bar chart of Horsepower v/s Origin.

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

Every time, we select a particular bar by clicking on it, it gets selected as the rest of the bars fade out. This is a simple example of a surrogate side effect.

Surrogate Side Effect

Since only the colors of the chart changes, there is no addition/removal of elements from the chart and hence is an example of a surrogate side effect.

Spawnable Side effect

A spawnable side effect on the other hand, is an effect which creates/removes elements from the canvas. Thus, whenever elements are added, like tooltips and crosslines, they act as spawanable side effects of the behaviours.

If we take the same example as above, i.e., Horsepower v/s Origin:

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

Everytime we hover over the bars in a chart, we get a tooltip on the chart. This tooltip is a new element that was not present when the canvas initialized originally and thus is a spawnable side effect.

Wrapping Up

To summarize:

  • Side effects are visual changes in the canvas due to a change in the behaviour
  • Side effects get the details of the selection and rejection sets and act on them based on the strategy present
  • There are two types of side effects: surrogate and spawnable
  • Surrogate side effects modifies elements in the canvas without creating/removing elements
  • Spawnable side effects create and/or remove elements from the canvas
  • Multiple behaviours can have the same side effect and vice versa

We'll talk about registering and using side effects later.