CODEWITHSUNDEEP
pythonmatplotlibaltair
8-Bit Borges
8-Bit Borges

Reputation: 10033

Altair - mapping wrong color values

Altair

Starting from:

df_top_5 = df.sort_values('Mean', ascending=False)

and then ressseting the index for altair, which accepts only columns

df_top_5 = df_top_5.reset_index()

I print:

df_top_5:

top 5                       Player      Mean    Color
0  Pierre-Emerick Aubameyang  0.629630  #EF0107
1              Sergio Aguero  0.592593  #97C1E7
2                 Danny Ings  0.555556  #ED1A3B
3              Mohamed Salah  0.538462  #CE1317
4                 Sadio Mane  0.500000  #CE1317

and passing top_5 to chart, like so:

top_bars = alt.Chart(top_5).mark_bar().encode(
            alt.Y('Player:N'),
            alt.X('Mean:Q'),
            alt.Color('Color', legend=None),
            tooltip = [alt.Tooltip('Player:N'),
                       alt.Tooltip('Mean:Q')],
        )

Colors are being mapped wrongly to each player, although the map in the dataframe above is 100% correct.

enter image description here

Matplotlib

If I start from the same point with matplotlib:

top_5 = df.sort_values('Mean', ascending=False)

which prints, with 'Player' as index:

Player                                      
Pierre-Emerick Aubameyang  0.629630  #EF0107
Sergio Aguero              0.592593  #97C1E7
Danny Ings                 0.555556  #ED1A3B
Mohamed Salah              0.538462  #CE1317
Sadio Mane                 0.500000  #CE1317

and pass to plot:

# build axis
Y = top_5.index[::-1]
X = top_5['Mean'][::-1]
C = top_5['Color'][::-1]
# plot config
plt.rcParams["figure.facecolor"] = 'white'
plt.figure(figsize=(10,8))
plt.barh(Y, X, height=0.4, color=C)

Everything works.

enter image description here

What am I missing with altair?

Upvotes: 0

Views: 347

Answers (1)

jakevdp
jakevdp

Reputation: 86328

Altair automatically generates color scales for your inputs, unless you specify scale=None:

import altair as alt
import pandas as pd
top_5 = pd.DataFrame({
    "Player": ["Pierre-Emerick Aubameyang", "Sergio Aguero", "Danny Ings", "Mohamed Salah", "Sadio Mane"],
    "Mean": [0.629630, 0.592593, 0.555556, 0.538462, 0.500000],
    "Color": ["#EF0107", "#97C1E7", "#ED1A3B", "#CE1317", "#CE1317"]
})
alt.Chart(top_5).mark_bar().encode(
    alt.Y('Player:N'),
    alt.X('Mean:Q'),
    alt.Color('Color', scale=None),
    tooltip = [alt.Tooltip('Player:N'),
                alt.Tooltip('Mean:Q')],
)

enter image description here

See https://altair-viz.github.io/user_guide/customization.html#raw-color-values for more information.

Upvotes: 2

Related Questions