What we think, say & do

18 January 2017
3 Top Data Visualisation Tools

With the plethora of data available to us today, it can sometimes be difficult to identify and act on emerging trends quickly. Through using data visualisation tools, this data is able to be manipulated into a visual format allowing those the ability to make highly informed decisions quickly.

If you’re looking for some ways to introduce your data creatively, you have come to the right place! I have picked out the 3 top data visualisation tools that will help instantly interpret your data and make it aesthetically appealing!

1. Visualisation with WebGL

Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. It can be applied to interactive videos, games, data visualisation, art, 3D design environments, space, objects and creating physical simulations.

Some of the features that WebGL provide are:

  • Using textures
  • Animating textures
  • Lighting and shading
  • Applying multiple colours

The ultimate goal of the Web Graphics Library is to achieve high frame rates, and small loading times.

Survey Data
Scientifically calculating and comparing survey data


2. GSAP Visualisation

GreenSock Animation Platform (GSAP) is a suite of JavaScript tools for high-performance HTML5 animations that work in all major browsers. GSAP comes with core tools. You can then utilise additional plugins that enable you to extend its functionality.

The features that provides are:

  • Top performance, especially on mobile devices
  • Total control as animations can scale, rotate and move independently
  • Compatibility with old and new browsers

GSAP enables you to drag, spin and toss any DOM element. This is a great selection for animation charts, data analysis and statistics.

Analysing Information
Analysing information


Art & Gallery
GSAP allows for smooth animation between pages for online galleries 

The GreenSock Animation Platform isn’t built on top of any 3rd party tools like jQuery. This approach minimises load times and maximises performance.

The tool includes:

  • TweenLine - CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div
  • TweenMax - include same things as TweenLine and can does repeat, yoyo and more functionality. Is a full-featured tool that handles the animation of any property over time.
  • TimelineLite and TimelineMax
Navigation and Transitions
Navigation and transitions 


Bank of England
This data is visualised through scrolling, css transition and animation

3. SPA

A Single-Page Application (SPA) is a web application that sits on a single web page.

As the user clicks links and interacts with the page, relevant content is loaded dynamically. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.

The application created as SPA will often update the URL in the address bar to emulate traditional page navigation. There are many frameworks for single page applications out there like:

  • ReactJS
  • AngularJS
  • Ember.js
  • Meteor.js