How To Reproduce The Unsub Histogram In Altair?

Unsub's histogram display stacks each journal title on top of each other as an individual box, then ranks by cost per use on the x-axis. https://i.ibb.co/2FvXhFp/unsub.jpg (can't p

Solution 1:

You can replicate it to an extent via the detail parameter. However, the white lines are not added for each observations, I'm not sure if it is because they are aligning to play nicely with what is on the axis (I tried setting nice=False but to no avail), maybe someone more knowledgeable can fill in.

import altair as alt
from vega_datasets import data

source = data.cars()

alt.Chart(source.reset_index(), height=200).mark_bar().encode(
    alt.X("Horsepower", bin=alt.Bin(maxbins=50)),
    alt.Y('count()', axis=alt.Axis(grid=False)),
    alt.Detail('index')
).configure_view(strokeWidth=0)

Solution 2:

Another approach with similar result would be to reformat your dataframe to have a column that runs from 0 to the max count for each bin and then plot it using mark_rect:

import altair as alt
from vega_datasets import data

source = data.cars()

# Add index from zero to max count (bin height) for each group
source2 = source.groupby('Horsepower', as_index=False).apply(lambda x: x.reset_index(drop = True)).reset_index()

alt.Chart(source2, height=200, width=800).mark_rect(size=8, strokeWidth=1, stroke='white').encode(
    alt.X('Horsepower:O'),
    alt.Y('level_1:O', title='Count', scale=alt.Scale(reverse=True)),
)

You could use pd.cut to split horsepower into intervals if you wanted it to be more similar to the histogram x-axis, but you can't use the interval datatype directly in Altair so you would need to assign a number to each bin.