Are ridgeline plots possible in vega-lite?

Question

Is it possible to make a plot like this in vega-lite?

There doesn't seem to be any concept of three-dimensionality in the documentation. Is there some kind of workaround that would make overlapping plots like this possible?

Answer 1

Yes, though it takes some doing. Here is an example using Altair, adapted from https://observablehq.com/@vega/psr-b1919-21-with-vega-lite (It requires pre-processing the data source, so it's best to use a framework that outputs the Vega-Lite spec):

import numpy as np
import pandas as pd
import altair as alt

# Note: data is in a CSV with no header info. We first load it as a 2D array,
# and then create a one-column dataframe where each entry is a list.
# This leads to a compact data representation, from which we use Altair
# transforms to tidy the data within the chart specification.
url = 'https://gist.githubusercontent.com/borgar/31c1e476b8e92a11d7e9/raw/0fae97dab6830ecee185a63c1cee0008f6778ff6/pulsar.csv'
values = np.genfromtxt(url, delimiter=',')
df = pd.Series(values.tolist(), name='data').to_frame()

# These values tweak the spacing & overlap between lines.
step=6
overlap=12

alt.Chart(df).transform_window(
    series='row_number()'
).transform_flatten(
    ['data']
).transform_window(
    index='row_number()',
    groupby=['series']
).mark_line(
    fill='white',
    stroke='black',
    strokeWidth=1
).encode(
    x=alt.X('index:Q', axis=None),
    y=alt.Y('data:Q', scale=alt.Scale(range=[step, -overlap * (step + 1)]), axis=None),
    row=alt.Row('series:O', header=alt.Header(title=None, labelPadding=0, labelFontSize=0)),
    tooltip=None
).properties(
    width=370,
    height=step,
    bounds='flush',
    spacing=0,
    padding=0,
).configure_view(
    stroke=None,
    fill='white'
)