Whole/part selection of visual elements

[rolyp]

There are some invalid assumptions/hacks baked into the JavaScript viz code regarding how selection states of parts of visual elements (e.g. a bar or bubble in a bar or bubble chart) are mapped to (visual) selection states of the composite.

For example, in BarChart.js the selection state of the bar is simply the selection state of its y coordinate:

            .attr('fill', ([, d]) => snd(d.y) ? colorShade(barFill, -40) : barFill)
            .attr('class', ([, d]) => snd(d.y) ? 'bar-selected' : 'bar-unselected')

Conceptually there should probably be a Galois connection here too, relating the visualisation of a bar to the concrete data structure representing it, so that (for example) selecting a bar should select both the x and y fields, but selecting either the x or the y field would be enough to select the bar. That would be mathematically sound, but would introduce an undesirable coarseness, e.g. if when computing related inputs, if the primary selection was needed to compute a single attribute of a bubble in a bubble chart, then the related inputs would include anything demanded by any of the bubble attributes (preventing the user from being able to independently query the various facets of the visualisation).

(A longer-term idea might be to separate out the presentation of each component of a visual selection, e.g. selecting the x coordinate of a point would have a different visual presentation to selecting the y coordinate. Selection of color attributes are problematic though if color is also one of the modalities used to visualise selection. So there are some non-trivial challenges here regardless.)

For now, an improvement might just be to take the disjunction of the selection states of the attributes as the selection state of the whole (similar to what I proposed above for the Galois connection, but without actually enforcing the round-tripping property, i.e. without formally treating the composite as “selected” just because one of its parts is, even though visually it might look that way).

See also:

• 860

[JosephBond]

The same hack is present in bubble charts at the moment, the y key of the data is the only one relevant to the highlighting of the bubble itself. This is related to the second point in explorable-viz/graphical-slicing#311

[rolyp]

Currently we implement (in the JS) a Galois connection in the sense that if any field is selected, the visual element is shown as selected, and if the visual element is selected, then all its fields become selected. That seems reasonable for now, and we will implement individual selection of visual elements once we have #860.

[rolyp]

Given previous comment, considering this as implemented for now. (The implementation is at least consistent in effectively implementing a Galois connection between visual elements and their constituent fields.)