Plotly Contour/Histogram

by brian428

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
-->
<div style="width:100%; height:100%">
<div id="plotly-div" style="width:100%; height:100%"></div>
</div>

JavaScript

// Set to true to see issue with log axis.
var useLogYAxis = true;

var randInRange = function( min, max ) {
  return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

var npoints = 5000;

var xVals = [];
for (var i = 0, l = npoints; i < l; i++) {
    xVals.push( randInRange( 20, 50 ) );
};

var yVals = [];
for (var i = 0, l = npoints; i < l; i++) {
    yVals.push( randInRange( 10, 20000 ) );
};
yVals.sort();

console.log( xVals, yVals );

var trace2 = {
  x: xVals, 
  y: yVals, 
  name: 'density',
  ncontours: 20,
  colorscale: 'Hot',
  reversescale: true,
  showscale: false,
  type: 'histogram2dcontour'
};
var trace3 = {
  x: xVals, 
  name: 'x density',
  marker: {color: 'rgb(102,0,0)'},
  yaxis: 'y2',
  type: 'histogram'
};
var trace4 = {
  y: yVals, 
  name: 'y density',
  marker: {color: 'rgb(102,0,0)'},
  xaxis: 'x2',
  type: 'histogram'
};
var data = [trace2, trace3, trace4];
var layout = {
  autosize: 'initial', 
  bargap: 0, 
  height: null, 
  width: null, 
  hovermode: "closest", 
  //margin: {t: 50}, 
  //paper_bgcolor: "rgb(249, 249, 249)", 
  //plot_bgcolor: "rgb(249, 249, 249)", 
  showlegend: false, 
  title: "Lat vs Long Counter / Histogram", 
  xaxis: {
    autorange: true, 
    domain: [0, 0.85], 
    //range: [-1.75341094962, 2.63743133809], 
    showgrid: false, 
    title: "Latitude", 
    type: "linear", 
    zeroline: false
  }, 
  xaxis2: {
    autorange: true, 
    domain: [0.85, 1], 
    //range: [0, 238.947368421], 
    showgrid: false, 
    title: "", 
    type: "log", 
    zeroline: false
  }, 
  yaxis: {
    autorange: true, 
    domain: [0, 0.85], 
    //range: [-1.25796447568, 3.58095326956], 
    showgrid: false, 
    title: "Longitude", 
    type: useLogYAxis ? "log" : "linear", 
    zeroline: false
  }, 
  yaxis2: {
    autorange: true, 
    domain: [0.9, 1], 
    //range: [0, 170.526315789], 
    showgrid: false, 
    title: "yaxis2", 
    type: "linear", 
    zeroline: false
  }
};
Plotly.plot('plotly-div', data,...