Mixed Subplots in JavaScript

How to make Mixed Subplots in javascript.


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

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/volcano_db.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

var trace1 = {
  x: unpack(rows, 'Status'),
  y: unpack(rows, 'Type'),
  z: unpack(rows, 'Elev'),
  marker: {
    size: 2,
    color: unpack(rows, 'Elev'),
    colorscale: 'Reds',
    line: {color: 'transparent'}
  },
  mode: 'markers',
  type: 'scatter3d',
  text: unpack(rows, 'Country'),
  hoverinfo: 'x+y+z+text',
  showlegend: false
};

var x = unpack(rows, 'Elev');

var trace2 = {
    x: unpack(rows, 'Elev'),
    type: 'histogram',
    hoverinfo: 'x+y',
    showlegend: false,
    xaxis: 'x2',
    yaxis: 'y2',
	 marker: {
		 color: 'red'
	}};

var trace3 = {
    geo: 'geo3',
    type:'scattergeo',
    locationmode: 'world',
    lon: unpack(rows, 'Longitude'),
    lat: unpack(rows, 'Latitude'),
    hoverinfo:  'text',
    text:  unpack(rows, 'Elev'),
    mode: 'markers',
    showlegend: false,
    marker: {
      size: 4,
      color: unpack(rows, 'Elev'),
      colorscale: 'Reds',
      opacity: 0.8,
      symbol: 'circle',
      line: {
        width: 1
      }
    }
};

var data = [trace1, trace2, trace3];

var layout = {
      paper_bgcolor: 'black',
      plot_bgcolor: 'black',
      title: {text: 'Volcano Database: Elevation'},
      font: {color: 'white'},
      colorbar: true,
      annotations: [{
         x: 0,
         y: 0,
         xref: 'paper',
         yref: 'paper',
         text: 'Source: NOAA',
         showarrow: false
      }],
      geo3: {
        domain: {
      x: [0, 0.45],
      y: [0.02, 0.98]
		  },
        scope: 'world',
        projection: {
          type: 'orthographic'
        },
        showland: true,
        showocean: true,
        showlakes: true,
        landcolor: 'rgb(250,250,250)',
        lakecolor: 'rgb(127,205,255)',
        oceancolor: 'rgb(6,66,115)',
        subunitcolor: 'rgb(217,217,217)',
        countrycolor: 'rgb(217,217,217)',
        countrywidth: 0.5,
        subunitwidth: 0.5,
        bgcolor: 'black'
      },
	scene: {domain: {
      x: [0.55, 1],
      y: [0, 0.6]
    },
    xaxis: {
      title: {
          text: 'Status'
      },
      showticklabels: false,
      showgrid: true,
      gridcolor: 'white'
    },
    yaxis: {
        title: {
            text: 'Type'
        },
        showticklabels: false,
        showgrid: true,
        gridcolor: 'white'
    },
    zaxis: {
        title: {
            text: 'Elev'
        },
        showgrid: true,
        gridcolor: 'white'
    }
			 },
	yaxis2: {
		anchor: 'x2',
      domain: [0.7, 1],
      showgrid: false
	},
	xaxis2: {
      tickangle: 45,
      anchor: 'y2',
	  ticksuffix: 'm',
      domain: [0.6, 1]},
};

Plotly.newPlot("myDiv", data, layout, {showLink: false});

});