Ribbon Plots in JavaScript

How to make a D3.js-based ribbon plot in JavaScript.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Basic Ribbon Plot

d3.json('https://raw.githubusercontent.com/plotly/datasets/master/3d-ribbon.json', function(figure){

  var trace1 = {
    x:figure.data[0].x, y:figure.data[0].y, z:figure.data[0].z,
    name: '',
    colorscale: figure.data[0].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace2 = {
    x:figure.data[1].x, y:figure.data[1].y, z:figure.data[1].z,
    name: '',
    colorscale: figure.data[1].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace3 = {
    x:figure.data[2].x, y:figure.data[2].y, z:figure.data[2].z,
    colorscale: figure.data[2].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace4 = {
    x:figure.data[3].x, y:figure.data[3].y, z:figure.data[3].z,
    colorscale: figure.data[3].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace5 = {
    x:figure.data[4].x, y:figure.data[4].y, z:figure.data[4].z,
    colorscale: figure.data[4].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace6 = {
    x:figure.data[5].x, y:figure.data[5].y, z:figure.data[5].z,
    colorscale: figure.data[5].colorscale,
    type: 'surface',
    showscale: false
  }
  var trace7 = {
    x:figure.data[6].x, y:figure.data[6].y, z:figure.data[6].z,
    name: '',
    colorscale: figure.data[6].colorscale,
    type: 'surface',
    showscale: false
  }

  var data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7];

  var layout = {
    title: {
      text: 'Ribbon Plot'
    },
    showlegend: false,
    autosize: true,
    width: 600,
    height: 600,
    scene: {
      xaxis: {title: {text: 'Sample #'}},
      yaxis: {title: {text: 'Wavelength'}},
      zaxis: {title: {text: 'OD'}}
    }
  };
  Plotly.newPlot('myDiv', data, layout);
});
 Click to copy