CODEWITHSUNDEEP
vega-lite
K. Adam
K. Adam

Reputation: 943

Possible to change radius of section in Vega Lite arc (pie chart) plot on click?

I've been using Vega Lite to design some interactive visualizations, and I’m trying to figure out if I either understand something about how signals and params work improperly, or if the radius field of an arc chart is uniquely un-drivable with params/signals. The goal is to add some interactivity to a pie chart where a selected section "grows" its radius slightly, to emphasize that it is selected:

Screenshot of desired end form of Vega Lite plot

Adapting one of the vega-lite arc plot examples, I wanted to make the radius change dimensions on click. If I make a param for selection and use that in an opacity encoding, I can change the color opacity on click; but if I put in radius, no dice. Is this by intent, a bug, or a misunderstanding of what properties can take a condition?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Pie Chart with percentage_tooltip",
  "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": "select", "select": "point"}
  ],
  "mark": {"type": "arc", "tooltip": true},
  "encoding": {
    "theta": {"field": "value", "type": "quantitative", "stack": "normalize"},
    "fillOpacity": {
      "condition": {
        "param": "select",
        "value": 1
      },
      "value": 0.5
    },
    "color": {
      "field": "category", "type": "nominal"
    },
    "radius": {
      "condition": {
        "param": "select",
        "value": 100
      },
      "value": 80
    }
  }
}

I’ve also tried using an expression within the mark object,

"radius": { "expr": "select === 'point' ? 100 : 80" }

and also computing a derived value and trying to bind the radius to that

  "transform": [
    {"calculate": "select === 'point' ? 80 : 100", "as": "scaledRadius"}
  ],

but none of these approaches seem to achieve the look I'm trying to go for, where the selected section is displayed with a larger radius. Could anybody point me to where my thinking is going wrong, with this?

Upvotes: 1

Views: 227

Answers (1)

APB Reports
APB Reports

Reputation: 2451

Try out this spec. I have added quite a few properties with conditional expressions for you to play with.

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Pie Chart with percentage_tooltip",
  "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}
    ]
  },
  "width": 200,
  "height": 200,
  "params": [
    {"name": "select", "select": {"type": "point", "fields": ["category"]}}
  ],
  "mark": {
    "type": "arc",
    "tooltip": true,
    "stroke": "white",
    "strokeWidth": 0.5,
    "padAngle": {"expr": "select.category == datum.category ? 0.05 : 0"},
    "radius": {"expr": "select.category == datum.category ? 106: 100"},
    "radius2": {"expr": "select.category == datum.category ? 3: 0"},
    "cornerRadius": {"expr": "select.category == datum.category ? 3: 0"}
  },
  "encoding": {
    "order": {"field": "value", "sort": "ascending"},
    "theta": {"field": "value", "type": "quantitative"},
    "fillOpacity": {"condition": {"param": "select", "value": 1}, "value": 0.6},
    "color": {"field": "category", "type": "nominal"}
  }
}

Here is a slightly different approach if you want all other pie slices to shrink :)

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Pie Chart with percentage_tooltip",
  "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}
    ]
  },
  "width": 300,
  "height": 300,
  "params": [
    {"name": "select", "select": {"type": "point", "fields": ["category"]}}
  ],
  "mark": {

    "type": "arc",
    "tooltip": true,
    "stroke": "white",
    "strokeWidth": 0.5,
    "radius": {"expr": "select.category == null ? 130: select.category == datum.category ? 130: 70"},
  },
  "encoding": {
    "order": {"field": "value", "sort": "ascending"},
    "theta": {"field": "value", "type": "quantitative"},
    "fillOpacity": {"condition": {"param": "select", "value": 1}, "value": 0.4},
    "color": {"field": "category", "type": "nominal"}
  }
}

One final option to apply a square root calc so all pie slices have a relative radius according to their value.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Pie Chart with percentage_tooltip",
  "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},
      {"category": 7, "value": 30}
    ]
  },
  "width": 300,
  "height": 300,
  "params": [
    {"name": "select", "select": {"type": "point", "fields": ["category"]}}
  ],
  "mark": {
    "type": "arc",
    "tooltip": true,
    "stroke": "white",
    "strokeWidth": 0.5,
    "radius": {"expr": "select.category != null ? sqrt(datum.value)*30 : 130"}
  },
  "encoding": {
    "order": {"field": "value", "sort": "ascending"},
    "theta": {"field": "value", "type": "quantitative"},
    "fillOpacity": {"condition": {"param": "select", "value": 1}, "value": 0.4},
    "color": {"field": "category", "type": "nominal"}
  }
}

Upvotes: 1

Related Questions