Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Sankey diagram - Improving already working graph

Hi there! This is my first post, so I will start by saying thanks to all the people behind the plotly project. What you guys are doing is very nice.

I am writing this message because I have been able to make a Sankey diagram work but it has many categories and it is a bit confusing to look at. I attach a picture of the first 3 of 16 categories.

What I basically have is 16 elements on one side and 16 elements on another side and the links that distribute amongst them. I was wondering about two concrete things and a general question:

  1. Is it possible to only highlight one of the left elements and soften or fade the others until you click them so one of them stands out more than the rest?

  2. The left and right side have the same concepts, is it possible to give a color to the pairs from left and right?

  3. General question: when you have these big Sankey diagrams, is there any suggestion on how to make them more readable? maybe dividing them into subplots or adding a filter, etc.?

This is not an urgent matter, but I through it out there in case someone has been in my position :slight_smile: Thanks!

Hi @JourneyDS welcome to the forum!

You can change the color of both links and nodes as described in this example.

You can also change the opacity of non-hovered links like in the code below so that they are hardly visible, therefore you will mostly see the links originating from a node (when hovering on a node) or a specific link (when hovering on it)

import plotly.graph_objects as go

fig = go.Figure(data=[go.Sankey(
    node = dict(
      pad = 15,
      thickness = 20,
      line = dict(color = "black", width = 0.5),
      label = ["A1", "A2", "B1", "B2", "C1", "C2"],
      color = "blue"
    ),
    link = dict(
      source = [0, 1, 0, 2, 3, 3], # indices correspond to labels, eg A1, A2, A2, B1, ...
      target = [2, 3, 3, 4, 4, 5],
      value = [8, 4, 2, 8, 4, 2],
     color='rgba(0, 255, 255, 0.05)'
  ),
)])

fig.show()

Also it’s not exactly the same chart but have you checked out parallel categories ? It could be an interesting way of visualizing your data and since lines are straight maybe the visualization would look less busy.

1 Like

Merci beaucoup Emmanuelle,

I have been able to do the first two points, the second one has been particularly useful since it hides a bit more the lines that are not currently been looked at.

I have also tried the parallel lines plot but it is a bit less “elegant” but thanks for the suggestion!

I think my problem is I have too many categories and that for each category one value is too large. I tried the radar chart for one type of observation but it is still not very intuitive due to the outlier.

Nonetheless, as I say, both of the suggestions you gave me in your reply are useful already :slight_smile:

So thank you!

Bonne journée.