Sankey diagram

In this example below you will see how to do a Sankey diagram with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by David O'Brien, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright David O'Brien ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sankey diagram</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  
  
  
  
</head>

<body>

  <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/iamdavidobrien/sankey-diagram-grEZkK */
google.charts.load('current', {
  'packages': ['sankey']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    //[ 'California', 'Exited site', 417 ],
    ['California', 'Why Scotland', 7],
    ['California', 'Investment services', 5],
    ['California', 'Contact us', 3],
    ['California', 'Invest', 2],
    ['California', 'Home', 2],
    ['California', 'Connect to tech skills', 5],
    ['California', 'San Jose office details', 2],
    ['California', 'Outplay', 1],
    ['California', 'Cloudwick', 1],
    ['California', 'About us', 1],
    ['California', 'Trade', 1],
    ['Why Scotland', 'Life', 3],
    ['Why Scotland', 'Back', 1],
    ['Why Scotland', 'Exited site', 1],
    ['Why Scotland', 'About us', 1],
    ['Why Scotland', 'Contact us', 1],
    ['Investment services', 'Contact us', 1],
    ['Investment services', 'Setting up in Scotland', 1],
    ['Investment services', 'Back', 1],
    ['Investment services', 'Exited site', 2],
    ['Contact us', 'Exited site', 2],
    ['Contact us', 'Contact us success', 1],
    ['Invest', 'Exited site', 2],
    ['Home', 'Exited site', 2],
    ['Home', 'Back', 1],
    ['Connect to tech skills', 'Contact us', 1],
    ['Connect to tech skills', 'Exited site', 4],
    ['San Jose office details', 'Exited site', 2],
    ['Outplay', 'Exited site', 1],
    ['Cloudwick', 'Back', 1],
    ['About us', 'Invest', 1],
    ['Trade', 'Invest', 1],
  ]);

  // Sets chart options.
  var colors = ['#BF3A27', '#3A817E', '#4A5658', '#610E6C',
    '#C75210', '#09759D', '#00427F', '#C75210',
    '#00427f', '#00cc00', '#2980b9', '#03634d',
    '#d65811', '#2f3e44', '#ecf0f1', '#f4f5f6'
  ];

  var options = {
    width: 900,
    height: 600,
    sankey: {
      node: {
        colors: colors
      },
      link: {
        colorMode: 'target',
        colors: colors
      },
      animation: {
        startup: true,
        duration: 2000,
        easing: 'linear'
      }
    }
  };

  // Instantiates and draws our chart, passing in some options.
  var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
  chart.draw(data, options);
}

Comments