Conditional Encoding¶

Conditional encoding lets an encoding channel switch between alternative definitions based on a selection parameter. It is used to highlight the selected data items and de-emphasize the rest.

The basic pattern is to provide a fallback definition for the channel and one or more conditional branches in condition:

{
  "encoding": {
    "color": {
      "condition": { "param": "brush", "value": "#3a86ff" },
      "value": "#d9d9d9"
    }
  }
}

When the selection matches the current datum, GenomeSpy uses the definition inside condition. Otherwise it uses the fallback definition on the channel itself.

Conditional encoding is available on many visual channels, such as color, fill, stroke, opacity, fillOpacity, strokeOpacity, strokeWidth, size, shape, and angle.

With Selection Parameters¶

Selections are the most common driver for conditional encoding. Point selections work well for click or hover interactions, while interval selections are useful for brushing ranges.

{
  "description": "A bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)",

  "data": {
    "values": [
      { "a": "A", "b": 28 },
      { "a": "B", "b": 55 },
      { "a": "C", "b": 43 },
      { "a": "D", "b": 91 },
      { "a": "E", "b": 81 },
      { "a": "F", "b": 53 },
      { "a": "G", "b": 19 },
      { "a": "H", "b": 87 },
      { "a": "I", "b": 52 }
    ]
  },

  "params": [
    {
      "name": "highlight",
      "select": { "type": "point", "on": "pointerover" }
    },
    { "name": "select", "select": "point" }
  ],

  "mark": { "type": "rect", "fill": "#4C78A8", "stroke": "black" },

  "encoding": {
    "x": {
      "field": "a",
      "type": "ordinal",
      "scale": { "type": "band", "padding": 0.2 }
    },
    "y": { "field": "b", "type": "quantitative" },
    "fillOpacity": {
      "value": 0.3,
      "condition": { "param": "select", "value": 1 }
    },
    "strokeWidth": {
      "value": 0,
      "condition": [
        { "param": "select", "value": 2, "empty": false },
        { "param": "highlight", "value": 1, "empty": false }
      ]
    }
  }
}

Empty Selections¶

For selection parameters, an empty selection matches by default. This is often useful for filters, but in conditional encoding it can be surprising because the highlighted style is then applied before the user has selected anything.

Set empty: false when the conditional branch should only apply after the selection contains data:

{
  "encoding": {
    "strokeWidth": {
      "condition": { "param": "select", "value": 2, "empty": false },
      "value": 0
    }
  }
}

Multiple Conditions¶

You can provide an array of conditional value definitions. They are evaluated in order, and the channel's main definition acts as the final fallback.

{
  "encoding": {
    "strokeWidth": {
      "condition": [
        { "param": "select", "value": 2, "empty": false },
        { "param": "highlight", "value": 1, "empty": false }
      ],
      "value": 0
    }
  }
}

Conditional Encoding¶

With Selection Parameters¶

Empty Selections¶

Multiple Conditions¶

See Also¶