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. Try Plotly Studio now.

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);
});
</script>\n\t<script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fd3%2F3.5.17%2Fd3.min.js"></script>\n</head>\n\n<body>\n\t<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>\n</body>","js":"d3.json('https://raw.githubusercontent.com/plotly/datasets/master/3d-ribbon.json', function(figure){\n\n var trace1 = {\n x:figure.data[0].x, y:figure.data[0].y, z:figure.data[0].z,\n name: '',\n colorscale: figure.data[0].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace2 = {\n x:figure.data[1].x, y:figure.data[1].y, z:figure.data[1].z,\n name: '',\n colorscale: figure.data[1].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace3 = {\n x:figure.data[2].x, y:figure.data[2].y, z:figure.data[2].z,\n colorscale: figure.data[2].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace4 = {\n x:figure.data[3].x, y:figure.data[3].y, z:figure.data[3].z,\n colorscale: figure.data[3].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace5 = {\n x:figure.data[4].x, y:figure.data[4].y, z:figure.data[4].z,\n colorscale: figure.data[4].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace6 = {\n x:figure.data[5].x, y:figure.data[5].y, z:figure.data[5].z,\n colorscale: figure.data[5].colorscale,\n type: 'surface',\n showscale: false\n }\n var trace7 = {\n x:figure.data[6].x, y:figure.data[6].y, z:figure.data[6].z,\n name: '',\n colorscale: figure.data[6].colorscale,\n type: 'surface',\n showscale: false\n }\n\n var data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7];\n\n var layout = {\n title: {\n text: 'Ribbon Plot'\n },\n showlegend: false,\n autosize: true,\n width: 600,\n height: 600,\n scene: {\n xaxis: {title: {text: 'Sample #'}},\n yaxis: {title: {text: 'Wavelength'}},\n zaxis: {title: {text: 'OD'}}\n }\n };\n Plotly.newPlot('myDiv', data, layout);\n});\n"}">