Show total values in Sankey Diagram

Question

Is it possible to show a total in sankey diagram?

enter image description here

For example, the fiddle bellow show Fruits > Place. I would like to know how many fruits are liked to the places and in places how many fruits are linked. So something like:

Mango (3)
Apple (2)
Pineapple (1)

All three are linked to Place A, so Place A should be:

(7) Place A

(1 more is because of Grape)

http://jsfiddle.net/Khrys/5c2urqbx/

UPDATE: Looks like the v42 added weight by default.

score 6 · Accepted Answer · answered Apr 14 '15 at 14:31

Take a look at this jsfiddle

enter image description here

code

data1 = [
              ['Apple', 'Place A', 1],
              ['Apple', 'Place A', 1],
              ['Grape', 'Place A', 1],
              ['Grape', 'Place B', 2],
              ['Pineapple', 'Place A', 1],
              ['Strawberry', 'Place B', 4],
              ['Mango', 'Place A', 3]
];

var sourceTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[0];
    if (sourceTotals.hasOwnProperty(key)) {
        sourceTotals[key] += item[2];
    }
    else {
        sourceTotals[key] = item[2];
    }
}

console.log(sourceTotals);

var destTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[1];
    if (destTotals.hasOwnProperty(key)) {
        destTotals[key] += item[2];
    }
    else {
        destTotals[key] = item[2];
    }
}

console.log(destTotals);

data1.forEach( function(d) {
    d[0] = d[0] + " (" + sourceTotals[d[0]] + ")";
    d[1] = "(" + destTotals[d[1]] + ") " + d[1];
})

this changes the labeling of the matrix which changes also the way data are rendered. If you have multiple steps interconnected is not a good solution — Simone Imbrescia, Nov 04 '19 at 14:31

score 2 · Answer 2 · answered Mar 13 '15 at 14:27

2

If you use d3.js sankey, it will automatically sum the values and display it in the tooltip as per this example...http://bl.ocks.org/d3noob/c9b90689c1438f57d649

answered Mar 13 '15 at 14:27

Rob

1,226
3
23
41

Ronald Hove · Answer 3 · 2020-04-23T09:01:55.677

This fixes a problem with the accepted answer when you have multi levelled sankey diagram

Refer to original answer for calculating "sourceTotals" and "destTotals"

assume I have some arr "chart" with multi levelled sankey diagram data

this.chart = {
  type: 'Sankey',
  title: '',
  data: [
    [ 'USA', 'Mexico', 15 ],
    [ 'USA', 'Brazil', 16 ],
    [ 'South America', 'Mexico', 4 ],
    [ 'South America', 'Brazil', 4 ],
    [ 'Jamaica', 'Mexico', 18 ],
    [ 'South Africa', 'Brazil', 2 ],
    [ 'England', 'Brazil', 9 ],
    [ 'England', 'Mexico', 9 ],
    [ 'Mexico', 'Japan', 4 ],
    [ 'Mexico', 'North Pole', 4 ],
    [ 'China', 'Denmark', 5 ],
    [ 'China', 'Canada', 7 ],
    [ 'Mexico', 'China', 10 ],
  ],
}

First off delete destination keys that appear in sourceTotals Object

    for (const key in destTotals) {
      if (destTotals.hasOwnProperty(key)) {
        if (sourceTotals.hasOwnProperty(key)) {
          delete sourceTotals[key];
        }
      }
    }

  isKeyInObject(query, object) {
    for (const key in object) {
      if (object.hasOwnProperty(query)) {
        return true;
      }
    }
    return false;
  }

this.chart.data.forEach( (d) => {

  // Check if d[0] key is in source totals
  if (this.isKeyInObject(d[0], sourceTotals)) {
    d[0] = d[0] + ' (' + sourceTotals[d[0]] + ')';
  }

  // check of d[1] key exists in dest totals
  if (this.isKeyInObject(d[1], destTotals)) {
    d[1] = '(' + destTotals[d[1]] + ') ' + d[1];
  }

  // deal with destination keys in source index in original arr
  // check if key in position 0 of original chart data is available in destTotals object
  // change its name to the name key in destTotals
  if (this.isKeyInObject(d[0], destTotals)) {
    console.log('POS_ZERO_IN_DEST', d[0]);
    d[0] = '(' + destTotals[d[0]] + ') ' + d[0];
  }

});

Show total values in Sankey Diagram

3 Answers3

Linked