Use multi selection along all values for same y-value marked points

Question

I have a vega-lite visualization in kibana. The config goes like:

encoding: {
    x: {field: "time", timeUnit: "yearmonthdaydatehoursminutes", type: "temporal", axis : {title: null}}
    y: {field: "user", type: "nominal", axis : {title: null}}
}

layer : [
  {  
  "selection": {
    "select": {"type": "multi"}
  },
  "mark": { "type" : "point", "cursor": "pointer"},
  "encoding": {
    "opacity" : {"condition" : {"selection": "select", "value": 1},
      "value": 0.3}
  }
]

This basically multi selects based on clicking the point in visualization as shown below:

Requirement: I want to select all values falling on the same y-axis on one click of any one point (not only that point as in figure). Is this possible through vega-lite? Basically need an if condition with the y value of selected point.

I went over the documentation (though it was haunting) and some other examples to figure out, but no help. Any help will be appreciated.

Answer 1

If you want the selection to apply to all points with the same y-axis value, you can pass encodings=["y"] within the selection specification:

"selection": {"select": {"type": "multi", "encodings": ["y"]}}

There is no way for selections to respond when clicking the background of the chart. But a nice trick to achieve this is to create a transparent background element to respond to clicks, and to use "nearest": true within your selection to allow clicking anywhere on the chart surface. Here is an example using Vega-Lite JSON (view live in Vega Editor):

{
  "encoding": {"y": {"type": "nominal", "field": "user", "title": null}},
  "layer": [
    {
      "mark": {"type": "rule", "opacity": 0},
      "selection": {
        "select": {"type": "multi", "encodings": ["y"], "nearest": true}
      }
    },
    {
      "mark": {"type": "point", "cursor": "pointer"},
      "encoding": {
        "opacity": {
          "condition": {"value": 1, "selection": "select"},
          "value": 0.3
        },
        "x": {
          "type": "temporal",
          "field": "time",
          "timeUnit": "yearmonthdatehoursminutes",
          "title": null
        }
      }
    }
  ],
  "data": {
    "values": [
      {"time": "1970-01-31T00:00:00.000002019", "user": "B"},
      {"time": "1970-02-28T00:00:00.000002019", "user": "B"},
      {"time": "1970-03-31T00:00:00.000002019", "user": "C"},
      {"time": "1970-04-30T00:00:00.000002019", "user": "E"},
      {"time": "1970-05-31T00:00:00.000002019", "user": "E"},
      {"time": "1970-06-30T00:00:00.000002019", "user": "F"},
      {"time": "1970-07-31T00:00:00.000002019", "user": "F"},
      {"time": "1970-08-31T00:00:00.000002019", "user": "A"},
      {"time": "1970-09-30T00:00:00.000002019", "user": "F"},
      {"time": "1970-10-31T00:00:00.000002019", "user": "A"},
      {"time": "1970-11-30T00:00:00.000002019", "user": "E"},
      {"time": "1970-12-31T00:00:00.000002019", "user": "A"},
      {"time": "1971-01-31T00:00:00.000002019", "user": "D"},
      {"time": "1971-02-28T00:00:00.000002019", "user": "C"},
      {"time": "1971-03-31T00:00:00.000002019", "user": "C"},
      {"time": "1971-04-30T00:00:00.000002019", "user": "A"},
      {"time": "1971-05-31T00:00:00.000002019", "user": "D"},
      {"time": "1971-06-30T00:00:00.000002019", "user": "E"},
      {"time": "1971-07-31T00:00:00.000002019", "user": "D"},
      {"time": "1971-08-31T00:00:00.000002019", "user": "A"},
      {"time": "1971-09-30T00:00:00.000002019", "user": "A"},
      {"time": "1971-10-31T00:00:00.000002019", "user": "D"},
      {"time": "1971-11-30T00:00:00.000002019", "user": "B"},
      {"time": "1971-12-31T00:00:00.000002019", "user": "E"},
      {"time": "1972-01-31T00:00:00.000002019", "user": "F"},
      {"time": "1972-02-29T00:00:00.000002019", "user": "A"},
      {"time": "1972-03-31T00:00:00.000002019", "user": "B"},
      {"time": "1972-04-30T00:00:00.000002019", "user": "D"},
      {"time": "1972-05-31T00:00:00.000002019", "user": "F"},
      {"time": "1972-06-30T00:00:00.000002019", "user": "B"},
      {"time": "1972-07-31T00:00:00.000002019", "user": "F"},
      {"time": "1972-08-31T00:00:00.000002019", "user": "A"}
    ]
  }
}