Bullet chart in Altair

Question

I am trying to reproduce this Vega-lite chart in Altair, but encountering some issues. Here's what I have so far:

# data import and prep
import json
import altair as alt
import pandas as pd

df = pd.read_json("""[{"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":250},
{"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":26},
{"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":550},
{"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":2100},
{"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":4.4}]""")

df[['measure1','measure2']] = pd.DataFrame(df.measures.values.tolist(), index=df.index)

df[['low', 'medium', 'high']] = pd.DataFrame(df.ranges.values.tolist())

# chart
base = alt.Chart(df).encode(row = 'title:O')
m1 = base.mark_bar().encode(x='measure1:Q')
m2 = base.mark_tick().encode(x='measure2:Q')

So far so good. When I try to layer the two charts, however:

m1 + m2

SchemaValidationError: Invalid specification

    altair.vegalite.v2.api.LayerChart->layer->items, validating 'anyOf'

    {'data': {'name': 'data-58353a9bcf31ee710e2a5cb2da21a143'}, 'mark': 'bar', 'encoding': {'row': {'type': 'nominal', 'field': 'title'}, 'x': {'type': 'quantitative', 'field': 'measure1'}}} is not valid under any of the given schemas

Note that this works if I specify a y encoding in both layers and facet at the end, however that defeats the purpose of having facets (all the Y axis marks are repeated in all facets. If I specify neither the row encoding in the base chart nor the y encoding, only one bar gets plotted (the largest one).

The reason I want facets is so I can specify independent x scales given the different domain of the data (see original example).

Thanks for your help!

jakevdp jakevdp · Accepted Answer · 2019-03-18T03:23:26

In both Altair and vega-lite, it is invalid to layer two faceted charts (in general, there is no guarantee that two faceted charts will line up when layering). If you look closely at the vega-lite chart, you'll see that instead of layering faceted charts, it facets a layered chart.

The same can be accomplished in Altair this way:

import altair as alt
import pandas as pd

df = pd.DataFrame.from_records([
    {"title":"Revenue","subtitle":"US$, in thousands","ranges":[150,225,300],"measures":[220,270],"markers":[250]},
    {"title":"Profit","subtitle":"%","ranges":[20,25,30],"measures":[21,23],"markers":[26]},
    {"title":"Order Size","subtitle":"US$, average","ranges":[350,500,600],"measures":[100,320],"markers":[550]},
    {"title":"New Customers","subtitle":"count","ranges":[1400,2000,2500],"measures":[1000,1650],"markers":[2100]},
    {"title":"Satisfaction","subtitle":"out of 5","ranges":[3.5,4.25,5],"measures":[3.2,4.7],"markers":[4.4]}
])

alt.layer(
    alt.Chart().mark_bar(color='#eee').encode(alt.X("ranges[2]:Q", scale=alt.Scale(nice=False), title=None)),
    alt.Chart().mark_bar(color='#ddd').encode(x="ranges[1]:Q"),
    alt.Chart().mark_bar(color='#ccc').encode(x="ranges[0]:Q"),
    alt.Chart().mark_bar(color='lightsteelblue', size=10).encode(x='measures[1]:Q'),
    alt.Chart().mark_bar(color='steelblue', size=10).encode(x='measures[0]:Q'),
    alt.Chart().mark_tick(color='black').encode(x='markers[0]:Q'),
    data=df
).facet(
    row="title:O"
).resolve_scale(
    x='independent'
)

Some of the style/configuration options from the original chart are missing, but this is the rough idea.

Bullet chart in Altair

1 Answers