subplots

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<p>
    Here's a simple Plotly plot - 
    <a href="http://bit.ly/1Or9igj">plotly.js documentation</a>
</p>

<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
-->
<div id="tester" style="width:600px;height:250px;"></div>

JavaScript

TESTER = document.getElementById('tester');

var trace1 = {
  x: [1, 2, 3],
  y: [40, 55, 63],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [50, 60, 70],
  mode: 'markers',
  xaxis: 'x2',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3],
  y: [42, 56, 63],
  mode: 'markers',
  yaxis: 'y2',
  type: 'scatter'
};

var trace4 = {
  x: [20, 30, 40],
  y: [50, 60, 70],
  mode: 'markers',
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  xaxis: {
  	domain: [0, 0.45]
  },
  yaxis: {
  	anchor: 'x', 
    domain: [0.0, 0.45]
  },
  yaxis2: {
  	anchor: 'x', 
    domain: [0.55, 1]
  },
  xaxis2: {
  	domain: [0.55, 1]
  }
};

Plotly.plot(TESTER, data, layout);