DOC: Isotype grid case study

[palewire]

Inspired by a Vega-Lite example, I took a run at creating a case study example of an isotype grid. I couldn't quite get the legend nailed, but before I obsessed over it I thought I'd offer it as a draft to see if you thought it would ever merit inclusion.

import altair as alt
from vega_datasets import data

source = data.la_riots()

# Sort by the key field
source = source.sort_values("race")

# Add an incremental id to the data
source['id'] = source.reset_index().index + 1

alt.Chart(
    source,
    title="L.A. Riots Deaths by Race"
).transform_calculate(
    col="ceil(datum.id/10)"
).transform_calculate(
    row="datum.id - datum.col*10"
).mark_point(filled=True, size=90).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"),
    color=alt.Color(
        "race:N",
        legend=alt.Legend(title="", padding=30)
    )
).properties(
    width=400,
    height=400
).configure_view(strokeWidth=0)

[jakevdp]

This is a really interesting example... I took the liberty of tweaking it just a bit:

import altair as alt
from vega_datasets import data

source = data.la_riots()

# Sort by the key field
source = source.sort_values("race")

# Add an incremental id to the data
source['id'] = source.reset_index().index + 1

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")

alt.Chart(
    source,
    title="L.A. Riots Deaths by Race"
).transform_calculate(
    col="ceil(datum.id/7)"
).transform_calculate(
    row="datum.id - datum.col*7"
).transform_calculate(
    label="'     ' + datum.race"
).mark_point(filled=True, size=90).encode(
    x=alt.X("col:O", axis=None),
    y=alt.Y("row:O", axis=None),
    shape=shape,
    color=alt.Color(
        "label:N",
        legend=alt.Legend(title="", padding=25)
    )
).properties(
    width=200,
    height=300
).configure_view(strokeWidth=0)

[palewire]

Alright. I've made some small changes and, IMHO, this is good to go.

[palewire]

Any other changes you'd like to see before we include this?

[jakevdp]

To be honest, I think the data in this example is sensitive enough that I wouldn't be comfortable including it in the documentation. Can we come up with a similar example based on a different dataset?

[palewire]

Of course. I work in the news business, so I get exposed to all kinds of things all the time. If you want a certain tone for the site, I think that's a fine editorial choice. I'll see if I can find some other categorical data in the Vega samples.

[mattijn]

Thank you @palewire. Once you found something, can you open a new PR? I'm closing this one.