CARTO User Manual

CARTO User Manual

Go back

Build an animated visualization with time series


There is an increasing need for conservation and connection with nature in cities. In this sense, geospatial analysis plays an important role in the effective management of our natural resources.

In this tutorial we are going to represent the distribution of tree species in the streets of San Francisco by color and we will add some interaction through widgets, which will allow us to explore the map by selecting targered filters of interest. In this example, filters are applied by specie and date of planting.

Steps To Reproduce

  1. Go to the CARTO signup page.

    • Click on Log in.
    • Enter your email address and password. You can also log in with your existing Google account by clicking Continue with Google.
    • Once you have entered your credentials: click Continue.

    Log in Email and password

  2. From the Navigation Menu in the left panel, select Data Explorer.

    Menu features data explorer

  3. Select the CARTO Data Warehouse connection and click on demo data > demo_tables from the collapsible tree.

    Data Explorer content carto data warehouse

  4. Selected “san_francisco_street_trees” and explore the preview of the map and the details of the table.

    Data Explorer map prewiew

    Data Explorer data prewiew

  5. Create a map by clicking on the Create map button on the top. This will open the table as a layer on a CARTO Builder map. Check Creating a map from your data to get started.

    Data Explorer create map from table

  6. Change the title of the map to “San Francisco Street Trees” and the layer name to “San Francisco trees”.

    Map layers rename

    Map layers rename

  7. Change the basemap. Go to Basemaps tab and select “Dark matter” from CARTO.

    Map basemap carto

  8. Click on Layer style to start styling the layer.

    Map layers options

  9. Click on the “three dots” icon in the Fill Color section and select “Color Based On” feature species. Pick a palette for a categorical variable (versus a gradient).

    Map fill style based on field

  10. Modify the Radius of the points to make them smaller.

    Map style radius

  11. Go to Widget tab. If you haven’t created a widget yet, you will see the following page:

    Map widgets add new widget

  12. Click on New widget button and select “populated_places”.

    Map widgets select source

    When you add a widget, it´s always the Formula widget by default:

    Map widget formula by default

  13. Select CATEGORY widget, choose COUNT operation from the list and select the column species. Now we can filter data by type of species.

    Map category widget selected field

  14. Click on the Back arrow and then click on Add widget to add a second widget (TIME-SERIES), now based on plant_date. You will get a time-series widget in order to be able to filter the species based on their plant date.

    Map time-series widget selected field

  15. Change the default bucket size to “Years” to display different groups of data. You can also include some animation by enabling Animation controls.

    Map widgets animation

  16. Let´s the names of both widgets for “Nº of Species” and “Plant date”. Click on the Back arrow and then click on the “three dots” icon to configure rename your widgets.

    Map widgets rename

  17. We can also collapse all widgets when we do not need them by enabling Collapsible control on the botton of each widget configuration.

    Map tooltips new tooltip

    Map tooltips new tooltip

  18. Now let’s configure the tooltip (or info window). Go to Interactions tab, activate the tooltip and select the field species.

    Map tooltips new tooltip

  19. We can make the map public and share it online with our colleagues. For more details, see Publishing and sharing maps.

    Map public map

  20. Finally, we can visualize the result.