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/