Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

documentation of color schemes and options #2861

Open
mattijn opened this issue Jan 28, 2023 · 5 comments · May be fixed by #3021
Open

documentation of color schemes and options #2861

mattijn opened this issue Jan 28, 2023 · 5 comments · May be fixed by #3021
Assignees
@mattijn
Labels
enhancement

Comments

@mattijn
Copy link
Contributor

mattijn commented Jan 28, 2023 •
edited

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: #2605 (comment)

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

kindofluke commented Feb 13, 2023 •
edited

@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
Copy link
Contributor Author

mattijn commented Feb 13, 2023 •
edited

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.

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
Copy link
Contributor Author

mattijn commented Mar 30, 2023

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
Copy link
Contributor

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
Copy link
Contributor Author

mattijn commented Mar 31, 2023

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

@mattijn mattijn linked a pull request Apr 15, 2023 that will close this issue
Draft
@mattijn mattijn self-assigned this Apr 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mattijn mattijn

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

wip: doc for color scales mattijn/altair
2 participants
@mattijn @kindofluke