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. 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.
  2. 2.
    From the Navigation Menu in the left panel, select Data Explorer.
  3. 3.
    Select the CARTO Data Warehouse connection and click on demo data > demo_tables from the collapsible tree.
  4. 4.
    Selected “san_francisco_street_trees” and explore the preview of the map and the details of the table.
  5. 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.
  6. 6.
    Change the title of the map to “San Francisco Street Trees” and the layer name to “San Francisco trees”.
  7. 7.
    Change the basemap. Go to Basemaps tab and select “Dark matter” from CARTO.
  8. 8.
    Click on Layer style to start styling the layer.
  9. 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).
  10. 10.
    Modify the Radius of the points to make them smaller.
  11. 11.
    Go to Widget tab. If you haven’t created a widget yet, you will see the following page.
  12. 12.
    Click on New widget button and select “san_francisco_street_trees”.
    When you add a widget, it´s always the Formula widget by default:
  13. 13.
    Select CATEGORY widget, choose COUNT operation from the list and select the column species. Now we can filter data by type of species.
  14. 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.
  15. 15.
    Change the default bucket size to “Years” to display different groups of data. You can also include some animation by enabling Animation controls.
  16. 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.
  17. 17.
    We can also collapse all widgets when we do not need them by enabling Collapsible control on the botton of each widget configuration.
  18. 18.
    Now let’s configure the tooltip (or info window). Go to Interactions tab, activate the tooltip and select the field species.
  19. 19.
    We can make the map public and share it online with our colleagues. For more details, see Publishing and sharing maps.
  20. 20.
    Finally, we can visualize the result.