.. 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::
    :code-below:

    
    import altair as alt
    from vega_datasets import data

    source = data.cars()

    # Configure common options
    base = alt.Chart(source).transform_aggregate(
        num_cars='count()',
        groupby=['Origin', 'Cylinders']
    ).encode(
        alt.X('Cylinders:O', scale=alt.Scale(paddingInner=0)),
        alt.Y('Origin:O', scale=alt.Scale(paddingInner=0)),
    )

    # Configure heatmap
    heatmap = base.mark_rect().encode(
        color=alt.Color('num_cars:Q',
            scale=alt.Scale(scheme='viridis'),
            legend=alt.Legend(direction='horizontal')
        )
    )

    # Configure text
    text = base.mark_text(baseline='middle').encode(
        text='num_cars:Q',
        color=alt.condition(
            alt.datum.num_cars > 100,
            alt.value('black'),
            alt.value('white')
        )
    )

    # Draw the chart
    heatmap + text

.. toctree::
   :hidden: