If you're making an SVG-based Infographic, your generate.js file will look like the one below.

class ActiveReport extends MarkupReport {
	
}

If you'd like to add some code to handle data updates yourself (ie. performing analytics or manipulating data to make it more human-readable), you can add an updateData function to the class above.

It takes an dictionary containing all of the values coming from ARDI.

class ActiveReport extends MarkupReport {
	function updateData(content) {
             //Put some data manipulation here.
             console.log(content);
        }
}

Then, add the markup to your SVG file and save it to report.svg in the display folder.

You may also take the opportunity to add some articulation points if you're making a diagram of a machine with moving parts.

You can also create and use templates to quickly create new visualisations using consistent, re-usable components.

See some examples.