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. Try Plotly Studio 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});

});
</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.csv('https://raw.githubusercontent.com/plotly/datasets/master/volcano_db.csv', function(err, rows){\n function unpack(rows, key) {\n return rows.map(function(row) { return row[key]; });\n }\n\nvar trace1 = {\n x: unpack(rows, 'Status'),\n y: unpack(rows, 'Type'),\n z: unpack(rows, 'Elev'),\n marker: {\n size: 2,\n color: unpack(rows, 'Elev'),\n colorscale: 'Reds',\n line: {color: 'transparent'}\n },\n mode: 'markers',\n type: 'scatter3d',\n text: unpack(rows, 'Country'),\n hoverinfo: 'x+y+z+text',\n showlegend: false\n};\n\nvar x = unpack(rows, 'Elev');\n\nvar trace2 = {\n x: unpack(rows, 'Elev'),\n type: 'histogram',\n hoverinfo: 'x+y',\n showlegend: false,\n xaxis: 'x2',\n yaxis: 'y2',\n\t marker: {\n\t\t color: 'red'\n\t}};\n\nvar trace3 = {\n geo: 'geo3',\n type:'scattergeo',\n locationmode: 'world',\n lon: unpack(rows, 'Longitude'),\n lat: unpack(rows, 'Latitude'),\n hoverinfo: 'text',\n text: unpack(rows, 'Elev'),\n mode: 'markers',\n showlegend: false,\n marker: {\n size: 4,\n color: unpack(rows, 'Elev'),\n colorscale: 'Reds',\n opacity: 0.8,\n symbol: 'circle',\n line: {\n width: 1\n }\n }\n};\n\nvar data = [trace1, trace2, trace3];\n\nvar layout = {\n paper_bgcolor: 'black',\n plot_bgcolor: 'black',\n title: {text: 'Volcano Database: Elevation'},\n font: {color: 'white'},\n colorbar: true,\n annotations: [{\n x: 0,\n y: 0,\n xref: 'paper',\n yref: 'paper',\n text: 'Source: NOAA',\n showarrow: false\n }],\n geo3: {\n domain: {\n x: [0, 0.45],\n y: [0.02, 0.98]\n\t\t },\n scope: 'world',\n projection: {\n type: 'orthographic'\n },\n showland: true,\n showocean: true,\n showlakes: true,\n landcolor: 'rgb(250,250,250)',\n lakecolor: 'rgb(127,205,255)',\n oceancolor: 'rgb(6,66,115)',\n subunitcolor: 'rgb(217,217,217)',\n countrycolor: 'rgb(217,217,217)',\n countrywidth: 0.5,\n subunitwidth: 0.5,\n bgcolor: 'black'\n },\n\tscene: {domain: {\n x: [0.55, 1],\n y: [0, 0.6]\n },\n xaxis: {\n title: {\n text: 'Status'\n },\n showticklabels: false,\n showgrid: true,\n gridcolor: 'white'\n },\n yaxis: {\n title: {\n text: 'Type'\n },\n showticklabels: false,\n showgrid: true,\n gridcolor: 'white'\n },\n zaxis: {\n title: {\n text: 'Elev'\n },\n showgrid: true,\n gridcolor: 'white'\n }\n\t\t\t },\n\tyaxis2: {\n\t\tanchor: 'x2',\n domain: [0.7, 1],\n showgrid: false\n\t},\n\txaxis2: {\n tickangle: 45,\n anchor: 'y2',\n\t ticksuffix: 'm',\n domain: [0.6, 1]},\n};\n\nPlotly.newPlot(\"myDiv\", data, layout, {showLink: false});\n\n});\n"}">