Plotly ScatterGL Fixed Ratio

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>
<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="testChart" style="width:100vw; height:calc(100vh - 100px);"></div>

margin: { t: 40, b:50, l:75, r:30 }
width: **616px** is what we want. How to get there via calculation?

500 + 75 + 30 = 605 (width too short)
500 + 75 + 30 + (40+50)/2 = 650 (width too long)
500 + 75 + 30 + (40+50)/4 = 628 (still 12px too wide)

Want to end up adding 116 px to 500.
75+30 = 105, 40+50 = 90. Ratio = 1.16.   NO.

adjusted height = 500-40-50=410, 500/410 = 1.219. 500*1.219= 
-->
<div style="width: 100%; height: 80vh; border: 1px solid blue;">
  <div id="testChart" style="width:600px; height: 500px"></div>
</div>

<!--
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>
-->

JavaScript

// Some docs examples: https://plot.ly/javascript/line-and-scatter/
// More complex example: https://plot.ly/~chris/17389.embed

console.log( Plotly.PlotSchema.get() );

/* Speed results: (point count: first render, redraw, redraw 2):
500 points: 350ms, 38ms, 22ms
5000 points: 330ms, 66ms, 20ms
50000 points: 570ms, 75ms, 60ms
500000 points: 900ms, 400ms, 325ms
*/
var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var testChart = document.getElementById('testChart');
var xMin = 999999999;
var xMax = -999999999;
var yMin = 999999999;
var yMax = -999999999;

/*
	Symbol: "circle" | "circle-open" | "square" | "square-open" | "diamond" | "diamond-open" | "cross" | "x" 
*/
var data1 = { x: [], y: [], color: colorList[0], symbol: "x", size: 2 };
var data2 = { x: [], y: [], color: colorList[0], symbol: "cross", size: 4 };
var data3 = { x: [], y: [], color: colorList[0], symbol: "diamond", size: 4 };

var data4 = { x: [], y: [], color: colorList[1], symbol: "x", size: 2 };
var data5 = { x: [], y: [], color: colorList[2], symbol: "square", size: 4 };
var data6 = { x: [], y: [], color: colorList[3], symbol: "circle", size: 4 };

var createData = function( dataObj ) {
	var npoints = 1000;
  for (var i = 0, l = npoints; i < l; i++) {
  	  var x = i;
      var y = Math.random() * 5000;
      dataObj.y.push(y)
      dataObj.x.push(x);
      
      if( x < xMin ) xMin = x;
      if( x > xMax ) xMax = x;
      if( y < yMin ) yMin = y;
      if( y > yMax ) yMax = y;
  };
};

createData( data1 );
createData( data2 );
createData( data3 );
createData( data4 );
createData( data5 );
createData( data6 );

console.log( "xMin:", xMin );
console.log( "xMax:", xMax );
console.log( "yMin:", yMin );
console.log( "yMax:", yMax );
var xRange = xMax - xMin;
var yRange = yMax - yMin;
var yRatio = xRange...