CARTOframes

A Python package for integrating CARTO maps, analysis, and data services into data science workflows.

Widgets - Part 2

In CARTOframes it is possible to to add interactive widgets for viewing your map data. Widgets are added to your visualization and do not modify your original data. They allow you to explore your map using filters or adding animations, among others.

This is the continuation of the Widgets Part 1

Animation Controls Widget

This widget makes possible to control the animation present in the visualization. Only one animation can be controled. To add an animation, it is currently needed to understand how to create Animated visualizations.

The animation widget will get the animation expression from the filter property:

1
2
3
4
5
6
7
8
9
10
11
12
13
from cartoframes.viz.widgets import animation_widget

Map(
    Layer(
        'seattle_collisions',
        'filter: animation($incdate, 20, fade(0.5,0.5))',
        widgets=[
            animation_widget(
                title='Collision Date',
                description= 'Play, pause, or select the range of the animation'
            )]
    )
)

Animation Widget

Animation Widget and Style Properties

As mentioned above, the animation widget gets the animation expression from the filter property:

1
2
3
4
5
6
7
8
9
10
11
12
13
from cartoframes.auth import set_default_credentials
from cartoframes.viz import Map, Layer
from cartoframes.viz.widgets import animation_widget

set_default_credentials('cartovl')

Map(
    Layer(
        'seattle_collisions',
        'filter: animation($incdate, 30, fade(1, 1))',
        widgets=[animation_widget()]
    )
)

However, if you want to animate the features by another property, for example, by width, you have to provide this information to the widget throught the prop parameter:

1
2
3
4
5
6
7
8
9
10
11
12
13
from cartoframes.auth import set_default_credentials
from cartoframes.viz import Map, Layer
from cartoframes.viz.widgets import animation_widget

set_default_credentials('cartovl')

Map(
    Layer(
        'seattle_collisions',
        'width: animation(linear($incdate), 20,fade(1, 1)) * ramp(linear($personcount, 2, 5), [5, 20])',
        widgets=[animation_widget(prop='width')]
    )
)

Animation by Property Widget

Time-Series Widget

The time series widget enables you to display animated data (by aggregation) over a specified date or numeric field. Time series widgets provide a status bar of the animation, controls to play or pause, and the ability to filter on a range of values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from cartoframes.viz.widgets import time_series_widget

Map(
    Layer(
        'seattle_collisions',
        'filter: animation($incdate, 20, fade(0.5,0.5))',
        widgets=[
            time_series_widget(
                value='incdate',
                title='Number of Collisions by Date',
                description= 'Play, pause, or select a range for the animation',
                buckets=10
            )]
    )
)

Time Series Widget

Combine multiple widgets

It is possible to combine widgets on your map. The map below, uses a formula widget to count the number of pedestrian involved collisions with the address type of where the collision occured. You can filter a category and the formula widget will update to relflect the values of that category in the current map view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from cartoframes.viz.widgets import category_widget, formula_widget

Map(
    Layer(
        'seattle_collisions',
        widgets=[
            formula_widget(
                'pedcount',
                'sum',
                is_global=True,
                title='Total Number of Pedestrians',
                description='involved over all collisions',
                footer='pedestrians'
            ),
            category_widget('addrtype')
        ]
    )
)

Combined Widgets