Altair selection error: “Javascript Error: Duplicate signal name: ”selector074_index“”

I’ve been trying to replicate the text shown by selection of the following chart with this code:

enter image description here

But I get the following error: Javascript Error: Duplicate signal name: "selector074_index" This usually means there's a typo in your chart specification. See the javascript console for the full traceback.

I have dedicated all day trying to find out what I am doing wrong without any luck. Here’s my code as a sample:

confirmed_area = alt.Chart(df.reset_index()).mark_area(fillOpacity=0).encode(
    alt.X('index:T', title=" "),
    alt.Y('confirmed:Q', title=" "),
    tooltip=[alt.Tooltip('index:T', title="Fecha"), alt.Tooltip('confirmed:Q', title="Casos acumulados"), alt.Tooltip('confirmed_daily:Q', title="Nuevos Casos")]
).properties(
    height = 200,
    width = 800
).interactive(

)


confirmed_line = alt.Chart(df.reset_index()).mark_line(size=3).encode(
    alt.X('index:T', title=" "),
    alt.Y('confirmed:Q', title=" ")
).properties(
    height = 200,
    width = 800,
).interactive(

)

nearest = alt.selection_single(
    nearest=True, on="mouseover", fields=["index:T"], empty="none"
)


point = (
    alt.Chart(df.reset_index())
    .mark_point(color="black")
    .encode(x="index:T", y="confirmed:Q", opacity=alt.condition(nearest, alt.value(1), alt.value(0)))
    .add_selection(nearest)
)

text =confirmed_line.mark_text(align="left", dx=5, dy=-5).encode(
    text=alt.condition(nearest, "confirmed:Q", alt.value(" "))
)

confirmed_line + confirmed_area + point + text

Answer

TL;DR – remove .interactive() from the definition of confirmed_line.

The issue is that you called .interactive() on a chart, and then layered it with itself. A minimal reproduction of this error looks like this:

import altair as alt
chart = alt.Chart('data.txt').mark_point().interactive()
chart + chart
# Javascript Error: Duplicate signal name: "selector001_tuple"
# This usually means there's a typo in your chart specification. See the javascript console for the full traceback.

To fix this, you should only call .interactive() on one of the layers:

import altair as alt
chart = alt.Chart('data.txt').mark_point()
chart + chart.interactive()

In your code, you call .interactive() when defining confirmed_line, and then derive confirmed_text from this, so that when it is layered there are two identical interactions on in one layer, which is not allowed. If you remove this call from confirmed_line, your chart should work: the .interactive() call on the confirmed_area layer already specifies that the axes should be interactive.