Vega Lite 'AND Filtering' across different charts

Question

I am hoping someone can help with a Vega Lite problem I am having.

In my dashboard example:

• The first chart is daily purchase amount sum over time.
• The second chart is the aggregated purchase amount by purchase type.
• The third chart is the aggregated purchase amount by previous purchaser group.

Here is the dashboard in static form:

If I click one of the bars on the bottom 2 charts the top chart will reflect this filtering. See below

The problem occurs I want to pick a group from 'purchase type' and a group from 'purchase behavior' simultaneously. For example, if I choose the bars 'previous purchaser yes' and 'purchase type yes', this shows up as OR filtering in the top chart, I want this to show up as AND filtering.

Here is the code that can be ran directly in the vega editor (https://vega.github.io/editor/#/).

Thank you.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"date": "2020-10-01","purchase_amount": 30,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-01","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-01","purchase_amount": 40,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-01","purchase_amount": 40,
        "purchase_type": "credit","previous_purchaser": "no"},
      {"date": "2020-10-02","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-02","purchase_amount": 90,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-02","purchase_amount": 110,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-02","purchase_amount": 80,
        "purchase_type": "credit","previous_purchaser": "no"},
      {"date": "2020-10-03","purchase_amount": 80,
        "purchase_type": "cash","previous_purchaser": "no"},
      {"date": "2020-10-03","purchase_amount": 60,
        "purchase_type": "cash","previous_purchaser": "yes"},
      {"date": "2020-10-03","purchase_amount": 100,
        "purchase_type": "credit","previous_purchaser": "yes"},
      {"date": "2020-10-03","purchase_amount": 100,
        "purchase_type": "credit","previous_purchaser": "yes"}]},
  "vconcat": [
    {
      "width": 350,
      "height": 80,
      "transform": [{"filter": {"selection": "click"}}],
      "mark": {"type": "bar"},
      "encoding": {
        "x": {"field": "date"},
        "y": {"aggregate": "sum", "field": "purchase_amount"}
      },
      "selection": {"brush": {"encodings": ["x"], "type": "interval"}}
    },
    {
      "vconcat": [
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {"field": "purchase_type", "title": "Purchase Type"},
            "color": {
              "condition": {
                "selection": "click",
                "field": "purchase_type",
                "legend": null
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click": {"encodings": ["color"], "type": "multi"}}
        },
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {
              "field": "previous_purchaser",
              "type": "nominal",
              "title": "Previous Purchaser"
            },
            "color": {
              "condition": {
                "selection": "click",
                "field": "previous_purchaser"
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click": {"encodings": ["color"], "type": "multi"}}
        }
      ]
    }
  ]
}

Answer 1

You can do this by using a different click selection for each chart, and combining them with an "and" filter statement like this:

{"filter": {"and": [{"selection": "click1"}, {"selection": "click2"}]}}

All together it looks like this (Open in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {
        "date": "2020-10-01",
        "purchase_amount": 30,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 40,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-01",
        "purchase_amount": 40,
        "purchase_type": "credit",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 90,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 110,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-02",
        "purchase_amount": 80,
        "purchase_type": "credit",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 80,
        "purchase_type": "cash",
        "previous_purchaser": "no"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 60,
        "purchase_type": "cash",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 100,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      },
      {
        "date": "2020-10-03",
        "purchase_amount": 100,
        "purchase_type": "credit",
        "previous_purchaser": "yes"
      }
    ]
  },
  "vconcat": [
    {
      "width": 350,
      "height": 80,
      "transform": [
        {"filter": {"and": [{"selection": "click1"}, {"selection": "click2"}]}}
      ],
      "mark": {"type": "bar"},
      "encoding": {
        "x": {"field": "date"},
        "y": {"aggregate": "sum", "field": "purchase_amount"}
      },
      "selection": {"brush": {"encodings": ["x"], "type": "interval"}}
    },
    {
      "vconcat": [
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {"field": "purchase_type", "title": "Purchase Type"},
            "color": {
              "condition": {
                "selection": "click1",
                "field": "purchase_type",
                "legend": null
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click1": {"encodings": ["color"], "type": "multi"}}
        },
        {
          "width": 325,
          "transform": [
            {"filter": {"selection": "brush"}},
            {"calculate": "datum.purchase_amount", "as": "purchase_amt"}
          ],
          "mark": {"type": "bar"},
          "encoding": {
            "x": {"field": "purchase_amt", "aggregate": "sum"},
            "y": {
              "field": "previous_purchaser",
              "type": "nominal",
              "title": "Previous Purchaser"
            },
            "color": {
              "condition": {
                "selection": "click2",
                "field": "previous_purchaser"
              },
              "value": "lightgrey"
            }
          },
          "selection": {"click2": {"encodings": ["color"], "type": "multi"}}
        }
      ]
    }
  ]
}