====Setting Up a Marked-Up Display====

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

<code>
class ActiveReport extends MarkupReport {
	
}
</code>

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.

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

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|articulation points]] if you're making a diagram of a machine with moving parts.

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

See some [[markup_examples|examples]].