:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_us_state_capitals:


U.S. State Capitals Overlayed on a Map of the U.S
-------------------------------------------------
This is a layered geographic visualization that shows US capitals
overlayed on a map.


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


    import altair as alt
    from vega_datasets import data

    states = alt.topo_feature(data.us_10m.url, 'states')
    capitals = data.us_state_capitals.url

    # US states background
    background = alt.Chart(states).mark_geoshape(
        fill='lightgray',
        stroke='white'
    ).properties(
        title='US State Capitols',
        width=650,
        height=400
    ).project('albersUsa')

    # Points and text
    hover = alt.selection_point(on='pointerover', nearest=True,
                          fields=['lat', 'lon'])

    base = alt.Chart(capitals).encode(
        longitude='lon:Q',
        latitude='lat:Q',
    )

    text = base.mark_text(dy=-5, align='right').encode( 
        alt.Text('city', type='nominal'),
        opacity=alt.condition(~hover, alt.value(0), alt.value(1))
    )

    points = base.mark_point().encode(
        color=alt.value('black'),
        size=alt.condition(~hover, alt.value(30), alt.value(100))
    ).add_params(hover)

    background + points + text


.. tab-set::

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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            states = alt.topo_feature(data.us_10m.url, 'states')
            capitals = data.us_state_capitals.url

            # US states background
            background = alt.Chart(states).mark_geoshape(
                fill='lightgray',
                stroke='white'
            ).properties(
                title='US State Capitols',
                width=650,
                height=400
            ).project('albersUsa')

            # Points and text
            hover = alt.selection_point(on='pointerover', nearest=True,
                                  fields=['lat', 'lon'])

            base = alt.Chart(capitals).encode(
                longitude='lon:Q',
                latitude='lat:Q',
            )

            text = base.mark_text(dy=-5, align='right').encode( 
                alt.Text('city:N'),
                opacity=alt.condition(~hover, alt.value(0), alt.value(1))
            )

            points = base.mark_point().encode(
                color=alt.value('black'),
                size=alt.condition(~hover, alt.value(30), alt.value(100))
            ).add_params(hover)

            background + points + text


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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            states = alt.topo_feature(data.us_10m.url, 'states')
            capitals = data.us_state_capitals.url

            # US states background
            background = alt.Chart(states).mark_geoshape(
                fill='lightgray',
                stroke='white'
            ).properties(
                title='US State Capitols',
                width=650,
                height=400
            ).project('albersUsa')

            # Points and text
            hover = alt.selection_point(on='pointerover', nearest=True,
                                  fields=['lat', 'lon'])

            base = alt.Chart(capitals).encode(
                longitude='lon:Q',
                latitude='lat:Q',
            )

            text = base.mark_text(dy=-5, align='right').encode( 
                alt.Text('city', type='nominal'),
                opacity=alt.condition(~hover, alt.value(0), alt.value(1))
            )

            points = base.mark_point().encode(
                color=alt.value('black'),
                size=alt.condition(~hover, alt.value(30), alt.value(100))
            ).add_params(hover)

            background + points + text