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

<div id="myDiv" style="width: 100%;height:500px;"></div>

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}
  
var button_layer_1_height = 1.12
var button_layer_2_height = 1.0
var annotation_offset = 0.04

var z_data=[ ]
for(i=0;i<24;i++)
{
  z_data.push(unpack(rows,i));
}

var data = [{
        z: z_data, 
        type:'surface',
        colorscale:'Viridis'
}]

var updatemenus=[
    {
        buttons: [   
            {
                args: ['type', 'surface'],
                label: '3D Surface',
                method: 'restyle'
            },
            {
                args: ['type', 'heatmap'],
                label:'Heatmap',
                method:'restyle'
            },
            {
                args: ['type', 'contour'],
                label:'Contour',
                method:'restyle'
            }  
        ],
        direction: 'left',
        pad: {'r': 10, 't': 10},
        showactive: true,
        type: 'buttons',
        x: 0.15,
        xanchor: 'left',
        y: button_layer_2_height,
        yanchor: 'top',
        font: {color: '#5072a8'}
    },
    {
        buttons: [   
            {
                args: ['reversescale', true],
                label: 'Reverse',
                method: 'restyle'
            },
            {
                args: ['reversescale', false],
                label:'Undo Reverse',
                method:'restyle'
            }
        ],
        direction: 'down',
        pad: {'r': 10, 't': 10},
        showactive: true,
        type: 'dropdown',
        x: 0.56,
        xanchor: 'left',
        y: button_layer_2_height,
        yanchor: 'top',
        active: 1,
        font: {color: '#5072a8'}
    },
    {
        buttons: [   
            {
                args: [{'contours.showlines':false, 'type':'contour'}],
                label: 'Hide lines',
                method: 'restyle'
            },
            {
                args: [{'contours.showlines':true, 'type':'contour'}],
                label:'Show lines',
                method:'restyle'
            }
        ],
        direction: 'down',
        pad: {'r': 10, 't': 10},
        showactive: true,
        type: 'dropdown',
        x: 0.78,
        xanchor: 'left',
        y: button_layer_2_height,
        yanchor: 'top',
        font: {color: '#5072a8'}
    },
    {
        buttons: [   
            {
                args: ['colorscale', 'Viridis'],
                label: 'Viridis',
                method: 'restyle'
            },
            {
                args: ['colorscale', 'Electric'],
                label:'Electric',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Earth'],
                label:'Earth',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Hot'],
                label:'Hot',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Jet'],
                label:'Jet',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Portland'],
                label:'Portland',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Rainbow'],
                label:'Rainbow',
                method:'restyle'
            },
            {
                args: ['colorscale', 'Blackbody'],
                label:'Blackbody',
                method:'restyle'
            },
            
            {
                args: ['colorscale', 'Cividis'],
                label:'Cividis',
                method:'restyle'
            }  
        ],
        direction: 'left',
        pad: {'r': 10, 't': 10},
        showactive: true,
        type: 'buttons',
        x: 0.15,
        xanchor: 'left',
        y: button_layer_1_height,
        yanchor: 'top',
        active: 1,
        bgcolor: '#aaaaaa',
        bordercolor: '#FFFFFF'
    },
]

var annotations = [
    {
      text: 'Trace type:', 
      x: 0, 
      y: button_layer_2_height - annotation_offset, 
      yref: 'paper', 
      align: 'left', 
      showarrow: false
    },
    {
      text: 'Colorscale:', 
      x: 0, 
      y: button_layer_1_height - annotation_offset, 
      yref: 'paper', 
      align: 'left', 
      showarrow: false
    },
]

var layout = {
    paper_bgcolor: 'black',
    margin: {t: 0, b: 0, l: 0, r: 0},
    updatemenus: updatemenus,
    annotations: annotations,
    scene: {
        bgcolor: 'black',
        aspectratio: {x: 1, y: 1, z: 0.7},
        aspectmode: 'manual'
  }
}


Plotly.plot("myDiv", data, layout, {showSendToCloud: true});

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.