Pie Chart with Labels and facet in altair: not able to proper render the value labels

[aborruso]

Using the single chart example, I have a label for each piece of cake.

If I try to transform it in a faceted chart using this code

df=pd.read_csv("input.csv",keep_default_na=False)

base=alt.Chart(df).encode(
    theta=alt.Theta(field="v", type="quantitative"),
    color=alt.Color(field="k", type="nominal")
)


pie = base.mark_arc(outerRadius=100)
text = base.mark_text(radius=115,fill= "black").encode(alt.Text(field="v", type="quantitative", format=",.1f"))

alt.layer(pie, text, data=df).facet(column='label')

all the labels are all in the same wedge and then illegible (here the vega lite version vega lite version).

How to have a result like that of the single chart?

Thank you

f,n,k,v,label
1,3,0-5 %,99.7289972899729,Forest
1,4,5-10 %,0.27100271002710025,Forest
0,1,0-5 %,100.0,Non-Forest
254,5,0-5 %,99.0077177508269,unclassifiable
254,6,5-10 %,0.9922822491730982,unclassifiable

[ChristopherDavisUCI]

Does adding the following to the very end make it work the way you want?

.resolve_scale(
    theta="independent"
)

By default, Vega-Lite and Altair will try to use a shared scale for all three of the pie charts.

Here is an example that I tried. (You can also remove the resolve_scale to see what impact it's having.)

import pandas as pd
import altair as alt

source = pd.DataFrame({"category": [1, 2, 3, 4, 5, 6], 
    "value": [4, 6, 10, 3, 7, 8], 
    "label": ["A", "A", "B", "B", "B", "A"]})

alt.Chart(source).mark_arc().encode(
    theta=alt.Theta(field="value", type="quantitative"),
    color=alt.Color(field="category", type="nominal"),
).facet(
    column="label"
).resolve_scale(
    theta="independent"
)

Open the Chart in the Vega Editor

[ChristopherDavisUCI]

Hmm, I'm not sure. I tried another example using numbers that differed more greatly (like in your example), and it still looked okay. Do you see what's different between my example and yours?

import pandas as pd
import altair as alt

source = pd.DataFrame({"category": [1, 2, 3, 4, 5, 6], 
    "value": [0.14, 0.16, 10, 3, 7, 8], 
    "label": ["A", "A", "B", "B", "B", "A"]})

base = alt.Chart(source).encode(
    theta=alt.Theta("value:Q", stack=True),
    color=alt.Color("category:N", legend=None),
)

pie = base.mark_arc(outerRadius=120)
text = base.mark_text(radius=140, size=20).encode(
    text="category:N"
)

(pie + text).facet(
    column="label"
).resolve_scale(
    theta="independent"
)

Open the Chart in the Vega Editor

[mattijn]

Difference seems to be in the stack=True as channel encoding option in the theta channel encoding.

From here: https://vega.github.io/vega-lite/docs/arc.html#pie-and-donut-charts

Note: For now, you need to add stack=True to theta to force the text to apply the same polar stacking layout.

So it becomes:

base = alt.Chart(s, width=10, height=10).encode(
    theta=alt.Theta("v:Q", stack=True),
    color=alt.Color("k:N"),
)

pie = base.mark_arc(outerRadius=30)
text = base.mark_text(radius=40, size=10).encode(
    text="k:N"
)

(pie + text).facet(
    column="label"
).resolve_scale(
    theta="independent"
)

[ChristopherDavisUCI]

Thanks @mattijn! How did you create s? Did you save the data in an external csv file, or is there a more direct way?

[aborruso]

Difference seems to be in the stack=True as channel encoding option in the theta channel encoding.

Yes, this works, thank you very much!!!

[mattijn]

Quickly copied it from the vega-editor url:

s = pd.DataFrame.from_records([
      {"f": 1, "n": 3, "k": "0-5 %", "v": 99.7289972899729, "label": "Forest"},
      {
        "f": 1,
        "n": 4,
        "k": "5-10 %",
        "v": 0.2710027100271002,
        "label": "Forest"
      },
      {"f": 0, "n": 1, "k": "0-5 %", "v": 100, "label": "Non-Forest"},
      {
        "f": 254,
        "n": 5,
        "k": "0-5 %",
        "v": 99.0077177508269,
        "label": "unclassifiable"
      },
      {
        "f": 254,
        "n": 6,
        "k": "5-10 %",
        "v": 0.9922822491730982,
        "label": "unclassifiable"
      }
    ])

[aborruso]

I'm adding here the link to @mattijn to mark this as the right answer:
#2887 (reply in thread)