:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_isotype_grid:


Isotype Grid
------------
This example is a grid of isotype figures.


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


    import altair as alt
    import pandas as pd

    data = pd.DataFrame([dict(id=i) for i in range(1, 101)])

    person = (
        "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 "
        "-0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 "
        "0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 "
        "0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 "
        "0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 "
        "-0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 "
        "-0.6 -0.4 -0.6z"
    )

    alt.Chart(data).transform_calculate(
        row="ceil(datum.id/10)"
    ).transform_calculate(
        col="datum.id - datum.row*10"
    ).mark_point(
        filled=True,
        size=50
    ).encode(
        x=alt.X("col:O", axis=None),
        y=alt.Y("row:O", axis=None),
        shape=alt.ShapeValue(person)
    ).properties(
        width=400,
        height=400
    ).configure_view(
        strokeWidth=0
    )


.. tab-set::

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

        .. code:: python


            import altair as alt
            import pandas as pd

            data = pd.DataFrame([dict(id=i) for i in range(1, 101)])

            person = (
                "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 "
                "-0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 "
                "0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 "
                "0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 "
                "0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 "
                "-0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 "
                "-0.6 -0.4 -0.6z"
            )

            alt.Chart(data).transform_calculate(
                row="ceil(datum.id/10)"
            ).transform_calculate(
                col="datum.id - datum.row*10"
            ).mark_point(
                filled=True,
                size=50
            ).encode(
                alt.X("col:O").axis(None),
                alt.Y("row:O").axis(None),
                alt.ShapeValue(person)
            ).properties(
                width=400,
                height=400
            ).configure_view(
                strokeWidth=0
            )


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

        .. code:: python


            import altair as alt
            import pandas as pd

            data = pd.DataFrame([dict(id=i) for i in range(1, 101)])

            person = (
                "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 "
                "-0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 "
                "0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 "
                "0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 "
                "0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 "
                "-0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 "
                "-0.6 -0.4 -0.6z"
            )

            alt.Chart(data).transform_calculate(
                row="ceil(datum.id/10)"
            ).transform_calculate(
                col="datum.id - datum.row*10"
            ).mark_point(
                filled=True,
                size=50
            ).encode(
                x=alt.X("col:O", axis=None),
                y=alt.Y("row:O", axis=None),
                shape=alt.ShapeValue(person)
            ).properties(
                width=400,
                height=400
            ).configure_view(
                strokeWidth=0
            )