Structuring your template logic

The compiled JavaScript (template.js) should assign an object with the following properties to window.template:

.state

The current state of the template. In other words, the current values of all the template's settings. The state must be a JSON-serialisable object. The appearance of the template should depend only on the state.

Default values should be set when the template loads. State properties that are specified as settings in template.yml are updated by Flourish when the user changes a setting in the visualization editor.

The template should also update the state in response to user interaction.

.draw()

Draws the document according to the state and data. Called once initially, and may be used to create DOM elements, initialize WebGL, etc.

.update()

Updates the document – typically in an animated fashion – to reflect the current values of the state and data.

.data

An object into which Flourish will put the data from user-editable data tables. Should be initialised to an empty object if the template accepts data.

Each property is a dataset: an array containing an object for each row in the relevant data table. The structure of each dataset is defined in the data bindings of the template.yml, and the data is loaded from the tables in the data/ directory.