Plotly.js: Focus vs. context point styling in the non-lassoed plot for crossfiltering

[monfera]

Currently, lassoing a group of points (focus) causes the excluded points to fade (context).

For crossfiltering action, we similarly need to deemphasize points in _other_ scatterplots that are linked to the same crossfilter. The effect can be mimicked by lowering the opacity on markers not currently selected, but it feels like meddling with the user supplied styling preferences. So this is a short conversation starter on whether we want to separate the lassoing input action from the focus+context differential rendering.

[etpinard]

Adding either

• a set of *selected attributes in the marker attribute container:

var trace = {
  marker: {
     color: 'red',
     colorselected: 'blue',
     opacity: 0.7,
     opacityselected: 0.2
   }
}

or a separate markerselected container:

var trace = {
  marker: {
    color: 'red',
    opacity: 0.7
  },
  markerselected: {
    color: 'blue',
    opacity: 0.2
  }
}

I, personally, prefer the latter.

Moreover, we should maybe add a boolean attribute, (e.g selectable) to toggle if a trace's points can be selected or not.

[monfera]

@etpinard thanks for the informed design! Currently, the rectangular and lasso selectors switch eliminated elements into an opacity: 0.2. Should this preexisting functionality also consult this new spec for styling? For a twist, let's consider that applying a lasso selection in Scatter A will restyle eliminated points in Scatter B; then, selecting in Scatter B should (?) still have a visual impact, perhaps reducing opacity as done now. In other words, maybe it's good to keep the current hardcoded 0.2 opacity for selecting on the _current_ chart as is, and use the above spec for styling points _after_ the elimination happened, whether in the same chart or in another chart.

[monfera]

@etpinard maybe my example wasn't too clear in text, I whipped up a crossfiltering example in Vega-lite to show:

Box selection was done on the left panel, see the grey box, and the greyed-out points outside the box (analogous to our box select). What I'm talking about above is the panel on the right, where the retained points remain unchanged (magenta) but the eliminated points show up with some other styling even though we didn't do a box select in _that_ plot.

(Technically, Vega doesn't restyle the eliminated points; it renders all data in grey and all _kept_ data in magenta - we could mimic this with multiple traces, hmm maybe that's better than figuring out a new styling spec for crossfilter-eliminated points 😄 )

If you want to select yourself, copy the below into https://vega.github.io/editor (box select is quite slow at 2k points, wait a second or two)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "data/flights-2k.json",
    "format": {"parse": {"date": "date"}}
  },
  "transform": [{"calculate": "hours(datum.date)", "as": "time"}],
  "repeat": {"column": ["distance", "time"]},
  "spec": {
    "layer": [{
      "selection": {
        "brush": {"type": "interval", "encodings": ["x", "y"]}
      },
      "mark": "point",
      "encoding": {
        "x": {
          "field": {"repeat": "column"}
        },
        "y": {"field": "delay"},
        "color": {"value": "grey"},
        "opacity": {"value": 0.5}
      }
    }, {
      "transform": [{"filter": {"selection": "brush"}}],
      "mark": "point",
      "encoding": {
        "x": {
          "field": {"repeat": "column"}
        },
        "y": {"field": "delay"},
        "color": {"value": "magenta"}
      }
    }]
  }
}

[monfera]

Closing it in favor of #1847 which supersedes this item.