Graph Canvas

HTML Canvas is perfect for Scatter Plots

HTML Canvas is perfect for Line Graphs

HTML Canvas is perfect for combining Scatter and Lines

Scatter Plots

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();
}

Line Graphs

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();

Combined

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();

Having a Plotter Object is nice when studying Artificial Intelligence:

• Makes AI more Fun
• Makes AI more Visual
• Makes AI more Understandable

Create a Plotter Object

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;
.
.

Add a Method for Plotting a Line

Example

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();
}

Add a Method for Transforming XY Values

Example

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

Add a Method for Plotting Points

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();
  }
}

Plot Some Random Points

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");

Put the Code in a Library

Source Code

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

Use it in Your HTML Pages

Now you can add your plotter object to your HTML pages:

Example

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