Sankey plot

[iamabhishekmathur]

Design

Design Link: https://xd.adobe.com/view/0790f950-abbd-41fa-b372-332295fd876f-52c3/screen/4ef1b0c3-50cc-4782-9400-193c438cdc41/

Features

• Ability to click on any of the parent/child components
• After clicking, component should be highlighted and it should trigger an event (use case: event will be used as a filter for table values)
• Thickness of the line should be proportionate to the % distribution to each child branch

@shihan007

[mtanco]

Rather than a funnel ui card or component, I would recommend making this a new plot type. To me this looks like it's basically just a sankey plot, but in this case used for only 1 to many situations (which might be shown better in a pie chart, but that's a different conversation).

Example of a common sankey:

Data would usually be in the format of path, count. Count would be the width of the pipes and the sum of each item in path is how you get the size of the boxes. Path looks something like a, b, c. Additionally, there would be a new parameter for aligning to the start or the end or the "middle" which would make them equal length (this is only needed for paths of length 3+, but the chart will look different if you are funneling to or from something).

Example of a "middle" adjusted chart:

Thoughts @iamabhishekmathur @mturoci

[mturoci]

@iamabhishekmathur The original funnel for filtering purposes feels weird (never seen filtering like this). The filtering functionality is already in place, just create a Deployed to column and make it filterable.

@mtanco TIL this thing has an official name :) Seems like a good idea, but will definitely be a tremendous amount of work to make it right, smart and usable. It is doable, just a matter of priority as usual.

cc @lo5

[shihan007]

@mtanco @mturoci can we implement something like this.

because we want to emphasise the number (all models -> 234)
cc: @iamabhishekmathur

[mturoci]

Yes, the design looks good IMO, just doesn't make much sense in the context of table filtering.

[shihan007]

@mtanco @mturoci this is the behaviour we are expecting. User can switch between model stages by clicking each card in the funnel and when user switch from all models to -> dev or prod funnel view should highlight and show which stage user viewing
for more understanding : https://xd.adobe.com/view/a57dac4a-727c-4892-9197-b0014a6a18d4-f02e/screen/ade66107-2aa6-4146-a772-7a00601f2368

[mturoci]

I still don't understand. The linked design only changes dropdown value upon clicking or am I missing something?

[shihan007]

@mturoci It should change the table values too

[mturoci]

Please see my comment above. What are the benefits compared to our existing table filter? The table shows total / filtered number of rows in footer so it is easy to see.

I don't think users would consider the proposed component a filter. It seems more suitable for presentational purposes only, e.g. hierarchy depiction.

[shihan007]

@mturoci I want to highlight the selected stage in the funnel view.

[mturoci]

Why?

[shihan007]

@mturoci idea is to let users know which stage they look into in the page. But I discussed with @iamabhishekmathur and we are okay to have the component without filter and highlight feature

[lo5]

The simplest and most compact way of representing whole-to-part quantities is a single 100% stacked bar, like this:

Each bar segment can be made clickable if you need to link/drill-down.

A Sankey diagram is overkill, unless someone can demonstrate that there are multiple sources and destinations across multiple flow stages.

[shihan007]

@mturoci Any updates on this ticket?

cc: @iamabhishekmathur @shanaka-rajitha

[shihan007]

The simplest and most compact way of representing whole-to-part quantities is a single 100% stacked bar, like this:

Each bar segment can be made clickable if you need to link/drill-down.

A Sankey diagram is overkill, unless someone can demonstrate that there are multiple sources and destinations across multiple flow stages.

It's seems in this chart type it's difficult to display longer names, Since most models can contain longer characters @lo5
@iamabhishekmathur Wdyt?

[lo5]

The placement of long labels can be solved with tooltips, callouts, legends, etc.

It would be good to know reasons why a Sankey diagram is more appropriate here than a stacked bar.

If a stacked bar solves your problem, then use ui.plot().

[shihan007]

@lo5 in our case dev models and prod models are part of all models. In stack bar we can represent dev and prod but how can we display all models here?

[iamabhishekmathur]

@lo5 your suggestion solves for single layer, but doesn't solve for multi layer visualisation
use case:

1. Model can move from No Env > Dev > Prod
2. Model can move from No Env > Dev > Stage > Prod
3. Model can remain in No Env
4. Model can move from No Env > Prod

4 is straight
In 1. we need to show the stage breakdown

This cannot be achieved with the whole-to-part suggestion.

I also wouldn't want us to spend TOO much time on this ... @lo5 any other suggestions/work arounds that you've got?

[shihan007]

@mturoci @lo5 I have updated the design to align more with sankey plot properties (adjusted height to represent value)

you can check the design here https://xd.adobe.com/view/0790f950-abbd-41fa-b372-332295fd876f-52c3/screen/60aebbe8-1cbf-4628-821f-344af82ef8ee/

cc: @iamabhishekmathur

[lo5]

The design needs work:

• The overlaps at the source ([1], [2]) are misleading. The heights need to be proportional to the fraction of the source that leads to the destination.
• The gap [3] is superfluous.

Per @iamabhishekmathur, there can be 2+ stages. The design above covers only the 2-stage case. What's the proposal for label positioning for intermediate stages in case there are 2+ stages? Note that the height of the destination might be smaller than the height of the label + count.

[mturoci]

Another possible solution is to just use a pie chart:

[shihan007]

@mturoci yeah, we discussed about this and we are okay to use pie chart for this scenario . Do you need a another ticket for this or already created pie chart?

cc: @iamabhishekmathur @lo5

[mturoci]

Great!