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:
number-of-lives

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:
speedometer-visualisation

Example #3: Analogue Clock


A similar algorithm can be used to represent the time using an analogue clock.
clock-visualisation
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-visualisationProgress Bar
thermometer-visualisation
Thermometer
equalizer-visualisation
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.
charts-data-visualisation
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:

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

Example #6: 2D Representation


Most of the first arcade games where based on a 2D interface.
space-invaders-pixels

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

data-visualisation-thatre-booking-systemTheatre Booking System

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

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

Example #6: 3D Representation


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

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

mine-craft-block

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:

More examples of Data Visualisation


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

Did you like this challenge?

Click on a star to rate it!

Average rating 4.9 / 5. Vote count: 8

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!