:orphan:
:html_theme.sidebar_secondary.remove:

.. This document is auto-generated by the altair-gallery extension. Do not modify directly.

.. _gallery_select_mark_area:


Using Selection Interval with mark_area
=========================================

Because area is considered one object, just using the plain 
selector will select the entire area instead of just one part of it.

This example shows how to use two areas, one on top of the other, and a
`transform_filter` to fake out this effect.



.. altair-plot::
    :remove-code:
    


    import altair as alt
    from vega_datasets import data

    source = data.unemployment_across_industries.url

    base = alt.Chart(source).mark_area(
        color='goldenrod',
        opacity=0.3
    ).encode(
        x='yearmonth(date):T',
        y='sum(count):Q',
    )

    brush = alt.selection_interval(encodings=['x'])
    background = base.add_params(brush)
    selected = base.transform_filter(brush).mark_area(color='goldenrod')

    background + selected
    # No channel encoding options are specified in this chart
    # so the code is the same as for the method-based syntax.


.. tab-set::

    .. tab-item:: Method syntax
        :sync: method

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.unemployment_across_industries.url

            base = alt.Chart(source).mark_area(
                color='goldenrod',
                opacity=0.3
            ).encode(
                x='yearmonth(date):T',
                y='sum(count):Q',
            )

            brush = alt.selection_interval(encodings=['x'])
            background = base.add_params(brush)
            selected = base.transform_filter(brush).mark_area(color='goldenrod')

            background + selected


    .. tab-item:: Attribute syntax
        :sync: attribute

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.unemployment_across_industries.url

            base = alt.Chart(source).mark_area(
                color='goldenrod',
                opacity=0.3
            ).encode(
                x='yearmonth(date):T',
                y='sum(count):Q',
            )

            brush = alt.selection_interval(encodings=['x'])
            background = base.add_params(brush)
            selected = base.transform_filter(brush).mark_area(color='goldenrod')

            background + selected
            # No channel encoding options are specified in this chart
            # so the code is the same as for the method-based syntax.