Deneb radio buttons / sort buttons

[lukejkirsten91]

Hi!

Got a dumbell chart on Deneb. I want to add buttons at the top of the chart (radio style buttons I think?) to toggle which field the y axis is sorted by (PupilNameWithSEN, Average Reccent Grade, MIDYIS/ALIS Number Grade, Difference).

Even better -- if the buttons can be fixed to the top (so stay there when i scroll down, and EVEN better if it can facilitate multi-level sort.

Is this possible? Please could you advise? If helpful I can put my code on here but it is quite long!

Thanks in advance for your help!

[avatorl]

Thanks. It's easier for me to respond here; I could have forgotten about the Reddit post.

There is no native Vega or Deneb feature for custom radio buttons ("bind" signal property provides limited capabilities with no format options), but it's possible to create them as interactive Vega marks.

Example:

1. Create a data table with a list of options. I have Departments and Teams options:

    {
      "name": "data-levels",
      "values": [
        [1, "Departments"],
        [2, "Teams"]
      ]
    }

2. Create signals with Unicode characters for the radio buttons:

    {
      "name": "radioButtonOff",
      "value": "⭘"
    },
    {
      "name": "radioButtonOn",
      "value": "⦿"
    }

3. Create "text" type mark to output the radio buttons with labels. Make one of the buttons On (⦿) by default, while all other buttons are Off (⭘). In my example "level" signal contains name of the active button.

        {
          "name": "text-slicer-level",
          "type": "text",
          "from": {
            "data": "data-levels"
          },
          "zindex": 2,
          "encode": {
            "update": {
              "text": {
                "signal": "( datum['1']==level ? radioButtonOn : radioButtonOff ) + ' ' + datum['1']"
              },
              "x": {"signal": "15"},
              "y": {
                "signal": "15+datum['0']*40"
              },
              "fontSize": {
                "signal": "20"
              },
              "cursor": {
                "value": "pointer"
              }
            }
          }
        }

4. Create a signal that contains name of an active radio button and listens for a "click" event. A click on any "text-slicer-level" text mark in my example writes name of the clicked button into the "level" signal.

    {
      "name": "level",
      "description": "switch between data aggregation levels ('Departments' and 'Teams')",
      "value": "Departments",
      "on": [
        {
          "events": "@text-slicer-level:click",
          "update": "datum[1]",
          "force": true
        }
      ]
    }

[avatorl]

If you need arrows instead of the radio buttons (to show sort order direction as well), see a bit more complicated solution at https://github.com/avatorl/DataViz-Vega/tree/main/ibcs-three-tier-chart

Search for "sort" string in the JSON code to find relevant parts of the code.

Live chart: https://www.powerofbi.org/dataviz-vega/?VegaChart=ibcs-three-tier-chart/ibcs-three-tier-chart.json. Click on the column headers (AC, PY, etc.) to see how it works.

[avatorl]

Even better -- if the buttons can be fixed to the top (so stay there when i scroll down)

It's possible to achieve using pbicontainer Deneb feature: https://deneb-viz.github.io/scrolling-overflow#using-pbicontainer-to-track-scrolling-events

, and EVEN better if it can facilitate multi-level sort.

Possible, but it's going to be a bit more complicated. Start from the easiest for you to implement solution, then you'll see if you already have enough understanding of Vega to implement multi-level sort. Feel free to ask if you'll have questions.