danwild/plotty-test.html

## plotty-test.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <script src="https://unpkg.com/plotty@0.4.3/dist/plotty.js"></script>
</head>
<body>
  <h1>Plotty domain vs display ranges</h1>
  <p>Testing if plotty correctly scales color domain across a clipped display range?</p>
  <p><strong>Example:</strong> we have value range of [0, 500], lets say we are only interested in values between 0 and 100</p>

  <h2>Full data [0, 500]</h2>
  <canvas id="canvas1"></canvas>

  <h2>Clipped data [0, 100]</h2>
  <canvas id="canvas2"></canvas>

  <script>

    var width = 500;
    var height = 500;
    var exampledata = new Float32Array(height * width);

    var xoff = width / 2;
    var yoff = height / 2;

    for (y = 0; y <= height; y++) {
      for (x = 0; x <= width; x++) {
        exampledata[(y*width)+x] = y;
      }
    }

    const params = {
      canvas: document.getElementById("canvas1"),
      data: exampledata,
      width: width,
      height: height,
      colorScale: 'viridis',
      domain: [0, 500],
      applyDisplayRange: true,
      displayRange: [0, 500],
      clampLow: false,
      clampHigh: false,
      useWebGL: false
    }

    plot1 = new plotty.plot(params);
    plot1.render();

    params.canvas = document.getElementById("canvas2");
    params.domain = [0, 100],
    params.displayRange = [0, 100],
    plot2 = new plotty.plot(params);
    plot2.render();


  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<script src="https://unpkg.com/plotty@0.4.3/dist/plotty.js"></script>
	</head>
	<body>
	<h1>Plotty domain vs display ranges</h1>
	<p>Testing if plotty correctly scales color domain across a clipped display range?</p>
	<p><strong>Example:</strong> we have value range of [0, 500], lets say we are only interested in values between 0 and 100</p>

	<h2>Full data [0, 500]</h2>
	<canvas id="canvas1"></canvas>

	<h2>Clipped data [0, 100]</h2>
	<canvas id="canvas2"></canvas>

	<script>

	var width = 500;
	var height = 500;
	var exampledata = new Float32Array(height * width);

	var xoff = width / 2;
	var yoff = height / 2;

	for (y = 0; y <= height; y++) {
	for (x = 0; x <= width; x++) {
	exampledata[(y*width)+x] = y;
	}
	}

	const params = {
	canvas: document.getElementById("canvas1"),
	data: exampledata,
	width: width,
	height: height,
	colorScale: 'viridis',
	domain: [0, 500],
	applyDisplayRange: true,
	displayRange: [0, 500],
	clampLow: false,
	clampHigh: false,
	useWebGL: false
	}

	plot1 = new plotty.plot(params);
	plot1.render();

	params.canvas = document.getElementById("canvas2");
	params.domain = [0, 100],
	params.displayRange = [0, 100],
	plot2 = new plotty.plot(params);
	plot2.render();


	</script>
	</body>
	</html>