Help - Building a 'Table' with Deneb that Mimics Power BI's Sort Function"

[Anonymous]

Hi Folks,

Ever since I discovered Deneb a few months ago, I've been over the moon with how it broadens Power BI's capacity and amplifies its visual prowess so impressively. It's truly a game-changer 🙂

Yet, as I explore further, I've stumbled upon a challenge that I am confident can be addressed by the minds here 😉 .

I'm attempting to build  a Power BI "table like" in Deneb, and I confess, it's becoming a bit of an undertaking!

To be specific, I'm looking to craft an hconcat that lines up 3-4 "columns" side by side. One column could be a bar, another a heatmap, and so on. Of course, the y-axis is shared among these "columns".

But here's the twist, I need to mimic the functionality of clicking on a header to sort it - a feature that's strikingly akin to a Power BI table, a function our users are quite accustomed to and wouldn't want to let go.

I've thoroughly combed through Vega's website and unearthed numerous cool features, but none seem to answer this exact question. Maybe it's right there and I'm overlooking it…

Could anyone lend a hand or steer me in the right direction? Any help, suggestions, or guidance would be immensely appreciated.

Why?

- Native tables in Power BI are unfortunately still quite limited in customization, tooltips, etc.
- Yet, users love tables, especially being able to create on-the-fly rankings by "sorting".
- Keeping in mind what's achievable in Tableau, we believe that when used with discretion, Deneb could offer a super elegant and scalable alternative.


PS: Maybe hconcat isn't the best approach, so I'm open to suggestions!

I created this on vega editor as a first step:

[avatorl]

See: https://vega.github.io/vega/docs/event-streams/
And write something like this:

    {
      "name": "sortField",
      "init": 0,
      "on": [
        {
          "events": "@column1Title:click",
          "update": 1,
          "force": true
        },
        {
          "events": "@column2Title:click",
          "update": 2,
          "force": true
        }
      ]
    },

[avatorl]

It's easy. But you need to use Vega instead of Vega-Lite.
Multiple charts in one + sorting by any column: https://powerofbi.org/international-business-communication-standards/