Data Visualisation Algorithms

Data visualisation algorithms are used in most software (or video games) which are based on a Graphical User Interface.

They are used to provide a more intuitive, user-friendly visual representation of data.

There is a wide range of techniques and algorithms used to represent data in a visual way, often using Maths concepts (2D or 3D Coordinates, Trigonometry, Proportionality etc.)

The purpose of this blog post is to give examples of a range of data visualisation algorithms.

Example #1: Number of Lives

In a video game, a variable called numberOfLives would be used to store the number of lives remaining, as an integer.
e.g.

numberOfLives = 3

A basic algorithm could then be used to represent this visually at the bottom or top of the screen:

Example #2: Speedometer

Another variable that can be used in a car racing game is the speed of the car in mph.
e.g.

speed = 60

A more advanced algorithm would then be used to represent this value on a speedometer:

Example #3: Analogue Clock

A similar algorithm can be used to represent the time using an analogue clock.

See Python Turtle Clock blog post to implement this algorithm using Python Turtle.

Example #4: Progress Bar

Using linear proportionality we can represent a numerical value as a bar or column.

These three examples would use such an approach to represent data visually:

Progress Bar

Thermometer

Equalizer
See this “Equalizer Animation” blog post to implement this algorithm using HTML, CSS and JavaScript.

Example #5: Pie Charts, Bar Charts, Line Charts, Radar Charts…

Charts are often used to represent data visually. Most high level languages have libraries that can be reused to draw charts.

Try this blog post to draw your own charts using Python Turtle.
Obviously, Python Turtle is not the best library to create charts. Your next step, should you wish to produce advanced charts is to investigate the matplotlib Python library which is very popular to create a wide range of charts. Find out more:

• 5 quick and easy data visualizations in python with code
• matplotlib library – Official page with examples and tutorials

Infographics use a wide range of charts to represent data in a visual way.

Example #6: 2D Representation

Most of the first arcade games where based on a 2D interface.

A 2D interface can be used to represent 2D arrays:

Theatre Booking System

2D data visualisation algorithms can also be used to represent graphs data structures:

Try the following blog posts to visualise 2D arrays on screen:

• Connect 4 Game using HTML, CSS and JavaScript,
• Battleship Game using Python Turtle,
• Pixel Art using Python Turtle.

Example #6: 3D Representation

Today video games tend to use a 3D user interface which involves more complex data visualisation algorithms.

Try the following blog posts based on 3D data visualisation:

• 3D Cube using Glowscript,
• Oblique Projection Formulas,
• Vanishing Point Perspective,
• 3D Molecule using Glowscript,
• 3D Pixel Art using Glowscript.

• Minecraft Challenge

Example #7: Adding Animation

Data visualisation algorithms can be made more complex when there is a need to animate the visual representation of the data!

Try the following algorithms to create animated simulations:

• 3D Animation: Solar System
• Translation and Rotation transformations in 2D,
• Morphing Algorithm using Python Turtle,
• Visualisation of the main sorting Algorithms.
• Sudoku Solver: Visualisation of a backtracking Algorithm,
• Maze Path Finder: Visualisation of a backtracking Algorithm.

More examples of Data Visualisation

The following websites contain a wide range of data visualisation techniques:

• http://mappinglondon.co.uk/category/data/
• https://informationisbeautiful.net