Specify the order of Plotly.js Sankey nodes - plotly.js

Question

Trying to use plotly.js so show student grade transitions between quizzes. In Plotly.js the node order (i.e. score bands such as 0-40) is changed between the quizzes. Is there a way to keep them in the same order between quizzes (eg 0.40 is always at the bottom).
Thanks
var trace1 = {
type: "sankey",
orientation: "h",
node: {
groups: ["Quiz 1", "Quiz 2", "Quiz 3", "Quiz 4"],
label: ["0-40", "41-60", "61-70", "71-80", "81-100","0-40", "41-60", "61-70", "71-80", "81-100","0-40", "41-60", "61-70", "71-80", "81-100"],
color: ["red", "orange", "blue", "green", "green","red", "orange", "blue", "green", "green","red", "orange", "blue", "green", "green"]
},
link: {
source: [0,1,2,3,4,5,6,7,8,9],
target: [6,6,7,8,8,11,11,12,14,14],
value: [3,1,1,2,1,3,1,1,2,4,5]
}
};
var data = [ trace1 ];
var layout = {
title: {
text:'SANKEY Title',
font: {
family: 'Courier New, monospace',
size: 24
},
},
annotations: [{
text: 'QUIZ 1',
x: 0.0,
y: 1.1,
showarrow: false,
font: {size: 12}
},
{
text: 'QUIZ 2',
x: 0.5,
y: 1.1,
showarrow: false,
font: {size: 12}
},
{
text: 'QUIZ 3',
x: 1.0,
y: 1.1,
showarrow: false,
font: {size: 12}
},
{
text: 'QUIZ 4',
x: 1.5,
y: 1.1,
showarrow: false,
font: {size: 12}
}],
width: 600,
};
Plotly.newPlot('myDiv', data, layout);
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

Answer 1

You can define the node position as documented here.
node: {
x: [0.1, 0.1, 0.1, 0.1, 0.1, 0.2, 0.2, 0.2, 0.2, 0.2, 0.3, 0.3, 0.3, 0.3, 0.3],
y: [0.1, 0.2, 0.3, 0.4, 0.5, 0.1, 0.2, 0.3, 0.4, 0.5, 0.1, 0.2, 0.3, 0.4, 0.5],
pad: 50, // 50 Pixels
}
Keep your y values consistent per grade-band and you should be all set. Here's a CodePen example.