Chapter I: Spatio-Temporal Visualization (A Complete Data Visualization Course)


Welcome to the first chapter of ‘A Complete Data Visualization Course‘ on Spatio-temporal visualization.

Spatio Temporal Visualization


A Spatio-temporal visualization is a type of visualization that is best suited for data having features of both space and time along with a focus feature. Such kind of data is also known as Spatio-temporal data.

  • Space Feature – A space feature indicates the location of a point/points in an n-dimensional space. For example, (40.7128° N, 74.0060° W) is a 2-dimensional space feature that represents the latitude and longitude of New York City.
  • Time Feature – A time feature indicates a particular instant of time. For example, 2010 AD, 2:00 AM, etc. is a time feature that represents a particular instant of time.
  • Focus Feature – A focus feature indicates a piece of insightful information that is often kept in the focus of the audience. For example, amount of rainfall, temperature, number of sales, etc. are focus features.

The following Spatio-temporal visualization by OpenGeoHub is a perfect example for demonstrating the space and time feature along with ‘Population in millions’ as a focus feature.

Industrial Use Cases of Spatio-Temporal Visualizations

Two of the most important use cases for Spatio-temporal visualizations are as follows:

  1. Location Tracking and Analysis – Ridesharing and Delivery companies use Spatio-temporal visualization to track the real-time position of objects, vehicles, etc. by plotting the object’s GPS coordinates on a map that changes with respect to time.
  2. Statistical Analysis – Most businesses use Spatio-temporal visualizations for analyzing and presenting Spatio-temporal data as a part of their business process. Environmental activists are also seen to heavily rely on Spatio-temporal visualizations for raising awareness about various environmental changes such as deforestation, global warming, etc.

Getting Started with Spatio-Temporal Visualization using

Spatio-Temporal visualizations are being used mostly everywhere and thus, new techniques for creating such visualizations are being researched heavily on a day-to-day basis.

Uber, a ride-sharing company, has become one of the major names in the field of Spatio-temporal visualization research ever since the release of their open-source Spatio-temporal visualization library called on Jan 6, 2016.

Deck GL - The Click Reader is a WebGL-powered framework for visual exploratory data analysis of large datasets with up to 64-bit floating-point computations in the GPU. It is a very powerful tool for building Spatio-temporal visualizations from scratch. The library provides a layered approach to data visualization and allows complex visualizations to be constructed using pre-existing layers.

It also allows seamless integrations with React and Mapbox which means that you will have no problem integrating into your existing React apps.

Here are three simple steps to get started with building a powerful visualization using

First Step: Set up your coding environment

Set up your coding environment using Vis Academy‘s guides.

Second Step: Create a map using MapboxGL

Time to create a map to display your data on. If you have already got your Mapbox token by following the first step, you will have no problem creating a map using MapboxGL.


Here is a guide showing you how to create a map using MapboxGL by the Vis Academy: Starting with a Map

Third step: Add data onto the map

Once your map is ready, you are now ready to add data onto the map. How you want to display your data onto the map is wholly your choice and here is a list of all data overlays that you can plot onto the map.

  • Scatterplot
  • Arc
  • Geojson: Path
  • Geojson: Chorepleth
  • Hexagon
  • 3D Hexagon

The following tutorial by Vis academy uses data from NYC taxi rides to plot data as a scatterplot tutorial showing you how to plot your data using scatterplots: Map data overlays – Scatterplot. (Please note that you can always use your own data.)

Scatter plot - The Click Reader

Example visualizations for your reference

Despite your knowledge of, you may still get confused about how to execute your ideas and that is okay.

Listed below are some example visualizations that you can refer to while doing your next project. Hope it helps!

  1. Autonomy Visualization System – A visualization protocol and toolkit for robotics data in the browser.

2. Singapore Bus Routes Explorer – Explore bus stops and routes on the map for all bus services in Singapore with realtime bus arrival times and per-bus-stop passing routes overview.

Singapore Bus Routes Explorer

3. – is a powerful web-based geospatial data analysis tool which is built on a high-performance rendering engine and is designed for large-scale data sets.

4. The Bad Bet – Data journalists use to visualize how the revenue generated by video gambling machines in Illinois grow over time and how those revenues failed to meet the projections of legislators.

These are only some of the example capabilities of You can view other examples from here.

Learn about it from a Senior Data Visualization Engineer at Uber

The following talk by Shang He, a Senior Data Visualization Engineer at Uber, discusses the different ways Uber uses Spatio-temporal visualization to make informed decisions:

In the talk, Shang talks about her data visualization work at Uber and gives a brief description about the four big steps needed to perform geospatial data visualization:

  • Get a dataset
  • Pre-process the dataset
  • Choose the appropriate visual encoding method such as color, dimension, etc.
  • Create different kind of visualizations based on visual encodings.

She also goes on to talk about and gives a quick demo of how the open-source tool can be used by the general public.

In Conclusion

We hope that this chapter from ‘A Complete Data Visualization Course‘ helps you get started on creating amazing and meaningful Spatio-temporal visualizations. Also, if you have any questions, please feel free to let us know in the comment section.

Continue your learning to the second chapter of this course, ‘Chapter II: Automotive Visualization‘.


Please enter your comment!
Please enter your name here