JSFiddle - React, Tailwind, and code Playground

by djakacki

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic" style="width: 100%; height: 600px;"></div>

JavaScript

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([
          ['Katie', 'Grant_Writing', 1],
          ['Katie', 'Project_Managing', 1],
          ['Katie', 'Transcribing', 1],
          ['Katie', 'Transkribus', 1],
          ['Carrie', 'Transkribus', 1],
          ['Carrie', 'Data_Management', 1],
          ['Carrie', 'Personography', 1],
          ['Carrie', 'Editing', 1],
          ['Katie', 'Editing', 1],
          ['Diane', 'Data_Management', 1],
          ['Carly', 'Encoding', 1],
          ['Justin', 'Encoding', 1],
          ['Jess', 'Transcribing', 1],
          ['Jess', 'Editing', 1],
          ['Abby', 'Project_Managing', 1],
          ['Diane', 'Grant_Writing', 1],
          ['Diane', 'Encoding', 1],
          ['Leo', 'Data Modelling', 1],
          ['Leo', 'Data_Management', 1],
          ['Justin', 'Personography', 1],
          ['Justin', 'Editing', 1],
          ['Carly', 'Transcribing', 1]




        ]);

        // Sets chart options.
        var options = {
          width: 700,
        };

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