VIS: Sankey chart to represent flow visualization

[bluemonk3y]

Using a Sankey chart to show dataflow visualizations would be simple and useful. It plays nicely with visualization of flows using something simple correlationIds. It would be simpler to hook up than distributed tracing.

Datamodel
For example, imagine a dataflow of payments - incoming, debit, credit, outgoing. It could show a model where the incoming are broken down by the amount.
{
// stage 1
incoming-$100+, debit-10ms, 1000
incoming-$50-100, debit-5ms, 20
incoming-$0-50, debit-1ms, 20
incoming-$0-50, debit-5ms, 20
incoming-$0-50, debit-10ms, 20

// stage 2
debit-1ms, credit-10ms, 1000
debit-1ms, credit-5ms, 100
debit-10ms, credit-10ms, 100

// stage 3
credit-10ms, end-to-end-10ms-$100, 1000
credit-1ms, end-to-end-10ms-$50, 1000
credit-5ms, end-to-end-5ms-$10, 50

Fields:

• correlation field, (uid, txn-id etc)
• state/stage field (incoming, debit, credit, complete)
• Y-Value (numeric - i.e. payment) - this field augments the previous when it is optionally available
• Latency

Query:
field.extract('.(txnId:)', correlation)
field.extract('.(dddd-dd-dd)', timestamp)
field.extract('.*status: (\w+), stage)
field.extract('.*amount: (\w+), y-value)

Analytic:
analytic.dataflow(correlation, timestamp, stage, y-value)

Raw data:
2020-mar-15 1200:32.31 txn: 123 stage: inbound amount: 1000 some other stuff
2020-mar-15 1200:33.31 txn: 423 stage: inbound amount: 1000 some other stuff
2020-mar-15 1200:33.31 txn: 523 stage: inbound amount: 1000 some other stuff

2020-mar-15 1200:35.31 txn: 123 stage: debit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 423 stage: debit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 523 stage: debit amount: 1000 some other stuff

2020-mar-15 1200:35.31 txn: 123 stage: credit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 423 stage: credit amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 523 stage: credit amount: 1000 some other stuff

2020-mar-15 1200:35.31 txn: 123 stage: complete amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 423 stage: complete amount: 1000 some other stuff
2020-mar-15 1200:35.31 txn: 523 stage: complete amount: 1000 some other stuff

Highcharts jsfiddle:
https://jsfiddle.net/5anhsxku/

Google Charts fiddle:
http://jsfiddle.net/d8znLj4f/

Splunk developer view:
https://docs.splunk.com/Documentation/SankeyDiagram/1.3.0/SankeyDiagramViz/SankeyIntro

https://developers.google.com/chart/interactive/docs/gallery/sankey

[bluemonk3y]

AMCharts example:
https://codepen.io/team/amcharts/pen/NMvZGV
`
var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);

// Set data
chart.data = [
{ "from":'Payment>$1000', "to": 'Debit-10ms', "value": 100},
{ "from":'Payment>$1000', "to": 'Debit-5ms', "value": 55},
{ "from":'Payment>$1000', "to": 'Debit-1ms', "value": 15},

{ "from":'Payment>$500', "to": 'Debit-10ms', "value": 70},

{ "from":'Payment>$500', "to": 'Debit-5ms', "value": 20},
{ "from":'Payment>$500', "to": 'Debit-1ms', "value": 10},

{ "from":'Payment>$100', "to": 'Debit-10ms', "value": 60},
{ "from":'Payment>$100', "to": 'Debit-5ms', "value": 31},
{ "from":'Payment>$100', "to": 'Debit-1ms', "value": 11},

 { "from":'Debit-10ms', "to": 'Credit-50ms', "value": 41},
 { "from":'Debit-5ms', "to": 'Credit-25ms', "value": 11},
 { "from":'Debit-1ms', "to": 'Credit-10ms', "value": 31},

 { "from":'Credit-50ms', "to": 'Payment>$1000-100ms', "value": 31},
   { "from":'Credit-25ms', "to": 'Payment>$1000-25ms', "value": 21},
   { "from":'Credit-10ms', "to": 'Payment>$1000-10ms', "value": 11},

   { "from":'Credit-50ms', "to": 'Payment>$500-50ms', "value": 51},
   { "from":'Credit-25ms', "to": 'Payment>$500-25ms', "value": 11},
   { "from":'Credit-10ms', "to": 'Payment>$500-10ms', "value": 3},

   { "from":'Credit-50ms', "to": 'Payment>$100-50ms', "value": 41},
   { "from":'Credit-25ms', "to": 'Payment>$100-25ms', "value": 11},
   { "from":'Credit-10ms', "to": 'Payment>$100-10ms', "value": 11}

];

// Configure data fields
chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";

// Configure nodes
var nodeTemplate = chart.nodes.template;
nodeTemplate.width = 30;
nodeTemplate.stroke = am4core.color("#fff");
nodeTemplate.strokeWidth = 2;
nodeTemplate.nameLabel.locationX = 0.2;
nodeTemplate.nameLabel.label.fill = am4core.color("#fff");
nodeTemplate.nameLabel.label.fontWeight = "bold";

// Configure links
var linkTemplate = chart.links.template;
linkTemplate.tension = 1;
linkTemplate.controlPointDistance = 0.1;
linkTemplate.fill = am4core.color("#A8C686");`

[bluemonk3y]

https://www.anychart.com/buy/ cheap-dev license for startup $49
amcharts (free with watermark) https://www.amcharts.com/timeline-chart/