HTML Canvas

Source Code

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

Source Code

const xMax = canvas.height = canvas.width;
const slope = 1.2;
const intercept = 70;
// Plot Line ctx.beginPath(); ctx.moveTo(0, intercept); ctx.lineTo(xMax, xMax * slope + intercept); ctx.stroke();

Source Code

let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i] * xMax/150;
  let y = yArray[i] * yMax/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}
// Plot Line ctx.beginPath(); ctx.moveTo(0, intercept); ctx.lineTo(xMax, xMax * slope + intercept); ctx.stroke();

Example

function XYPlotter(id) {
 this.canvas = document.getElementById(id);
 this.ctx = this.canvas.getContext("2d");
 this.xMin = 0;
 this.yMin = 0;
 this.xMax = this.canvas.width;
 this.yMax = this.canvas.height;
 .
 .

this.plotLine = function(x0, y0, x, y, color) {
 this.ctx.moveTo(x0, y0);
 this.ctx.lineTo(x, y);
 this.ctx.strokeStyle = color;
 this.ctx.stroke();
}

this.transformXY = function() {
 this.ctx.transform(1, 0, 0, -1, 0, this.canvas.height)
}

Example

this.plotPoints = function(n, xArr, yArr, color, radius = 3) {
 for (let i = 0; i < n; i++) {
 this.ctx.fillStyle = color;
 this.ctx.beginPath();
 this.ctx.ellipse(xArr[i], yArr[i], radius, radius, 0, 0, Math.PI * 2);
 this.ctx.fill();
 }
}

Example

// Create a Plotter
let myPlotter = new XYPlotter("myCanvas");
// Create random XY Points numPoints = 500;
const xPoints = Array(numPoints).fill(0).map(function(){return Math.random() * myPlotter.xMax});
const yPoints = Array(numPoints).fill(0).map(function(){return Math.random() * myPlotter.yMax});
// Plot the Points myPlotter.plotPoints(numPoints, xPoints, yPoints, "blue");

function XYPlotter(id) {
 this.canvas = document.getElementById(id);
 this.ctx = this.canvas.getContext("2d");
 this.xMin = 0;
 this.yMin = 0;
 this.xMax = this.canvas.width;
 this.yMax = this.canvas.height;
 // Plot Line Function
 this.plotLine = function(x0, y0, x, y, color) {
 this.ctx.moveTo(x0, y0);
 this.ctx.lineTo(x, y);
 this.ctx.strokeStyle = color;
 this.ctx.stroke();
 }
 // Transform XY Function
 this.transformXY = function() {
 this.ctx.transform(1, 0, 0, -1, 0, this.canvas.height)
 }
 // Pot Points Function
 this.plotPoints = function(n, xArr, yArr, color, radius = 3) {
 for (let i = 0; i < n; i++) {
 this.ctx.fillStyle = color;
 this.ctx.beginPath();
 this.ctx.ellipse(xArr[i], yArr[i], radius, radius, 0, 0, Math.PI * 2);
 this.ctx.fill();
 }
 }
} // End Plotter Object

<script src="myplotlib.js"></script>