Updating sankey plot data efficiently

plotly.js
1

I recently started to use Plotly.js to create a Sankey diagram in a webpage. The data is time dependent, so I query a DB and take mean values to represent them in the Sankey way. Selecting different time ranges, produces different diagrams.

The plot generation is not a problem, nevertheless, I can’t figure out easily how to update the data when pressing a button that represents a change in the time interval.

I am quite puzzled after searching for a while on google for clear documentation for such basic operations but, anyway, I couldn’t find anything useful (not even many examples around).

My javascript code is quite straightforward:

function create(record) {
    var source = record['source'];
    var target = record['target'];
    var value = record['value'];

    var data = [{
        'type': "sankey",
        'domain': {
            'x': [0, 1],
            'y': [0, 1]
        },
        'orientation': "h",
        'node': {
            'pad': 15,
            'thickness': 35,
            'line': {
                'color': "black",
                'width': 0.6
            },
            'label': ['A',
                      'B',
                      'C',
                      'D']
        },
        'link': {
            'source': source,
            'target': target,
            'value': value
        }
    }];

    var layout = {
        'margin': {
            't': 18
        }
    };

    Plotly.plot('mydiv', data, layout);
}

I just need to update the value field inside ‘link’, nothing else. My understanding is that I should use the function

Plotly.restyle(dic, data, ?)

to do the change efficiently (avoiding to re-plot everything) but I can’t figure out how and I got only failures! For example I tried this function (called after button click triggers a query to the DB and provides the record):

function updateCh(record) {
    var source = record['source'];
    var target = record['target'];
    var value = record['value'];

    var updateData = [{
        'link': {
            'value': value
        }
    }];

    Plotly.restyle(sankeyChart, updateData);
}

Does anyone have a clue on how to do that (and if I am missing some documentation page with this kind of stuff)?

2

The restyle syntax is different than the newPlot syntax.

See https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle

3

I am sorry, I already saw that page and my impression was that something like:

function updateCh(record) {
    var source = record['source'];
    var target = record['target'];
    var value = record['value'];

    var updateData = [{
        'link': {
            'value': value
        }
    }];

    Plotly.restyle(sankeyChart, updateData);
}

should work fine…but it doesn’t, it throws exceptions without any clear indication on what is the problem. Could you please provide me an example on how I should modify this code to update the Sankey diagram with new “values”?
Obviously

var value = record[‘value’]

contains the array with the new values for each element of source->target.

It would be very appreciated since I really don’t find anythin similar, thanks.

4

Have you tried:

Plotly.restyle(sankeyChart, 'link.value', [value])

?

5

Yeah, unfortunately is not working.

I ended-up using directly newPlot that doesn’t seem very efficient but nevertheless works fine!