Create an animated visualization with time series

Context

As we grow more attuned to the delicate balance of our natural world, understanding the movements of its inhabitants becomes crucial, not just for conservation but for enhancing our data visualization skills. The migration routes of blue whales offer a wealth of data that, when visualized, can inform and inspire protective measures.

This tutorial takes you through a general approach to building animated visualizations using Builder Time Series Widget. While we focus on the majestic blue whales of the Eastern Pacific from 1993 to 2003, the techniques you'll learn here can be applied broadly to animate and analyze any kind of temporal geospatial data whose position moves over time.

Join us in this tutorial, as we transform raw data into a dynamic map that tells a compelling story over time.

Steps To Reproduce

1. Access the Maps from your CARTO Workspace using the Navigation menu and create a "New map".

2. Let's add the blue whales point location as the first data source.

   • Select the Add source from button at the bottom left on the page.

   • Click on the CARTO Data Warehouse connection.

   • Select Type your own query.

   • Click on the Add Source button.

The SQL Editor panel will be opened.

To add blue whales source, run the query below:

SELECT * FROM carto-demo-data.demo_tables.blue_whales_eastern_pacific_point

3. Change the layer name to "Blue Whales". Click over the layer card to start styling the layer.

4. In the Fill Color settings, choose a shade of medium blue. For the Stroke Color, opt for a slightly lighter blue.

5. Set the Stroke Width to 1 and the Radius Size to 1.5

Your map should look something similar to the below:

6. Before we progress to add the Time Series Widget, let's name the map "Blue Whales in Eastern Pacific" and change the Basemap to CARTO Dark Matter.

7. Now, let's add a Time Series Widget. To do so, open the Widgets tab and select Time Series Widget type. In the Data configuration, add the unique identifier column named event_id.

8. In the Display section, set the Interval to 1 week and enable Animation controls to allow users animate the features temporarily. Additionally, add a Note to provide further context to the end users accessing this map.

You can now use the animation controls to animate the map updating its speed, range and so on so you can easily gather whales movement across your desired temporal range.

9. To enhance the storytelling of our animated visualization, we'll give users more background and details. For that, we'll use the Map Description which supports markdown syntax.

You can copy the below example or use your own description.

### Blue Whales in Eastern Pacific 

![Image: Replace with your own](https://insert-image-url-here.com)

This map animates the migration of blue whales through the Eastern Pacific from 1993 to 2009. 

----
#### How to Use this Map

To discover the migration patterns of blue whales:

- **Explore Timeline**: Hoover over the Time Series graph to obtain insights about the number of seen whales at each aggregated period.
- **See Patterns**: Click 'Play' to animate the whale movements and observe emerging patterns.
- **Filter Data Range**: Drag across a timeline to focus on specific intervals.
- **Navigate**: Pan and zoom to explore different areas of the map.

*Click the top-right button to access the Widget panel*

10. Now we'll make the map public and share it online with our colleagues. For more details, see Publishing and sharing maps.

11. The end result should look something similar to the below.

Bonus track

If you're ready to take your map to the next level, dive into our bonus track. Add a layer for individual whale tracks and harness SQL parameters to filter by specific identifiers, enriching your research with targeted insights.

12. Add a new data source to display the whales tracks by executing the following query using Builder SQL Editor:

SELECT * FROM carto-demo-data.demo_tables.blue_whales_eastern_pacific_line

A new layer is added to the map displaying the different blue whales tracks.

13. Rename the layer to "Whale tracks" and move the layer to the 2nd position, just below Blue Whales.

14. In the layer style configuration of this new layer, set the Stroke Color to a darker blue.

Now we will add a Text SQL Parameter to filter both "Blue Whales" and "Whales tracks" by the same identifier.

15. We will start adding the parameter and using it on "Whales tracks" layer linked to SQL Query 2. To do so:

• Click on "Add SQL Parameter" and select "Text Parameter" type.

• Use Add from source selecting name from SQL Query 2 linked to "Whales tracks" layer.

• Add a Display name and SQL name to the configuration

• Click on "Create Parameter". Now the parameter control has been added to the map.

• Copy the SQL name from the parameter control

• Add it to your SQL Query 2 adding a WHERE statement and execute your query.

WHERE name IN {{whale_identifier}}

16. Now let's add it to "Blue Whales" data source. To do so, we need to modify the SQL Query 1 to generate the whales_identifier by concatenating two string columns as well as adding the WHERE statement using the parameter.

WITH data_ AS (
  SELECT 
  	*, 
  	CONCAT(individual_local_identifier,'-', tag_local_identifier) as identifier
  FROM carto-demo-data.demo_tables.blue_whales_eastern_pacific_point)
SELECT 
	* 
FROM data_
WHERE identifier IN {{whale_identifier}} 

Now if you use the parameter control to filter for a specific identifier, both the "Blue Whales" and the "Whales tracks" are filtered simultaneously.

17. Now, let's publish the recent changes and add SQL Parameters to the Map Sharing Settings to allow users explore and filter specific identifiers.

The final map from the Bonus Track should look something similar to the below: