:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_dot_dash_plot:


Dot Dash Plot
=============
How to make the dot-dash plot presented in Edward Tufte's `Visual Display of Quantitative Information <https://www.edwardtufte.com/tufte/books_vdqi>`_. Based
on a JavaScript implementation by `g3o2 <https://bl.ocks.org/g3o2/bd4362574137061c243a2994ba648fb8>`_.


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


    import altair as alt
    from vega_datasets import data

    source = data.cars()

    # Configure the options common to all layers
    brush = alt.selection_interval()
    base = alt.Chart(source).add_params(brush)

    # Configure the points
    points = base.mark_point().encode(
        x=alt.X('Miles_per_Gallon', title=''),
        y=alt.Y('Horsepower', title=''),
        color=alt.condition(brush, 'Origin', alt.value('grey'))
    )

    # Configure the ticks
    tick_axis = alt.Axis(labels=False, domain=False, ticks=False)

    x_ticks = base.mark_tick().encode(
        alt.X('Miles_per_Gallon', axis=tick_axis),
        alt.Y('Origin', title='', axis=tick_axis),
        color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
    )

    y_ticks = base.mark_tick().encode(
        alt.X('Origin', title='', axis=tick_axis),
        alt.Y('Horsepower', axis=tick_axis),
        color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
    )

    # Build the chart
    y_ticks | (points & x_ticks)
    # 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.cars()

            # Configure the options common to all layers
            brush = alt.selection_interval()
            base = alt.Chart(source).add_params(brush)

            # Configure the points
            points = base.mark_point().encode(
                x=alt.X('Miles_per_Gallon', title=''),
                y=alt.Y('Horsepower', title=''),
                color=alt.condition(brush, 'Origin', alt.value('grey'))
            )

            # Configure the ticks
            tick_axis = alt.Axis(labels=False, domain=False, ticks=False)

            x_ticks = base.mark_tick().encode(
                alt.X('Miles_per_Gallon', axis=tick_axis),
                alt.Y('Origin', title='', axis=tick_axis),
                color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
            )

            y_ticks = base.mark_tick().encode(
                alt.X('Origin', title='', axis=tick_axis),
                alt.Y('Horsepower', axis=tick_axis),
                color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
            )

            # Build the chart
            y_ticks | (points & x_ticks)


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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.cars()

            # Configure the options common to all layers
            brush = alt.selection_interval()
            base = alt.Chart(source).add_params(brush)

            # Configure the points
            points = base.mark_point().encode(
                x=alt.X('Miles_per_Gallon', title=''),
                y=alt.Y('Horsepower', title=''),
                color=alt.condition(brush, 'Origin', alt.value('grey'))
            )

            # Configure the ticks
            tick_axis = alt.Axis(labels=False, domain=False, ticks=False)

            x_ticks = base.mark_tick().encode(
                alt.X('Miles_per_Gallon', axis=tick_axis),
                alt.Y('Origin', title='', axis=tick_axis),
                color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
            )

            y_ticks = base.mark_tick().encode(
                alt.X('Origin', title='', axis=tick_axis),
                alt.Y('Horsepower', axis=tick_axis),
                color=alt.condition(brush, 'Origin', alt.value('lightgrey'))
            )

            # Build the chart
            y_ticks | (points & x_ticks)
            # No channel encoding options are specified in this chart
            # so the code is the same as for the method-based syntax.