diff --git a/cartoframes/viz/constants.py b/cartoframes/viz/constants.py
index 1301e5f6d..5d81ee530 100644
--- a/cartoframes/viz/constants.py
+++ b/cartoframes/viz/constants.py
@@ -2,7 +2,7 @@
 CARTO_VL_DEV = '/dist/carto-vl.js'
 CARTO_VL_URL = 'https://libs.cartocdn.com/carto-vl/{}/carto-vl.min.js'.format(CARTO_VL_VERSION)
 
-AIRSHIP_VERSION = 'cartoframes'
+AIRSHIP_VERSION = 'v2.2.0-rc.2'
 AIRSHIP_COMPONENTS_DEV = '/packages/components/dist/airship.js'
 AIRSHIP_BRIDGE_DEV = '/packages/bridge/dist/asbridge.js'
 AIRSHIP_MODULE_DEV = '/packages/components/dist/airship/airship.esm.js'
@@ -67,4 +67,19 @@
     'time-series'
 ]
 
+FORMULA_OPERATIONS_VIEWPORT = {
+  'count': 'viewportCount',
+  'avg': 'viewportAvg',
+  'min': 'viewportMin',
+  'max': 'viewportMax',
+  'sum': 'viewportSum'
+}
+
+FORMULA_OPERATIONS_GLOBAL = {
+  'count': 'globalCount',
+  'avg': 'globalAvg',
+  'min': 'globalMin',
+  'max': 'globalMax',
+  'sum': 'globalSum'
+}
 THEMES = ['dark', 'light']
diff --git a/cartoframes/viz/widget.py b/cartoframes/viz/widget.py
index 15736bdfa..9d95047ca 100644
--- a/cartoframes/viz/widget.py
+++ b/cartoframes/viz/widget.py
@@ -11,7 +11,6 @@ class Widget():
         data (dict): The widget definition for a layer. It contains the information to render a widget:
             `type`: 'default', 'formula', time-series', 'animation', 'category', 'histogram'
             `value`: A constant value or a CARTO VL expression
-            `options`: Options for the widget, this varies depending on the widget
 
             The widget also can display text information: `title`, `description` and `footer`.
     Example:
@@ -94,4 +93,6 @@ def _get_options_from_data(self, data):
         for key, value in data.items():
             if key not in attributes:
                 options[key] = value
+
+        options['read_only'] = data.get('read_only', False)
         return options
diff --git a/cartoframes/viz/widget_list.py b/cartoframes/viz/widget_list.py
index 9e3c7310e..2c177faa8 100644
--- a/cartoframes/viz/widget_list.py
+++ b/cartoframes/viz/widget_list.py
@@ -4,24 +4,26 @@
 
 
 class WidgetList(object):
-    """List
+    """WidgetList
      Args:
         widgets (dict, list, Widget): The list of widgets for a layer.
 
     Example:
-     .. code::
-         from cartoframes.viz import Widget
-
-         WidgetList([{
-            type: 'formula',
-            value: 'viewportSum($amount)'
-            title: '...',
-            description: '...',
-            footer: '...'
-        }, {
-            'type': 'default',
-            'value': '"Custom Info"',
-        }])
+
+        .. code::python
+
+            from cartoframes.viz import Widget
+
+            WidgetList([{
+                type: 'formula',
+                value: 'viewportSum($amount)'
+                title: '...',
+                description: '...',
+                footer: '...'
+            }, {
+                'type': 'default',
+                'value': '"Custom Info"',
+            }])
     """
 
     def __init__(self, widgets=None):
diff --git a/cartoframes/viz/widgets/__init__.py b/cartoframes/viz/widgets/__init__.py
index 7380698c9..3421999b1 100644
--- a/cartoframes/viz/widgets/__init__.py
+++ b/cartoframes/viz/widgets/__init__.py
@@ -1,5 +1,5 @@
 """
