
:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_isotype_emoji:


Isotype Visualization with Emoji
================================
Isotype Visualization shows the distribution of animals across UK and US, using unicode emoji
marks rather than custom SVG paths (see https://altair-viz.github.io/gallery/isotype.html).
This is adapted from Vega-Lite example https://vega.github.io/vega-lite/examples/isotype_bar_chart_emoji.html.


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


    import altair as alt
    import pandas as pd

    source = pd.DataFrame([
          {'country': 'Great Britain', 'animal': 'cattle'},
          {'country': 'Great Britain', 'animal': 'cattle'},
          {'country': 'Great Britain', 'animal': 'cattle'},
          {'country': 'Great Britain', 'animal': 'pigs'},
          {'country': 'Great Britain', 'animal': 'pigs'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'Great Britain', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'cattle'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'pigs'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'},
          {'country': 'United States', 'animal': 'sheep'}
        ])


    alt.Chart(source).mark_text(size=45, baseline='middle').encode(
        alt.X('x:O', axis=None),
        alt.Y('animal:O', axis=None),
        alt.Row('country:N', header=alt.Header(title='')),
        alt.Text('emoji:N')
    ).transform_calculate(
        emoji="{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]"
    ).transform_window(
        x='rank()',
        groupby=['country', 'animal']
    ).properties(width=550, height=140)


.. tab-set::

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

        .. code:: python


            import altair as alt
            import pandas as pd

            source = pd.DataFrame([
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'pigs'},
                  {'country': 'Great Britain', 'animal': 'pigs'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'}
                ])


            alt.Chart(source).mark_text(size=45, baseline='middle').encode(
                alt.X('x:O').axis(None),
                alt.Y('animal:O').axis(None),
                alt.Row('country:N').title(''),
                alt.Text('emoji:N')
            ).transform_calculate(
                emoji="{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]"
            ).transform_window(
                x='rank()',
                groupby=['country', 'animal']
            ).properties(
                width=550,
                height=140
            )


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

        .. code:: python


            import altair as alt
            import pandas as pd

            source = pd.DataFrame([
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'cattle'},
                  {'country': 'Great Britain', 'animal': 'pigs'},
                  {'country': 'Great Britain', 'animal': 'pigs'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'Great Britain', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'cattle'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'pigs'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'},
                  {'country': 'United States', 'animal': 'sheep'}
                ])


            alt.Chart(source).mark_text(size=45, baseline='middle').encode(
                alt.X('x:O', axis=None),
                alt.Y('animal:O', axis=None),
                alt.Row('country:N', header=alt.Header(title='')),
                alt.Text('emoji:N')
            ).transform_calculate(
                emoji="{'cattle': '🐄', 'pigs': '🐖', 'sheep': '🐏'}[datum.animal]"
            ).transform_window(
                x='rank()',
                groupby=['country', 'animal']
            ).properties(width=550, height=140)
