:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_layered_heatmap_text:


Text over a Heatmap
-------------------

An example of a layered chart of text over a heatmap using the cars dataset.


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


    import altair as alt
    from vega_datasets import data

    source = data.cars()

    # Configure common options. We specify the aggregation
    # as a transform here so we can reuse it in both layers.
    base = alt.Chart(source).transform_aggregate(
        mean_horsepower='mean(Horsepower)',
        groupby=['Origin', 'Cylinders']
    ).encode(
        alt.X('Cylinders:O'),
        alt.Y('Origin:O'),
    )

    # Configure heatmap
    heatmap = base.mark_rect().encode(
        color=alt.Color('mean_horsepower:Q',
            scale=alt.Scale(scheme='viridis'),
            legend=alt.Legend(title="Mean of Horsepower"),
        )
    )

    # Configure text
    text = base.mark_text(baseline='middle').encode(
        text=alt.Text('mean_horsepower:Q', format=".0f"),
        color=alt.condition(
            alt.datum.mean_horsepower > 150,
            alt.value('black'),
            alt.value('white')
        )
    )

    # Draw the chart
    heatmap + text


.. tab-set::

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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.cars()

            # Configure common options. We specify the aggregation
            # as a transform here so we can reuse it in both layers.
            base = alt.Chart(source).transform_aggregate(
                mean_horsepower='mean(Horsepower)',
                groupby=['Origin', 'Cylinders']
            ).encode(
                alt.X('Cylinders:O'),
                alt.Y('Origin:O'),
            )

            # Configure heatmap
            heatmap = base.mark_rect().encode(
                alt.Color('mean_horsepower:Q')
                    .scale(scheme='viridis')
                    .title("Mean of Horsepower")
            )

            # Configure text
            text = base.mark_text(baseline='middle').encode(
                alt.Text('mean_horsepower:Q', format=".0f"),
                color=alt.condition(
                    alt.datum.mean_horsepower > 150,
                    alt.value('black'),
                    alt.value('white')
                )
            )

            # Draw the chart
            heatmap + text


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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.cars()

            # Configure common options. We specify the aggregation
            # as a transform here so we can reuse it in both layers.
            base = alt.Chart(source).transform_aggregate(
                mean_horsepower='mean(Horsepower)',
                groupby=['Origin', 'Cylinders']
            ).encode(
                alt.X('Cylinders:O'),
                alt.Y('Origin:O'),
            )

            # Configure heatmap
            heatmap = base.mark_rect().encode(
                color=alt.Color('mean_horsepower:Q',
                    scale=alt.Scale(scheme='viridis'),
                    legend=alt.Legend(title="Mean of Horsepower"),
                )
            )

            # Configure text
            text = base.mark_text(baseline='middle').encode(
                text=alt.Text('mean_horsepower:Q', format=".0f"),
                color=alt.condition(
                    alt.datum.mean_horsepower > 150,
                    alt.value('black'),
                    alt.value('white')
                )
            )

            # Draw the chart
            heatmap + text