Plot several vertical lines with different x values per faceted graph in Altair

[lolitanaz314]

I'm running into an issue with plotting vertical lines on top of other Altair's marked lines (represented by 'posterior' and 'prior' here) where the prior and posterior lines become swiveled after including the vertical lines.

The wonky looking plot

Code with the issue:

def plotSaturation2_5(df):
      base = alt.Chart(df, title='Saturation Curve').encode(
            x=alt.X('impressions:Q'),
            y=alt.Y('median:Q')
      )

      color_scale = alt.Scale(domain=['posterior', 'prior'],
                              range=['red', 'blue'])

      posterior_line = base.mark_line().encode(
                x='impressions:Q',
                y='median:Q',
                color= alt.Color('distribution:N', scale=color_scale),
      )

      # Define the x-values for the vertical lines for each facet
      vertical_lines_data = pd.DataFrame({
          'media': ['display', 'display', 'gdn', 'gdn'],
          'impressions': [100, 200, 400, 500],  # Replace with your desired x-values
      })

      vline_display = alt.Chart(vertical_lines_data).mark_rule(
          color='red', strokeWidth=3).encode(x='impressions:Q').transform_filter(alt.datum.media     == 'display')

      vline_gdn = alt.Chart(vertical_lines_data).mark_rule(
          color='red', strokeWidth=3).encode(x='impressions:Q').transform_filter(alt.datum.media    == 'gdn')

  layered_plot = alt.layer(
      posterior_line,
      vline_display,
      vline_gdn,
      data=df
      ).transform_calculate(impressions='datum.impressions').facet(
          column='media'
      )

      return layered_plot

    plotSaturation2_5(exampleDF)

My goal is to facet the vertical lines such that the first facet plot (display) has vertical lines at impressions(x) = 100 and 200, and the second facet plot has vertical lines at impressions(x) = 400 and 500 instead of both graphs in the facet plot having both lines. Right now they show as the latter.

I got it to display in another function in the colab (plotSaturation2) but there, I have separately defined vertical lines (vline1_1, vline1_2, vline2_1, vline2_2) to include in the layer so it's a bunch of things defined that I don't want.

The nice (ideal outcome) plot

Link to colab: https://colab.research.google.com/drive/1-I_4nokaCaBSezqooWpI7EiEaj_uzUyS?authuser=1#scrollTo=_C5mC1DK6U2P

Is there a way to do this with including the vertical line dataFrame separate from the base data that is used to plot the prior + posterior red and blue curves? That's what I'm trying to do in plotSaturation2_5(). Thank you so much!!

[binste]

It looks like the faceting does no longer filter the data and so both charts look the same as if you remove the faceting. I didn't figure out why but if you want to keep the definition for the vertical lines in a dataframe and not copy paste definitions of charts as you had to do in plotSaturation2, you can do the following:

def plotSaturation2_5(df):
    base = alt.Chart(df, title="Saturation Curve").encode(
        x=alt.X("impressions:Q"), y=alt.Y("median:Q")
    )

    color_scale = alt.Scale(domain=["posterior", "prior"], range=["red", "blue"])

    posterior_line = base.mark_line().encode(
        x="impressions:Q",
        y="median:Q",
        color=alt.Color("distribution:N", scale=color_scale),
    )

    # Define the x-values for the vertical lines for each facet
    vertical_lines_data = pd.DataFrame(
        {
            "media": ["display", "display", "gdn", "gdn"],
            "impressions": [100, 200, 400, 500],  # Replace with your desired x-values
        }
    )

    vlines = []
    for _, row in vertical_lines_data.iterrows():
        vlines.append(
            alt.Chart()
            .mark_rule(
                color="red" if row["media"] == "display" else "green", strokeWidth=3
            )
            .encode(x=alt.datum(row["impressions"]))
            .transform_filter(alt.datum.media == row["media"])
        )

    layered_plot = alt.layer(posterior_line, *vlines, data=df).facet(column="media")

    return layered_plot


plotSaturation2_5(exampleDF)

Does this help?