===Writing the Script===

Infographics are written in //Javascript// (or ECMAScript, for the pedantic among you).

This is the language shared between all web-browsers, and when combined with the massive number of helpful libraries available online, it can be used to power a huge variety of data visualisations.

We've included a few helper libraries to make it faster to create interactive displays.

To begin, you'll usually need to figure out a few things...

   * What library you're planning on using,
   * What data points you're using in your visualisation, and
   * If your data is going to be **live** or **historical**.

==Choosing a Library==
We have two libraries pre-installed for your use - **d3.js** (https://d3js.org/) and **three.js** (https://threejs.org/). These are fantastic libraries for 2D and 3D data visualisation.

Our examples will use these two libraries, although you're not limited to only them.

**In this example, we'll make a 2D visualisation powered by //d3.js//**

==Choosing Data Points==

You choose the data points you're interested in using an **AQL Query**. We suggest using dynamic queries where possible, unless you really need specific points.

For example, we might want a single report showing all of the //air temperature// measurements we're making across the site. For that, we can use the query...

<code>
'Temperature - Air' PROPERTY ALLPOINTS
</code>

==Live or Historical==

Next, you'll usually choose between making a //historical// visualisation (one that uses values over time) or a //live// visualisation (one that uses a constant stream of up-to-date information).

It's also possible - but more complex - to make **hybrid** visualisations that start with historical data and then use live. But that's a more complex topic we won't cover in this example.

**In this case, let's make our visualisation //live//**

[[writing the script2|Writing The Script - Part 2]]