-Widget functions to generate widgets faster.
+Widget helpers to generate widgets faster.
 """
 
 from __future__ import absolute_import
diff --git a/cartoframes/viz/widgets/animation_widget.py b/cartoframes/viz/widgets/animation_widget.py
index 482d42703..d1ebb8c35 100644
--- a/cartoframes/viz/widgets/animation_widget.py
+++ b/cartoframes/viz/widgets/animation_widget.py
@@ -4,6 +4,42 @@
 
 
 def animation_widget(**kwargs):
+    """Helper function for quickly creating an animated widget.
+
+    The animation widget includes an animation status bar as well as controls to play or pause animated data.
+    The `filter` property of your map's style, applied to either a date or numeric field, drives both
+    the animation and the widget. Only **one** animation can be controlled per layer.
+    To learn more about creating animations visit:
+      - https://carto.com/developers/carto-vl/guides/animated-visualizations.
+
+    Args:
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='animation'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            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'
+                        )]
+                )
+            )
+    """
+
     data = kwargs
     data['type'] = 'animation'
     return Widget(data)
diff --git a/cartoframes/viz/widgets/category_widget.py b/cartoframes/viz/widgets/category_widget.py
index 32da3a03c..1e4945842 100644
--- a/cartoframes/viz/widgets/category_widget.py
+++ b/cartoframes/viz/widgets/category_widget.py
@@ -4,7 +4,42 @@
 
 
 def category_widget(value, **kwargs):
+    """Helper function for quickly creating a category widget.
+
+    Args:
+        value (str): Column name of the category value
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+        read_only (boolean, optional): Interactively filter a category by selecting it in the widget.
+          Set to "False" by default.
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='category'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            from cartoframes.viz.widgets import category_widget
+
+            Map(
+                Layer(
+                    'seattle_collisions',
+                    widgets=[
+                        category_widget(
+                            'collisiontype',
+                            title='Type of Collision',
+                            description='Select a category to filter',
+                        )
+                    ]
+                )
+            )
+    """
+
     data = kwargs
     data['type'] = 'category'
     data['value'] = value
+    data['read_only'] = kwargs.get('read_only', False)
     return Widget(data)
diff --git a/cartoframes/viz/widgets/default_widget.py b/cartoframes/viz/widgets/default_widget.py
index f9969ca23..58f3dbfa5 100644
--- a/cartoframes/viz/widgets/default_widget.py
+++ b/cartoframes/viz/widgets/default_widget.py
@@ -4,6 +4,38 @@
 
 
 def default_widget(**kwargs):
+    """Helper function for quickly creating a default widget.
+
+    The default widget is a general purpose widget that can be used to provide additional information about your map.
+
+    Args:
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='default'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            from cartoframes.viz.widgets import default_widget
+
+            Map(
+                Layer(
+                    'seattle_collisions',
+                    widgets=[
+                        default_widget(
+                            title='Road Collisions in 2018',
+                            description='An analysis of collisions in Seattle, WA',
+                            footer='Data source: City of Seattle'
+                        )]
+                )
+            )
+    """
+
     data = kwargs
     data['type'] = 'default'
     return Widget(data)
diff --git a/cartoframes/viz/widgets/formula_widget.py b/cartoframes/viz/widgets/formula_widget.py
index 3ffc90cb2..bedb13ac4 100644
--- a/cartoframes/viz/widgets/formula_widget.py
+++ b/cartoframes/viz/widgets/formula_widget.py
@@ -1,11 +1,95 @@
 from __future__ import absolute_import
 
 from ..widget import Widget
+from ..constants import FORMULA_OPERATIONS_VIEWPORT, FORMULA_OPERATIONS_GLOBAL
 
 
-def formula_widget(value, **kwargs):
+def formula_widget(value, operation=None, **kwargs):
+    """Helper function for quickly creating a formula widget.
+
+    Formula widgets calculate aggregated values ('Avg', 'Max', 'Min', 'Sum') from numeric columns
+    or counts of features ('Count') in a dataset.
+
+    A formula widget's aggregations can be calculated on 'global' or 'viewport' based values.
+    If you want the values in a formula widget to update on zoom and/or pan, use viewport based aggregations.
+
+    Args:
+        value (str): Column name of the numeric value
+        operation (str): attribute for widget's aggregated value ('count', 'avg', 'max', 'min', 'sum')
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+        is_global (boolean, optional): Account for calculations based on the entire dataset ('global') vs.
+            the default of 'viewport' features.
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='formula'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            from cartoframes.viz.widgets import formula_widget
+
+            Map(
+                Layer(
+                    'seattle_collisions',
+                    widgets=[
+                        formula_widget(
+                            'count',
+                            title='Number of Collisions',
+                            description='Zoom and/or pan the map to update count',
+                            footer='collisions in this view'
+                        )
+                    ]
+                )
+            )
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            from cartoframes.viz.widgets import 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'
+                        )
+                    ]
+                )
+            )
+    """
+
     data = kwargs
     data['type'] = 'formula'
-    data['value'] = value
+    is_global = kwargs.get('is_global', False)
+    data['value'] = get_value_expression(operation, value, is_global)
 
     return Widget(data)
+
+
+def get_formula_operation(operation, is_global):
+    if is_global:
+        return FORMULA_OPERATIONS_GLOBAL.get(operation)
+    else:
+        return FORMULA_OPERATIONS_VIEWPORT.get(operation)
+
+
+def get_value_expression(operation, value, is_global):
+    if value == 'count':
+        formula_operation = get_formula_operation(value, is_global)
+        return formula_operation + '()'
+    else:
+        if operation:
+            formula_operation = get_formula_operation(operation, is_global)
+            return formula_operation + '($' + value + ')'
+        else:
+            return '$' + value
diff --git a/cartoframes/viz/widgets/histogram_widget.py b/cartoframes/viz/widgets/histogram_widget.py
index 83e83e8de..0c5c10bdf 100644
--- a/cartoframes/viz/widgets/histogram_widget.py
+++ b/cartoframes/viz/widgets/histogram_widget.py
@@ -4,7 +4,49 @@
 
 
 def histogram_widget(value, **kwargs):
+    """Helper function for quickly creating a histogram widget.
+
+    Histogram widgets display the distribution of a numeric attribute, in buckets, to group
+    ranges of values in your data.
+    By default, you can hover over each bar to see each bucket's values and count, and also
+    filter your map's data within a given range
+
+    Args:
+        value (str): Column name of the numeric or date value
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+        buckets (number, optional): Number of histogram buckets. Set to 20 by default.
+        read_only (boolean, optional): Interactively filter a range of numeric values by selecting them in the widget.
+          Set to "False" by default.
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='histogram'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            from cartoframes.viz.widgets import histogram_widget
+
+            Map(
+                Layer(
+                    'seattle_collisions',
+                    widgets=[
+                        histogram_widget(
+                            'vehcount',
+                            title='Number of Vehicles Involved',
+                            description='Select a range of values to filter',
+                            buckets=9
+                        )
+                    ]
+                )
+            )
+    """
+
     data = kwargs
     data['type'] = 'histogram'
     data['value'] = value
+    data['read_only'] = kwargs.get('read_only', False)
     return Widget(data)
diff --git a/cartoframes/viz/widgets/time_series_widget.py b/cartoframes/viz/widgets/time_series_widget.py
index f8d91b4b3..7bfb18ccb 100644
--- a/cartoframes/viz/widgets/time_series_widget.py
+++ b/cartoframes/viz/widgets/time_series_widget.py
@@ -4,7 +4,47 @@
 
 
 def time_series_widget(value, **kwargs):
+    """Helper function for quickly creating a 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.
+
+    Args:
+        value (str): Column name of the numeric or date value
+        title (str, optional): Title of widget.
+        description (str, optional): Description text widget placed under widget title.
+        footer (str, optional): Footer text placed on the widget bottom
+        buckets (number, optional): Number of histogram buckets. Set to 20 by default.
+        read_only (boolean, optional): Interactively filter a range of numeric values by selecting them in the widget.
+          Set to "False" by default.
+
+    Returns:
+        cartoframes.viz.Widget: Widget with type='time-series'
+
+    Example:
+
+        .. code::
+
+            from cartoframes.viz import Map, Layer
+            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
+                        )]
+                )
+            )
+    """
     data = kwargs
     data['type'] = 'time-series'
     data['value'] = value
+    data['read_only'] = kwargs.get('read_only', False)
     return Widget(data)
diff --git a/docs/developer-center/guides/09-Widgets-Part-1.md b/docs/developer-center/guides/09-Widgets-Part-1.md
new file mode 100644
index 000000000..95d9e20f1
--- /dev/null
+++ b/docs/developer-center/guides/09-Widgets-Part-1.md
@@ -0,0 +1,154 @@
+## Widgets - Part 1
+
+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.
+
+We use Airship components for the widget's UI and Airship Bridge to connect the widget behaviour with the map. All the widgets accept the following parameters to display widget information: `title`, `description` and `footer`.
+
+There are a variety of widgets available to embed with your map. Widgets can be standalone, combined inside of one layer, or across multiple layers. There are two ways to add widgets (from `cartoframes.viz.widgets`):
+
+1. Using the `Widget` class and passing a dict
+2. Using a widget helper
+
+For simplicity, in this guide we're going to create widgets using helper methods:
+
+```py
+from cartoframes.viz import Map, Layer
+from cartoframes.viz.widgets import formula_widget
+
+Map(
+    Layer('spend_data',
+        widgets=[
+            formula_widget('amount', 'avg', title="Avg Amount", description="Some description", footer="data source")
+        ]
+    )
+)
+```
+
+The following types of widgets are currently supported:
+
+### Default Widgets
+
+The default widget is a general purpose widget that can be used to provide additional information about your map. 
+
+```py
+from cartoframes.viz import Map, Layer
+from cartoframes.viz.widgets import default_widget
+
+Map(
+    Layer(
+        'seattle_collisions',
+        widgets=[
+            default_widget(
+                title='Road Collisions in 2018',
+                description='An analysis of collisions in Seattle, WA',
+                footer='Data source: City of Seattle'
+            )]
+    )
+)
+```
+
+![Default Widget](../../img/guides/widgets/default-widget.png)
+
+### Formula Widgets
+
+The Formula Widget calculates aggregated values from numeric columns. The operations supported are: avg, max, min, sum and count. By default, only the data visible in the viewport is used. In order to use all the data in the dataset, it is necessary to set `is_global` to `True`.
+
+- Viewport Count: `formula_widget('count')`
+- Global Count: `formula_widget('count', is_global=True)`
+- Viewport Average: `formula_widget('$numeric_value', 'avg')`
+- Global Average: `formula_widget('$numeric_value', 'avg', is_global=True)`
+- Viewport Max: `formula_widget('$numeric_value', 'max')`
+- Global Max: `formula_widget('$numeric_value', 'max', is_global=True)`
+- Viewport Min: `formula_widget('$numeric_value', 'min')`
+- Global Min: `formula_widget('$numeric_value', 'min', is_global=True)`
+- Viewport Sum: `formula_widget('$numeric_value', 'sum')`
+- Global Sum: `formula_widget('$numeric_value', 'sum', is_global=True)`
+
+```py
+from cartoframes.viz.widgets import formula_widget
+
+Map(
+    Layer(
+        'seattle_collisions',
+        widgets=[
+            formula_widget(
+                'count',
+                title='Number of Collisions',
+                description='Zoom and/or pan the map to update count',
+                footer='collisions in this view'
+            )
+        ]
+    )
+)
+```
+
+![Formula Viewport Widget](../../img/guides/widgets/formula-viewport-widget.gif)
+
+```py
+from cartoframes.viz.widgets import 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'
+            )
+        ]
+    )
+)
+```
+
+![Formula Global Widget](../../img/guides/widgets/formula-global-widget.gif)
+
+### Category Widgets
+
+These widgets allows you to aggregate the data and create categories. Category widgets group features from string columns into aggregated categories based on their occurence in your current map view with their associated count. As you zoom or pan the map, the category widget updates. By default, you can also select a category to filter your map's data.
+
+```py
+from cartoframes.viz.widgets import category_widget
+
+Map(
+    Layer(
+        'seattle_collisions',
+        widgets=[
+            category_widget(
+                'collisiontype',
+                title='Type of Collision',
+                description='Select a category to filter',
+            )
+        ]
+    )
+)
+```
+
+![Category Widget](../../img/guides/widgets/category-widget.gif)
+
+### Histogram Widgets
+
+Histogram widgets display the distribution of a numeric attribute, in buckets, to group ranges of values in your data. By default, you can hover over each bar to see each bucket's values and count, and also filter your map's data within a given range.
+
+```py
+from cartoframes.viz.widgets import histogram_widget
+
+Map(
+    Layer(
+        'seattle_collisions',
+        widgets=[
+            histogram_widget(
+                'vehcount',
+                title='Number of Vehicles Involved',
+                description='Select a range of values to filter',
+                buckets=9
+            )
+        ]
+    )
+)
+```
+
+![Histogram Widget](../../img/guides/widgets/histogram-widget.gif)
diff --git a/docs/developer-center/guides/09-Widgets-Part-2.md b/docs/developer-center/guides/09-Widgets-Part-2.md
new file mode 100644
index 000000000..4575d1edd
--- /dev/null
+++ b/docs/developer-center/guides/09-Widgets-Part-2.md
@@ -0,0 +1,116 @@
+## 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]({{ site.url }}/developers/cartoframes/guides/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](https://carto.com/developers/carto-vl/guides/animated-visualizations/).
+
+The animation widget will get the animation expression from the `filter` property:
+
+```py
+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](../../img/guides/widgets/animation-widget.gif)
+
+### Animation Widget and Style Properties
+
+As mentioned above, the animation widget gets the animation expression from the `filter` property:
+
+```py
+from cartoframes.auth import set_default_context
+from cartoframes.viz import Map, Layer
+from cartoframes.viz.widgets import animation_widget
+
+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:
+
+```py
+from cartoframes.auth import set_default_context
+from cartoframes.viz import Map, Layer
+from cartoframes.viz.widgets import animation_widget
+
+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](../../img/guides/widgets/animation-property-widget.gif)
+
+### 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.
+
+```py
+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](../../img/guides/widgets/time-series-widget.gif)
+
+### 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.
+
+```py
+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](../../img/guides/widgets/combine-widgets.gif)
diff --git a/docs/developer-center/guides/08-Publishing.md b/docs/developer-center/guides/10-Publishing.md
similarity index 100%
rename from docs/developer-center/guides/08-Publishing.md
rename to docs/developer-center/guides/10-Publishing.md
diff --git a/docs/developer-center/guides/09-Spatial-Analysis.md b/docs/developer-center/guides/11-Spatial-Analysis.md
similarity index 100%
rename from docs/developer-center/guides/09-Spatial-Analysis.md
rename to docs/developer-center/guides/11-Spatial-Analysis.md
diff --git a/docs/developer-center/img/guides/widgets/animation-property-widget.gif b/docs/developer-center/img/guides/widgets/animation-property-widget.gif
new file mode 100644
index 000000000..0be9c8332
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/animation-property-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/animation-widget.gif b/docs/developer-center/img/guides/widgets/animation-widget.gif
new file mode 100644
index 000000000..860bb4d03
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/animation-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/category-widget.gif b/docs/developer-center/img/guides/widgets/category-widget.gif
new file mode 100644
index 000000000..5b96ee58d
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/category-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/combine-widgets.gif b/docs/developer-center/img/guides/widgets/combine-widgets.gif
new file mode 100644
index 000000000..a49ec8341
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/combine-widgets.gif differ
diff --git a/docs/developer-center/img/guides/widgets/default-widget.png b/docs/developer-center/img/guides/widgets/default-widget.png
new file mode 100644
index 000000000..d88ce0df9
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/default-widget.png differ
diff --git a/docs/developer-center/img/guides/widgets/formula-global-widget.gif b/docs/developer-center/img/guides/widgets/formula-global-widget.gif
new file mode 100644
index 000000000..eb8d6146e
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/formula-global-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/formula-viewport-widget.gif b/docs/developer-center/img/guides/widgets/formula-viewport-widget.gif
new file mode 100644
index 000000000..4f44735de
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/formula-viewport-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/histogram-widget.gif b/docs/developer-center/img/guides/widgets/histogram-widget.gif
new file mode 100644
index 000000000..6a9f8501d
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/histogram-widget.gif differ
diff --git a/docs/developer-center/img/guides/widgets/time-series-widget.gif b/docs/developer-center/img/guides/widgets/time-series-widget.gif
new file mode 100644
index 000000000..9973f84ad
Binary files /dev/null and b/docs/developer-center/img/guides/widgets/time-series-widget.gif differ
diff --git a/docs/maps.rst b/docs/maps.rst
index 86dc6d300..e01bf68b7 100644
--- a/docs/maps.rst
+++ b/docs/maps.rst
@@ -32,6 +32,13 @@ Helper Functions
    :noindex:
    :members:
 
+Widget Functions
+^^^^^^^^^^^^^^^^
+
+.. automodule:: cartoframes.viz.widgets
+   :noindex:
+   :members:
+
 Vector Layers
 ^^^^^^^^^^^^^
 
diff --git a/examples/03_visualizations/03_widgets_part_1.ipynb b/examples/03_visualizations/03_widgets_part_1.ipynb
new file mode 100644
index 000000000..d1c09afc4
--- /dev/null
+++ b/examples/03_visualizations/03_widgets_part_1.ipynb
@@ -0,0 +1,5025 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Widgets in CARTOframes\n",
+    "\n",
+    "Widgets allow you to explore, filter, and animate your map's data in CARTOframes.\n",
+    "\n",
+    "There are a variety of widgets available to embed with your map. Widgets can be standalone, combined inside of one layer, or across multiple layers. There are two ways to add widgets (from `cartoframes.viz.widgets`):\n",
+    "\n",
+    "1. Using the `Widget` class and passing a dict\n",
+    "2. Using a widget helper\n",
+    "\n",
+    "Click on the links below to go to a description and example of each method and available widgets in CARTOframes.\n",
+    "\n",
+    "## Widgets: Part 1\n",
+    "\n",
+    "- [Default Widget](#Default-Widget)\n",
+    "\n",
+    "- [Formula Widget](#Formula-Widget)\n",
+    "\n",
+    "- [Category Widget](#Category-Widget)\n",
+    "\n",
+    "- [Histogram Widget](#Histogram-Widget)\n",
+    "\n",
+    "\n",
+    "## Widgets: Part 2, Taking it Further\n",
+    "\n",
+    "- [Animation Widget](./04_widgets_part_2.ipynb#Animation-Widget)\n",
+    "\n",
+    "- [Time Series Widget](./04_widgets_part_2.ipynb#Time-Series-Widget)\n",
+    "\n",
+    "- [Combining Widgets](./04_widgets_part_2.ipynb#Combining-Widgets)\n",
+    "\n",
+    "- [Animation Widget and Style Properties](./04_widgets_part_2.ipynb#Animation-Widget-and-Style-Properties)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import set_default_credentials\n",
+    "from cartoframes.viz import Map, Layer\n",
+    "\n",
+    "set_default_credentials('cartovl')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Default Widget\n",
+    "The default widget is a general purpose widget that can be used to provide additional information about your map. \n",
+    "\n",
+    "#### Parameters: \n",
+    "* **`type`** (string): widget type\n",
+    "* **`title`** (string,optional): widget's title \n",
+    "* **`description`** (string,optional): widget's description\n",
+    "* **`footer`** (string,optional): widget's footer\n",
+    "\n",
+    "In the example below, the default widget is used to provide general information for a map of Seattle road collisions.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer0_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Road Collisions in 2018&quot;\n",
+       "    subheader=&quot;An analysis of collisions in Seattle, WA&quot;>\n",
+       "  </as-widget-header>\n",
+       "  \n",
+       "    <footer>Data source: City of Seattle</footer>\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;An analysis of collisions in Seattle, WA&quot;, &quot;footer&quot;: &quot;Data source: City of Seattle&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Road Collisions in 2018&quot;, &quot;type&quot;: &quot;default&quot;, &quot;value&quot;: &quot;&quot;, &quot;variable_name&quot;: &quot;&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x117794828>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add a default widget\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[{\n",
+    "            'type': 'default',\n",
+    "            'title': 'Road Collisions in 2018',\n",
+    "            'description': 'An analysis of collisions in Seattle, WA',\n",
+    "            'footer': 'Data source: City of Seattle'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "from cartoframes.viz.widgets import default_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            default_widget(\n",
+    "                title='Road Collisions in 2018',\n",
+    "                description='An analysis of collisions in Seattle, WA',\n",
+    "                footer='Data source: City of Seattle'\n",
+    "            )]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Formula Widget\n",
+    "\n",
+    "Formula widgets calculate aggregated values (`Avg`, `Max`, `Min`, `Sum`) from numeric columns or counts of features (`Count`) in a dataset.  A formula widget's aggregations can be calculated on `global` or `viewport` based values. If you want the values in a formula widget to update on zoom and/or pan, use viewport based aggregations. \n",
+    "\n",
+    "#### Parameters:\n",
+    "* **`type`** (string): widget type\n",
+    "* **`value`** (string): attribute for widget's aggregation\n",
+    "* **`title`** (string,optional): widget's title \n",
+    "* **`description`** (string,optional): widget's description\n",
+    "* **`footer`** (string,optional): widget's footer\n",
+    "* **`is_global`** (boolean,optional): only applicable to the `formula_widget` helper method to account for calculations based on the entire dataset vs. the default of `viewport` features.\n",
+    "\n",
+    "In the example below, the formula widget is used to count the number of collisions in the map's current viewport. Since the aggregations are viewport based, the count of collisions will update any time the map is zoomed or panned."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer0_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Number of Collisions&quot;\n",
+       "    subheader=&quot;Zoom and/or pan the map to update count&quot;>\n",
+       "  </as-widget-header>\n",
+       "\n",
+       "  <p class=&quot;as-title as-m--0 as-p--0 as-font--medium&quot; id=&quot;layer0_widget0-value&quot;>\n",
+       "    <span class=&quot;as-loading as-loading--s&quot;>\n",
+       "      <svg viewBox=&quot;0 0 50 50&quot;>\n",
+       "        <circle cx=&quot;25&quot; cy=&quot;25&quot; r=&quot;20&quot; fill=&quot;none&quot; />\n",
+       "      </svg>\n",
+       "    </span>\n",
+       "  </p>\n",
+       "\n",
+       "  \n",
+       "    <footer>collisions in this view</footer>\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v45e986: viewportCount()\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;Zoom and/or pan the map to update count&quot;, &quot;footer&quot;: &quot;collisions in this view&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Number of Collisions&quot;, &quot;type&quot;: &quot;formula&quot;, &quot;value&quot;: &quot;viewportCount()&quot;, &quot;variable_name&quot;: &quot;v45e986&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11761bb70>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add a formula count widget\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[{\n",
+    "            'type': 'formula',\n",
+    "            'value': 'viewportCount()',\n",
+    "            'title': 'Number of Collisions',\n",
+    "            'description': 'Zoom and/or pan the map to update count',\n",
+    "            'footer': 'collisions in this view'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "from cartoframes.viz.widgets import formula_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            formula_widget(\n",
+    "                'count',\n",
+    "                title='Number of Collisions',\n",
+    "                description='Zoom and/or pan the map to update count',\n",
+    "                footer='collisions in this view'\n",
+    "            )\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer0_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Total Number of Pedestrians&quot;\n",
+       "    subheader=&quot;involved over all collisions&quot;>\n",
+       "  </as-widget-header>\n",
+       "\n",
+       "  <p class=&quot;as-title as-m--0 as-p--0 as-font--medium&quot; id=&quot;layer0_widget0-value&quot;>\n",
+       "    <span class=&quot;as-loading as-loading--s&quot;>\n",
+       "      <svg viewBox=&quot;0 0 50 50&quot;>\n",
+       "        <circle cx=&quot;25&quot; cy=&quot;25&quot; r=&quot;20&quot; fill=&quot;none&quot; />\n",
+       "      </svg>\n",
+       "    </span>\n",
+       "  </p>\n",
+       "\n",
+       "  \n",
+       "    <footer>pedestrians</footer>\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vc697e9: globalSum($pedcount)\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;involved over all collisions&quot;, &quot;footer&quot;: &quot;pedestrians&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;isGlobal&quot;: true, &quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Total Number of Pedestrians&quot;, &quot;type&quot;: &quot;formula&quot;, &quot;value&quot;: &quot;globalSum($pedcount)&quot;, &quot;variable_name&quot;: &quot;vc697e9&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x1176c2780>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add a formula widget based on a value in the data\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[{\n",
+    "            'type': 'formula',\n",
+    "            'value': 'globalSUM($pedcount)',\n",
+    "            'title': 'Total Number of Pedestrians',\n",
+    "            'description': 'involved over all collisions',\n",
+    "            'footer': 'pedestrians'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            formula_widget(\n",
+    "                'pedcount',\n",
+    "                'sum',\n",
+    "                is_global=True,\n",
+    "                title='Total Number of Pedestrians',\n",
+    "                description='involved over all collisions',\n",
+    "                footer='pedestrians'\n",
+    "            )\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Category Widget\n",
+    "\n",
+    "Category widgets group features from string columns into aggregated categories based on their occurence in your current map view with their associated count. As you zoom or pan the map, the category widget updates. By default, you can also select a category to filter your map's data.\n",
+    "\n",
+    "#### Parameters:\n",
+    "* **`type`** (string): widget type\n",
+    "* **`value`** (string): category attribute\n",
+    "* **`title (string, optional)`**: title text\n",
+    "* **`description (string, optional)`**: description text\n",
+    "* **`footer (string, optional)`**: footer text\n",
+    "* **`read_only (boolean, optional)`**: interactively filter a category by selecting it in the widget. Set to \"False\" by default."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-category-widget\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  description=&quot;Select a category to filter&quot;\n",
+       "  heading=&quot;Type of Collision&quot;>\n",
+       "</as-category-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v118f1c: $collisiontype\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;Select a category to filter&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Type of Collision&quot;, &quot;type&quot;: &quot;category&quot;, &quot;value&quot;: &quot;collisiontype&quot;, &quot;variable_name&quot;: &quot;v118f1c&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x117588470>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add a category widget\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[{\n",
+    "            'type': 'category',\n",
+    "            'value': 'collisiontype',\n",
+    "            'title': 'Type of Collision',\n",
+    "            'description': 'Select a category to filter',\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "\n",
+    "from cartoframes.viz.widgets import category_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            category_widget(\n",
+    "                'collisiontype',\n",
+    "                title='Type of Collision',\n",
+    "                description='Select a category to filter',\n",
+    "            )\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Histogram Widget\n",
+    "\n",
+    "Histogram widgets display the distribution of a numeric attribute, in buckets, to group ranges of values in your data. By default, you can hover over each bar to see each bucket's values and count, and also filter your map's data within a given range.\n",
+    "\n",
+    "#### Parameters:\n",
+    "* **`type`** (string): widget type\n",
+    "* **`value`** (string): numeric attribute\n",
+    "* **`title (string, optional)`**: title text\n",
+    "* **`description (string, optional)`**: description text\n",
+    "* **`footer (string, optional)`**: footer text\n",
+    "* **`buckets`** (number,optional): number of histogram buckets\n",
+    "* **`read_only (boolean, optional)`**: interactively filter a range of numeric values by selecting them in the widget. Set to \"False\" by default.\n",
+    "\n",
+    "In the example below, the number of vehicles involved in each collision are grouped over 9 buckets."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-histogram-widget\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  description=&quot;Select a range of values to filter&quot;\n",
+       "  heading=&quot;Number of Vehicles Involved&quot;>\n",
+       "</as-histogram-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vdd4fd2: $vehcount\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;Select a range of values to filter&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;buckets&quot;: 9, &quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Number of Vehicles Involved&quot;, &quot;type&quot;: &quot;histogram&quot;, &quot;value&quot;: &quot;vehcount&quot;, &quot;variable_name&quot;: &quot;vdd4fd2&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x117590668>"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[{\n",
+    "            'type': 'histogram',\n",
+    "            'value': 'vehcount',\n",
+    "            'title': 'Number of Vehicles Involved',\n",
+    "            'description': 'Select a range of values to filter'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "\n",
+    "from cartoframes.viz.widgets import histogram_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            histogram_widget(\n",
+    "                'vehcount',\n",
+    "                title='Number of Vehicles Involved',\n",
+    "                description='Select a range of values to filter',\n",
+    "                buckets=9\n",
+    "            )\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/examples/03_visualizations/04_widgets_part_2.ipynb b/examples/03_visualizations/04_widgets_part_2.ipynb
new file mode 100644
index 000000000..99bc4e52d
--- /dev/null
+++ b/examples/03_visualizations/04_widgets_part_2.ipynb
@@ -0,0 +1,5025 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Widgets in CARTOframes\n",
+    "\n",
+    "Widgets allow you to explore, filter, and animate your map's data in CARTOframes.\n",
+    "\n",
+    "There are a variety of widgets available to embed with your map. Widgets can be standalone, combined inside of one layer, or across multiple layers. There are two ways to add widgets (from `cartoframes.viz.widgets`):\n",
+    "\n",
+    "1. Using the `Widget` class and passing a dict\n",
+    "2. Using a widget helper\n",
+    "\n",
+    "Click on the links below to go to a description and example of each method and available widgets in CARTOframes.\n",
+    "\n",
+    "## Widgets: Part 1\n",
+    "\n",
+    "- [Default Widget](./03_widgets_part_1.ipynb#Default-Widget)\n",
+    "\n",
+    "- [Formula Widget](./03_widgets_part_1.ipynb#Formula-Widget)\n",
+    "\n",
+    "- [Category Widget](./03_widgets_part_1.ipynb#Category-Widget)\n",
+    "\n",
+    "- [Histogram Widget](./03_widgets_part_1.ipynb#Histogram-Widget)\n",
+    "\n",
+    "\n",
+    "## Widgets: Part 2, Taking it Further\n",
+    "\n",
+    "- [Animation Widget](#Animation-Widget)\n",
+    "\n",
+    "- [Time Series Widget](#Time-Series-Widget)\n",
+    "\n",
+    "- [Combining Widgets](#Combining-Widgets)\n",
+    "\n",
+    "- [Animation Widget and Style Properties](#Animation-Widget-and-Style-Properties)\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import set_default_credentials\n",
+    "from cartoframes.viz import Map, Layer\n",
+    "\n",
+    "set_default_credentials('cartovl')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Animation Widget\n",
+    "\n",
+    "The animation widget includes an animation status bar as well as controls to play or pause animated data. The `filter` property of your map's style, applied to either a date or numeric field, drives both the animation and the widget. Only **one** animation can be controlled per layer. To learn more about creating animations visit: [Animated visualizations](https://carto.com/developers/carto-vl/guides/animated-visualizations/).\n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "* **`type`** (string): widget type\n",
+    "* **`title`** (string, optional): title text\n",
+    "* **`description`** (string, optional): description text\n",
+    "* **`footer`** (string, optional): footer text\n",
+    "\n",
+    "In the example below, collisions are animated by the date they occured. The animation can be controlled via the widget.\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      \n",
+       "<as-animation-controls-widget\n",
+       "  animated\n",
+       "  id='layer0_widget0'\n",
+       "  heading='Collision Date'\n",
+       "  description='Play, pause, or select the range of the animation'\n",
+       "></as-animation-controls-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\nfilter: animation($incdate, 20, fade(0.5,0.5))&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;Play, pause, or select the range of the animation&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Collision Date&quot;, &quot;type&quot;: &quot;animation&quot;, &quot;value&quot;: &quot;&quot;, &quot;variable_name&quot;: &quot;&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11b2caa58>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add an animation widget\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'filter: animation($incdate, 20, fade(0.5,0.5))',\n",
+    "        widgets=[{\n",
+    "            'type': 'animation'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "from cartoframes.viz.widgets import animation_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'filter: animation($incdate, 20, fade(0.5,0.5))',\n",
+    "        widgets=[\n",
+    "            animation_widget(\n",
+    "                title='Collision Date',\n",
+    "                description= 'Play, pause, or select the range of the animation'\n",
+    "            )]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Time Series Widget\n",
+    "\n",
+    "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.\n",
+    "\n",
+    "#### Parameters:\n",
+    "* **`type`** (string): widget type\n",
+    "* **`value`** (string): date or numeric field \n",
+    "* **`title`** (string, optional): title text\n",
+    "* **`description`** (string, optional): description text\n",
+    "* **`footer`** (string, optional): footer text\n",
+    "* **`buckets`** (number, optional): the number of time series buckets\n",
+    "\n",
+    "In the example below, collisions are animated by the date they occured. The number of incidents over time are shown in the time series widget. The animation can be controlled and date ranges filtered via the widget."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;Play, pause, or select a range for the animation&quot;\n",
+       "  heading=&quot;Number of Collisions by Date&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vcb02a8: $incdate\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\nfilter: animation($incdate, 20, fade(0.5,0.5))&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;Play, pause, or select a range for the animation&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;buckets&quot;: 10, &quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Number of Collisions by Date&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;incdate&quot;, &quot;variable_name&quot;: &quot;vcb02a8&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11b1137f0>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'filter: animation($incdate, 20, fade(0.5,0.5))',\n",
+    "        widgets=[{\n",
+    "            'type': 'time-series'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "from cartoframes.viz.widgets import time_series_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'filter: animation($incdate, 20, fade(0.5,0.5))',\n",
+    "        widgets=[\n",
+    "            time_series_widget(\n",
+    "                value='incdate',\n",
+    "                title='Number of Collisions by Date',\n",
+    "                description= 'Play, pause, or select a range for the animation',\n",
+    "                buckets=10\n",
+    "            )]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Combining Widgets\n",
+    "\n",
+    "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."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer0_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Total Number of Pedestrians&quot;\n",
+       "    subheader=&quot;involved over all collisions&quot;>\n",
+       "  </as-widget-header>\n",
+       "\n",
+       "  <p class=&quot;as-title as-m--0 as-p--0 as-font--medium&quot; id=&quot;layer0_widget0-value&quot;>\n",
+       "    <span class=&quot;as-loading as-loading--s&quot;>\n",
+       "      <svg viewBox=&quot;0 0 50 50&quot;>\n",
+       "        <circle cx=&quot;25&quot; cy=&quot;25&quot; r=&quot;20&quot; fill=&quot;none&quot; />\n",
+       "      </svg>\n",
+       "    </span>\n",
+       "  </p>\n",
+       "\n",
+       "  \n",
+       "    <footer>pedestrians</footer>\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-category-widget\n",
+       "  id=&quot;layer0_widget1&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;&quot;>\n",
+       "</as-category-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vc697e9: globalSum($pedcount)\\n@vb25da0: $addrtype\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;involved over all collisions&quot;, &quot;footer&quot;: &quot;pedestrians&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;isGlobal&quot;: true, &quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Total Number of Pedestrians&quot;, &quot;type&quot;: &quot;formula&quot;, &quot;value&quot;: &quot;globalSum($pedcount)&quot;, &quot;variable_name&quot;: &quot;vc697e9&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;category&quot;, &quot;value&quot;: &quot;addrtype&quot;, &quot;variable_name&quot;: &quot;vb25da0&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11b20e470>"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Combine a category and formula widget\n",
+    "\n",
+    "from cartoframes.viz.widgets import category_widget, formula_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[\n",
+    "            formula_widget(\n",
+    "                'pedcount',\n",
+    "                'sum',\n",
+    "                is_global=True,\n",
+    "                title='Total Number of Pedestrians',\n",
+    "                description='involved over all collisions',\n",
+    "                footer='pedestrians'\n",
+    "            ),\n",
+    "            category_widget('addrtype')\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Animation Widget and Style Properties\n",
+    "\n",
+    "As mentioned above, the animation widget gets the animation expression from the `filter` property:\n",
+    "\n",
+    "```py\n",
+    "from cartoframes.auth import set_default_context\n",
+    "from cartoframes.viz import Map, Layer\n",
+    "from cartoframes.viz.widgets import animation_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'filter: animation($incdate, 30, fade(1, 1))',\n",
+    "        widgets=[animation_widget()]\n",
+    "    )\n",
+    ")\n",
+    "```\n",
+    "\n",
+    "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:\n",
+    "\n",
+    "```py\n",
+    "from cartoframes.auth import set_default_context\n",
+    "from cartoframes.viz import Map, Layer\n",
+    "from cartoframes.viz.widgets import animation_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'width: animation(linear($incdate), 20,fade(1, 1)) * ramp(linear($personcount, 2, 5), [5, 20])',\n",
+    "        widgets=[animation_widget(prop='width')]\n",
+    "    )\n",
+    ")\n",
+    "```\n",
+    "\n",
+    "The map below displays two variables: the date and time a collision occured as well as the number of people involved in each incident by width. The animation widget is set to read from the `width` property of the style."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      \n",
+       "<as-animation-controls-widget\n",
+       "  animated\n",
+       "  id='layer0_widget0'\n",
+       "  heading=''\n",
+       "  description=''\n",
+       "></as-animation-controls-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;color: hex(\\&quot;#EE4D5A\\&quot;)\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\nwidth: animation(linear($incdate), 20, fade(1,1)) * ramp(linear($personcount, 2, 5), [5, 20])&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;animation&quot;, &quot;value&quot;: &quot;&quot;, &quot;variable_name&quot;: &quot;&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11b20be10>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Add an animation widget\n",
+    "# Animate by width property\n",
+    "\n",
+    "# Using a dict\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'width: animation(linear($incdate), 20,fade(1, 1)) * ramp(linear($personcount, 2, 5), [5, 20])',\n",
+    "        widgets=[{\n",
+    "            'type': 'animation',\n",
+    "            'prop': 'width'\n",
+    "        }]\n",
+    "    )\n",
+    ")\n",
+    "\n",
+    "# Using a helper method\n",
+    "from cartoframes.viz.widgets import animation_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        'width: animation(linear($incdate), 20, fade(1,1)) * ramp(linear($personcount, 2, 5), [5, 20])',\n",
+    "        widgets=[animation_widget(prop='width')]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      \n",
+       "<as-animation-controls-widget\n",
+       "  animated\n",
+       "  id='layer0_widget0'\n",
+       "  heading=''\n",
+       "  description=''\n",
+       "></as-animation-controls-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-category-widget\n",
+       "  id=&quot;layer0_widget1&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;&quot;>\n",
+       "</as-category-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vb25da0: $addrtype\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n\\n        color: ramp($addrtype, Bold)\\n        strokeWidth: 0\\n        width: animation(linear($incdate), 20,fade(1, 1)) * ramp(linear($personcount, 2, 5), [5, 20])\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;width&quot;, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;animation&quot;, &quot;value&quot;: &quot;&quot;, &quot;variable_name&quot;: &quot;&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;&quot;, &quot;type&quot;: &quot;category&quot;, &quot;value&quot;: &quot;addrtype&quot;, &quot;variable_name&quot;: &quot;vb25da0&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11b0bfcc0>"
+      ]
+     },
+     "execution_count": 6,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "# Combine an animation and category widget\n",
+    "\n",
+    "from cartoframes.viz.widgets import animation_widget, category_widget\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        '''\n",
+    "        color: ramp($addrtype, Bold)\n",
+    "        strokeWidth: 0\n",
+    "        width: animation(linear($incdate), 20,fade(1, 1)) * ramp(linear($personcount, 2, 5), [5, 20])\n",
+    "        ''',\n",
+    "        widgets=[\n",
+    "            animation_widget(prop='width'),\n",
+    "            category_widget('addrtype')\n",
+    "        ]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/examples/06_advanced/visualize-temperatures.ipynb b/examples/06_advanced/visualize-temperatures.ipynb
new file mode 100644
index 000000000..3249c50fe
--- /dev/null
+++ b/examples/06_advanced/visualize-temperatures.ipynb
@@ -0,0 +1,1153 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import set_default_credentials\n",
+    "from cartoframes.viz import Map, Layer, Legend, Widget, basemaps\n",
+    "\n",
+    "set_default_credentials('cartovl')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 9,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/v2.2.0-rc.2/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/v2.2.0-rc.2/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/v2.2.0-rc.2/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/v2.2.0-rc.2/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  \n",
+       "    <style>\n",
+       "  :root {\n",
+       "    /* Theme Colors */\n",
+       "\n",
+       "    /* Brand */\n",
+       "    --as--color--primary: #17B0FF;\n",
+       "    --as--color--secondary: #212129;\n",
+       "    --as--color--complementary--hover: #E200E2;\n",
+       "    --as--color--complementary--active: #E200E2;\n",
+       "\n",
+       "    /* &quot;Type Colors&quot; from lighter to darker */\n",
+       "    --as--color--type-01: #EDF2F7;\n",
+       "    --as--color--type-02: #DBE6F0;\n",
+       "    --as--color--type-03: #C9D9E8;\n",
+       "    --as--color--type-04: #B8CCE0;\n",
+       "\n",
+       "    /* &quot;UI Colors&quot; from darker to lighter */\n",
+       "    --as--color--ui-01: #242935;\n",
+       "    --as--color--ui-02: #3D3E51;\n",
+       "    --as--color--ui-03: #40445A;\n",
+       "    --as--color--ui-04: #4C5265;\n",
+       "\n",
+       "    /* Badges */\n",
+       "    --as--color--badge-gray: #4C5265;\n",
+       "    --as--color--badge-blue: #3F6892;\n",
+       "    --as--color--badge-green: #3F9269;\n",
+       "    --as--color--badge-pink: #923F68;\n",
+       "    --as--color--badge-yellow: #92693F;\n",
+       "\n",
+       "    /* Support colors */\n",
+       "    --as--color--error: #E200E2;\n",
+       "    --as--color--error-alpha: rgba(226, 0, 226, 0.349);\n",
+       "    --as--color--warning: #FFD20A;\n",
+       "    --as--color--success: #17FF66;\n",
+       "\n",
+       "    /* Text colors */\n",
+       "    --as--color--text: #FFF;\n",
+       "    --as--color--text-contrast: #000;\n",
+       "    --as--color--shadow: #000;\n",
+       "  }\n",
+       "</style>\n",
+       "  \n",
+       "  <style>\n",
+       "  body {\n",
+       "    margin: 0;\n",
+       "    padding: 0;\n",
+       "  }\n",
+       "\n",
+       "  aside.as-sidebar {\n",
+       "    min-width: 300px;\n",
+       "  }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  #map {\n",
+       "    position: absolute;\n",
+       "    height: 100%;\n",
+       "    width: 100%;\n",
+       "  }\n",
+       "\n",
+       "  .map-info {\n",
+       "    position: absolute;\n",
+       "    bottom: 0;\n",
+       "    padding: 0 5px;\n",
+       "    background-color: rgba(255, 255, 255, 0.5);\n",
+       "    margin: 0;\n",
+       "    color: rgba(0, 0, 0, 0.75);\n",
+       "    font-size: 12px;\n",
+       "    width: auto;\n",
+       "    height: 18px;\n",
+       "    font-family: 'Open Sans';\n",
+       "  }\n",
+       "\n",
+       "  .map-footer {\n",
+       "    background: #F2F6F9;\n",
+       "    font-family: Roboto;\n",
+       "    font-size: 12px;\n",
+       "    line-height: 24px;\n",
+       "    color: #162945;\n",
+       "    text-align: center;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a {\n",
+       "    text-decoration: none;\n",
+       "  }\n",
+       "\n",
+       "  .map-footer a:hover {\n",
+       "    text-decoration: underline;\n",
+       "  }\n",
+       "</style>\n",
+       "    <style>\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "      color: black;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "</style>\n",
+       "  <style>\n",
+       "  as-widget-header .as-widget-header__header {\n",
+       "    margin-bottom: 8px;\n",
+       "  }\n",
+       "\n",
+       "  as-widget-header .as-widget-header__subheader {\n",
+       "    margin-bottom: 12px;\n",
+       "  }\n",
+       "\n",
+       "  as-category-widget {\n",
+       "    max-height: 250px;\n",
+       "  }\n",
+       "</style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer1_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Max Degrees (°F)&quot;\n",
+       "    subheader=&quot;&quot;>\n",
+       "  </as-widget-header>\n",
+       "\n",
+       "  <p class=&quot;as-title as-m--0 as-p--0 as-font--medium&quot; id=&quot;layer1_widget0-value&quot;>\n",
+       "    <span class=&quot;as-loading as-loading--s&quot;>\n",
+       "      <svg viewBox=&quot;0 0 50 50&quot;>\n",
+       "        <circle cx=&quot;25&quot; cy=&quot;25&quot; r=&quot;20&quot; fill=&quot;none&quot; />\n",
+       "      </svg>\n",
+       "    </span>\n",
+       "  </p>\n",
+       "\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer1_widget1&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Animation by Temperature&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "          <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "    \n",
+       "      <as-legend\n",
+       "        heading=&quot;Max Heat Index for July 20, 2019&quot;\n",
+       "        description=&quot;Degrees (°F)&quot;\n",
+       "      >\n",
+       "        <as-legend-color-continuous-polygon id=&quot;layer1_legend&quot; slot=&quot;legends&quot;></as-legend-color-continuous-polygon>\n",
+       "        \n",
+       "          <span slot=&quot;footer&quot;>Issued: 7/17/19 | Source: NOAA Weather Predicition Center</span>\n",
+       "        \n",
+       "      </as-legend>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#defaultLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#defaultLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#layer${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.prop) {\n",
+       "    const config = { othersLabel: 'Others' }  // TODO: i18n\n",
+       "    const opts = { format, config };\n",
+       "\n",
+       "    if (legendData.type.startsWith('size-continuous')) {\n",
+       "      config.samples = 4;\n",
+       "    }\n",
+       "    \n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.prop,\n",
+       "      opts\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {&quot;description&quot;: &quot;Degrees (\\u00b0F)&quot;, &quot;footer&quot;: &quot;Issued: 7/17/19 | Source: NOAA Weather Predicition Center&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Max Heat Index for July 20, 2019&quot;, &quot;type&quot;: &quot;color-continuous-polygon&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;maxhi_20190717_72\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v558df2: viewportMAX($value)\\n@vf32b67: $value\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n\\n            color: ramp(linear($value,globalMIN($value),globalMAX($value)),[turquoise, yellow, red])\\n            filter: animation(linear($value,globalMIN($value),globalMAX($value)), 20, fade(0.1, hold))\\n            strokeWidth: 0\\n            width: 5\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Max Degrees (\\u00b0F)&quot;, &quot;type&quot;: &quot;formula&quot;, &quot;value&quot;: &quot;viewportMAX($value)&quot;, &quot;variable_name&quot;: &quot;v558df2&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Animation by Temperature&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;value&quot;, &quot;variable_name&quot;: &quot;vf32b67&quot;}]}, {&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;state_bounds\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;width: ramp(linear(zoom(),0,18),[0.5,4])\\ncolor: rgba(200,200,200,0.8)&quot;, &quot;widgets&quot;: []}];\n",
+       "\n",
+       "  map.fitBounds([[-124.43, 23.5], [-66.44, 50.11]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "    map.flyTo({&quot;center&quot;: [-110.638529, 37.572586], &quot;zoom&quot;: 2});\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "    if (layer.legend) {\n",
+       "      createLegend(mapLayer, layer.legend, layers.length - index - 1);\n",
+       "    }\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x108a294e0>"
+      ]
+     },
+     "execution_count": 9,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Map ([\n",
+    "    Layer(\n",
+    "        'maxhi_20190717_72',\n",
+    "        '''\n",
+    "            color: ramp(linear($value,globalMIN($value),globalMAX($value)),[turquoise, yellow, red])\n",
+    "            filter: animation(linear($value,globalMIN($value),globalMAX($value)), 20, fade(0.1, hold))\n",
+    "            strokeWidth: 0\n",
+    "            width: 5\n",
+    "        ''',\n",
+    "        legend={\n",
+    "            'type':'color-continuous-polygon',\n",
+    "            'title': 'Max Heat Index for July 20, 2019',\n",
+    "            'description': 'Degrees (°F)',\n",
+    "            'footer': 'Issued: 7/17/19 | Source: NOAA Weather Predicition Center'\n",
+    "        },\n",
+    "        widgets=[\n",
+    "                Widget(\n",
+    "                    'formula',\n",
+    "                    value='viewportMAX($value)',\n",
+    "                    title='Max Degrees (°F)',\n",
+    "                ),\n",
+    "                Widget('time-series', value='value', title='Animation by Temperature'),\n",
+    "          \n",
+    "        ],\n",
+    "    ),\n",
+    "    Layer(\n",
+    "        'state_bounds',\n",
+    "        'color: rgba(200,200,200,0.8)',\n",
+    "        'width: 2'\n",
+    "    ),\n",
+    "    ],\n",
+    "    basemap=basemaps.darkmatter,\n",
+    "     viewport={'zoom': 2, 'lat': 37.572586, 'lng': -110.638529},\n",
+    "    )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/examples/_debug/widgets_animation.ipynb b/examples/_debug/widgets_animation.ipynb
index 53dd44c59..be223f744 100644
--- a/examples/_debug/widgets_animation.ipynb
+++ b/examples/_debug/widgets_animation.ipynb
@@ -979,13 +979,6 @@
     "    )\n",
     ")"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
diff --git a/examples/_debug/widgets_animation_width.ipynb b/examples/_debug/widgets_animation_width.ipynb
index bdfa5b455..ee0175911 100644
--- a/examples/_debug/widgets_animation_width.ipynb
+++ b/examples/_debug/widgets_animation_width.ipynb
@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -14,7 +14,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [
     {
@@ -951,7 +951,7 @@
        "<cartoframes.viz.map.Map at 0x7f4827f88ef0>"
       ]
      },
-     "execution_count": 2,
+     "execution_count": 5,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -972,8 +972,7 @@
     "        }, {\n",
     "            'type': 'category',\n",
     "            'value': 'addrtype',\n",
-    "            'title': 'Address type',\n",
-    "            'read_only': False\n",
+    "            'title': 'Address type'\n",
     "        }]\n",
     "    )\n",
     ")"
@@ -981,7 +980,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 6,
    "metadata": {},
    "outputs": [
     {
diff --git a/examples/_debug/widgets_review.ipynb b/examples/_debug/widgets_review.ipynb
new file mode 100644
index 000000000..d86b9ff8c
--- /dev/null
+++ b/examples/_debug/widgets_review.ipynb
@@ -0,0 +1,5085 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import set_default_context\n",
+    "from cartoframes.viz import Map, Layer, Widget\n",
+    "\n",
+    "set_default_context('https://cartovl.carto.com/')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Custom Animation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "scrolled": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Seattle Collisions&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vcb02a8: $incdate\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n\\n          @duration: 30\\n          filter: animation($incdate, @duration, fade(0.5, 0.5))\\n          strokeWidth: 0\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;buckets&quot;: 10, &quot;title&quot;: &quot;Seattle Collisions&quot;, &quot;value&quot;: &quot;incdate&quot;}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Seattle Collisions&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;incdate&quot;, &quot;variable_name&quot;: &quot;vcb02a8&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x119148668>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        '''\n",
+    "          @duration: 30\n",
+    "          filter: animation($incdate, @duration, fade(0.5, 0.5))\n",
+    "          strokeWidth: 0\n",
+    "        ''',\n",
+    "        widgets=[Widget('time-series', value='incdate', title='Seattle Collisions', buckets=10)]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Default Animation"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Seattle Collisions&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;seattle_collisions\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@vcb02a8: $incdate\\ncolor: hex(\\&quot;#EE4D5A\\&quot;)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;title&quot;: &quot;Seattle Collisions&quot;, &quot;value&quot;: &quot;incdate&quot;}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Seattle Collisions&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;incdate&quot;, &quot;variable_name&quot;: &quot;vcb02a8&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-122.41652628785, 47.4959893722081], [-122.238951209297, 47.7341365013854]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x1191f7748>"
+      ]
+     },
+     "execution_count": 3,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Map(\n",
+    "    Layer(\n",
+    "        'seattle_collisions',\n",
+    "        widgets=[Widget('time-series', value='incdate', title='Seattle Collisions')]\n",
+    "    )\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from cartoframes.auth import set_default_context\n",
+    "from cartoframes.viz import Map, Layer, Legend, Widget, basemaps\n",
+    "\n",
+    "set_default_context('https://cartovl.carto.com/')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Year Built&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-histogram-widget\n",
+       "  id=&quot;layer0_widget1&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Number of Floors&quot;>\n",
+       "</as-histogram-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "          <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legend\n",
+       "        heading=&quot;Manhattan Development (1900-2013)&quot;\n",
+       "        description=&quot;Number of Floors&quot;\n",
+       "      >\n",
+       "        <as-legend-color-continuous-polygon id=&quot;layer0_legend&quot; slot=&quot;legends&quot;></as-legend-color-continuous-polygon>\n",
+       "        \n",
+       "          <span slot=&quot;footer&quot;>Data: City of New York</span>\n",
+       "        \n",
+       "      </as-legend>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#defaultLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#defaultLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#layer${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.prop) {\n",
+       "    const config = { othersLabel: 'Others' }  // TODO: i18n\n",
+       "    const opts = { format, config };\n",
+       "\n",
+       "    if (legendData.type.startsWith('size-continuous')) {\n",
+       "      config.samples = 4;\n",
+       "    }\n",
+       "    \n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.prop,\n",
+       "      opts\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {&quot;description&quot;: &quot;Number of Floors&quot;, &quot;footer&quot;: &quot;Data: City of New York&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Manhattan Development (1900-2013)&quot;, &quot;type&quot;: &quot;color-continuous-polygon&quot;}, &quot;query&quot;: &quot;select * from mnmappluto where numfloors \\u003e 2 and yearbuilt \\u003e= 1900&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v234b58: $yearbuilt\\n@v2de169: $numfloors\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n\\n            color: ramp(linear($numfloors), ag_sunset)\\n            filter: animation(linear($yearbuilt), 20, fade(0.1, hold))\\n            strokeWidth: 0\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;title&quot;: &quot;Year Built&quot;, &quot;value&quot;: &quot;yearbuilt&quot;}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Year Built&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;yearbuilt&quot;, &quot;variable_name&quot;: &quot;v234b58&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;buckets&quot;: 10, &quot;options&quot;: {&quot;read_only&quot;: true}, &quot;title&quot;: &quot;Number of Floors&quot;, &quot;value&quot;: &quot;numfloors&quot;}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Number of Floors&quot;, &quot;type&quot;: &quot;histogram&quot;, &quot;value&quot;: &quot;numfloors&quot;, &quot;variable_name&quot;: &quot;v2de169&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-74.0193502892167, 40.6997586931965], [-73.906791238675, 40.878999248182]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "    map.flyTo({&quot;center&quot;: [-73.995281, 40.73095], &quot;zoom&quot;: 12.54});\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "    if (layer.legend) {\n",
+       "      createLegend(mapLayer, layer.legend, layers.length - index - 1);\n",
+       "    }\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x1190b8160>"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Map(\n",
+    "    Layer(\n",
+    "        'select * from mnmappluto where numfloors > 2 and yearbuilt >= 1900',\n",
+    "        '''\n",
+    "            color: ramp(linear($numfloors), ag_sunset)\n",
+    "            filter: animation(linear($yearbuilt), 20, fade(0.1, hold))\n",
+    "            strokeWidth: 0\n",
+    "        ''',\n",
+    "        legend={\n",
+    "            'type':'color-continuous-polygon',\n",
+    "            'title': 'Manhattan Development (1900-2013)',\n",
+    "            'description': 'Number of Floors',\n",
+    "            'footer': 'Data: City of New York'\n",
+    "        },\n",
+    "        widgets=[\n",
+    "            Widget('time-series', value='yearbuilt', title='Year Built'),\n",
+    "            Widget(\n",
+    "                'histogram',\n",
+    "                value='numfloors',\n",
+    "                title='Number of Floors',\n",
+    "                buckets=10,\n",
+    "                options={'read_only': True}\n",
+    "            )\n",
+    "        ],\n",
+    "    ),\n",
+    "    viewport={'zoom': 12.54, 'lat': 40.730950, 'lng': -73.995281},\n",
+    "    basemap=basemaps.darkmatter\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 122,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'id': '90032aa3-1992-44f5-b8e6-cc7c66f1f9eb',\n",
+       " 'url': 'https://cartovl.carto.com/kuviz/90032aa3-1992-44f5-b8e6-cc7c66f1f9eb',\n",
+       " 'name': '3 Day Heat Index',\n",
+       " 'privacy': 'public'}"
+      ]
+     },
+     "execution_count": 122,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "tmap= Map (\n",
+    "    [\n",
+    "    Layer(\n",
+    "        'maxhi_20190717_72',\n",
+    "        '''\n",
+    "            color: ramp(linear($value,globalMIN($value),globalMAX($value)),[turquoise, yellow, red])\n",
+    "            filter: animation(linear($value,globalMIN($value),globalMAX($value)), 20, fade(0.1, hold))\n",
+    "            strokeWidth: 0\n",
+    "            width: 5\n",
+    "        ''',\n",
+    "        legend={\n",
+    "            'type':'color-continuous-polygon',\n",
+    "            'title': 'Max Heat Index for July 20, 2019',\n",
+    "            'description': 'Degrees (°F)',\n",
+    "            'footer': 'Issued: 7/17/19 | Source: NOAA Weather Predicition Center'\n",
+    "        },\n",
+    "        widgets=[\n",
+    "                Widget(\n",
+    "                    'formula',\n",
+    "                    value='viewportMAX($value)',\n",
+    "                    title='Max Degrees (°F)',\n",
+    "                ),\n",
+    "                Widget('time-series', value='value', title='Animation by Temperature'),\n",
+    "          \n",
+    "        ],\n",
+    "    ),\n",
+    "    Layer(\n",
+    "        'state_bounds',\n",
+    "        'color: rgba(200,200,200,0.8)',\n",
+    "        'width: 2'\n",
+    "    ),\n",
+    "    ],\n",
+    "    \n",
+    "     viewport={'zoom': 2, 'lat': 37.572586, 'lng': -96.638529},\n",
+    "    )\n",
+    "\n",
+    "\n",
+    "tmap.publish('3 Day Heat Index')\n",
+    "\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 117,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <div id=layer1_widget0>\n",
+       "  <as-widget-header\n",
+       "    header=&quot;Max Degrees (°F)&quot;\n",
+       "    subheader=&quot;&quot;>\n",
+       "  </as-widget-header>\n",
+       "\n",
+       "  <p class=&quot;as-title as-m--0 as-p--0 as-font--medium&quot; id=&quot;layer1_widget0-value&quot;>\n",
+       "    <span class=&quot;as-loading as-loading--s&quot;>\n",
+       "      <svg viewBox=&quot;0 0 50 50&quot;>\n",
+       "        <circle cx=&quot;25&quot; cy=&quot;25&quot; r=&quot;20&quot; fill=&quot;none&quot; />\n",
+       "      </svg>\n",
+       "    </span>\n",
+       "  </p>\n",
+       "\n",
+       "  \n",
+       "</div>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer1_widget1&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Animation by Temperature&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "          <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "  \n",
+       "    \n",
+       "      <as-legend\n",
+       "        heading=&quot;Max Heat Index for July 20, 2019&quot;\n",
+       "        description=&quot;Degrees (°F)&quot;\n",
+       "      >\n",
+       "        <as-legend-color-continuous-polygon id=&quot;layer1_legend&quot; slot=&quot;legends&quot;></as-legend-color-continuous-polygon>\n",
+       "        \n",
+       "          <span slot=&quot;footer&quot;>Issued: 7/17/19 | Source: NOAA Weather Predicition Center</span>\n",
+       "        \n",
+       "      </as-legend>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#defaultLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#defaultLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#layer${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.prop) {\n",
+       "    const config = { othersLabel: 'Others' }  // TODO: i18n\n",
+       "    const opts = { format, config };\n",
+       "\n",
+       "    if (legendData.type.startsWith('size-continuous')) {\n",
+       "      config.samples = 4;\n",
+       "    }\n",
+       "    \n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.prop,\n",
+       "      opts\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {&quot;description&quot;: &quot;Degrees (\\u00b0F)&quot;, &quot;footer&quot;: &quot;Issued: 7/17/19 | Source: NOAA Weather Predicition Center&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Max Heat Index for July 20, 2019&quot;, &quot;type&quot;: &quot;color-continuous-polygon&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;maxhi_20190717_72\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v558df2: viewportMAX($value)\\n@vf32b67: $value\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n\\n            color: ramp(linear($value,globalMIN($value),globalMAX($value)),[turquoise, yellow, red])\\n            filter: animation(linear($value,globalMIN($value),globalMAX($value)), 20, fade(0.1, hold))\\n            strokeWidth: 0\\n            width: 6\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: false, &quot;options&quot;: {&quot;title&quot;: &quot;Max Degrees (\\u00b0F)&quot;, &quot;value&quot;: &quot;viewportMAX($value)&quot;}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Max Degrees (\\u00b0F)&quot;, &quot;type&quot;: &quot;formula&quot;, &quot;value&quot;: &quot;viewportMAX($value)&quot;, &quot;variable_name&quot;: &quot;v558df2&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;title&quot;: &quot;Animation by Temperature&quot;, &quot;value&quot;: &quot;value&quot;}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Animation by Temperature&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;value&quot;, &quot;variable_name&quot;: &quot;vf32b67&quot;}]}, {&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;state_bounds\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;width: ramp(linear(zoom(),0,18),[0.5,4])\\ncolor: rgba(200,200,200,0.8)&quot;, &quot;widgets&quot;: []}];\n",
+       "\n",
+       "  map.fitBounds([[-124.43, 23.5], [-66.44, 50.11]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "    map.flyTo({&quot;center&quot;: [-96.638529, 37.572586], &quot;zoom&quot;: 2});\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "    if (layer.legend) {\n",
+       "      createLegend(mapLayer, layer.legend, layers.length - index - 1);\n",
+       "    }\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x11a5def28>"
+      ]
+     },
+     "execution_count": 117,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "\n",
+    "\n",
+    "Map (\n",
+    "    [\n",
+    "    Layer(\n",
+    "        'maxhi_20190717_72',\n",
+    "        '''\n",
+    "            color: ramp(linear($value,globalMIN($value),globalMAX($value)),[turquoise, yellow, red])\n",
+    "            filter: animation(linear($value,globalMIN($value),globalMAX($value)), 20, fade(0.1, hold))\n",
+    "            strokeWidth: 0\n",
+    "            width: 6\n",
+    "        ''',\n",
+    "        legend={\n",
+    "            'type':'color-continuous-polygon',\n",
+    "            'title': 'Max Heat Index for July 20, 2019',\n",
+    "            'description': 'Degrees (°F)',\n",
+    "            'footer': 'Issued: 7/17/19 | Source: NOAA Weather Predicition Center'\n",
+    "        },\n",
+    "        widgets=[\n",
+    "                Widget(\n",
+    "                    'formula',\n",
+    "                    value='viewportMAX($value)',\n",
+    "                    title='Max Degrees (°F)',\n",
+    "                ),\n",
+    "                Widget('time-series', value='value', title='Animation by Temperature'),\n",
+    "          \n",
+    "        ],\n",
+    "    ),\n",
+    "    Layer(\n",
+    "        'state_bounds',\n",
+    "        'color: rgba(200,200,200,0.8)',\n",
+    "        'width: 2'\n",
+    "    ),\n",
+    "    ],\n",
+    "    \n",
+    "     viewport={'zoom': 2, 'lat': 37.572586, 'lng': -96.638529},\n",
+    "    )\n",
+    "\n",
+    "\n",
+    "\n",
+    "    \n",
+    "\n",
+    "\n",
+    "\n",
+    "\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "          <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legend\n",
+       "        heading=&quot;value&quot;\n",
+       "        description=&quot;&quot;\n",
+       "      >\n",
+       "        <as-legend-color-continuous-point id=&quot;layer0_legend&quot; slot=&quot;legends&quot;></as-legend-color-continuous-point>\n",
+       "        \n",
+       "      </as-legend>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#defaultLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#defaultLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#layer${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.prop) {\n",
+       "    const config = { othersLabel: 'Others' }  // TODO: i18n\n",
+       "    const opts = { format, config };\n",
+       "\n",
+       "    if (legendData.type.startsWith('size-continuous')) {\n",
+       "      config.samples = 4;\n",
+       "    }\n",
+       "    \n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.prop,\n",
+       "      opts\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['Positron'] || 'Positron' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [{&quot;attrs&quot;: [{&quot;name&quot;: &quot;v101966&quot;, &quot;title&quot;: &quot;value&quot;}], &quot;event&quot;: &quot;hover&quot;}], &quot;legend&quot;: {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;value&quot;, &quot;type&quot;: &quot;color-continuous-point&quot;}, &quot;query&quot;: &quot;SELECT * FROM \\&quot;public\\&quot;.\\&quot;maxhi_20190717_72\\&quot;&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v101966: $value\\ncolor: ramp(linear($value), bluyl)\\nwidth: ramp(linear(zoom(),0,18),[2,10])\\nstrokeWidth: ramp(linear(zoom(),0,18),[0,1])\\nstrokeColor: opacity(#222,ramp(linear(zoom(),0,18),[0,0.6]))\\n&quot;, &quot;widgets&quot;: []}];\n",
+       "\n",
+       "  map.fitBounds([[-124.43, 23.5], [-66.44, 50.11]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "    if (layer.legend) {\n",
+       "      createLegend(mapLayer, layer.legend, layers.length - index - 1);\n",
+       "    }\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x1190dcac8>"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "note to self\n",
+    "- add footer to widgets\n",
+    "\n",
+    "- adding opacity to all features via a filter breaks animation widget\n",
+    "filter: animation(linear($time), 20, fade(0,hold))+0.01\n",
+    "\n",
+    "Map (\n",
+    "    Layer(\n",
+    "        'all_week',\n",
+    "        '''\n",
+    "            //color: ramp(linear($mag),[turquoise, yellow, red])\n",
+    "            filter: animation(linear($time), 20, fade(1,1))\n",
+    "            //strokeWidth: 0\n",
+    "        ''',\n",
+    "         widgets=[\n",
+    "                Widget('time-series', value='mag', title='Animation by Temperature'),\n",
+    "          \n",
+    "        ],\n",
+    "    ),\n",
+    ")\n",
+    "\n",
+    "- add use case to helper api ticket\n",
+    "color_continuous_layer(\n",
+    "        'all_week',\n",
+    "        'mag',\n",
+    "        '''\n",
+    "        filter: filter: animation(linear($time), 30, fade(0,hold))\n",
+    "        ''',\n",
+    "    ),\n",
+    "\n",
+    "\n",
+    "- add ticket to add widgets to helper methods\n",
+    "\n",
+    "- hover on histogram not showing values\n",
+    "\n",
+    "- Extra widget white space when description and/or title is empty\n",
+    "\n",
+    "- popup and hover not working \n",
+    "\n",
+    "\n",
+    "from cartoframes.viz.helpers import color_category_layer, color_bins_layer, color_continuous_layer, \\\n",
+    "    size_category_layer, size_bins_layer, size_continuous_layer\n",
+    "Map(\n",
+    "    \n",
+    "    color_continuous_layer(\n",
+    "        'maxhi_20190717_72',\n",
+    "        'value',\n",
+    "    ),\n",
+    "        widgets=[\n",
+    "           \n",
+    "            Widget(\n",
+    "                'histogram',\n",
+    "                value='value',\n",
+    "                title='Number of Floors',\n",
+    "                buckets=10,\n",
+    "                options={'read_only': True},\n",
+    "            ),\n",
+    "        ],\n",
+    "    )\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/examples/_debug/widgets_time_series.ipynb b/examples/_debug/widgets_time_series.ipynb
index e777b1372..db748210d 100644
--- a/examples/_debug/widgets_time_series.ipynb
+++ b/examples/_debug/widgets_time_series.ipynb
@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 8,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -21,7 +21,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 9,
    "metadata": {
     "scrolled": false
    },
@@ -948,7 +948,7 @@
        "<cartoframes.viz.map.Map at 0x7fb245eda358>"
       ]
      },
-     "execution_count": 2,
+     "execution_count": 9,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -976,8 +976,10 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
-   "metadata": {},
+   "execution_count": 10,
+   "metadata": {
+    "scrolled": true
+   },
    "outputs": [
     {
      "data": {
@@ -1901,7 +1903,7 @@
        "<cartoframes.viz.map.Map at 0x7fb234187860>"
       ]
      },
-     "execution_count": 3,
+     "execution_count": 10,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -1915,6 +1917,1048 @@
     ")"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<iframe\n",
+       "  frameborder=\"0\"\n",
+       "  style=\"\n",
+       "    border: 1px solid #cfcfcf;\n",
+       "    width: 100%;\n",
+       "    height: 632px;\n",
+       "    \"\n",
+       "  srcDoc=\"\n",
+       "  <!DOCTYPE html>\n",
+       "<html lang=&quot;en&quot;>\n",
+       "<head>\n",
+       "  <title>CARTOframes</title>\n",
+       "  <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
+       "  <meta charset=&quot;UTF-8&quot;>\n",
+       "  <!-- Include CARTO VL JS -->\n",
+       "  <script src=&quot;https://libs.cartocdn.com/carto-vl/v1.4/carto-vl.min.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL JS -->\n",
+       "  <script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js&quot;></script>\n",
+       "  <!-- Include Mapbox GL CSS -->\n",
+       "  <link href=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css&quot; rel=&quot;stylesheet&quot; />\n",
+       "\n",
+       "  <!-- Include Airship -->\n",
+       "  <script nomodule=&quot;&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship.js&quot;></script>\n",
+       "  <script type=&quot;module&quot; src=&quot;https://libs.cartocdn.com/airship-components/cartoframes/airship/airship.esm.js&quot;></script>\n",
+       "  <script src=&quot;https://libs.cartocdn.com/airship-bridge/cartoframes/asbridge.min.js&quot;></script>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-style/cartoframes/airship.min.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "  <link href=&quot;https://libs.cartocdn.com/airship-icons/cartoframes/icons.css&quot; rel=&quot;stylesheet&quot;>\n",
+       "\n",
+       "  <link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;>\n",
+       "\n",
+       "  <style>\n",
+       "    body {\n",
+       "      margin: 0;\n",
+       "      padding: 0;\n",
+       "    }\n",
+       "\n",
+       "    #map {\n",
+       "      position: absolute;\n",
+       "      height: 100%;\n",
+       "      width: 100%;\n",
+       "    }\n",
+       "\n",
+       "    #error-container {\n",
+       "      position: absolute;\n",
+       "      width: 100%;\n",
+       "      height: 100%;\n",
+       "      background-color: white;\n",
+       "      visibility: hidden;\n",
+       "      padding: 1em;\n",
+       "      font-family: &quot;Courier New&quot;, Courier, monospace;\n",
+       "      margin: 0 auto;\n",
+       "      font-size: 14px;\n",
+       "      overflow: auto;\n",
+       "      z-index: 1000;\n",
+       "    }\n",
+       "\n",
+       "    .error-section {\n",
+       "      padding: 1em;\n",
+       "      border-radius: 5px;\n",
+       "      background-color: #fee;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-highlight {\n",
+       "      font-weight: bold;\n",
+       "      color: inherit;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-type {\n",
+       "      color: #008000;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-name {\n",
+       "      color: #ba2121;\n",
+       "    }\n",
+       "\n",
+       "    #error-container #error-content {\n",
+       "      margin-top: 0.4em;\n",
+       "    }\n",
+       "\n",
+       "    .error-details {\n",
+       "      margin-top: 1em;\n",
+       "    }\n",
+       "\n",
+       "    #error-stacktrace {\n",
+       "      list-style: none;\n",
+       "    }\n",
+       "\n",
+       "    .popup-content {\n",
+       "      display: flex;\n",
+       "      flex-direction: column;\n",
+       "      padding: 8px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-name {\n",
+       "      font-size: 12px;\n",
+       "      font-weight: 400;\n",
+       "      line-height: 20px;\n",
+       "      margin-bottom: 4px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value {\n",
+       "      font-size: 16px;\n",
+       "      font-weight: 600;\n",
+       "      line-height: 20px;\n",
+       "    }\n",
+       "\n",
+       "    .popup-value:not(:last-of-type) {\n",
+       "      margin-bottom: 16px;\n",
+       "    }\n",
+       "\n",
+       "    .map-info {\n",
+       "      position: absolute;\n",
+       "      bottom: 0;\n",
+       "      padding: 0 5px;\n",
+       "      background-color: rgba(255, 255, 255, 0.5);\n",
+       "      margin: 0;\n",
+       "      color: rgba(0, 0, 0, 0.75);\n",
+       "      font-size: 12px;\n",
+       "      width: auto;\n",
+       "      height: 18px;\n",
+       "      font-family: 'Open Sans';\n",
+       "    }\n",
+       "\n",
+       "    .map-footer {\n",
+       "      background: #F2F6F9;\n",
+       "      font-family: Roboto;\n",
+       "      font-size: 12px;\n",
+       "      line-height: 24px;\n",
+       "      color: #162945;\n",
+       "      text-align: center;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a {\n",
+       "      text-decoration: none;\n",
+       "    }\n",
+       "\n",
+       "    .map-footer a:hover {\n",
+       "      text-decoration: underline;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__header {\n",
+       "      margin-bottom: 8px;\n",
+       "    }\n",
+       "\n",
+       "    as-widget-header .as-widget-header__subheader {\n",
+       "      margin-bottom: 12px;\n",
+       "    }\n",
+       "\n",
+       "    as-category-widget {\n",
+       "      max-height: 250px;\n",
+       "    }\n",
+       "\n",
+       "    aside.as-sidebar {\n",
+       "      min-width: 300px;\n",
+       "    }\n",
+       "  </style>\n",
+       "</head>\n",
+       "\n",
+       "<body class=&quot;as-app-body as-app&quot;>\n",
+       "  <as-responsive-content>\n",
+       "    \n",
+       "      \n",
+       "\n",
+       "<aside class=&quot;as-sidebar as-sidebar--right&quot; id=&quot;widgets&quot; data-name=&quot;Widgets&quot;>\n",
+       "  \n",
+       "    \n",
+       "      \n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-time-series-widget\n",
+       "  animated\n",
+       "  id=&quot;layer0_widget0&quot;\n",
+       "  time-format=&quot;auto&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Year Built&quot;>\n",
+       "</as-time-series-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "          <div class=&quot;as-box&quot;>\n",
+       "            <section class=&quot;as-body&quot;>\n",
+       "    \n",
+       "      <as-histogram-widget\n",
+       "  id=&quot;layer0_widget1&quot;\n",
+       "  description=&quot;&quot;\n",
+       "  heading=&quot;Number of Floors&quot;>\n",
+       "</as-histogram-widget>\n",
+       "    \n",
+       "  </section>\n",
+       "          </div>\n",
+       "        \n",
+       "    \n",
+       "  \n",
+       "</aside>\n",
+       "    \n",
+       "    <main class=&quot;as-main&quot;>\n",
+       "      <div class=&quot;as-map-area&quot;>\n",
+       "        <div id=&quot;map&quot;></div>\n",
+       "        \n",
+       "        \n",
+       "          <div class=&quot;as-map-panels&quot; data-name=&quot;Legends&quot;>\n",
+       "            <div class=&quot;as-panel as-panel--left as-panel--top&quot;>\n",
+       "              \n",
+       "\n",
+       "<div class=&quot;as-panel__element&quot; id=&quot;legends&quot;>\n",
+       "  \n",
+       "\n",
+       "  \n",
+       "    \n",
+       "      <as-legend\n",
+       "        heading=&quot;Manhattan Development (1900-2013)&quot;\n",
+       "        description=&quot;Number of Floors&quot;\n",
+       "      >\n",
+       "        <as-legend-color-continuous-polygon id=&quot;layer0_legend&quot; slot=&quot;legends&quot;></as-legend-color-continuous-polygon>\n",
+       "        \n",
+       "          <span slot=&quot;footer&quot;>Data: City of New York</span>\n",
+       "        \n",
+       "      </as-legend>\n",
+       "    \n",
+       "  \n",
+       "</div>\n",
+       "            </div> <!-- as-panel -->\n",
+       "          </div> <!-- as-map-panels -->\n",
+       "        \n",
+       "      </div> <!-- as-map-area -->\n",
+       "    </main> <!-- as-main -->\n",
+       "  </as-responsive-content>\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  <div id=&quot;error-container&quot; class=&quot;error&quot;>\n",
+       "  <p>There is a <span class=&quot;errors&quot; id=&quot;error-highlight&quot;></span>\n",
+       "  from the <a href=&quot;https://carto.com/developers/carto-vl/&quot; target=&quot;_blank&quot;>CARTO VL</a> library:</p>\n",
+       "  <section class=&quot;error-section&quot;>\n",
+       "    <span class=&quot;errors&quot; id=&quot;error-name&quot;></span>:\n",
+       "    <section id=&quot;error-content&quot;>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-type&quot;></span>\n",
+       "      <span class=&quot;errors&quot; id=&quot;error-message&quot;></span>\n",
+       "    </section>\n",
+       "  </section>\n",
+       "\n",
+       "  <details class=&quot;error-details&quot;>\n",
+       "    <summary>StackTrace</summary>\n",
+       "    <ul id=&quot;error-stacktrace&quot;></ul>\n",
+       "  </details>\n",
+       "</div>\n",
+       "\n",
+       "  <script>\n",
+       "    \n",
+       "  function createDefaultLegend(layers) {\n",
+       "  const defaultLegendContainer = document.querySelector('#defaultLegendContainer');\n",
+       "  defaultLegendContainer.style.display = 'none';\n",
+       "\n",
+       "  AsBridge.VL.Legends.layersLegend(\n",
+       "    '#defaultLegend',\n",
+       "    layers,\n",
+       "    {\n",
+       "      onLoad: () => defaultLegendContainer.style.display = 'unset'\n",
+       "    }\n",
+       "  )\n",
+       "}\n",
+       "\n",
+       "function createLegend(layer, legendData, layerIndex) {\n",
+       "  const element = document.querySelector(`#layer${layerIndex}_legend`);\n",
+       "\n",
+       "  if (legendData.prop) {\n",
+       "    const config = { othersLabel: 'Others' }  // TODO: i18n\n",
+       "    const opts = { format, config };\n",
+       "\n",
+       "    if (legendData.type.startsWith('size-continuous')) {\n",
+       "      config.samples = 4;\n",
+       "    }\n",
+       "    \n",
+       "    AsBridge.VL.Legends.rampLegend(\n",
+       "      element,\n",
+       "      layer,\n",
+       "      legendData.prop,\n",
+       "      opts\n",
+       "    );\n",
+       "  } else {\n",
+       "    // TODO: we don't have a bridge for this case, should this even be a case?\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "\n",
+       "  \n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderWidget(widget, value) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}-value`);\n",
+       "  \n",
+       "  if (value && widget.element) {\n",
+       "    widget.element.innerText = typeof value === 'number' ? format(value) : value;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function renderBridge(bridge, widget) {\n",
+       "  widget.element = widget.element || document.querySelector(`#${widget.id}`);\n",
+       "  let options = { ...widget.options };\n",
+       "\n",
+       "  switch (widget.type) {\n",
+       "    case 'histogram':\n",
+       "      bridge.histogram(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'category':\n",
+       "      bridge.category(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'animation':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.animationControls(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "    case 'time-series':\n",
+       "      options['propertyName'] = widget.prop;\n",
+       "      bridge.timeSeries(widget.element, widget.value, options);\n",
+       "      break;\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {\n",
+       "  const bridge = new AsBridge.VL.Bridge({\n",
+       "    carto: carto,\n",
+       "    layer: mapLayer,\n",
+       "    source: mapSource,\n",
+       "    map: map\n",
+       "  });\n",
+       "\n",
+       "  widgets\n",
+       "    .filter((widget) => widget.has_bridge)\n",
+       "    .forEach((widget) => renderBridge(bridge, widget));\n",
+       "\n",
+       "  bridge.build();\n",
+       "}\n",
+       "\n",
+       "/** From https://github.com/errwischt/stacktrace-parser/blob/master/src/stack-trace-parser.js */\n",
+       "\n",
+       "const UNKNOWN_FUNCTION = '<unknown>';\n",
+       "\n",
+       "/**\n",
+       " * This parses the different stack traces and puts them into one format\n",
+       " * This borrows heavily from TraceKit (https://github.com/csnover/TraceKit)\n",
+       " */\n",
+       "function parse(stackString) {\n",
+       "  const lines = stackString.split('\\n');\n",
+       "\n",
+       "  return lines.reduce((stack, line) => {\n",
+       "    const parseResult =\n",
+       "      parseChrome(line) ||\n",
+       "      parseWinjs(line) ||\n",
+       "      parseGecko(line);\n",
+       "\n",
+       "    if (parseResult) {\n",
+       "      stack.push(parseResult);\n",
+       "    }\n",
+       "\n",
+       "    return stack;\n",
+       "  }, []);\n",
+       "}\n",
+       "\n",
+       "const chromeRe = /^\\s*at (.*?) ?\\(((?:file|https?|blob|chrome-extension|native|eval|webpack|<anonymous>|\\/).*?)(?::(\\d+))?(?::(\\d+))?\\)?\\s*$/i;\n",
+       "const chromeEvalRe = /\\((\\S*)(?::(\\d+))(?::(\\d+))\\)/;\n",
+       "\n",
+       "function parseChrome(line) {\n",
+       "  const parts = chromeRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isNative = parts[2] && parts[2].indexOf('native') === 0; // start of line\n",
+       "  const isEval = parts[2] && parts[2].indexOf('eval') === 0; // start of line\n",
+       "\n",
+       "  const submatch = chromeEvalRe.exec(parts[2]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line/column number\n",
+       "    parts[2] = submatch[1]; // url\n",
+       "    parts[3] = submatch[2]; // line\n",
+       "    parts[4] = submatch[3]; // column\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: !isNative ? parts[2] : null,\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: isNative ? [parts[2]] : [],\n",
+       "    lineNumber: parts[3] ? +parts[3] : null,\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const winjsRe = /^\\s*at (?:((?:\\[object object\\])?.+) )?\\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\\d+)(?::(\\d+))?\\)?\\s*$/i;\n",
+       "\n",
+       "function parseWinjs(line) {\n",
+       "  const parts = winjsRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[2],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: [],\n",
+       "    lineNumber: +parts[3],\n",
+       "    column: parts[4] ? +parts[4] : null,\n",
+       "  };\n",
+       "}\n",
+       "\n",
+       "const geckoRe = /^\\s*(.*?)(?:\\((.*?)\\))?(?:^|@)((?:file|https?|blob|chrome|webpack|resource|\\[native).*?|[^@]*bundle)(?::(\\d+))?(?::(\\d+))?\\s*$/i;\n",
+       "const geckoEvalRe = /(\\S+) line (\\d+)(?: > eval line \\d+)* > eval/i;\n",
+       "\n",
+       "function parseGecko(line) {\n",
+       "  const parts = geckoRe.exec(line);\n",
+       "\n",
+       "  if (!parts) {\n",
+       "    return null;\n",
+       "  }\n",
+       "\n",
+       "  const isEval = parts[3] && parts[3].indexOf(' > eval') > -1;\n",
+       "\n",
+       "  const submatch = geckoEvalRe.exec(parts[3]);\n",
+       "  if (isEval && submatch != null) {\n",
+       "    // throw out eval line/column and use top-most line number\n",
+       "    parts[3] = submatch[1];\n",
+       "    parts[4] = submatch[2];\n",
+       "    parts[5] = null; // no column when eval\n",
+       "  }\n",
+       "\n",
+       "  return {\n",
+       "    file: parts[3],\n",
+       "    methodName: parts[1] || UNKNOWN_FUNCTION,\n",
+       "    arguments: parts[2] ? parts[2].split(',') : [],\n",
+       "    lineNumber: parts[4] ? +parts[4] : null,\n",
+       "    column: parts[5] ? +parts[5] : null,\n",
+       "  };\n",
+       "}\n",
+       "/*\n",
+       " *  base64.js\n",
+       " *\n",
+       " *  Licensed under the BSD 3-Clause License.\n",
+       " *    http://opensource.org/licenses/BSD-3-Clause\n",
+       " *\n",
+       " *  References:\n",
+       " *    http://en.wikipedia.org/wiki/Base64\n",
+       " */\n",
+       ";(function (global, factory) {\n",
+       "    typeof exports === 'object' && typeof module !== 'undefined'\n",
+       "        ? module.exports = factory(global)\n",
+       "        : typeof define === 'function' && define.amd\n",
+       "        ? define(factory) : factory(global)\n",
+       "}((\n",
+       "    typeof self !== 'undefined' ? self\n",
+       "        : typeof window !== 'undefined' ? window\n",
+       "        : typeof global !== 'undefined' ? global\n",
+       ": this\n",
+       "), function(global) {\n",
+       "    'use strict';\n",
+       "    // existing version for noConflict()\n",
+       "    global = global || {};\n",
+       "    var _Base64 = global.Base64;\n",
+       "    var version = &quot;2.5.1&quot;;\n",
+       "    // if node.js and NOT React Native, we use Buffer\n",
+       "    var buffer;\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        try {\n",
+       "            buffer = eval(&quot;require('buffer').Buffer&quot;);\n",
+       "        } catch (err) {\n",
+       "            buffer = undefined;\n",
+       "        }\n",
+       "    }\n",
+       "    // constants\n",
+       "    var b64chars\n",
+       "        = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n",
+       "    var b64tab = function(bin) {\n",
+       "        var t = {};\n",
+       "        for (var i = 0, l = bin.length; i < l; i++) t[bin.charAt(i)] = i;\n",
+       "        return t;\n",
+       "    }(b64chars);\n",
+       "    var fromCharCode = String.fromCharCode;\n",
+       "    // encoder stuff\n",
+       "    var cb_utob = function(c) {\n",
+       "        if (c.length < 2) {\n",
+       "            var cc = c.charCodeAt(0);\n",
+       "            return cc < 0x80 ? c\n",
+       "                : cc < 0x800 ? (fromCharCode(0xc0 | (cc >>> 6))\n",
+       "                                + fromCharCode(0x80 | (cc & 0x3f)))\n",
+       "                : (fromCharCode(0xe0 | ((cc >>> 12) & 0x0f))\n",
+       "                   + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                   + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        } else {\n",
+       "            var cc = 0x10000\n",
+       "                + (c.charCodeAt(0) - 0xD800) * 0x400\n",
+       "                + (c.charCodeAt(1) - 0xDC00);\n",
+       "            return (fromCharCode(0xf0 | ((cc >>> 18) & 0x07))\n",
+       "                    + fromCharCode(0x80 | ((cc >>> 12) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ((cc >>>  6) & 0x3f))\n",
+       "                    + fromCharCode(0x80 | ( cc         & 0x3f)));\n",
+       "        }\n",
+       "    };\n",
+       "    var re_utob = /[\\uD800-\\uDBFF][\\uDC00-\\uDFFFF]|[^\\x00-\\x7F]/g;\n",
+       "    var utob = function(u) {\n",
+       "        return u.replace(re_utob, cb_utob);\n",
+       "    };\n",
+       "    var cb_encode = function(ccc) {\n",
+       "        var padlen = [0, 2, 1][ccc.length % 3],\n",
+       "        ord = ccc.charCodeAt(0) << 16\n",
+       "            | ((ccc.length > 1 ? ccc.charCodeAt(1) : 0) << 8)\n",
+       "            | ((ccc.length > 2 ? ccc.charCodeAt(2) : 0)),\n",
+       "        chars = [\n",
+       "            b64chars.charAt( ord >>> 18),\n",
+       "            b64chars.charAt((ord >>> 12) & 63),\n",
+       "            padlen >= 2 ? '=' : b64chars.charAt((ord >>> 6) & 63),\n",
+       "            padlen >= 1 ? '=' : b64chars.charAt(ord & 63)\n",
+       "        ];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var btoa = global.btoa ? function(b) {\n",
+       "        return global.btoa(b);\n",
+       "    } : function(b) {\n",
+       "        return b.replace(/[\\s\\S]{1,3}/g, cb_encode);\n",
+       "    };\n",
+       "    var _encode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : buffer.from(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        :  function (u) {\n",
+       "            return (u.constructor === buffer.constructor ? u : new  buffer(u))\n",
+       "                .toString('base64')\n",
+       "        }\n",
+       "        : function (u) { return btoa(utob(u)) }\n",
+       "    ;\n",
+       "    var encode = function(u, urisafe) {\n",
+       "        return !urisafe\n",
+       "            ? _encode(String(u))\n",
+       "            : _encode(String(u)).replace(/[+\\/]/g, function(m0) {\n",
+       "                return m0 == '+' ? '-' : '_';\n",
+       "            }).replace(/=/g, '');\n",
+       "    };\n",
+       "    var encodeURI = function(u) { return encode(u, true) };\n",
+       "    // decoder stuff\n",
+       "    var re_btou = new RegExp([\n",
+       "        '[\\xC0-\\xDF][\\x80-\\xBF]',\n",
+       "        '[\\xE0-\\xEF][\\x80-\\xBF]{2}',\n",
+       "        '[\\xF0-\\xF7][\\x80-\\xBF]{3}'\n",
+       "    ].join('|'), 'g');\n",
+       "    var cb_btou = function(cccc) {\n",
+       "        switch(cccc.length) {\n",
+       "        case 4:\n",
+       "            var cp = ((0x07 & cccc.charCodeAt(0)) << 18)\n",
+       "                |    ((0x3f & cccc.charCodeAt(1)) << 12)\n",
+       "                |    ((0x3f & cccc.charCodeAt(2)) <<  6)\n",
+       "                |     (0x3f & cccc.charCodeAt(3)),\n",
+       "            offset = cp - 0x10000;\n",
+       "            return (fromCharCode((offset  >>> 10) + 0xD800)\n",
+       "                    + fromCharCode((offset & 0x3FF) + 0xDC00));\n",
+       "        case 3:\n",
+       "            return fromCharCode(\n",
+       "                ((0x0f & cccc.charCodeAt(0)) << 12)\n",
+       "                    | ((0x3f & cccc.charCodeAt(1)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(2))\n",
+       "            );\n",
+       "        default:\n",
+       "            return  fromCharCode(\n",
+       "                ((0x1f & cccc.charCodeAt(0)) << 6)\n",
+       "                    |  (0x3f & cccc.charCodeAt(1))\n",
+       "            );\n",
+       "        }\n",
+       "    };\n",
+       "    var btou = function(b) {\n",
+       "        return b.replace(re_btou, cb_btou);\n",
+       "    };\n",
+       "    var cb_decode = function(cccc) {\n",
+       "        var len = cccc.length,\n",
+       "        padlen = len % 4,\n",
+       "        n = (len > 0 ? b64tab[cccc.charAt(0)] << 18 : 0)\n",
+       "            | (len > 1 ? b64tab[cccc.charAt(1)] << 12 : 0)\n",
+       "            | (len > 2 ? b64tab[cccc.charAt(2)] <<  6 : 0)\n",
+       "            | (len > 3 ? b64tab[cccc.charAt(3)]       : 0),\n",
+       "        chars = [\n",
+       "            fromCharCode( n >>> 16),\n",
+       "            fromCharCode((n >>>  8) & 0xff),\n",
+       "            fromCharCode( n         & 0xff)\n",
+       "        ];\n",
+       "        chars.length -= [0, 0, 2, 1][padlen];\n",
+       "        return chars.join('');\n",
+       "    };\n",
+       "    var _atob = global.atob ? function(a) {\n",
+       "        return global.atob(a);\n",
+       "    } : function(a){\n",
+       "        return a.replace(/\\S{1,4}/g, cb_decode);\n",
+       "    };\n",
+       "    var atob = function(a) {\n",
+       "        return _atob(String(a).replace(/[^A-Za-z0-9\\+\\/]/g, ''));\n",
+       "    };\n",
+       "    var _decode = buffer ?\n",
+       "        buffer.from && Uint8Array && buffer.from !== Uint8Array.from\n",
+       "        ? function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : buffer.from(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) {\n",
+       "            return (a.constructor === buffer.constructor\n",
+       "                    ? a : new buffer(a, 'base64')).toString();\n",
+       "        }\n",
+       "        : function(a) { return btou(_atob(a)) };\n",
+       "    var decode = function(a){\n",
+       "        return _decode(\n",
+       "            String(a).replace(/[-_]/g, function(m0) { return m0 == '-' ? '+' : '/' })\n",
+       "                .replace(/[^A-Za-z0-9\\+\\/]/g, '')\n",
+       "        );\n",
+       "    };\n",
+       "    var noConflict = function() {\n",
+       "        var Base64 = global.Base64;\n",
+       "        global.Base64 = _Base64;\n",
+       "        return Base64;\n",
+       "    };\n",
+       "    // export Base64\n",
+       "    global.Base64 = {\n",
+       "        VERSION: version,\n",
+       "        atob: atob,\n",
+       "        btoa: btoa,\n",
+       "        fromBase64: decode,\n",
+       "        toBase64: encode,\n",
+       "        utob: utob,\n",
+       "        encode: encode,\n",
+       "        encodeURI: encodeURI,\n",
+       "        btou: btou,\n",
+       "        decode: decode,\n",
+       "        noConflict: noConflict,\n",
+       "        __buffer__: buffer\n",
+       "    };\n",
+       "    // if ES5 is available, make Base64.extendString() available\n",
+       "    if (typeof Object.defineProperty === 'function') {\n",
+       "        var noEnum = function(v){\n",
+       "            return {value:v,enumerable:false,writable:true,configurable:true};\n",
+       "        };\n",
+       "        global.Base64.extendString = function () {\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'fromBase64', noEnum(function () {\n",
+       "                    return decode(this)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64', noEnum(function (urisafe) {\n",
+       "                    return encode(this, urisafe)\n",
+       "                }));\n",
+       "            Object.defineProperty(\n",
+       "                String.prototype, 'toBase64URI', noEnum(function () {\n",
+       "                    return encode(this, true)\n",
+       "                }));\n",
+       "        };\n",
+       "    }\n",
+       "    //\n",
+       "    // export Base64 to the namespace\n",
+       "    //\n",
+       "    if (global['Meteor']) { // Meteor.js\n",
+       "        Base64 = global.Base64;\n",
+       "    }\n",
+       "    // module.exports and AMD are mutually exclusive.\n",
+       "    // module.exports has precedence.\n",
+       "    if (typeof module !== 'undefined' && module.exports) {\n",
+       "        module.exports.Base64 = global.Base64;\n",
+       "    }\n",
+       "    else if (typeof define === 'function' && define.amd) {\n",
+       "        // AMD. Register as an anonymous module.\n",
+       "        define([], function(){ return global.Base64 });\n",
+       "    }\n",
+       "    // that's it!\n",
+       "    return {Base64: global.Base64}\n",
+       "}));\n",
+       "\n",
+       "function format(value) {\n",
+       "  if (Array.isArray(value)) {\n",
+       "    const [first, second] = value;\n",
+       "    if (first === -Infinity) {\n",
+       "      return `< ${formatValue(second)}`;\n",
+       "    }\n",
+       "    if (second === Infinity) {\n",
+       "      return `> ${formatValue(first)}`;\n",
+       "    }\n",
+       "    return `${formatValue(first)} - ${formatValue(second)}`\n",
+       "  }\n",
+       "  return formatValue(value);\n",
+       "}\n",
+       "\n",
+       "function formatValue(value) {\n",
+       "  if (typeof value === 'number') {\n",
+       "    return formatNumber(value);\n",
+       "  }\n",
+       "  return value;\n",
+       "}\n",
+       "\n",
+       "function formatNumber(value) {\n",
+       "  const log = Math.log10(Math.abs(value))\n",
+       "  if ((log > 4 || log < -2.00000001) && value) {\n",
+       "    return value.toExponential(2);\n",
+       "  } else if (!Number.isInteger(value)) {\n",
+       "    return value.toLocaleString(undefined, {\n",
+       "      minimumFractionDigits: 2,\n",
+       "      maximumFractionDigits: 3\n",
+       "    });\n",
+       "  } else {\n",
+       "    return value.toLocaleString();\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "const responsive = document.querySelector('as-responsive-content');\n",
+       "\n",
+       "function onReady() {\n",
+       "  const BASEMAPS = {\n",
+       "    DarkMatter: carto.basemaps.darkmatter,\n",
+       "    Voyager: carto.basemaps.voyager,\n",
+       "    Positron: carto.basemaps.positron\n",
+       "  };\n",
+       "\n",
+       "  if (&quot;&quot;) {\n",
+       "    mapboxgl.accessToken = &quot;&quot;;\n",
+       "  }\n",
+       "  // Fetch CARTO basemap if it's there, else try to use other supplied style\n",
+       "  const map = new mapboxgl.Map({\n",
+       "    container: 'map',\n",
+       "    style: BASEMAPS['DarkMatter'] || 'DarkMatter' || {\n",
+       "        'version': 8,\n",
+       "        'sources': {},\n",
+       "        'layers': [{\n",
+       "            'id': 'background',\n",
+       "            'type': 'background',\n",
+       "            'paint': {\n",
+       "                'background-color': ''\n",
+       "            }\n",
+       "        }]\n",
+       "    },\n",
+       "    zoom: 9,\n",
+       "    dragRotate: false\n",
+       "  });\n",
+       "\n",
+       "  const mapInfo$ = document.getElementById('map-info');\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  const layers = [{&quot;credentials&quot;: {&quot;api_key&quot;: &quot;default_public&quot;, &quot;base_url&quot;: &quot;https://cartovl.carto.com&quot;, &quot;username&quot;: &quot;cartovl&quot;}, &quot;interactivity&quot;: [], &quot;legend&quot;: {&quot;description&quot;: &quot;Number of Floors&quot;, &quot;footer&quot;: &quot;Data: City of New York&quot;, &quot;prop&quot;: &quot;color&quot;, &quot;title&quot;: &quot;Manhattan Development (1900-2013)&quot;, &quot;type&quot;: &quot;color-continuous-polygon&quot;}, &quot;query&quot;: &quot;select * from mnmappluto where numfloors \\u003e 2 and yearbuilt \\u003e= 1900&quot;, &quot;type&quot;: &quot;Query&quot;, &quot;viz&quot;: &quot;@v234b58: $yearbuilt\\n@v2de169: $numfloors\\nstrokeColor: opacity(#2c2c2c,ramp(linear(zoom(),2,18),[0.2,0.6]))\\n\\n            color: ramp(linear($numfloors), ag_sunset)\\n            filter: animation(linear($yearbuilt), 20, fade(0.1, hold))\\n            strokeWidth: 0\\n        &quot;, &quot;widgets&quot;: [{&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;filter&quot;, &quot;title&quot;: &quot;Year Built&quot;, &quot;type&quot;: &quot;time-series&quot;, &quot;value&quot;: &quot;yearbuilt&quot;, &quot;variable_name&quot;: &quot;v234b58&quot;}, {&quot;description&quot;: &quot;&quot;, &quot;footer&quot;: &quot;&quot;, &quot;has_bridge&quot;: true, &quot;options&quot;: {&quot;buckets&quot;: 10, &quot;options&quot;: {&quot;read_only&quot;: true}, &quot;readOnly&quot;: false}, &quot;prop&quot;: &quot;&quot;, &quot;title&quot;: &quot;Number of Floors&quot;, &quot;type&quot;: &quot;histogram&quot;, &quot;value&quot;: &quot;numfloors&quot;, &quot;variable_name&quot;: &quot;v2de169&quot;}]}];\n",
+       "\n",
+       "  map.fitBounds([[-74.0193502892167, 40.6997586931965], [-73.906791238675, 40.878999248182]], {animate: false, padding: 50, maxZoom: 14});\n",
+       "\n",
+       "  \n",
+       "    map.flyTo({&quot;center&quot;: [-73.995281, 40.73095], &quot;zoom&quot;: 12.54});\n",
+       "  \n",
+       "\n",
+       "  const mapLayers = [];\n",
+       "\n",
+       "  const interactiveLayers = [];\n",
+       "  const interactiveMapLayers = [];\n",
+       "\n",
+       "  layers.forEach((layer, index) => {\n",
+       "    const factory = new SourceFactory();\n",
+       "    const mapSource = factory.createSource(layer);\n",
+       "    const mapViz = new carto.Viz(layer['viz']);\n",
+       "    const mapLayer = new carto.Layer(`layer${index}`, mapSource, mapViz);\n",
+       "\n",
+       "    mapLayers.push(mapLayer);\n",
+       "\n",
+       "    try {\n",
+       "      mapLayer._updateLayer.catch(displayError);\n",
+       "    } catch (err) {\n",
+       "      throw err;\n",
+       "    }\n",
+       "\n",
+       "    mapLayer.addTo(map);\n",
+       "\n",
+       "    if (layer.interactivity) {\n",
+       "      interactiveLayers.push(layer);\n",
+       "      interactiveMapLayers.push(mapLayer);\n",
+       "    }\n",
+       "\n",
+       "    \n",
+       "    if (layer.legend) {\n",
+       "      createLegend(mapLayer, layer.legend, layers.length - index - 1);\n",
+       "    }\n",
+       "    \n",
+       "\n",
+       "    if (layer.widgets.length) {\n",
+       "      layer.widgets.forEach((widget, widgetIndex) => {\n",
+       "        const id = `layer${layers.length - index - 1}_widget${widgetIndex}`;\n",
+       "        widget.id = id;\n",
+       "      });\n",
+       "\n",
+       "      mapLayer.on('updated', () => {\n",
+       "        layer.widgets\n",
+       "          .filter((widget) => !widget.has_bridge)\n",
+       "          .forEach((widget) => {\n",
+       "            const value = widget.variable_name && mapLayer.viz.variables[widget.variable_name]\n",
+       "              ? mapLayer.viz.variables[widget.variable_name].value\n",
+       "              : null;\n",
+       "\n",
+       "            renderWidget(widget, value);\n",
+       "          })\n",
+       "      });\n",
+       "\n",
+       "      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);\n",
+       "    }\n",
+       "  });\n",
+       "\n",
+       "  if (interactiveLayers.length > 0) {\n",
+       "    const interactivity = new carto.Interactivity(interactiveMapLayers);\n",
+       "    const popup = new mapboxgl.Popup({\n",
+       "      closeButton: false,\n",
+       "      closeOnClick: false\n",
+       "    });\n",
+       "\n",
+       "    let clickAttrs = [];\n",
+       "    let hoverAttrs = [];\n",
+       "    interactiveLayers.forEach((interactiveLayer) => {\n",
+       "      interactiveLayer.interactivity.forEach((interactivityDef) => {\n",
+       "        if (interactivityDef.event === 'click') {\n",
+       "          clickAttrs = clickAttrs.concat(interactivityDef.attrs);\n",
+       "        } else if (interactivityDef.event === 'hover') {\n",
+       "          hoverAttrs = hoverAttrs.concat(interactivityDef.attrs);\n",
+       "        }\n",
+       "      });\n",
+       "    });\n",
+       "\n",
+       "    resetPopupClick(interactivity);\n",
+       "    if (clickAttrs.length > 0) {\n",
+       "      setPopupsClick(popup, interactivity, clickAttrs);\n",
+       "    }\n",
+       "\n",
+       "    resetPopupHover(interactivity);\n",
+       "    if (hoverAttrs.length > 0) {\n",
+       "      setPopupsHover(popup, interactivity, hoverAttrs);\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  \n",
+       "\n",
+       "  function updatePopup(popup, event, attrs) {\n",
+       "    if (event.features.length > 0) {\n",
+       "      let popupHTML = '';\n",
+       "      const layerIDs = [];\n",
+       "\n",
+       "      for (const feature of event.features) {\n",
+       "        if (layerIDs.includes(feature.layerId)) {\n",
+       "          continue;\n",
+       "        }\n",
+       "        // Track layers to add only one feature per layer\n",
+       "        layerIDs.push(feature.layerId);\n",
+       "    \n",
+       "        for (const item of attrs) {\n",
+       "          const variable = feature.variables[item.name];\n",
+       "          if (variable) {\n",
+       "            let value = variable.value;\n",
+       "            value = formatValue(value)\n",
+       "\n",
+       "            popupHTML = `\n",
+       "              <span class=&quot;popup-name&quot;>${item.title}</span>\n",
+       "              <span class=&quot;popup-value&quot;>${value}</span>\n",
+       "            ` + popupHTML;\n",
+       "          }\n",
+       "        }\n",
+       "      }\n",
+       "\n",
+       "      popup\n",
+       "          .setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
+       "          .setHTML(`<div class=&quot;popup-content&quot;>${popupHTML}</div>`);\n",
+       "\n",
+       "      if (!popup.isOpen()) {\n",
+       "        popup.addTo(map);\n",
+       "      }\n",
+       "    } else {\n",
+       "      popup.remove();\n",
+       "    }\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupClick(interactivity) {\n",
+       "    interactivity.off('featureClick');\n",
+       "  }\n",
+       "\n",
+       "  function resetPopupHover(interactivity) {\n",
+       "    interactivity.off('featureHover');\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsClick(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureClick', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function setPopupsHover(popup, interactivity, attrs) {\n",
+       "    interactivity.on('featureHover', (event) => {\n",
+       "      updatePopup(popup, event, attrs)\n",
+       "    });\n",
+       "  }\n",
+       "\n",
+       "  function SourceFactory() {\n",
+       "    const sourceTypes = {\n",
+       "      GeoJSON: (layer) => new carto.source.GeoJSON(_decodeJSONQuery(layer.query)),\n",
+       "      Query: (layer) => {\n",
+       "        const auth = {\n",
+       "          username: layer.credentials['username'],\n",
+       "          apiKey: layer.credentials['api_key'] || 'default_public'\n",
+       "        };\n",
+       "        const config = {\n",
+       "          serverURL: layer.credentials['base_url'] || `https://${layer.credentials['username']}.carto.com/`\n",
+       "        };\n",
+       "        return new carto.source.SQL(layer.query, auth, config)\n",
+       "      },\n",
+       "      MVT: (layer) => new carto.source.MVT(layer.query.file, JSON.parse(layer.query.metadata)),\n",
+       "    }\n",
+       "\n",
+       "    this.createSource = (layer) => {\n",
+       "      return sourceTypes[layer.type](layer);\n",
+       "    }\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function setReady () {\n",
+       "  try {\n",
+       "    onReady()\n",
+       "  } catch (e) {\n",
+       "    displayError(e);\n",
+       "  }\n",
+       "}\n",
+       "\n",
+       "function displayError(e) {\n",
+       "  const error$ = document.getElementById('error-container');\n",
+       "  const errors$ = error$.getElementsByClassName('errors');\n",
+       "  const stacktrace$ = document.getElementById('error-stacktrace');\n",
+       "\n",
+       "  errors$[0].innerHTML = e.name;\n",
+       "  errors$[1].innerHTML = e.name;\n",
+       "  errors$[2].innerHTML = e.type;\n",
+       "  errors$[3].innerHTML = e.message.replace(e.type, '');\n",
+       "\n",
+       "  error$.style.visibility = 'visible';\n",
+       "\n",
+       "  const stack = parse(e.stack);\n",
+       "  const list = stack.map(item => {\n",
+       "    return `<li>\n",
+       "      at <span class=&quot;stacktrace-method&quot;>${item.methodName}:</span>\n",
+       "      (${item.file}:${item.lineNumber}:${item.column})\n",
+       "    </li>`;\n",
+       "  });\n",
+       "\n",
+       "  stacktrace$.innerHTML = list.join('\\n');\n",
+       "}\n",
+       "\n",
+       "function _decodeJSONQuery(query) {\n",
+       "  return JSON.parse(Base64.decode(query.replace(/b\\'/, '\\'')))\n",
+       "}\n",
+       "\n",
+       "responsive.addEventListener('ready', setReady);\n",
+       "  </script>\n",
+       "</body>\n",
+       "</html>\n",
+       "\">\n",
+       "\n",
+       "</iframe>"
+      ],
+      "text/plain": [
+       "<cartoframes.viz.map.Map at 0x1072d4e80>"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from cartoframes.viz import basemaps\n",
+    "\n",
+    "Map(\n",
+    "    Layer(\n",
+    "        'select * from mnmappluto where numfloors > 2 and yearbuilt >= 1900',\n",
+    "        '''\n",
+    "            color: ramp(linear($numfloors), ag_sunset)\n",
+    "            filter: animation(linear($yearbuilt), 20, fade(0.1, hold))\n",
+    "            strokeWidth: 0\n",
+    "        ''',\n",
+    "        legend={\n",
+    "            'type':'color-continuous-polygon',\n",
+    "            'title': 'Manhattan Development (1900-2013)',\n",
+    "            'description': 'Number of Floors',\n",
+    "            'footer': 'Data: City of New York'\n",
+    "        },\n",
+    "        widgets=[\n",
+    "            Widget('time-series', value='yearbuilt', title='Year Built'),\n",
+    "            Widget(\n",
+    "                'histogram',\n",
+    "                value='numfloors',\n",
+    "                title='Number of Floors',\n",
+    "                buckets=10,\n",
+    "                options={'read_only': True}\n",
+    "            )\n",
+    "        ],\n",
+    "    ),\n",
+    "    viewport={'zoom': 12.54, 'lat': 40.730950, 'lng': -73.995281},\n",
+    "    basemap=basemaps.darkmatter\n",
+    ")"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
diff --git a/test/viz/test_widget.py b/test/viz/test_widget.py
index 60ee4403c..403d865b1 100644
--- a/test/viz/test_widget.py
+++ b/test/viz/test_widget.py
@@ -42,7 +42,7 @@ def test_widget_info(self):
             'has_bridge': False,
             'prop': '',
             'variable_name': 'vb6dbcf',
-            'options': {}
+            'options': {'readOnly': False}
         })
 
     def test_wrong_input(self):
@@ -73,7 +73,7 @@ def test_animation_widget(self):
             'has_bridge': True,
             'prop': 'filter',
             'variable_name': '',
-            'options': {}
+            'options': {'readOnly': False}
         })
 
     def test_animation_widget_prop(self):
@@ -92,5 +92,5 @@ def test_animation_widget_prop(self):
             'has_bridge': True,
             'prop': 'width',
             'variable_name': '',
-            'options': {}
+            'options': {'readOnly': False}
         })
diff --git a/test/viz/test_widget_list.py b/test/viz/test_widget_list.py
index 3cb2107b6..b7cfcb85e 100644
--- a/test/viz/test_widget_list.py
+++ b/test/viz/test_widget_list.py
@@ -86,7 +86,7 @@ def test_widget_list_get_widgets_info(self):
                 'footer': '[footer]',
                 'has_bridge': False,
                 'variable_name': 'vb6dbcf',
-                'options': {}
+                'options': {'readOnly': False}
             }, {
                 'type': 'default',
                 'title': '"Custom Info"',
@@ -96,5 +96,5 @@ def test_widget_list_get_widgets_info(self):
                 'footer': '',
                 'has_bridge': False,
                 'variable_name': '',
-                'options': {}
+                'options': {'readOnly': False}
             }])
diff --git a/test/viz/widgets/test_category_widget.py b/test/viz/widgets/test_category_widget.py
index 271e69fd1..999be25b1 100644
--- a/test/viz/widgets/test_category_widget.py
+++ b/test/viz/widgets/test_category_widget.py
@@ -14,3 +14,4 @@ def test_factory(self):
         self.assertEqual(widget_info.get('type'), 'category')
         self.assertEqual(widget_info.get('value'), '$value')
         self.assertEqual(widget_info.get('title'), 'Category Widget')
+        self.assertEqual(widget_info.get('options').get('readOnly'), False)
diff --git a/test/viz/widgets/test_formula_widget.py b/test/viz/widgets/test_formula_widget.py
index f1cee32f1..18ae857c4 100644
--- a/test/viz/widgets/test_formula_widget.py
+++ b/test/viz/widgets/test_formula_widget.py
@@ -8,9 +8,33 @@ def test_widgets(self):
         self.assertNotEqual(widgets.formula_widget, None)
 
     def test_factory(self):
-        "should create a formula widget"
-        widget = widgets.formula_widget('$value', title='Formula Widget')
+        "should create a default formula widget"
+        widget = widgets.formula_widget('value', title='Formula Widget')
         widget_info = widget.get_info()
         self.assertEqual(widget_info.get('type'), 'formula')
         self.assertEqual(widget_info.get('value'), '$value')
         self.assertEqual(widget_info.get('title'), 'Formula Widget')
+
+    def test_count_formula_viewport(self):
+        "should create a formula widget to count viewport features"
+        widget = widgets.formula_widget('count')
+        widget_info = widget.get_info()
+        self.assertEqual(widget_info.get('value'), 'viewportCount()')
+
+    def test_count_formula_global(self):
+        "should create a formula widget to count global features"
+        widget = widgets.formula_widget('count', is_global=True)
+        widget_info = widget.get_info()
+        self.assertEqual(widget_info.get('value'), 'globalCount()')
+
+    def test_formula_viewport(self):
+        "should create a formula widget to get a viewport operation"
+        widget = widgets.formula_widget('value', 'avg')
+        widget_info = widget.get_info()
+        self.assertEqual(widget_info.get('value'), 'viewportAvg($value)')
+
+    def test_formula_global(self):
+        "should create a formula widget to get a global operation"
+        widget = widgets.formula_widget('value', 'avg', is_global=True)
+        widget_info = widget.get_info()
+        self.assertEqual(widget_info.get('value'), 'globalAvg($value)')
diff --git a/test/viz/widgets/test_histogram_widget.py b/test/viz/widgets/test_histogram_widget.py
index dbaea4618..c0a4e4d6a 100644
--- a/test/viz/widgets/test_histogram_widget.py
+++ b/test/viz/widgets/test_histogram_widget.py
@@ -14,3 +14,4 @@ def test_factory(self):
         self.assertEqual(widget_info.get('type'), 'histogram')
         self.assertEqual(widget_info.get('value'), '$value')
         self.assertEqual(widget_info.get('title'), 'Histogram Widget')
+        self.assertEqual(widget_info.get('options').get('readOnly'), False)
diff --git a/test/viz/widgets/test_time_series_widget.py b/test/viz/widgets/test_time_series_widget.py
index ba7904ea7..ffcf719a6 100644
--- a/test/viz/widgets/test_time_series_widget.py
+++ b/test/viz/widgets/test_time_series_widget.py
@@ -14,3 +14,4 @@ def test_factory(self):
         self.assertEqual(widget_info.get('type'), 'time-series')
         self.assertEqual(widget_info.get('value'), '$value')
         self.assertEqual(widget_info.get('title'), 'Time Series Widget')
+        self.assertEqual(widget_info.get('options').get('readOnly'), False)