Sankey: colorscales per component, linked to concentration

[antoinerg]

A single flow can be made up of multiple components (this is already allowed - multiple connections between the same pair of nodes). Often those components exist across the whole diagram... so for example you're tracking oil and water as they move through some process. We need a way to 1) label links by component, 2) color all links of the same component, either with a constant per-component color or a per-component colorscale that maps to its concentration within the flow. This is particularly important for trace components: perhaps component benzene goes from grey at zero to red at 10ppm

[antoinerg]

Each link has a concentration at the input AND the output of a node as shown in branch sankey-link-concentration:

plotly.js/src/traces/sankey/render.js

Lines 71 to 87 in 2ffa563

	function computeLinkConcentrations() {
	graph.nodes.forEach(function(node) {
	var totalOutflow = sum(node.sourceLinks, function(n) {
	return n.value;
	});
	node.sourceLinks.forEach(function(link) {
	link.outConcentration = link.value / totalOutflow;
	});
	var totalInflow = sum(node.targetLinks, function(n) {
	return n.value;
	});
	node.targetLinks.forEach(function(link) {
	link.inConcentration = link.value / totalInflow;
	});
	});
	}
	computeLinkConcentrations();

Therefore, I think we should support gradients as fill color for links to visualize the concentration at both ends. The start and end colors of this gradient should be either

• The colors of the source and target nodes (to close [sankey] color links with gradients #3261)
• A single color for each link specified by the already existing attribute link.color
• The color of the link based on its label and a colorway
• A colorscale for each link that map to its concentration

[alexcjohnson]

Oh I was thinking of concentration not as a fraction of the total of flows into or out of a node, but as a fraction of total parallel flows - ie all links with the same source AND target nodes, or from a physical standpoint the concentration within a specific pipe. In that case it's constant along the link.

Also note that the value of a single link as a fraction of total inflow/outflow is not necessarily the concentration of that component coming in or out, as there may be multiple paths containing that component.

[antoinerg]

Oh I was thinking of concentration not as a fraction of the total of flows into or out of a node, but as a fraction of total parallel flows - ie all links with the same source AND target nodes, or from a physical standpoint the concentration within a specific pipe. In that case it's constant along the link.

Ok so we should also compute the fraction of the link versus the total flow connecting the same source and target nodes.

Also note that the value of a single link as a fraction of total inflow/outflow is not necessarily the concentration of that component coming in or out, as there may be multiple paths containing that component.

Nice observation. Basically, the component concentration will be given by summing the aforementionned ratios for links with the same label.

@alexcjohnson Should we support gradients nonetheless? How do you feel about feature request #3261

[etpinard]

Should we support gradients nonetheless?

I'd say gradients can wait.

[antoinerg]

Ok so in the following example I compute concentrations versus the total flow connecting the same source and target nodes. Links with the same label are colored the same (need a new attribute to specify this, see below). The opacity of a link is set by the concentration of its label within the flow (I understand it's not what was asked but here's how it looks anyway). As you can see, the two links going from process 1 to 4 both have 100% concentration/opacity because they have the same and only label in this flow:

I now need to add attributes to specify the color (or even better a colorscale) associated with each unique label. Would an attribute named link.colorscalelabel be reasonable?

link.colorscalelabel = {
  'elementA': 'Greens',
  'elementB': [['0', 'rgb(0, 0, 200)'], [1, 'rgb(200, 0, 0)']]
}

I will be able to submit a PR shortly after we figure out the name and structure of this new attribute. Any suggestions would be greatly appreciated!

cc @alexcjohnson @plotly/core-contributors

[alexcjohnson]

Let's make this a keyed array:

link.colorscales = [{
  label: 'elementA',
  colorscale: 'Greens',
  cmin: 0.01, cmax: 0.1 // concentration range (default is full range, 0..1)
}, {
  label: 'elementB',
  colorscale: [['0', 'rgb(0, 0, 200)'], [1, 'rgb(200, 0, 0)']]
}]

These names seem a little redundant, also it would be nice if somehow the attributes indicated that this references concentration... perhaps call the container link.concentrationscales?

[antoinerg]

PR not yet ready but good progress on this branch.

Codepen https://codepen.io/anon/pen/rPxrxR

[antoinerg]

Closed by PR #3501