DOC: Simple Isotype grid example

[palewire]

Mirrors a Vega-Lite example upstream.

import altair as alt
import pandas as pd

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

alt.Chart(data).transform_calculate(
    col="ceil (datum.id/10)"
).transform_calculate(
    row="datum.id - datum.col*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("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")
).properties(width=400, height=400).configure_view(strokeWidth=0)

[jakevdp]

Looks good – I'd prefer to avoid the long line and define the shape outside the chart; e.g.

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(
    col="ceil (datum.id/10)"
).transform_calculate(
    row="datum.id - datum.col*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)

Random thought... we might even think about adding a library of common SVG shapes to Altair, so we could do e.g. alt.shapes.person, alt.shapes.cow, etc.

[palewire]

@jakevdp, I've made the changes you requested. I also flipped the order of how records are drawn to move left-to-right from the upper left, rather than top to bottom. I think this better represents how people read and will work look better in more complicated examples.

[palewire]

Also, I think that packaging isotypes sounds like a grand idea. Though I wonder if a good independent package of SVG isotypes already exists. And if it doesn't, somebody should make it.

[jakevdp]

I don't know of any existing collection of SVG paths for use in isotype plots... but there may be one out there. Maybe @domoritz or @kanitw might know?

[kanitw]

I'm not aware of any. But it sounds definitely useful. :)

[palewire]

Fun fact: This guy is sitting on my desk right now, challenging me.

[jakevdp]

I'm going to merge this - we can discuss creating isotype collections at a later point!