graphing-library-docs/_posts/plotly_js/3d/ribbon-plots/2015-08-12-ribbon-plot-example.html at 11245696c5f41722b7daa4c3ae5a06b2a5f1ce96 · plotly/graphing-library-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
---
name: Basic Ribbon Plot
language: plotly_js
suite: ribbon-plot
order: 0
sitemap: false
arrangement: horizontal
---
d3.json('https://raw.githubusercontent.com/plotly/datasets/master/3d-ribbon.json').then(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: 'Ribbon Plot',
    showlegend: false,
    autosize: true,
    width: 600,
    height: 600,
    scene: {
      xaxis: {title: 'Sample #'},
      yaxis: {title: 'Wavelength'},
      zaxis: {title: 'OD'}
    }
  };
  Plotly.newPlot('myDiv', data, layout);
});