Not possible to view faceted charts with altair.selection after #2702

[wence-]

Since the merge of #2702, faceted charts with a selection (which used to work, I may have been doing something wrong), now result in an error:

JavaScript Error: Duplicate signal name: "selected_tuple"

This usually means there's a typo in your chart specification. See the javascript console for the full traceback.

Code to reproduce:

import pandas as pd
import altair as alt

df = pd.DataFrame(
    {"a": [1, 2, 3, 4], "b": [1, 2, 1, 2], "c": [1, 1, 2, 2], "d": [1, 2, 3, 4]}
)

selector = alt.selection(type="point", fields=["d"], bind="legend", name="selected")
chart = (
    alt.Chart(df)
    .add_params(selector)
    .mark_line(point=True)
    .encode(
        x=alt.X("a:Q"),
        y=alt.Y("b:Q"),
        color="d:N",
        opacity=alt.condition(selector, alt.value(1), alt.value(0.25)),
    )
    .facet(facet=alt.Text("c:N"))
)
chart.save("foo.html") # open foo.html

[mattijn]

Thanks for raising. This seems to be an issue in VL. Let me try to decipher:

In vega-lite this works: Open the Chart in the Vega Editor:
Here I define params nested within spec

{
  "data": {
    "values": [
      {"a": 1, "b": 1, "c": 1, "d": 1},
      {"a": 2, "b": 2, "c": 1, "d": 2},
      {"a": 3, "b": 1, "c": 2, "d": 3},
      {"a": 4, "b": 2, "c": 2, "d": 4}
    ]
  },
  "facet": {"field": "c", "type": "nominal"},
  "spec": {
    "params": [
      {
        "name": "selected",
        "select": {"type": "point", "fields": ["d"]},
        "bind": "legend"
      }
    ],    
    "mark": {"type": "line", "point": true},
    "encoding": {
      "color": {"field": "d", "type": "nominal"},
      "x": {"field": "a", "type": "quantitative"},
      "y": {"field": "b", "type": "quantitative"},
      "opacity": {"condition": {"value": 1, "param": "selected"}, "value": 0.25}
    }

  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json"
}

But when defining params top-level and referring by views to the spec by name does not work: Open the Chart in the Vega Editor:

{
  "data": {
    "values": [
      {"a": 1, "b": 1, "c": 1, "d": 1},
      {"a": 2, "b": 2, "c": 1, "d": 2},
      {"a": 3, "b": 1, "c": 2, "d": 3},
      {"a": 4, "b": 2, "c": 2, "d": 4}
    ]
  },
  "facet": {"field": "c", "type": "nominal"},
  "params": [
    {
      "name": "selected",
      "select": {"type": "point", "fields": ["d"]},
      "bind": "legend",
      "views": ["view_1"]
    }
  ],
  "spec": {
    "name": "view_1",
    "mark": {"type": "line", "point": true},
    "encoding": {
      "color": {"field": "d", "type": "nominal"},
      "x": {"field": "a", "type": "quantitative"},
      "y": {"field": "b", "type": "quantitative"},
      "opacity": {"condition": {"value": 1, "param": "selected"}, "value": 0.25}
    }
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json"
}

Resulting in the error as OP:

Duplicate signal name: "selected_tuple"

And it is the latter approach that Altair is currenlty adopting.. You see any strange things here @ChristopherDavisUCI?

A temporal workaround for you @wence- might be to move the facet within the encoding, as such:

selector = alt.selection(type="point", fields=["d"], bind="legend", name="selected")
chart = (
    alt.Chart(df)    
    .mark_line(point=True)
    .encode(
        x=alt.X("a:Q"),
        y=alt.Y("b:Q"),
        color="d:N",
        opacity=alt.condition(selector, alt.value(1), alt.value(0.25)),
        facet="c:N"
    )    
)
chart.add_params(selector)

not sure if that works for your situation.

[wence-]

Thanks, that works for this simple case, but not for my actual use case which is faceting a layered chart (chart = band + line) because faceting doesn't commute with layer composition.

[mattijn]

Yes, then the suggestion will not work.
The example that we have tested with params in combination with faceting a layered chart does work though:

import altair as alt
from vega_datasets import data

cars = data.cars.url

highlight = alt.selection_point(fields=["Origin"], bind='legend', value='Europe')

base = alt.Chart(cars, width=160, height=130).encode(
    x='Miles_per_Gallon:Q',
    y='Horsepower:Q'
)

text = base.mark_text().encode(
    text='Origin:N',
    color=alt.condition(highlight, alt.value("black"), alt.value("transparent"))        
)

dots = base.mark_circle().encode(
    color=alt.condition(highlight, 'Origin:N', alt.value('lightgray')),
    size=alt.condition(highlight, alt.value(250), alt.value(20))
)

(dots + text).facet('Origin:N').add_params(highlight)

[mattijn]

Oh wait, this is because you have defined point=True in .mark_line(point=True). This was discussed in this comment: #2684 (comment).

Apparently when separating this in a line + circle mark make it works:

import pandas as pd
import altair as alt

df = pd.DataFrame(
    {"a": [1, 2, 3, 4], "b": [1, 2, 1, 2], "c": [1, 1, 2, 2], "d": [1, 2, 3, 4]}
)

selector = alt.selection(type="point", fields=["d"], bind="legend", name="selected")
base = alt.Chart(df).encode(
    x=alt.X("a:Q"),
    y=alt.Y("b:Q"),
    color="d:N",
    opacity=alt.condition(selector, alt.value(1), alt.value(0.25)),
)
chart = (
    (base.mark_line() + base.mark_circle())
    .facet(facet=alt.Text("c:N"))
    .add_params(selector)
)

[mattijn]

Was raised previously at VL here: vega/vega-lite#7854

[mattijn]

With the second release candidate of version 5 (5.0.0rc2) this issue is resolved.