powerbidaxvisualizationvegadeneb

Adjusting Link Overlap and Rectangle Spacing in Vega Sankey Chart

I am trying to create a Sankey Chart using Vega. I am using the template provided by Sankey Chart - PBI-David in PowerBI.
I am using my own data in the form of a DAX table and then importing it into the fields of Deneb Visual.
However, based on my data I am getting the following Sankey Chart.

enter image description here

The chart elements are perfect for my requirements. But I would like to bring the blocks K and L to the same horizontal orientation as the G block so that the link bands dont look weird and distorted. (Similar to the manner in which B -> D,E,F are arranged).

I saw that there is a parameter called gap in table and the chart and I also tried to modify values to see how the gap behaves when values both positive and negative are applied. But the behavior of the chart elements seem very random with any entry of the gap parameter.

Does anyone know what does the gap parameter specify exactly? and How can I make sure that the bands don't overlap with changing values?

I am also attaching a sample PBIX file which the same data for easier understanding of my problem:
https://drive.google.com/file/d/1EZ-dGMHT-zqzDVOdujpm4VaeIbiyaVI4/view?usp=sharing

Solution

  • Try this:

    enter image description here

    Sankey Diagram Raw Plan = 
DATATABLE(
    "category", STRING, "stack", INTEGER, "sort", INTEGER, "labels", STRING, "gap", INTEGER, "source", STRING, "destination", STRING, "value", DOUBLE,
    {{,,,,,"A", "B", 59.52},
    {,,,,,"A", "C", 0.68},
    {,,,,,"B", "D",41.95},
    {,,,,,"B", "E", 12.97},
    {,,,,,"B", "F", 4.60},
    {,,,,,"D", "G", 41.62},
    {,,,,,"G", "K", 40.87},
    {,,,,,"G", "L", 0.75},
    {,,,,,"D", "H", 0.33},
    {,,,,,"E", "I", 11.16},
    {,,,,,"E", "J", 1.81},
    {"A", 1, 1,"left", , , , },
    {"B", 2, 1,"left", , , , },
    {"C", 2, 2,"left", , , , },
    {"D", 3, 1,"left", , , ,  },
    {"E", 3, 2,"left", , , , },
    {"F", 3, 3,"left", , , , },
    {"J", 4, 4,, , , , },
    {"G", 4, 1,, , , , },
    {"H", 4, 2,, , , , },
    {"I", 4, 3,, , , , },
    {"K", 5, 1,, , , , },
    {"L", 5, 2,, 60, , , }
    }
)

    You're using base center (everything is centred vertically). The standard gap (you're using 14 pixels) is the default gap used. If you want an additional gap, you can pass it in the data as I have done and so the gap between K and L is now 14 + 60.