Traceable Sankey Diagram

Traceable Sankey Diagram is a specific version of the regular <a href="https://www.amcharts.com/demos/sankey-diagram/">Sankey Diagram</a> enabling viewers to see the whole path of some data by hovering over the chart.

by andypotanin

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.SankeyDiagram);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
  { from: "A", to: "E", value: 1, id:"A0-0" },
  { from: "A", to: "F", value: 1, id:"A1-0" },
  { from: "A", to: "G", value: 1, id:"A2-0" },
  
  { from: "B", to: "E", value: 1, id:"B0-0" },
  { from: "B", to: "F", value: 1, id:"B1-0" },
  { from: "B", to: "G", value: 1, id:"B2-0" },  
  
  { from: "C", to: "F", value: 1, id:"C0-0" },
  { from: "C", to: "G", value: 1, id:"C1-0" },
  { from: "C", to: "H", value: 1, id:"C2-0" },    

  { from: "D", to: "E", value: 1, id:"D0-0" },
  { from: "D", to: "F", value: 1, id:"D1-0" },
  { from: "D", to: "G", value: 1, id:"D2-0" },      
  { from: "D", to: "H", value: 1, id:"D3-0" },        

  { from: "E", to: "I", value: 1, id:"A0-1" },
  { from: "E", to: "I", value: 1, id:"B0-1" },      
  { from: "E", to: "L", value: 1, id:"D0-1" },          

  { from: "F", to: "I", value: 1, id:"A1-1" },
  { from: "F", to: "I", value: 1, id:"C0-1" },      
  { from: "F", to: "I", value: 1, id:"D1-1" },          
  { from: "F", to: "M", value: 1, id:"B1-1" },          

  { from: "G", to: "I", value: 1, id:"A2-1" },
  { from: "G", to: "I", value: 1, id:"B2-1" },      
  { from: "G", to: "J", value: 1, id:"C1-1" },          
  { from: "G", to: "N", value: 1, id:"D2-1" },  

  { from: "H", to: "K", value: 1, id:"C2-1" },          
  { from: "H", to: "N", value: 1, id:"D3-1" },    

  { from: "I", to: "O", value: 1, id:"A0-2" },
  { from: "I", to: "O", value: 1, id:"B2-2" },      
  { from: "I", to: "Q", value: 1, id:"A1-2" },          
  { from:...