Json - Vega-lite: Pie Chart with multi-selection in the legend

Luciano
March 1, 2024
229 views
0 votes
2 Answers

I’m trying to make a pie chart in vega-lite and be able to select the categories to include.

Here is my first attempt (vega editor)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data and multi-selection per category.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "selection": {
    "category_select": {
      "type": "multi",
      "fields": ["category"],
      "bind": "legend"
    }
  },
  "transform": [{"filter": {"selection": "category_select"}}],
  "mark": {"type": "arc"},
  "encoding": {
    "theta": {"aggregate": "sum", "field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

However, when I select a category, it is not possible to select more than one:

How to support multi category selection, say 1 and 6, in a way that the pie proportion is recalculated?

Answers

This allows multi select when holding down the shift key.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data and multi-selection per category.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "params": [{
    "name": "test",
    "select": {"type": "point", "fields": ["category"]},
    "bind": "legend"
  }],

  "mark": {"type": "arc"},
  "encoding": {
    "theta": {"aggregate": "sum", "field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"},
     "opacity": {
      "condition": {"param": "test", "value": 1},
      "value": 0.2
    }
  }
}

Try this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with embedded data and multi-selection per category.",
  "data": {
    "values": [
      {"category": 1, "value": 4},
      {"category": 2, "value": 6},
      {"category": 3, "value": 10},
      {"category": 4, "value": 3},
      {"category": 5, "value": 7},
      {"category": 6, "value": 8}
    ]
  },
  "layer": [
    {
      "params": [
        {
          "name": "test",
          "select": {"type": "point", "fields": ["category"]},
          "bind": "legend"
        }
      ],
      "mark": {"type": "arc"},
      "encoding": {
        "theta": {"aggregate": "sum", "field": "value", "type": "quantitative"},
        "color": {
          "field": "category",
          "type": "nominal",
          "legend": {"symbolOpacity": 1}
        },
        "opacity": {"value": 0}
      }
    },
    {
      "transform": [
        {"filter": {"selection": "test"}},
        {"calculate": "datum.value", "as": "value2"}
      ],
      "mark": {"type": "arc"},
      "encoding": {
        "theta": {
          "aggregate": "sum",
          "field": "value2",
          "type": "quantitative"
        },
        "color": {"field": "category", "type": "nominal", "legend": null},
        "opacity": {"condition": {"param": "test", "value": 1}, "value": 0.5}
      }
    }
  ],
  "resolve": {"scale": {"theta": "independent", "opacity": "independent"}}
}

Please signup or login to give your own answer.

Click here to cancel reply.

Json – Vega-lite: Pie Chart with multi-selection in the legend

Answers