JSFiddle - React, Tailwind, and code Playground

by Gleb Kemarsky

HTML

<head>
  <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="myDiv"></div>
</body>

JavaScript

var trace1 = {
  type: 'sankey',
  node: {
    pad: 15,
    thickness: 20,
    line: {
      color: "black", 
      width: 0.5
    },
    label: [
      'Black', 'Brown', 'Red',  // Quiz 1
      'Brown', 'Blue',          // Quiz 2
      'Female', 'Male'          // Quiz 3
    ],
    color: "blue",
  },
  link: {     
    //        Quiz 1 -> Quiz 2                  Quiz 2 -> Quiz 3 
    //        Quiz 1: Black Brown Red  Brown    Quiz 2: Brown  Brown Blue
    source: [         0,    1,    1,   2,               3,     3,    4   ],
    //        Quiz 2: Brown Brown Blue Blue     Quiz 3: Female Male  Male    
    target: [         3,    3,    4,   4,               5,     6,    6   ],
    value:  [         3,    2,    2,   1,               4,     1,    3   ],
  },
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);