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 huge 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.

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

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…

'Temperature - Air' PROPERTY ALLPOINTS

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 Script - Part 2