Asking for help - Line plot shows striked then solid line connecting each other - trying to show solid then striked line.

[lolitanaz314]

I'm trying to inject a legend into my plot with "Above current spend" and "Below current spend" (where "Above current spend" is supposed to be dashed and "Below current spend" is supposed to be solid). Right now it's the other way around.

def plot_response_curves_ciderv(
    response_curves_df: pd.DataFrame,
    title: str | None = summary_text.RESPONSE_CURVES_LABEL,
    plot_separately: bool = True,
    include_ci: bool = True,
) -> alt.Chart:
  chart_kwargs = {}
  response_curves_df['below_spend'] = 'Below current spend'
  response_curves_df['above_spend'] = 'Above current spend'

  if title:
    chart_kwargs['title'] = formatter.custom_title_params(title)

  base = alt.Chart(response_curves_df, **chart_kwargs).encode(
      x=alt.X(
          f'{constants.SPEND}:Q',
          title=summary_text.SPEND_LABEL,
          axis=alt.Axis(
              labelExpr=formatter.compact_number_expr(),
              **formatter.AXIS_CONFIG,
          ),
      ),
      y=alt.Y(
          f'{constants.MEAN}:Q',
          title=summary_text.INC_SALES_LABEL,
          axis=alt.Axis(
              labelExpr=formatter.compact_number_expr(),
              **formatter.Y_AXIS_TITLE_CONFIG,
          ),
      ),
      color=f'{constants.CHANNEL}:N',
  )

  below_current_spend_line = base.mark_line().encode(
            strokeDash=alt.StrokeDash(
                'below_spend:N',
                legend=alt.Legend(title=None))
            ).transform_filter(alt.datum.spend_multiplier <= 1.0)

  above_current_spend_line = base.mark_line(strokeDash=[5, 5]).encode(
      strokeDash=alt.StrokeDash(
          'above_spend:N',
          sort='descending',
          legend=alt.Legend(title=None))
  ).transform_filter(
      alt.datum.spend_multiplier >= 1.0
  )

  band = base.mark_area(opacity=0.5).encode(
      x=f'{constants.SPEND}:Q',
      y=f'{constants.CI_LO}:Q',
      y2=f'{constants.CI_HI}:Q',
      color=f'{constants.CHANNEL}:N',
  )

  historic_spend_point = (
      base.mark_point(
          filled=True, shape='square', size=constants.POINT_SIZE, opacity=1
      )
      .encode(
          tooltip=[constants.SPEND, constants.MEAN],
          shape=alt.Shape('spend_level:N', legend=alt.Legend(title=None))
      )
      .transform_filter(alt.datum.spend_multiplier == 1.0)
  )

  if include_ci:
    plot = alt.layer(below_current_spend_line, above_current_spend_line, historic_spend_point, band)
  else:
    plot = alt.layer(below_current_spend_line, above_current_spend_line, historic_spend_point)
  if plot_separately:
    plot = plot.facet(constants.CHANNEL, columns=3).resolve_scale(
        x=constants.INDEPENDENT, y=constants.INDEPENDENT
    )
  return plot.configure_axis(**formatter.TEXT_CONFIG)

The DataFrame:

This is the current state of the plots with the above code:

Question: How do I make it such that the plots show a solid line connecting to a dotted line (rather than a dotted line connecting to a solid line), and have "Above current spend" be dashed while "Below current spend" be solid? I added strokeDash=[5, 5] to the params of above_current_spend_line to show that it's supposed to be striked but believe that's being overriden by the encoding - is there anything I'm overseeing here?

Thanks for the help! :)

[mattijn]

Thanks for starting this discussion @lolitanaz314. Would it be possible for you to simplify the issue you are having into a minimal reproducible example, that can be easily copied by someone? An example how to turn a large Altair specification into a minimal example can be seen in this recent discussion comment #3311 (reply in thread). Thanks again for reaching out.

[lolitanaz314]

Hi Mattijn, thank you so much for the response! I trimmed the other code down while trying to retain all the important elements of the plot and included some sample data that should be copy-pasteable into another colab/IDE.

Minimal reproducible example: 


data = {'metric': ['ch_0']*11,
        'channel': ['ch_0']*11,
        'spend': [0.000000, 114.964310, 229.928619, 344.892944, 459.857239, 574.821533, 689.785889, 804.750122, 919.714478, 1034.678711, 1149.643066],
        'spend_multiplier': [0.0, 0.2, 0.4, 0.6, 0.8, 1.0, 1.2, 1.4, 1.6, 1.8, 2.0],
        'ci_hi': [0.000000, 2028.882288, 3456.423706, 4539.557324, 5447.919531, 6215.776904, 6815.456885, 7367.503809, 7816.624121, 8221.330371, 8569.699268],
        'ci_lo': [0.000000, 74.053049, 123.534815, 160.482775, 187.311062, 210.090246, 227.052588, 242.151311, 253.362630, 263.924635, 273.497270],
        'mean': [0.000000, 660.952271, 1109.004028, 1447.120483, 1715.819824, 1936.538818, 2122.165283, 2281.103516, 2419.135254, 2540.404297, 2647.977295],
        'spend_level': ['current spend']*11}
