documentation of color schemes and options

[mattijn]

To change a color scheme I mostly end up at this Vega page: https://vega.github.io/vega/docs/schemes/. Even Vega-Lite does not have its own documentation for colors.

Lets add these as well to the Altair documentations.

Probably good to also have a section on the interpolate option as is shown here: https://github.com/altair-viz/altair/discussions/2605#discussioncomment-2771089

This Observable notebook is also very nice: https://observablehq.com/@simon-lang/vega-colour-schemes

[kindofluke]

@mattijn I can take a stab at this as I was digging into this while setting a theme for my company's usage. One question that has come up, is it possible to add a new "named" color scheme?

For instance could we define something like this.

alt.Scale(scheme="custom_blacks")

In reading the vega/vega-lite documentation, this does not seem possible as a Javascript function needs to be called to add the scheme but I just wanted to check.

(fwiw, I have submitted documentation updates before and submitted an example in the past so I think I can do it. )

[mattijn]

That would be great @kindofluke! Here is the explanation page how to build the docs locally.

There are currently three different requirements pages:

1. master/requirements.txt
2. master/requirements_dev.txt
3. master/doc/requirements.txt

I'm not completely certain if you need all these requirements for building the docs. I think 1 & 3 from the list above is sufficient. But if you can't work it out, just send a ping and I will try to help.

Regarding adding a new named color scheme, I think you are right. When saving the chart to a html page, it is maybe possible to patch the Vega specification within the embed_options (docs), somewhere in here:

chart.save('chart.html', embed_options={'patch': ...})

But I'm not aware of examples that have explored this route to register custom color schemes.

• Example how to register custom color scheme directly in Vega: https://stackoverflow.com/a/63524633/2459096
• Example how to apply a patch through Vega-Embed: https://observablehq.com/@domoritz/rotating-earth

click for example code for discrete and continuous color schemes

import altair as alt
import pandas as pd


def chart_discrete_schemes(discrete_schemes, col_discrete_schemes):
    for scheme in discrete_schemes:
        steps = discrete_schemes.get(scheme)
        df = pd.DataFrame({"x": range(steps)})
        c = (
            alt.Chart(df, height=20, title=alt.TitleParams(text=scheme, anchor="start"))
            .mark_rect()
            .encode(
                x=alt.X("x:O").axis(None),
                color=(
                    alt.Color("x:O").scale(scheme=alt.SchemeParams(scheme)).legend(None)
                ),
            )
        )
        col_discrete_schemes.append(c)
    return col_discrete_schemes


def chart_continuous_schemes(continuous_schemes, col_continuous_schemes):
    df = pd.DataFrame({"x": range(300)})
    for scheme in continuous_schemes:
        c = (
            alt.Chart(
                df,
                width=300,
                height=20,
                title=alt.TitleParams(text=scheme, anchor="start"),
            )
            .mark_tick(opacity=1, height=20)
            .encode(
                x=alt.X("x:O").axis(None),
                color=alt.Color("x:Q")
                .scale(scheme=alt.SchemeParams(scheme))
                .legend(None),
            )
        )
        col_continuous_schemes.append(c)
    return col_continuous_schemes


catg_schemes = {
    "accent": 8,
    "category10": 10,
    "category20": 20,
    "category20b": 20,
    "category20c": 20,
    "dark2": 8,
    "paired": 12,
    "pastel1": 9,
    "pastel2": 8,
    "set1": 9,
    "set2": 8,
    "set3": 12,
    "tableau10": 10,
    "tableau20": 20,
}

divg_schemes = {
    "blueorange": 9,
    "brownbluegreen": 9,
    "purplegreen": 9,
    "pinkyellowgreen": 9,
    "purpleorange": 9,
    "redblue": 9,
    "redgrey": 9,
    "redyellowblue": 9,
    "redyellowgreen": 9,
    "spectral": 9,
}

seqs_schemes = {
    "blues": 9,
    "tealblues": 9,
    "teals": 9,
    "greens": 9,
    "browns": 9,
    "greys": 9,
    "purples": 9,
    "warmgreys": 9,
    "reds": 9,
    "oranges": 9,
}

seqm_schemes = {
    "turbo": 9,
    "viridis": 9,
    "inferno": 9,
    "magma": 9,
    "plasma": 9,
    "cividis": 9,
    "bluegreen": 9,
    "bluepurple": 9,
    "goldgreen": 9,
    "goldorange": 9,
    "goldred": 9,
    "greenblue": 9,
    "orangered": 9,
    "purplebluegreen": 9,
    "purpleblue": 9,
    "purplered": 9,
    "redpurple": 9,
    "yellowgreenblue": 9,
    "yellowgreen": 9,
    "yelloworangebrown": 9,
    "yelloworangered": 9,
    "darkblue": 9,
    "darkgold": 9,
    "darkgreen": 9,
    "darkmulti": 9,
    "darkred": 9,
    "lightgreyred": 9,
    "lightgreyteal": 9,
    "lightmulti": 9,
    "lightorange": 9,
    "lighttealblue": 9,
}

cycl_schemes = {"rainbow": 9, "sinebow": 9}

# create chart with discrete color schemes
discrete_schemes = [
    catg_schemes,
    divg_schemes,
    seqs_schemes,
    seqm_schemes,
    cycl_schemes,
]
col_discrete_schemes = []
for scheme in discrete_schemes:
    col_discrete_schemes = chart_discrete_schemes(scheme, col_discrete_schemes)
charts_discrete = (
    alt.vconcat(*col_discrete_schemes)
    .resolve_scale(color="independent")
    .configure_scale(bandPaddingInner=0.1)
    .configure_view(stroke=None)
)

# create chart with continous color schemes
continuous_schemes = [divg_schemes, seqs_schemes, seqm_schemes, cycl_schemes]
col_continuous_schemes = []
for scheme in continuous_schemes:
    col_continuous_schemes = chart_continuous_schemes(scheme, col_continuous_schemes)
charts_continuous = (
    alt.vconcat(*col_continuous_schemes)
    .resolve_scale(color="independent")
    .configure_view(stroke=None)
)

charts_discrete : Open the Chart in the Vega Editor
charts_continuous : Open the Chart in the Vega Editor

[mattijn]

Gentle ping @kindofluke, did you manage to make a start? I was planning to start working on this as well if you don't mind.

[kindofluke]

So sorry. I made a branch and built the docs successfully but didn’t get much farther. I guess my day job got in the way.

[mattijn]

No problem! Completely understandable. If you don't mind, I like to give it a try in coming week as well.