Line Chart with Custom Confidence Interval in Altair

Question

Suppose i have the data frame below:

I checked the documentation but it's only based on a single column.

Reproducible code:

x = np.random.normal(100,5,100)
data = pd.DataFrame(x)
epsilon = 10
data.columns = ['x']
data['lower'] = x - epsilon
data['upper'] = x + epsilon
data

I'd actually like to use altair, since i like it's interactivity.

Answer 1

You can layer a line and an area chart, usng the y and y2 encodings to specify the range:

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

x = np.random.normal(100,5,100)
epsilon = 10
data = pd.DataFrame({
    'x': x,
    'lower': x - epsilon,
    'upper': x + epsilon
}).reset_index()

line = alt.Chart(data).mark_line().encode(
    x='index',
    y='x'
)

band = alt.Chart(data).mark_area(
    opacity=0.5
).encode(
    x='index',
    y='lower',
    y2='upper'
)

band + line