# Create DataFrame
df = pd.DataFrame(data)


def plot_response_curves(
    response_curves_df: pd.DataFrame,
    plot_separately: bool = True,
    include_ci: bool = True,
) -> alt.Chart:
  response_curves_df['below_spend'] = 'Below current spend'
  response_curves_df['above_spend'] = 'Above current spend'

  base = alt.Chart(response_curves_df).encode(
      x=alt.X(
          'spend:Q',
          title='Spend'
      ),
      y=alt.Y(
          'mean:Q',
          title='Incremental Sales'
      ),
      color='channel:N',
  )

  below_current_spend_line = base.mark_line().encode(
            strokeDash=alt.StrokeDash(
                'below_spend:N',
                legend=alt.Legend(title=None))
            ).transform_filter(alt.datum.spend_multiplier <= 1.0)

  above_current_spend_line = base.mark_line(strokeDash=[5, 5]).encode(
      strokeDash=alt.StrokeDash(
          'above_spend:N',
          sort='descending',
          legend=alt.Legend(title=None))
  ).transform_filter(
      alt.datum.spend_multiplier >= 1.0
  )

  band = base.mark_area(opacity=0.5).encode(
      x='spend:Q',
      y='ci_lo:Q',
      y2='ci_hi:Q',
      color='channel:N',
  )

  historic_spend_point = (
      base.mark_point(
          filled=True, shape='square', size=80, opacity=1
      )
      .encode(
          tooltip=['spend', 'mean'],
          shape=alt.Shape('spend_level:N', legend=alt.Legend(title=None))
      )
      .transform_filter(alt.datum.spend_multiplier == 1.0)
  )

  if include_ci:
    plot = alt.layer(below_current_spend_line, above_current_spend_line, historic_spend_point, band)
  else:
    plot = alt.layer(below_current_spend_line, above_current_spend_line, historic_spend_point)
  if plot_separately:
    plot = plot.facet('channel', columns=3).resolve_scale(
        x='independent', y='independent'
    )
  return plot

Plot:

Again, thank you for the help!!

[lolitanaz314]

Just wondering how I could switch the solid and striked lines to be reversed ("Above current spend" should be dashed, "Below current spend" should be solid) - thanks!

[mattijn]

There are two different fields for your strokeDash channel, so you'll have to define a single scale with fixed domain / range values combination and apply this scale to both strokeDash channels.

import altair as alt
import pandas as pd

data = {'channel': ['ch_0']*11,
        'spend': [0.000000, 114.964310, 229.928619, 344.892944, 459.857239, 574.821533, 689.785889, 804.750122, 919.714478, 1034.678711, 1149.643066],
        'spend_multiplier': [0.0, 0.2, 0.4, 0.6, 0.8, 1.0, 1.2, 1.4, 1.6, 1.8, 2.0],
        'mean': [0.000000, 660.952271, 1109.004028, 1447.120483, 1715.819824, 1936.538818, 2122.165283, 2281.103516, 2419.135254, 2540.404297, 2647.977295],
       }

df = pd.DataFrame(data)

# two columns
df['below_spend'] = 'Below current spend'
df['above_spend'] = 'Above current spend'

# fix scale, so it can be used for different fields
scale_strokeDash = alt.Scale(domain=['Below current spend', 'Above current spend'], range=[[0], [5,5]])

# set scale with [0] to strokeDash for solid line for less than equal spend multiplier
line_lte = alt.Chart(df).mark_line().encode(
    x=alt.X('spend:Q'),
    y=alt.Y('mean:Q'),
    color='channel:N',
    strokeDash=alt.StrokeDash('below_spend').scale(scale_strokeDash)
).transform_filter(alt.datum.spend_multiplier <= 1.0)

# set scale with [5,5] to strokeDash for dotted line for greater than equal spend multiplier
line_gte = alt.Chart(df).mark_line().encode(
    x=alt.X('spend:Q'),
    y=alt.Y('mean:Q'),
    color='channel:N',
    strokeDash=alt.StrokeDash('above_spend').scale(scale_strokeDash)
).transform_filter(alt.datum.spend_multiplier >= 1.0)

line_lte + line_gte

Good luck!