# 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](https://academy.carto.com/building-interactive-maps/data-visualization/broken-reference). 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 A*dd 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:
```sql
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](https://academy.carto.com/building-interactive-maps/data-visualization/broken-reference). 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](https://academy.carto.com/building-interactive-maps/data-visualization/broken-reference) which supports markdown syntax.
You can copy the below example or use your own description.
```markdown
### Blue Whales in Eastern Pacific
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](https://docs.carto.com/carto-user-manual/maps/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:
```sql
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 nam*e from the parameter control
* Add it to your SQL Query 2 adding a WHERE statement and execute your query.
```sql
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.
```sql
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:
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://academy.carto.com/building-interactive-maps/data-visualization/build-an-animated-visualization-with-time-series.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
